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

Merge pull request #31208 from kingbj940429/kubernetes-configmaps-rendering

Browse Source 
feat(kubernetes-plugin): add configmaps rendering
This commit is contained in:
Fredrik Adelöw
2025-09-30 14:32:21 +02:00
committed by GitHub
parent 2e787126ac cee51f7c4e
commit e5ece8f6b1
9 changed files with 363 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/kubernetes-react/src/__fixtures__/1-configmaps.json
+26
View File
@@ -0,0 +1,26 @@
{
"configMaps": [
{
"apiVersion": "v1",
"kind": "ConfigMap",
"metadata": {
"name": "app-config",
"namespace": "default",
"uid": "1ea073bc-7a4b-4b99-8321-0305bce85568",
"resourceVersion": "1362732552",
"creationTimestamp": "2021-07-16T22:39:58Z",
"labels": {
"backstage.io/kubernetes-id": "dice-roller",
"app": "dice-roller"
},
"annotations": {}
},
"data": {
"database.host": "localhost",
"database.port": "5432",
"app.name": "dice-roller",
"app.version": "1.0.0"
}
}
]
}
plugins/kubernetes-react/src/__fixtures__/2-configmaps.json
+47
View File
@@ -0,0 +1,47 @@
{
"configMaps": [
{
"apiVersion": "v1",
"kind": "ConfigMap",
"metadata": {
"name": "app-config",
"namespace": "default",
"uid": "1ea073bc-7a4b-4b99-8321-0305bce85568",
"resourceVersion": "1362732552",
"creationTimestamp": "2021-07-16T22:39:58Z",
"labels": {
"backstage.io/kubernetes-id": "dice-roller",
"app": "dice-roller"
},
"annotations": {}
},
"data": {
"database.host": "localhost",
"database.port": "5432",
"app.name": "dice-roller",
"app.version": "1.0.0"
}
},
{
"apiVersion": "v1",
"kind": "ConfigMap",
"metadata": {
"name": "redis-config",
"namespace": "default",
"uid": "2ea073bc-7a4b-4b99-8321-0305bce85568",
"resourceVersion": "1362732553",
"creationTimestamp": "2021-07-16T22:40:58Z",
"labels": {
"backstage.io/kubernetes-id": "dice-roller",
"app": "redis"
},
"annotations": {}
},
"data": {
"redis.conf": "# Redis configuration\nmaxmemory 256mb\nmaxmemory-policy allkeys-lru",
"redis.host": "redis-service",
"redis.port": "6379"
}
}
]
}
plugins/kubernetes-react/src/components/Cluster/Cluster.tsx
+6
View File
@@ -30,6 +30,7 @@ import { DeploymentsAccordions } from '../DeploymentsAccordions';
import { StatefulSetsAccordions } from '../StatefulSetsAccordions';
import { IngressesAccordions } from '../IngressesAccordions';
import { ServicesAccordions } from '../ServicesAccordions';
import { ConfigmapsAccordions } from '../ConfigmapsAccordions';
import { CronJobsAccordions } from '../CronJobsAccordions';
import { CustomResources } from '../CustomResources';
import { DaemonSetsAccordions } from '../DaemonSetsAccordions';
@@ -170,6 +171,11 @@ export const Cluster = ({ clusterObjects, podsWithErrors }: ClusterProps) => {
<ServicesAccordions />
</Grid>
) : undefined}
{groupedResponses.configMaps.length > 0 ? (
<Grid item>
<ConfigmapsAccordions />
</Grid>
) : undefined}
{groupedResponses.cronJobs.length > 0 ? (
<Grid item>
<CronJobsAccordions />
plugins/kubernetes-react/src/components/ConfigmapsAccordions/ConfigmapsAccordions.test.tsx
+54
View File
@@ -0,0 +1,54 @@
/*
* Copyright 2021 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { screen } from '@testing-library/react';
import { ConfigmapsAccordions } from './ConfigmapsAccordions';
import * as oneConfigmapsFixture from '../../__fixtures__/1-configmaps.json';
import * as twoConfigmapsFixture from '../../__fixtures__/2-configmaps.json';
import { renderInTestApp } from '@backstage/test-utils';
import { kubernetesProviders } from '../../hooks/test-utils';
describe('ConfigmapsAccordions', () => {
it('should render 1 configmap', async () => {
const wrapper = kubernetesProviders(
oneConfigmapsFixture,
new Set<string>(),
);
await renderInTestApp(wrapper(<ConfigmapsAccordions />));
expect(screen.getByText('app-config')).toBeInTheDocument();
expect(screen.getByText('ConfigMap')).toBeInTheDocument();
expect(screen.getByText('namespace: default')).toBeInTheDocument();
expect(screen.getByText('Data Count: 4')).toBeInTheDocument();
});
it('should render 2 configmaps', async () => {
const wrapper = kubernetesProviders(
twoConfigmapsFixture,
new Set<string>(),
);
await renderInTestApp(wrapper(<ConfigmapsAccordions />));
expect(screen.getByText('app-config')).toBeInTheDocument();
expect(screen.getByText('redis-config')).toBeInTheDocument();
expect(screen.getAllByText('ConfigMap')).toHaveLength(2);
expect(screen.getAllByText('namespace: default')).toHaveLength(2);
expect(screen.getByText('Data Count: 4')).toBeInTheDocument();
expect(screen.getByText('Data Count: 3')).toBeInTheDocument();
});
});
plugins/kubernetes-react/src/components/ConfigmapsAccordions/ConfigmapsAccordions.tsx
+108
View File
@@ -0,0 +1,108 @@
/*
* Copyright 2021 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { useContext } from 'react';
import Accordion from '@material-ui/core/Accordion';
import AccordionDetails from '@material-ui/core/AccordionDetails';
import AccordionSummary from '@material-ui/core/AccordionSummary';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import type { V1ConfigMap } from '@kubernetes/client-node';
import { ConfigmapsDrawer } from './ConfigmapsDrawer.tsx';
import { GroupedResponsesContext } from '../../hooks';
import { StructuredMetadataTable } from '@backstage/core-components';
type ConfigmapSummaryProps = {
configmap: V1ConfigMap;
};
const ConfigmapSummary = ({ configmap }: ConfigmapSummaryProps) => {
return (
<Grid
container
direction="row"
justifyContent="space-between"
alignItems="center"
spacing={0}
>
<Grid xs={8} item>
<ConfigmapsDrawer configmap={configmap} />
</Grid>
<Grid item>
<Typography variant="subtitle2">
Data Count: {configmap.data ? Object.keys(configmap.data).length : 0}
</Typography>
</Grid>
</Grid>
);
};
type ConfigmapsCardProps = {
configmap: V1ConfigMap;
};
const ConfigmapCard = ({ configmap }: ConfigmapsCardProps) => {
const metadata: any = {};
metadata.data = configmap.data;
return (
<StructuredMetadataTable
metadata={{
...metadata,
}}
options={{ nestedValuesAsYaml: true }}
/>
);
};
export type ConfigmapsAccordionsProps = {};
type ConfigmapsAccordionProps = {
configmap: V1ConfigMap;
};
const ConfigmapsAccordion = ({ configmap }: ConfigmapsAccordionProps) => {
return (
<Accordion TransitionProps={{ unmountOnExit: true }} variant="outlined">
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<ConfigmapSummary configmap={configmap} />
</AccordionSummary>
<AccordionDetails>
<ConfigmapCard configmap={configmap} />
</AccordionDetails>
</Accordion>
);
};
export const ConfigmapsAccordions = ({}: ConfigmapsAccordionsProps) => {
const groupedResponses = useContext(GroupedResponsesContext);
return (
<Grid
container
direction="row"
justifyContent="flex-start"
alignItems="flex-start"
>
{groupedResponses.configMaps.map((configmap, i) => (
<Grid item key={i} xs>
<ConfigmapsAccordion configmap={configmap} />
</Grid>
))}
</Grid>
);
};
plugins/kubernetes-react/src/components/ConfigmapsAccordions/ConfigmapsDrawer.test.tsx
+37
View File
@@ -0,0 +1,37 @@
/*
* Copyright 2021 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import * as oneConfigmapsFixture from '../../__fixtures__/1-configmaps.json';
import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
import { ConfigmapsDrawer } from './ConfigmapsDrawer';
import { kubernetesClusterLinkFormatterApiRef } from '../../api';
describe('ConfigmapsDrawer', () => {
it('should render configmap drawer', async () => {
const { getByText, getAllByText } = await renderInTestApp(
<TestApiProvider apis={[[kubernetesClusterLinkFormatterApiRef, {}]]}>
<ConfigmapsDrawer
configmap={(oneConfigmapsFixture as any).configMaps[0]}
expanded
/>
</TestApiProvider>,
);
expect(getAllByText('app-config')).toHaveLength(3);
expect(getAllByText('ConfigMap')).toHaveLength(3);
expect(getByText('YAML')).toBeInTheDocument();
expect(getByText('namespace: default')).toBeInTheDocument();
});
});
plugins/kubernetes-react/src/components/ConfigmapsAccordions/ConfigmapsDrawer.tsx
+64
View File
@@ -0,0 +1,64 @@
/*
* Copyright 2020 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { KubernetesStructuredMetadataTableDrawer } from '../KubernetesDrawer';
import Typography from '@material-ui/core/Typography';
import Grid from '@material-ui/core/Grid';
import Chip from '@material-ui/core/Chip';
import type { V1ConfigMap } from '@kubernetes/client-node';
export const ConfigmapsDrawer = ({
configmap,
expanded,
}: {
configmap: V1ConfigMap;
expanded?: boolean;
}) => {
const namespace = configmap.metadata?.namespace;
return (
<KubernetesStructuredMetadataTableDrawer
object={configmap}
expanded={expanded}
kind="ConfigMap"
renderObject={(configmapObject: V1ConfigMap) => {
return configmapObject || {};
}}
>
<Grid
container
direction="column"
justifyContent="flex-start"
alignItems="flex-start"
spacing={0}
>
<Grid item>
<Typography variant="body1">
{configmap.metadata?.name ?? 'unknown object'}
</Typography>
</Grid>
<Grid item>
<Typography color="textSecondary" variant="subtitle1">
ConfigMap
</Typography>
</Grid>
{namespace && (
<Grid item>
<Chip size="small" label={`namespace: ${namespace}`} />
</Grid>
)}
</Grid>
</KubernetesStructuredMetadataTableDrawer>
);
};
plugins/kubernetes-react/src/components/ConfigmapsAccordions/index.ts
+16
View File
@@ -0,0 +1,16 @@
/*
* Copyright 2021 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export * from './ConfigmapsAccordions.tsx';