From 63e8386fbaf900d2de7ab3b37c920987643e4aaf Mon Sep 17 00:00:00 2001
From: jusrhee <justin@porter.run>
Date: Thu, 9 May 2024 16:11:20 -0400
Subject: [PATCH] basic usage display

---
 .../home/project-settings/ProjectSettings.tsx | 18 ++---
 .../main/home/project-settings/UsagePage.tsx  | 70 ++++++++++---------
 go.sum                                        |  2 -
 3 files changed, 45 insertions(+), 45 deletions(-)

diff --git a/dashboard/src/main/home/project-settings/ProjectSettings.tsx b/dashboard/src/main/home/project-settings/ProjectSettings.tsx
index 7b20c3391b..3c73f0fc93 100644
--- a/dashboard/src/main/home/project-settings/ProjectSettings.tsx
+++ b/dashboard/src/main/home/project-settings/ProjectSettings.tsx
@@ -96,15 +96,15 @@ function ProjectSettings(props: any) {
         });
       }
 
-      // if (
-      //   currentProject?.billing_enabled &&
-      //   currentProject?.metronome_enabled
-      // ) {
-      //   tabOpts.push({
-      //     value: "usage",
-      //     label: "Usage",
-      //   });
-      // }
+      if (
+        currentProject?.billing_enabled &&
+        currentProject?.metronome_enabled
+      ) {
+        tabOpts.push({
+          value: "usage",
+          label: "Usage",
+        });
+      }
 
       tabOpts.push({
         value: "additional-settings",
diff --git a/dashboard/src/main/home/project-settings/UsagePage.tsx b/dashboard/src/main/home/project-settings/UsagePage.tsx
index cd92ee0e59..c2d644598d 100644
--- a/dashboard/src/main/home/project-settings/UsagePage.tsx
+++ b/dashboard/src/main/home/project-settings/UsagePage.tsx
@@ -3,6 +3,7 @@ import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import styled from "styled-components";
 
+import Container from "components/porter/Container";
 import Fieldset from "components/porter/Fieldset";
 import Select from "components/porter/Select";
 import Spacer from "components/porter/Spacer";
@@ -128,42 +129,43 @@ function UsagePage(): JSX.Element {
         prefix={<>Billing period</>}
       />
       <Spacer y={1} />
-      {processedCosts &&
-      processedCosts.length > 0 &&
-      processedUsage &&
-      processedUsage.length > 0 ? (
+      {true ||
+      (processedCosts &&
+        processedCosts.length > 0 &&
+        processedUsage &&
+        processedUsage.length > 0) ? (
         <>
-          <BarWrapper>
-            <Total>Total cost: ${computeTotalCost(processedCosts)}</Total>
-            <Bars
-              fill="#C59262"
-              yKey="cost"
-              xKey="start_timestamp"
-              data={processedCosts || []}
-            />
-          </BarWrapper>
+          <Text color="helper">Total usage (selected period):</Text>
           <Spacer y={0.5} />
-          <Flex>
-            <BarWrapper>
-              <Bars
-                title="GiB Hours"
-                fill="#8784D2"
-                yKey="gib_hours"
-                xKey="starting_on"
-                data={processedUsage}
-              />
-            </BarWrapper>
-            <Spacer x={1} inline />
-            <BarWrapper>
-              <Bars
-                title="CPU Hours"
-                fill="#5886E0"
-                yKey="cpu_hours"
-                xKey="starting_on"
-                data={processedUsage}
-              />
-            </BarWrapper>
-          </Flex>
+          <Container row>
+            <Fieldset>
+              <Text size={16}>$ 26.78</Text>
+            </Fieldset>
+            <Spacer inline x={1} />
+            <Fieldset>
+              <Text size={16}>5.18 GiB hours</Text>
+            </Fieldset>
+            <Spacer inline x={1} />
+            <Fieldset>
+              <Text size={16}>1.78 CPU hours</Text>
+            </Fieldset>
+          </Container>
+          <Spacer y={1} />
+          <Text color="helper">Daily average (selected period):</Text>
+          <Spacer y={0.5} />
+          <Container row>
+            <Fieldset>
+              <Text size={16}>$ 3.62</Text>
+            </Fieldset>
+            <Spacer inline x={1} />
+            <Fieldset>
+              <Text size={16}>0.51 GiB hours</Text>
+            </Fieldset>
+            <Spacer inline x={1} />
+            <Fieldset>
+              <Text size={16}>0.18 CPU hours</Text>
+            </Fieldset>
+          </Container>
         </>
       ) : (
         <Fieldset>
diff --git a/go.sum b/go.sum
index c4aec4f37a..f5e65fd22f 100644
--- a/go.sum
+++ b/go.sum
@@ -1563,8 +1563,6 @@ github.com/pmezard/go-difflib v0.0.0-20151028094244-d8ed2627bdf0/go.mod h1:iKH77
 github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
 github.com/polyfloyd/go-errorlint v0.0.0-20210722154253-910bb7978349/go.mod h1:wi9BfjxjF/bwiZ701TzmfKu6UKC357IOAtNr0Td0Lvw=
-github.com/porter-dev/api-contracts v0.2.158 h1:928I9vELiqntau4Yp8cVuX7FcLgo95Lv2uBVYj84is8=
-github.com/porter-dev/api-contracts v0.2.158/go.mod h1:VV5BzXd02ZdbWIPLVP+PX3GKawJSGQnxorVT2sUZALU=
 github.com/porter-dev/api-contracts v0.2.159 h1:Ze4K0rm8p6sRMxaFW4Nb3dJuzz4NEMQ+UMXMtOKKRQ4=
 github.com/porter-dev/api-contracts v0.2.159/go.mod h1:VV5BzXd02ZdbWIPLVP+PX3GKawJSGQnxorVT2sUZALU=
 github.com/porter-dev/switchboard v0.0.3 h1:dBuYkiVLa5Ce7059d6qTe9a1C2XEORFEanhbtV92R+M=