add button to hide chart

Marcusk19 · Mar 13, 2024 · 0bca7ff · 0bca7ff
1 parent 7eb752b
commit 0bca7ff
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 7 deletions.
diff --git a/web/cypress/e2e/usage-logs.cy.ts b/web/cypress/e2e/usage-logs.cy.ts
@@ -182,4 +182,15 @@ describe('Usage Logs Export', () => {
       .scrollIntoView()
       .should('be.visible');
   });
+
+  it('toggle chart', () => {
+    cy.visit('/organization/projectquay');
+    cy.contains('Logs').click();
+
+    cy.contains('Hide Chart').click();
+    cy.get('[class=pf-v5-c-chart]').should('not.be.visible');
+
+    cy.contains('Show Chart').click();
+    cy.get('[class=pf-v5-c-chart]').should('be.visible');
+  });
 });
diff --git a/web/src/routes/UsageLogs/UsageLogs.tsx b/web/src/routes/UsageLogs/UsageLogs.tsx
@@ -1,5 +1,6 @@
 import React, {useEffect} from 'react';
 import {
+  Button,
   DatePicker,
   Flex,
   FlexItem,
@@ -45,6 +46,8 @@ export default function UsageLogs(props: UsageLogsProps) {
     formatDate(maxDate.toISOString().split('T')[0]),
   );
 
+  const [chartHidden, setChartHidden] = React.useState<boolean>(false);
+
   useEffect(() => {
     queryClient.invalidateQueries({
       queryKey: [
@@ -72,6 +75,14 @@ export default function UsageLogs(props: UsageLogsProps) {
       <Flex direction={{default: 'column'}}>
         <FlexItem>
           <Split hasGutter className="usage-logs-header">
+            <SplitItem>
+              <Button
+                variant="secondary"
+                onClick={() => setChartHidden(!chartHidden)}
+              >
+                {chartHidden ? 'Show Chart' : 'Hide Chart'}
+              </Button>
+            </SplitItem>
             <SplitItem isFilled></SplitItem>
             <SplitItem>
               <DatePicker
@@ -103,13 +114,15 @@ export default function UsageLogs(props: UsageLogsProps) {
           </Split>
         </FlexItem>
         <FlexItem>
-          <UsageLogsGraph
-            starttime={logStartDate}
-            endtime={logEndDate}
-            repo={props.repository}
-            org={props.organization}
-            type={props.type}
-          />
+          {chartHidden ? null : (
+            <UsageLogsGraph
+              starttime={logStartDate}
+              endtime={logEndDate}
+              repo={props.repository}
+              org={props.organization}
+              type={props.type}
+            />
+          )}
         </FlexItem>
         <FlexItem>
           <UsageLogsTable