paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 33 Packages Projects Releases Wiki Activity

Removes UI components when groupedResponse does not contain relevant items.

Browse Source 
Fixes empty rows when table page contains fewer than requested page length.
Gives Pod Table rows a unique id.
Updates components for condensing the UI, and more visual distinction between Resource types
Updates all Accordion components to use the 'outlined' variant (except Cluster)
Updates all Drawer components to use 'body1' typography for the resource name and 'subtitle1' typography for the resource type, to be more condensed within the UI for instances whose base font size is larger.
Updates all Accordion targets to remove needless divider between resource info and resource detail summary.
Expands Accordion target grid items to utilize more space when grid content is likely to be long.
Removes spacing on grid in Accordion target to further reduce used space.

Signed-off-by: dmckernan <dmckernan@acvauctions.com>
This commit is contained in:
dmckernan
2023-01-24 08:49:34 -05:00
parent d8928ed2ca
commit c4f3a20dc2
19 changed files with 105 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/kubernetes/src/components/Cluster/Cluster.tsx
+37 -27
View File
@@ -19,7 +19,6 @@ import {
Accordion,
AccordionDetails,
AccordionSummary,
Divider,
Grid,
Typography,
} from '@material-ui/core';
@@ -60,11 +59,12 @@ const ClusterSummary = ({
<Grid
container
direction="row"
justifyContent="flex-start"
justifyContent="space-between"
alignItems="flex-start"
spacing={0}
>
<Grid
xs={4}
xs={6}
item
container
direction="column"
@@ -73,22 +73,20 @@ const ClusterSummary = ({
spacing={0}
>
<Grid item xs>
<Typography variant="h3">{clusterName}</Typography>
<Typography color="textSecondary" variant="body1">
<Typography variant="body1">{clusterName}</Typography>
<Typography color="textSecondary" variant="subtitle1">
Cluster
</Typography>
</Grid>
</Grid>
<Grid item xs={1}>
<Divider style={{ height: '4em' }} orientation="vertical" />
</Grid>
<Grid
item
container
xs={3}
direction="column"
justifyContent="flex-start"
alignItems="flex-start"
alignItems="flex-end"
spacing={0}
>
<Grid item>
<StatusOK>{totalNumberOfPods} pods</StatusOK>
@@ -137,24 +135,36 @@ export const Cluster = ({ clusterObjects, podsWithErrors }: ClusterProps) => {
</AccordionSummary>
<AccordionDetails>
<Grid container direction="column">
<Grid item>
<CustomResources />
</Grid>
<Grid item>
<DeploymentsAccordions />
</Grid>
<Grid item>
<StatefulSetsAccordions />
</Grid>
<Grid item>
<IngressesAccordions />
</Grid>
<Grid item>
<ServicesAccordions />
</Grid>
<Grid item>
<CronJobsAccordions />
</Grid>
{groupedResponses.customResources.length > 0 ? (
<Grid item>
<CustomResources />
</Grid>
) : undefined}
{groupedResponses.deployments.length > 0 ? (
<Grid item>
<DeploymentsAccordions />
</Grid>
) : undefined}
{groupedResponses.statefulsets.length > 0 ? (
<Grid item>
<StatefulSetsAccordions />
</Grid>
) : undefined}
{groupedResponses.ingresses.length > 0 ? (
<Grid item>
<IngressesAccordions />
</Grid>
) : undefined}
{groupedResponses.services.length > 0 ? (
<Grid item>
<ServicesAccordions />
</Grid>
) : undefined}
{groupedResponses.cronJobs.length > 0 ? (
<Grid item>
<CronJobsAccordions />
</Grid>
) : undefined}
</Grid>
</AccordionDetails>
</Accordion>
plugins/kubernetes/src/components/CronJobsAccordions/CronJobsAccordions.tsx
+7 -9
View File
@@ -18,7 +18,6 @@ import {
Accordion,
AccordionDetails,
AccordionSummary,
Divider,
Grid,
Typography,
} from '@material-ui/core';
@@ -51,22 +50,21 @@ const CronJobSummary = ({ cronJob }: CronJobSummaryProps) => {
<Grid
container
direction="row"
justifyContent="flex-start"
justifyContent="space-between"
alignItems="center"
spacing={0}
>
<Grid xs={3} item>
<Grid xs={6} item>
<CronJobDrawer cronJob={cronJob} />
</Grid>
<Grid item xs={1}>
<Divider style={{ height: '5em' }} orientation="vertical" />
</Grid>
<Grid
item
container
xs={5}
xs={6}
direction="column"
justifyContent="flex-start"
alignItems="flex-start"
alignItems="flex-end"
spacing={0}
>
<Grid item>
{cronJob.spec?.suspend ? (
@@ -92,7 +90,7 @@ const CronJobSummary = ({ cronJob }: CronJobSummaryProps) => {
const CronJobAccordion = ({ cronJob, ownedJobs }: CronJobAccordionProps) => {
return (
<Accordion TransitionProps={{ unmountOnExit: true }}>
<Accordion TransitionProps={{ unmountOnExit: true }} variant="outlined">
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<CronJobSummary cronJob={cronJob} />
</AccordionSummary>
plugins/kubernetes/src/components/CronJobsAccordions/CronJobsDrawer.tsx
+2 -2
View File
@@ -47,12 +47,12 @@ export const CronJobDrawer = ({
spacing={0}
>
<Grid item>
<Typography variant="h5">
<Typography variant="body1">
{cronJob.metadata?.name ?? 'unknown object'}
</Typography>
</Grid>
<Grid item>
<Typography color="textSecondary" variant="body1">
<Typography color="textSecondary" variant="subtitle1">
CronJob
</Typography>
</Grid>
plugins/kubernetes/src/components/CustomResources/ArgoRollouts/Rollout.tsx
+6 -7
View File
@@ -19,7 +19,6 @@ import {
Accordion,
AccordionDetails,
AccordionSummary,
Divider,
Grid,
Typography,
} from '@material-ui/core';
@@ -101,15 +100,13 @@ const RolloutSummary = ({
<Grid
container
direction="row"
justifyContent="flex-start"
justifyContent="space-between"
alignItems="center"
spacing={0}
>
<Grid xs={3} item>
<Grid xs={6} item>
<RolloutDrawer rollout={rollout} />
</Grid>
<Grid item xs={1}>
<Divider style={{ height: '5em' }} orientation="vertical" />
</Grid>
{hpa && (
<Grid item xs={3}>
<HorizontalPodAutoscalerDrawer hpa={hpa}>
@@ -149,7 +146,8 @@ const RolloutSummary = ({
xs={3}
direction="column"
justifyContent="flex-start"
alignItems="flex-start"
alignItems="flex-end"
spacing={0}
>
<Grid item>
<StatusOK>{numberOfCurrentPods} pods</StatusOK>
@@ -210,6 +208,7 @@ const RolloutAccordion = ({
<Accordion
defaultExpanded={defaultExpanded}
TransitionProps={{ unmountOnExit: true }}
variant="outlined"
>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<RolloutSummary
plugins/kubernetes/src/components/CustomResources/ArgoRollouts/RolloutDrawer.tsx
+2 -2
View File
@@ -40,12 +40,12 @@ export const RolloutDrawer = ({
spacing={0}
>
<Grid item>
<Typography variant="h5">
<Typography variant="body1">
{rollout.metadata?.name ?? 'unknown object'}
</Typography>
</Grid>
<Grid item>
<Typography color="textSecondary" variant="body1">
<Typography color="textSecondary" variant="subtitle1">
Rollout
</Typography>
</Grid>
plugins/kubernetes/src/components/CustomResources/DefaultCustomResource.tsx
+4 -6
View File
@@ -19,7 +19,6 @@ import {
Accordion,
AccordionDetails,
AccordionSummary,
Divider,
Grid,
} from '@material-ui/core';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
@@ -54,18 +53,16 @@ const DefaultCustomResourceSummary = ({
<Grid
container
direction="row"
justifyContent="flex-start"
justifyContent="space-between"
alignItems="center"
spacing={0}
>
<Grid xs={3} item>
<Grid xs={12} item>
<DefaultCustomResourceDrawer
customResource={customResource}
customResourceName={customResourceName}
/>
</Grid>
<Grid item xs={1}>
<Divider style={{ height: '5em' }} orientation="vertical" />
</Grid>
</Grid>
);
};
@@ -79,6 +76,7 @@ const DefaultCustomResourceAccordion = ({
<Accordion
defaultExpanded={defaultExpanded}
TransitionProps={{ unmountOnExit: true }}
variant="outlined"
>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<DefaultCustomResourceSummary
plugins/kubernetes/src/components/CustomResources/DefaultCustomResourceDrawer.tsx
+2 -2
View File
@@ -47,12 +47,12 @@ export const DefaultCustomResourceDrawer = ({
spacing={0}
>
<Grid item>
<Typography variant="h5">
<Typography variant="body1">
{customResource.metadata?.name ?? 'unknown object'}
</Typography>
</Grid>
<Grid item>
<Typography color="textSecondary" variant="body1">
<Typography color="textSecondary" variant="subtitle1">
{capitalizedName}
</Typography>
</Grid>
plugins/kubernetes/src/components/DeploymentsAccordions/DeploymentDrawer.tsx
+2 -2
View File
@@ -58,12 +58,12 @@ export const DeploymentDrawer = ({
spacing={0}
>
<Grid item>
<Typography variant="h5">
<Typography variant="body1">
{deployment.metadata?.name ?? 'unknown object'}
</Typography>
</Grid>
<Grid item>
<Typography color="textSecondary" variant="body1">
<Typography color="textSecondary" variant="subtitle1">
Deployment
</Typography>
</Grid>
plugins/kubernetes/src/components/DeploymentsAccordions/DeploymentsAccordions.tsx
+8 -10
View File
@@ -19,7 +19,6 @@ import {
Accordion,
AccordionDetails,
AccordionSummary,
Divider,
Grid,
Typography,
} from '@material-ui/core';
@@ -72,17 +71,15 @@ const DeploymentSummary = ({
<Grid
container
direction="row"
justifyContent="flex-start"
justifyContent="space-between"
alignItems="center"
spacing={0}
>
<Grid xs={3} item>
<Grid xs={4} item>
<DeploymentDrawer deployment={deployment} />
</Grid>
<Grid item xs={1}>
<Divider style={{ height: '5em' }} orientation="vertical" />
</Grid>
{hpa && (
<Grid item xs={3}>
<Grid item xs={4}>
<HorizontalPodAutoscalerDrawer hpa={hpa}>
<Grid
item
@@ -117,10 +114,11 @@ const DeploymentSummary = ({
<Grid
item
container
xs={3}
xs={4}
direction="column"
justifyContent="flex-start"
alignItems="flex-start"
alignItems="flex-end"
spacing={0}
>
<Grid item>
<StatusOK>{numberOfCurrentPods} pods</StatusOK>
@@ -152,7 +150,7 @@ const DeploymentAccordion = ({
);
return (
<Accordion TransitionProps={{ unmountOnExit: true }}>
<Accordion TransitionProps={{ unmountOnExit: true }} variant="outlined">
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<DeploymentSummary
deployment={deployment}
plugins/kubernetes/src/components/ErrorReporting/ErrorReporting.tsx
+1 -1
View File
@@ -102,7 +102,7 @@ export const ErrorReporting = ({ detectedErrors }: ErrorReportingProps) => {
title="Error Reporting"
data={errors}
columns={columns}
options={{ paging: true, search: false }}
options={{ paging: true, search: false, emptyRowsWhenPaging: false }}
/>
)}
</>
plugins/kubernetes/src/components/IngressesAccordions/IngressDrawer.tsx
+2 -2
View File
@@ -43,12 +43,12 @@ export const IngressDrawer = ({
spacing={0}
>
<Grid item>
<Typography variant="h5">
<Typography variant="body1">
{ingress.metadata?.name ?? 'unknown object'}
</Typography>
</Grid>
<Grid item>
<Typography color="textSecondary" variant="body1">
<Typography color="textSecondary" variant="subtitle1">
Ingress
</Typography>
</Grid>
plugins/kubernetes/src/components/IngressesAccordions/IngressesAccordions.tsx
+1 -6
View File
@@ -19,7 +19,6 @@ import {
Accordion,
AccordionDetails,
AccordionSummary,
Divider,
Grid,
} from '@material-ui/core';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
@@ -46,13 +45,9 @@ const IngressSummary = ({ ingress }: IngressSummaryProps) => {
justifyContent="flex-start"
alignItems="center"
>
<Grid xs={3} item>
<Grid xs={12} item>
<IngressDrawer ingress={ingress} />
</Grid>
<Grid item xs={1}>
<Divider style={{ height: '5em' }} orientation="vertical" />
</Grid>
</Grid>
);
};
plugins/kubernetes/src/components/JobsAccordions/JobsAccordions.tsx
+7 -9
View File
@@ -18,7 +18,6 @@ import {
Accordion,
AccordionDetails,
AccordionSummary,
Divider,
Grid,
} from '@material-ui/core';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
@@ -54,22 +53,21 @@ const JobSummary = ({ job }: JobSummaryProps) => {
<Grid
container
direction="row"
justifyContent="flex-start"
justifyContent="space-between"
alignItems="center"
spacing={0}
>
<Grid xs={3} item>
<Grid xs={6} item>
<JobDrawer job={job} />
</Grid>
<Grid item xs={1}>
<Divider style={{ height: '5em' }} orientation="vertical" />
</Grid>
<Grid
item
container
xs={8}
xs={6}
direction="column"
justifyContent="flex-start"
alignItems="flex-start"
alignItems="flex-end"
spacing={0}
>
<Grid item>
{job.status?.succeeded && <StatusOK>Succeeded</StatusOK>}
@@ -89,7 +87,7 @@ const JobSummary = ({ job }: JobSummaryProps) => {
const JobAccordion = ({ job, ownedPods }: JobAccordionProps) => {
return (
<Accordion TransitionProps={{ unmountOnExit: true }}>
<Accordion TransitionProps={{ unmountOnExit: true }} variant="outlined">
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<JobSummary job={job} />
</AccordionSummary>
plugins/kubernetes/src/components/JobsAccordions/JobsDrawer.tsx
+2 -2
View File
@@ -47,12 +47,12 @@ export const JobDrawer = ({
spacing={0}
>
<Grid item>
<Typography variant="h6">
<Typography variant="body1">
{job.metadata?.name ?? 'unknown object'}
</Typography>
</Grid>
<Grid item>
<Typography color="textSecondary" variant="body1">
<Typography color="textSecondary" variant="subtitle1">
Job
</Typography>
</Grid>
plugins/kubernetes/src/components/Pods/PodsTable.tsx
Generated
+9 -2
View File
@@ -46,6 +46,7 @@ const DEFAULT_COLUMNS: TableColumn<V1Pod>[] = [
{
title: 'phase',
render: (pod: V1Pod) => pod.status?.phase ?? 'unknown',
width: 'auto',
},
{
title: 'status',
@@ -58,12 +59,14 @@ const READY: TableColumn<V1Pod>[] = [
title: 'containers ready',
align: 'center',
render: containersReady,
width: 'auto',
},
{
title: 'total restarts',
align: 'center',
render: totalRestarts,
type: 'numeric',
width: 'auto',
},
];
@@ -87,6 +90,7 @@ export const PodsTable = ({ pods, extraColumns = [] }: PodsTablesProps) => {
return podStatusToCpuUtil(metrics);
},
width: 'auto',
},
{
title: 'Memory usage %',
@@ -99,6 +103,7 @@ export const PodsTable = ({ pods, extraColumns = [] }: PodsTablesProps) => {
return podStatusToMemoryUtil(metrics);
},
width: 'auto',
},
];
columns.push(...resourceColumns);
@@ -109,11 +114,13 @@ export const PodsTable = ({ pods, extraColumns = [] }: PodsTablesProps) => {
width: '100%',
};
const usePods = pods.map(p => ({ ...p, id: p.metadata?.uid }));
return (
<div style={tableStyle}>
<Table
options={{ paging: true, search: false }}
data={pods}
options={{ paging: true, search: false, emptyRowsWhenPaging: false }}
data={usePods}
columns={columns}
/>
</div>
plugins/kubernetes/src/components/ServicesAccordions/ServiceDrawer.tsx
+2 -2
View File
@@ -43,12 +43,12 @@ export const ServiceDrawer = ({
spacing={0}
>
<Grid item>
<Typography variant="h5">
<Typography variant="body1">
{service.metadata?.name ?? 'unknown object'}
</Typography>
</Grid>
<Grid item>
<Typography color="textSecondary" variant="body1">
<Typography color="textSecondary" variant="subtitle1">
Service
</Typography>
</Grid>
plugins/kubernetes/src/components/ServicesAccordions/ServicesAccordions.tsx
+4 -8
View File
@@ -19,7 +19,6 @@ import {
Accordion,
AccordionDetails,
AccordionSummary,
Divider,
Grid,
Typography,
} from '@material-ui/core';
@@ -38,17 +37,14 @@ const ServiceSummary = ({ service }: ServiceSummaryProps) => {
<Grid
container
direction="row"
justifyContent="flex-start"
justifyContent="space-between"
alignItems="center"
spacing={0}
>
<Grid xs={3} item>
<Grid xs={8} item>
<ServiceDrawer service={service} />
</Grid>
<Grid item xs={1}>
<Divider style={{ height: '5em' }} orientation="vertical" />
</Grid>
<Grid item>
<Typography variant="subtitle2">
Type: {service.spec?.type ?? '?'}
@@ -95,7 +91,7 @@ type ServiceAccordionProps = {
const ServiceAccordion = ({ service }: ServiceAccordionProps) => {
return (
<Accordion TransitionProps={{ unmountOnExit: true }}>
<Accordion TransitionProps={{ unmountOnExit: true }} variant="outlined">
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<ServiceSummary service={service} />
</AccordionSummary>
plugins/kubernetes/src/components/StatefulSetsAccordions/StatefulSetDrawer.tsx
+2 -2
View File
@@ -59,12 +59,12 @@ export const StatefulSetDrawer = ({
spacing={0}
>
<Grid item>
<Typography variant="h5">
<Typography variant="body1">
{statefulset.metadata?.name ?? 'unknown object'}
</Typography>
</Grid>
<Grid item>
<Typography color="textSecondary" variant="body1">
<Typography color="textSecondary" variant="subtitle1">
Stateful Set
</Typography>
</Grid>
plugins/kubernetes/src/components/StatefulSetsAccordions/StatefulSetsAccordions.tsx
+5 -7
View File
@@ -19,7 +19,6 @@ import {
Accordion,
AccordionDetails,
AccordionSummary,
Divider,
Grid,
Typography,
} from '@material-ui/core';
@@ -69,15 +68,13 @@ const StatefulSetSummary = ({
<Grid
container
direction="row"
justifyContent="flex-start"
justifyContent="space-between"
alignItems="center"
spacing={0}
>
<Grid xs={3} item>
<Grid xs={6} item>
<StatefulSetDrawer statefulset={statefulset} />
</Grid>
<Grid item xs={1}>
<Divider style={{ height: '5em' }} orientation="vertical" />
</Grid>
{hpa && (
<Grid item xs={3}>
<HorizontalPodAutoscalerDrawer hpa={hpa}>
@@ -118,6 +115,7 @@ const StatefulSetSummary = ({
direction="column"
justifyContent="flex-start"
alignItems="flex-start"
spacing={0}
>
<Grid item>
<StatusOK>{numberOfCurrentPods} pods</StatusOK>
@@ -149,7 +147,7 @@ const StatefulSetAccordion = ({
);
return (
<Accordion TransitionProps={{ unmountOnExit: true }}>
<Accordion TransitionProps={{ unmountOnExit: true }} variant="outlined">
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<StatefulSetSummary
statefulset={statefulset}