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>
This commit is contained in:
parent
3fc404c8e4
commit
348e710b34
|
@ -1159,7 +1159,7 @@ workflowAgent:
|
||||||
noAgentSearch: No agents found
|
noAgentSearch: No agents found
|
||||||
|
|
||||||
workflows:
|
workflows:
|
||||||
browseWorkflows: Browse workflows
|
runs: Runs
|
||||||
schedules: Schedules
|
schedules: Schedules
|
||||||
templates: Templates
|
templates: Templates
|
||||||
analytics: Analytics
|
analytics: Analytics
|
||||||
|
|
|
@ -158,15 +158,15 @@ const SideBar: React.FC = () => {
|
||||||
|
|
||||||
{role === UserRole.admin && (
|
{role === UserRole.admin && (
|
||||||
<CustomisedListItem
|
<CustomisedListItem
|
||||||
key="usage"
|
key="usage-statistics"
|
||||||
handleClick={() => {
|
handleClick={() => {
|
||||||
history.push({
|
history.push({
|
||||||
pathname: `/usage`,
|
pathname: `/usage-statistics`,
|
||||||
search: `?projectID=${projectID}&projectRole=${projectRole}`,
|
search: `?projectID=${projectID}&projectRole=${projectRole}`,
|
||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
label="Usage"
|
label="Usage Statistics"
|
||||||
selected={pathName === 'usage'}
|
selected={pathName === 'usage-statistics'}
|
||||||
>
|
>
|
||||||
<UsageIcon />
|
<UsageIcon />
|
||||||
</CustomisedListItem>
|
</CustomisedListItem>
|
||||||
|
|
|
@ -22,7 +22,7 @@ const useStyles = makeStyles((theme: Theme) => ({
|
||||||
backgroundColor: `${theme.palette.cards.highlight} !important`,
|
backgroundColor: `${theme.palette.cards.highlight} !important`,
|
||||||
color: theme.palette.highlight,
|
color: theme.palette.highlight,
|
||||||
'& path': {
|
'& path': {
|
||||||
fill: theme.palette.highlight,
|
stroke: theme.palette.highlight,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
listIcon: {
|
listIcon: {
|
||||||
|
|
|
@ -25,7 +25,7 @@ const WorkflowDetails = lazy(() => import('../../pages/WorkflowDetails'));
|
||||||
const HomePage = lazy(() => import('../../pages/HomePage'));
|
const HomePage = lazy(() => import('../../pages/HomePage'));
|
||||||
const Community = lazy(() => import('../../pages/Community'));
|
const Community = lazy(() => import('../../pages/Community'));
|
||||||
const Settings = lazy(() => import('../../pages/Settings'));
|
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 Targets = lazy(() => import('../../pages/Targets'));
|
||||||
const EditSchedule = lazy(() => import('../../pages/EditSchedule'));
|
const EditSchedule = lazy(() => import('../../pages/EditSchedule'));
|
||||||
const SetNewSchedule = lazy(() => import('../../pages/EditSchedule/Schedule'));
|
const SetNewSchedule = lazy(() => import('../../pages/EditSchedule/Schedule'));
|
||||||
|
@ -214,7 +214,7 @@ const Routes: React.FC = () => {
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{role === UserRole.admin ? (
|
{role === UserRole.admin ? (
|
||||||
<Route path="/usage" component={Usage} />
|
<Route path="/usage-statistics" component={UsageStatistics} />
|
||||||
) : (
|
) : (
|
||||||
<Redirect
|
<Redirect
|
||||||
to={{
|
to={{
|
||||||
|
|
|
@ -621,6 +621,9 @@ export const GET_GLOBAL_STATS = gql`
|
||||||
export const GLOBAL_PROJECT_DATA = gql`
|
export const GLOBAL_PROJECT_DATA = gql`
|
||||||
query getStats($query: UsageQuery!) {
|
query getStats($query: UsageQuery!) {
|
||||||
UsageQuery(query: $query) {
|
UsageQuery(query: $query) {
|
||||||
|
TotalCount {
|
||||||
|
Projects
|
||||||
|
}
|
||||||
Projects {
|
Projects {
|
||||||
Name
|
Name
|
||||||
Workflows {
|
Workflows {
|
||||||
|
|
|
@ -2,11 +2,11 @@ import { Typography } from '@material-ui/core';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import Scaffold from '../../containers/layouts/Scaffold';
|
import Scaffold from '../../containers/layouts/Scaffold';
|
||||||
import UsageStats from '../../views/Usage/UsageStats';
|
import UsageStats from '../../views/UsageStatistics/UsageStats';
|
||||||
import UsageTable from '../../views/Usage/UsageTable';
|
import UsageTable from '../../views/UsageStatistics/UsageTable';
|
||||||
import useStyles from './styles';
|
import useStyles from './styles';
|
||||||
|
|
||||||
const Usage = () => {
|
const UsageStatistics = () => {
|
||||||
const classes = useStyles();
|
const classes = useStyles();
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
return (
|
return (
|
||||||
|
@ -27,4 +27,4 @@ const Usage = () => {
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Usage;
|
export default UsageStatistics;
|
|
@ -15,7 +15,7 @@ import { history } from '../../redux/configureStore';
|
||||||
import { RootState } from '../../redux/reducers';
|
import { RootState } from '../../redux/reducers';
|
||||||
import { getProjectID, getProjectRole } from '../../utils/getSearchParams';
|
import { getProjectID, getProjectRole } from '../../utils/getSearchParams';
|
||||||
import BrowseSchedule from '../../views/ChaosWorkflows/BrowseSchedule';
|
import BrowseSchedule from '../../views/ChaosWorkflows/BrowseSchedule';
|
||||||
import BrowseWorkflow from '../../views/ChaosWorkflows/BrowseWorkflow';
|
import BrowseWorkflow from '../../views/ChaosWorkflows/Runs';
|
||||||
import useStyles from './styles';
|
import useStyles from './styles';
|
||||||
|
|
||||||
const Workflows = () => {
|
const Workflows = () => {
|
||||||
|
@ -71,10 +71,7 @@ const Workflows = () => {
|
||||||
}}
|
}}
|
||||||
variant="fullWidth"
|
variant="fullWidth"
|
||||||
>
|
>
|
||||||
<StyledTab
|
<StyledTab label={`${t('workflows.runs')}`} data-cy="runs" />
|
||||||
label={`${t('workflows.browseWorkflows')}`}
|
|
||||||
data-cy="browseWorkflow"
|
|
||||||
/>
|
|
||||||
<StyledTab
|
<StyledTab
|
||||||
label={`${t('workflows.schedules')}`}
|
label={`${t('workflows.schedules')}`}
|
||||||
data-cy="browseSchedule"
|
data-cy="browseSchedule"
|
||||||
|
|
|
@ -11,11 +11,11 @@ import {
|
||||||
TableRow,
|
TableRow,
|
||||||
Typography,
|
Typography,
|
||||||
} from '@material-ui/core';
|
} from '@material-ui/core';
|
||||||
|
import ExpandLessIcon from '@material-ui/icons/ExpandLess';
|
||||||
|
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
|
||||||
import { Search } from 'litmus-ui';
|
import { Search } from 'litmus-ui';
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { useTranslation } from 'react-i18next';
|
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 Loader from '../../../components/Loader';
|
||||||
import { GLOBAL_PROJECT_DATA } from '../../../graphql';
|
import { GLOBAL_PROJECT_DATA } from '../../../graphql';
|
||||||
import { Pagination } from '../../../models/graphql/workflowListData';
|
import { Pagination } from '../../../models/graphql/workflowListData';
|
||||||
|
@ -349,7 +349,11 @@ const UsageTable = () => {
|
||||||
</TableHead>
|
</TableHead>
|
||||||
<TableBody>
|
<TableBody>
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<Loader />
|
<TableRow>
|
||||||
|
<TableCell colSpan={7}>
|
||||||
|
<Loader />
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
) : data?.UsageQuery.Projects.length > 0 ? (
|
) : data?.UsageQuery.Projects.length > 0 ? (
|
||||||
data?.UsageQuery.Projects.map((project: any) => (
|
data?.UsageQuery.Projects.map((project: any) => (
|
||||||
<TableRow key={project.Name} className={classes.projectData}>
|
<TableRow key={project.Name} className={classes.projectData}>
|
||||||
|
@ -393,7 +397,7 @@ const UsageTable = () => {
|
||||||
<TablePagination
|
<TablePagination
|
||||||
rowsPerPageOptions={[10, 25, 50]}
|
rowsPerPageOptions={[10, 25, 50]}
|
||||||
component="div"
|
component="div"
|
||||||
count={data?.UsageQuery.Projects.length ?? 0}
|
count={data?.UsageQuery.TotalCount.Projects ?? 0}
|
||||||
rowsPerPage={paginationData.limit}
|
rowsPerPage={paginationData.limit}
|
||||||
page={paginationData.page}
|
page={paginationData.page}
|
||||||
onChangePage={(_, page) =>
|
onChangePage={(_, page) =>
|
Loading…
Reference in New Issue