From 348e710b3422fa4be20e367b200e1ce87441ff4b Mon Sep 17 00:00:00 2001
From: Sayan Mondal <sayan@chaosnative.com>
Date: Tue, 22 Jun 2021 13:09:14 +0530
Subject: [PATCH] type(bugfix): Fixed Sidebar icon darkening + Shifted Usage
 Table Loader to Center (#2923)

* Fixed Sidebar icon darkening + Shifted Usage Table Loader to Conter

Signed-off-by: Sayan Mondal <sayan@chaosnative.com>

* Added Pagination Query

Signed-off-by: Sayan Mondal <sayan@chaosnative.com>

* Renaming Usage + Updating Browse Workflow to Runs

Signed-off-by: Sayan Mondal <sayan@chaosnative.com>
---
 .../frontend/public/locales/en/translation.yaml      |  2 +-
 .../frontend/src/components/SideBar/index.tsx        |  8 ++++----
 .../frontend/src/components/SideBar/styles.ts        |  2 +-
 litmus-portal/frontend/src/containers/app/App.tsx    |  4 ++--
 litmus-portal/frontend/src/graphql/queries.ts        |  3 +++
 .../src/pages/{Usage => UsageStatistics}/index.tsx   |  8 ++++----
 .../src/pages/{Usage => UsageStatistics}/styles.ts   |  0
 litmus-portal/frontend/src/pages/Workflows/index.tsx |  7 ++-----
 .../{BrowseWorkflow => Runs}/HeaderSection.tsx       |  0
 .../{BrowseWorkflow => Runs}/TableData.tsx           |  0
 .../{BrowseWorkflow => Runs}/index.tsx               |  0
 .../{BrowseWorkflow => Runs}/styles.ts               |  0
 .../{Usage => UsageStatistics}/UsageStats/Cards.tsx  |  0
 .../{Usage => UsageStatistics}/UsageStats/index.tsx  |  0
 .../{Usage => UsageStatistics}/UsageStats/styles.ts  |  0
 .../{Usage => UsageStatistics}/UsageTable/index.tsx  | 12 ++++++++----
 .../{Usage => UsageStatistics}/UsageTable/styles.ts  |  0
 17 files changed, 25 insertions(+), 21 deletions(-)
 rename litmus-portal/frontend/src/pages/{Usage => UsageStatistics}/index.tsx (79%)
 rename litmus-portal/frontend/src/pages/{Usage => UsageStatistics}/styles.ts (100%)
 rename litmus-portal/frontend/src/views/ChaosWorkflows/{BrowseWorkflow => Runs}/HeaderSection.tsx (100%)
 rename litmus-portal/frontend/src/views/ChaosWorkflows/{BrowseWorkflow => Runs}/TableData.tsx (100%)
 rename litmus-portal/frontend/src/views/ChaosWorkflows/{BrowseWorkflow => Runs}/index.tsx (100%)
 rename litmus-portal/frontend/src/views/ChaosWorkflows/{BrowseWorkflow => Runs}/styles.ts (100%)
 rename litmus-portal/frontend/src/views/{Usage => UsageStatistics}/UsageStats/Cards.tsx (100%)
 rename litmus-portal/frontend/src/views/{Usage => UsageStatistics}/UsageStats/index.tsx (100%)
 rename litmus-portal/frontend/src/views/{Usage => UsageStatistics}/UsageStats/styles.ts (100%)
 rename litmus-portal/frontend/src/views/{Usage => UsageStatistics}/UsageTable/index.tsx (98%)
 rename litmus-portal/frontend/src/views/{Usage => UsageStatistics}/UsageTable/styles.ts (100%)

diff --git a/litmus-portal/frontend/public/locales/en/translation.yaml b/litmus-portal/frontend/public/locales/en/translation.yaml
index 36f26ffa5..34b84dd49 100644
--- a/litmus-portal/frontend/public/locales/en/translation.yaml
+++ b/litmus-portal/frontend/public/locales/en/translation.yaml
@@ -1159,7 +1159,7 @@ workflowAgent:
   noAgentSearch: No agents found
 
 workflows:
-  browseWorkflows: Browse workflows
+  runs: Runs
   schedules: Schedules
   templates: Templates
   analytics: Analytics
diff --git a/litmus-portal/frontend/src/components/SideBar/index.tsx b/litmus-portal/frontend/src/components/SideBar/index.tsx
index 8f3598e6e..584ed1a6e 100644
--- a/litmus-portal/frontend/src/components/SideBar/index.tsx
+++ b/litmus-portal/frontend/src/components/SideBar/index.tsx
@@ -158,15 +158,15 @@ const SideBar: React.FC = () => {
 
         {role === UserRole.admin && (
           <CustomisedListItem
-            key="usage"
+            key="usage-statistics"
             handleClick={() => {
               history.push({
-                pathname: `/usage`,
+                pathname: `/usage-statistics`,
                 search: `?projectID=${projectID}&projectRole=${projectRole}`,
               });
             }}
-            label="Usage"
-            selected={pathName === 'usage'}
+            label="Usage Statistics"
+            selected={pathName === 'usage-statistics'}
           >
             <UsageIcon />
           </CustomisedListItem>
diff --git a/litmus-portal/frontend/src/components/SideBar/styles.ts b/litmus-portal/frontend/src/components/SideBar/styles.ts
index 96dffbc4a..7dfcde226 100644
--- a/litmus-portal/frontend/src/components/SideBar/styles.ts
+++ b/litmus-portal/frontend/src/components/SideBar/styles.ts
@@ -22,7 +22,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     backgroundColor: `${theme.palette.cards.highlight} !important`,
     color: theme.palette.highlight,
     '& path': {
-      fill: theme.palette.highlight,
+      stroke: theme.palette.highlight,
     },
   },
   listIcon: {
diff --git a/litmus-portal/frontend/src/containers/app/App.tsx b/litmus-portal/frontend/src/containers/app/App.tsx
index 32614f505..63e9b53ba 100644
--- a/litmus-portal/frontend/src/containers/app/App.tsx
+++ b/litmus-portal/frontend/src/containers/app/App.tsx
@@ -25,7 +25,7 @@ const WorkflowDetails = lazy(() => import('../../pages/WorkflowDetails'));
 const HomePage = lazy(() => import('../../pages/HomePage'));
 const Community = lazy(() => import('../../pages/Community'));
 const Settings = lazy(() => import('../../pages/Settings'));
-const Usage = lazy(() => import('../../pages/Usage'));
+const UsageStatistics = lazy(() => import('../../pages/UsageStatistics'));
 const Targets = lazy(() => import('../../pages/Targets'));
 const EditSchedule = lazy(() => import('../../pages/EditSchedule'));
 const SetNewSchedule = lazy(() => import('../../pages/EditSchedule/Schedule'));
@@ -214,7 +214,7 @@ const Routes: React.FC = () => {
             />
           )}
           {role === UserRole.admin ? (
-            <Route path="/usage" component={Usage} />
+            <Route path="/usage-statistics" component={UsageStatistics} />
           ) : (
             <Redirect
               to={{
diff --git a/litmus-portal/frontend/src/graphql/queries.ts b/litmus-portal/frontend/src/graphql/queries.ts
index b74bf9dad..ae6211e47 100644
--- a/litmus-portal/frontend/src/graphql/queries.ts
+++ b/litmus-portal/frontend/src/graphql/queries.ts
@@ -621,6 +621,9 @@ export const GET_GLOBAL_STATS = gql`
 export const GLOBAL_PROJECT_DATA = gql`
   query getStats($query: UsageQuery!) {
     UsageQuery(query: $query) {
+      TotalCount {
+        Projects
+      }
       Projects {
         Name
         Workflows {
diff --git a/litmus-portal/frontend/src/pages/Usage/index.tsx b/litmus-portal/frontend/src/pages/UsageStatistics/index.tsx
similarity index 79%
rename from litmus-portal/frontend/src/pages/Usage/index.tsx
rename to litmus-portal/frontend/src/pages/UsageStatistics/index.tsx
index f5be84c8d..ccebe7576 100644
--- a/litmus-portal/frontend/src/pages/Usage/index.tsx
+++ b/litmus-portal/frontend/src/pages/UsageStatistics/index.tsx
@@ -2,11 +2,11 @@ import { Typography } from '@material-ui/core';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import Scaffold from '../../containers/layouts/Scaffold';
-import UsageStats from '../../views/Usage/UsageStats';
-import UsageTable from '../../views/Usage/UsageTable';
+import UsageStats from '../../views/UsageStatistics/UsageStats';
+import UsageTable from '../../views/UsageStatistics/UsageTable';
 import useStyles from './styles';
 
-const Usage = () => {
+const UsageStatistics = () => {
   const classes = useStyles();
   const { t } = useTranslation();
   return (
@@ -27,4 +27,4 @@ const Usage = () => {
   );
 };
 
-export default Usage;
+export default UsageStatistics;
diff --git a/litmus-portal/frontend/src/pages/Usage/styles.ts b/litmus-portal/frontend/src/pages/UsageStatistics/styles.ts
similarity index 100%
rename from litmus-portal/frontend/src/pages/Usage/styles.ts
rename to litmus-portal/frontend/src/pages/UsageStatistics/styles.ts
diff --git a/litmus-portal/frontend/src/pages/Workflows/index.tsx b/litmus-portal/frontend/src/pages/Workflows/index.tsx
index df748353c..6d65b8bd5 100644
--- a/litmus-portal/frontend/src/pages/Workflows/index.tsx
+++ b/litmus-portal/frontend/src/pages/Workflows/index.tsx
@@ -15,7 +15,7 @@ import { history } from '../../redux/configureStore';
 import { RootState } from '../../redux/reducers';
 import { getProjectID, getProjectRole } from '../../utils/getSearchParams';
 import BrowseSchedule from '../../views/ChaosWorkflows/BrowseSchedule';
-import BrowseWorkflow from '../../views/ChaosWorkflows/BrowseWorkflow';
+import BrowseWorkflow from '../../views/ChaosWorkflows/Runs';
 import useStyles from './styles';
 
 const Workflows = () => {
@@ -71,10 +71,7 @@ const Workflows = () => {
           }}
           variant="fullWidth"
         >
-          <StyledTab
-            label={`${t('workflows.browseWorkflows')}`}
-            data-cy="browseWorkflow"
-          />
+          <StyledTab label={`${t('workflows.runs')}`} data-cy="runs" />
           <StyledTab
             label={`${t('workflows.schedules')}`}
             data-cy="browseSchedule"
diff --git a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/HeaderSection.tsx b/litmus-portal/frontend/src/views/ChaosWorkflows/Runs/HeaderSection.tsx
similarity index 100%
rename from litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/HeaderSection.tsx
rename to litmus-portal/frontend/src/views/ChaosWorkflows/Runs/HeaderSection.tsx
diff --git a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/TableData.tsx b/litmus-portal/frontend/src/views/ChaosWorkflows/Runs/TableData.tsx
similarity index 100%
rename from litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/TableData.tsx
rename to litmus-portal/frontend/src/views/ChaosWorkflows/Runs/TableData.tsx
diff --git a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/index.tsx b/litmus-portal/frontend/src/views/ChaosWorkflows/Runs/index.tsx
similarity index 100%
rename from litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/index.tsx
rename to litmus-portal/frontend/src/views/ChaosWorkflows/Runs/index.tsx
diff --git a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/styles.ts b/litmus-portal/frontend/src/views/ChaosWorkflows/Runs/styles.ts
similarity index 100%
rename from litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/styles.ts
rename to litmus-portal/frontend/src/views/ChaosWorkflows/Runs/styles.ts
diff --git a/litmus-portal/frontend/src/views/Usage/UsageStats/Cards.tsx b/litmus-portal/frontend/src/views/UsageStatistics/UsageStats/Cards.tsx
similarity index 100%
rename from litmus-portal/frontend/src/views/Usage/UsageStats/Cards.tsx
rename to litmus-portal/frontend/src/views/UsageStatistics/UsageStats/Cards.tsx
diff --git a/litmus-portal/frontend/src/views/Usage/UsageStats/index.tsx b/litmus-portal/frontend/src/views/UsageStatistics/UsageStats/index.tsx
similarity index 100%
rename from litmus-portal/frontend/src/views/Usage/UsageStats/index.tsx
rename to litmus-portal/frontend/src/views/UsageStatistics/UsageStats/index.tsx
diff --git a/litmus-portal/frontend/src/views/Usage/UsageStats/styles.ts b/litmus-portal/frontend/src/views/UsageStatistics/UsageStats/styles.ts
similarity index 100%
rename from litmus-portal/frontend/src/views/Usage/UsageStats/styles.ts
rename to litmus-portal/frontend/src/views/UsageStatistics/UsageStats/styles.ts
diff --git a/litmus-portal/frontend/src/views/Usage/UsageTable/index.tsx b/litmus-portal/frontend/src/views/UsageStatistics/UsageTable/index.tsx
similarity index 98%
rename from litmus-portal/frontend/src/views/Usage/UsageTable/index.tsx
rename to litmus-portal/frontend/src/views/UsageStatistics/UsageTable/index.tsx
index a073530ae..be9893fa5 100644
--- a/litmus-portal/frontend/src/views/Usage/UsageTable/index.tsx
+++ b/litmus-portal/frontend/src/views/UsageStatistics/UsageTable/index.tsx
@@ -11,11 +11,11 @@ import {
   TableRow,
   Typography,
 } from '@material-ui/core';
+import ExpandLessIcon from '@material-ui/icons/ExpandLess';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import { Search } from 'litmus-ui';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import ExpandLessIcon from '@material-ui/icons/ExpandLess';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import Loader from '../../../components/Loader';
 import { GLOBAL_PROJECT_DATA } from '../../../graphql';
 import { Pagination } from '../../../models/graphql/workflowListData';
@@ -349,7 +349,11 @@ const UsageTable = () => {
             </TableHead>
             <TableBody>
               {loading ? (
-                <Loader />
+                <TableRow>
+                  <TableCell colSpan={7}>
+                    <Loader />
+                  </TableCell>
+                </TableRow>
               ) : data?.UsageQuery.Projects.length > 0 ? (
                 data?.UsageQuery.Projects.map((project: any) => (
                   <TableRow key={project.Name} className={classes.projectData}>
@@ -393,7 +397,7 @@ const UsageTable = () => {
         <TablePagination
           rowsPerPageOptions={[10, 25, 50]}
           component="div"
-          count={data?.UsageQuery.Projects.length ?? 0}
+          count={data?.UsageQuery.TotalCount.Projects ?? 0}
           rowsPerPage={paginationData.limit}
           page={paginationData.page}
           onChangePage={(_, page) =>
diff --git a/litmus-portal/frontend/src/views/Usage/UsageTable/styles.ts b/litmus-portal/frontend/src/views/UsageStatistics/UsageTable/styles.ts
similarity index 100%
rename from litmus-portal/frontend/src/views/Usage/UsageTable/styles.ts
rename to litmus-portal/frontend/src/views/UsageStatistics/UsageTable/styles.ts