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

Merge pull request #15920 from dmckernanacv/plugin-kubernetes/ui-tweaks

Browse Source 
Condense Kubernetes UI plugin components to fit more on screen
This commit is contained in:
Ben Lambert
2023-01-25 10:59:30 +01:00
committed by GitHub
parent a0871a3c0a 6ed3150cb1
commit f52a176355
20 changed files with 110 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/nine-glasses-invent.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/plugin-kubernetes': patch
---
Condenses kubernetes ui plugin to fit more onscreen and increase visibility
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}