feat(kubernetes-plugin): add secrets rendering (#31415)

* feat: mask secret datas

Signed-off-by: 김병준 <kingbj0429@gmail.com>

* feat: add secrets accordion

Signed-off-by: 김병준 <kingbj0429@gmail.com>

* feat: add test code for secrets accordion

Signed-off-by: 김병준 <kingbj0429@gmail.com>

* feat: add test code for secrets fetch

Signed-off-by: 김병준 <kingbj0429@gmail.com>

* chore: changeset

Signed-off-by: 김병준 <kingbj0429@gmail.com>

* chore: yarn build:api-reports

Signed-off-by: 김병준 <kingbj0429@gmail.com>

* chore: remove secrets from default object and rollback test code

Signed-off-by: 김병준 <kingbj0429@gmail.com>

* chore: extract to helper function

Signed-off-by: 김병준 <kingbj0429@gmail.com>

* chore: add test code for helper function

Signed-off-by: 김병준 <kingbj0429@gmail.com>

---------

Signed-off-by: 김병준 <kingbj0429@gmail.com>
This commit is contained in:
KoB
2025-12-02 09:35:34 +09:00
committed by GitHub
parent f966a8557f
commit 8fa8d87e3b
15 changed files with 568 additions and 7 deletions
@@ -0,0 +1,26 @@
{
"secrets": [
{
"apiVersion": "v1",
"kind": "Secret",
"metadata": {
"name": "app-secret",
"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.password": "***",
"api.key": "***",
"jwt.secret": "***",
"ssl.cert": "***"
}
}
]
}
@@ -0,0 +1,47 @@
{
"secrets": [
{
"apiVersion": "v1",
"kind": "Secret",
"metadata": {
"name": "app-secret",
"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.password": "***",
"api.key": "***",
"jwt.secret": "***",
"ssl.cert": "***"
}
},
{
"apiVersion": "v1",
"kind": "Secret",
"metadata": {
"name": "redis-secret",
"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.password": "***",
"redis.auth": "***",
"admin.token": "***"
}
}
]
}
@@ -44,6 +44,7 @@ import { StatusError, StatusOK } from '@backstage/core-components';
import { PodMetricsContext } from '../../hooks/usePodMetrics';
import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
import { kubernetesReactTranslationRef } from '../../translation';
import { SecretsAccordions } from '../SecretsAccordions';
type ClusterSummaryProps = {
clusterName: string;
@@ -181,6 +182,11 @@ export const Cluster = ({ clusterObjects, podsWithErrors }: ClusterProps) => {
<ConfigmapsAccordions />
</Grid>
) : undefined}
{groupedResponses.secrets.length > 0 ? (
<Grid item>
<SecretsAccordions />
</Grid>
) : undefined}
{groupedResponses.cronJobs.length > 0 ? (
<Grid item>
<CronJobsAccordions />
@@ -0,0 +1,48 @@
/*
* 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 { SecretsAccordions } from './SecretsAccordions';
import * as oneSecretsFixture from '../../__fixtures__/1-secrets.json';
import * as twoSecretsFixture from '../../__fixtures__/2-secrets.json';
import { renderInTestApp } from '@backstage/test-utils';
import { kubernetesProviders } from '../../hooks/test-utils';
describe('SecretsAccordions', () => {
it('should render 1 secret', async () => {
const wrapper = kubernetesProviders(oneSecretsFixture, new Set<string>());
await renderInTestApp(wrapper(<SecretsAccordions />));
expect(screen.getByText('app-secret')).toBeInTheDocument();
expect(screen.getByText('Secret')).toBeInTheDocument();
expect(screen.getByText('namespace: default')).toBeInTheDocument();
expect(screen.getByText('Data Count: 4')).toBeInTheDocument();
});
it('should render 2 secrets', async () => {
const wrapper = kubernetesProviders(twoSecretsFixture, new Set<string>());
await renderInTestApp(wrapper(<SecretsAccordions />));
expect(screen.getByText('app-secret')).toBeInTheDocument();
expect(screen.getByText('redis-secret')).toBeInTheDocument();
expect(screen.getAllByText('Secret')).toHaveLength(2);
expect(screen.getAllByText('namespace: default')).toHaveLength(2);
expect(screen.getByText('Data Count: 4')).toBeInTheDocument();
expect(screen.getByText('Data Count: 3')).toBeInTheDocument();
});
});
@@ -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 { V1Secret } from '@kubernetes/client-node';
import { SecretsDrawer } from './SecretsDrawer.tsx';
import { GroupedResponsesContext } from '../../hooks';
import { StructuredMetadataTable } from '@backstage/core-components';
type SecretSummaryProps = {
secret: V1Secret;
};
const SecretSummary = ({ secret }: SecretSummaryProps) => {
return (
<Grid
container
direction="row"
justifyContent="space-between"
alignItems="center"
spacing={0}
>
<Grid xs={8} item>
<SecretsDrawer secret={secret} />
</Grid>
<Grid item>
<Typography variant="subtitle2">
Data Count: {secret.data ? Object.keys(secret.data).length : 0}
</Typography>
</Grid>
</Grid>
);
};
type SecretsCardProps = {
secret: V1Secret;
};
const SecretCard = ({ secret }: SecretsCardProps) => {
const metadata: any = {};
metadata.data = secret.data;
return (
<StructuredMetadataTable
metadata={{
...metadata,
}}
options={{ nestedValuesAsYaml: true }}
/>
);
};
export type SecretsAccordionsProps = {};
type SecretsAccordionProps = {
secret: V1Secret;
};
const SecretsAccordion = ({ secret }: SecretsAccordionProps) => {
return (
<Accordion TransitionProps={{ unmountOnExit: true }} variant="outlined">
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<SecretSummary secret={secret} />
</AccordionSummary>
<AccordionDetails>
<SecretCard secret={secret} />
</AccordionDetails>
</Accordion>
);
};
export const SecretsAccordions = ({}: SecretsAccordionsProps) => {
const groupedResponses = useContext(GroupedResponsesContext);
return (
<Grid
container
direction="row"
justifyContent="flex-start"
alignItems="flex-start"
>
{groupedResponses.secrets.map((secret, i) => (
<Grid item key={i} xs>
<SecretsAccordion secret={secret} />
</Grid>
))}
</Grid>
);
};
@@ -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 oneSecretsFixture from '../../__fixtures__/1-secrets.json';
import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
import { SecretsDrawer } from './SecretsDrawer';
import { kubernetesClusterLinkFormatterApiRef } from '../../api';
describe('SecretsDrawer', () => {
it('should render secret drawer', async () => {
const { getByText, getAllByText } = await renderInTestApp(
<TestApiProvider apis={[[kubernetesClusterLinkFormatterApiRef, {}]]}>
<SecretsDrawer
secret={(oneSecretsFixture as any).secrets[0]}
expanded
/>
</TestApiProvider>,
);
expect(getAllByText('app-secret')).toHaveLength(3);
expect(getAllByText('Secret')).toHaveLength(3);
expect(getByText('YAML')).toBeInTheDocument();
expect(getByText('namespace: default')).toBeInTheDocument();
});
});
@@ -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 { V1Secret } from '@kubernetes/client-node';
export const SecretsDrawer = ({
secret,
expanded,
}: {
secret: V1Secret;
expanded?: boolean;
}) => {
const namespace = secret.metadata?.namespace;
return (
<KubernetesStructuredMetadataTableDrawer
object={secret}
expanded={expanded}
kind="Secret"
renderObject={(secretObject: V1Secret) => {
return secretObject || {};
}}
>
<Grid
container
direction="column"
justifyContent="flex-start"
alignItems="flex-start"
spacing={0}
>
<Grid item>
<Typography variant="body1">
{secret.metadata?.name ?? 'unknown object'}
</Typography>
</Grid>
<Grid item>
<Typography color="textSecondary" variant="subtitle1">
Secret
</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 './SecretsAccordions.tsx';
@@ -28,6 +28,7 @@ export const GroupedResponsesContext = createContext<GroupedResponses>({
daemonSets: [],
services: [],
configMaps: [],
secrets: [],
horizontalPodAutoscalers: [],
ingresses: [],
jobs: [],