feat: add kubernetes configmap component

Signed-off-by: 김병준 <kingbj0429@gmail.com>
2025-09-20 13:55:54 +09:00
parent 17a57b9f34
commit f569535114
4 changed files with 204 additions and 0 deletions
@@ -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 />
@@ -0,0 +1,118 @@
+/*
+ * 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 }}
+    />
+  );
+};
+
+/**
+ *
+ *
+ * @public
+ */
+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>
+  );
+};
+
+/**
+ *
+ *
+ * @public
+ */
+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>
+  );
+};
@@ -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>
+  );
+};
@@ -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';