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>

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

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>

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: {

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={{

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 {

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;

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"

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 ? (
+                <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) =>