@kinvolk/headlamp-plugin
Version:
The needed infrastructure for building Headlamp plugins.
166 lines (165 loc) • 9.32 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
/*
* Copyright 2025 The Kubernetes 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 Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import { useTranslation } from 'react-i18next';
import { useParams } from 'react-router';
import { matchExpressionSimplifier, matchLabelsSimplifier } from '../../lib/k8s';
import NetworkPolicy from '../../lib/k8s/networkpolicy';
import NameValueTable from '../common/NameValueTable';
import { DetailsGrid } from '../common/Resource';
import { metadataStyles } from '../common/Resource';
import SectionBox from '../common/SectionBox';
export function NetworkPolicyDetails(props) {
const params = useParams();
const { name = params.name, namespace = params.namespace, cluster } = props;
const { t } = useTranslation(['glossary', 'translation']);
function prepareMatchLabelsAndExpressions(matchLabels, matchExpressions) {
const matchLabelsSimplified = matchLabelsSimplifier(matchLabels) || [];
const matchExpressionsSimplified = matchExpressionSimplifier(matchExpressions) || [];
return (_jsxs(_Fragment, { children: [matchLabelsSimplified.map(label => (_jsx(Typography, { sx: metadataStyles, display: "inline", children: label }))), matchExpressionsSimplified.map(expression => (_jsx(Typography, { sx: metadataStyles, display: "inline", children: expression })))] }));
}
function PodSelector(props) {
const { networkPolicy } = props;
return prepareMatchLabelsAndExpressions(networkPolicy.jsonData.spec?.podSelector?.matchLabels, networkPolicy.jsonData.spec?.podSelector?.matchExpressions);
}
function Port(props) {
const { port } = props;
const { port: portValue, endPort, protocol } = port;
const hasRange = typeof portValue === 'number' && typeof endPort === 'number' && endPort !== portValue;
const basePort = portValue ?? endPort;
if (basePort === undefined && !protocol) {
return null;
}
return (_jsxs(Box, { children: [protocol ? `${protocol}:` : '', basePort, hasRange ? `:${endPort}` : ''] }));
}
function Ingress(props) {
const { ingress } = props;
if (!ingress || ingress.length === 0) {
return _jsx(_Fragment, {});
}
return (_jsx(_Fragment, { children: ingress.map((item) => (_jsx(SectionBox, { title: t('Ingress'), children: _jsx(NameValueTable, { rows: [
{
name: t('Ports'),
value: item.ports?.map((port, index) => (_jsx(Port, { port: port }, index))),
},
{
name: t('translation|From'),
value: '',
},
{
name: t('ipBlock'),
value: item.from?.map(from => {
if (!from.ipBlock) {
return _jsx(_Fragment, {});
}
const { cidr, except = [] } = from.ipBlock || {};
if (!cidr) {
return _jsx(_Fragment, {});
}
if (cidr && except.length === 0) {
return _jsx(_Fragment, { children: `cidr: ${cidr}` });
}
return _jsx(_Fragment, { children: `cidr: ${cidr}, except: ${except.join(', ')}` });
}),
},
{
name: t('namespaceSelector'),
value: item.from?.map(from => {
if (!from.namespaceSelector) {
return _jsx(_Fragment, {});
}
const { matchLabels = {}, matchExpressions = [] } = from.namespaceSelector || {};
return prepareMatchLabelsAndExpressions(matchLabels, matchExpressions);
}),
},
{
name: t('podSelector'),
value: item.from?.map(from => {
if (!from.podSelector) {
return _jsx(_Fragment, {});
}
const { matchLabels = {}, matchExpressions = [] } = from.podSelector || {};
return prepareMatchLabelsAndExpressions(matchLabels, matchExpressions);
}),
},
] }) }))) }));
}
function Egress(props) {
const { egress } = props;
if (!egress || egress.length === 0) {
return _jsx(_Fragment, {});
}
return (_jsx(_Fragment, { children: egress.map((item) => (_jsxs(SectionBox, { title: t('Egress'), children: [_jsx(NameValueTable, { rows: [
{
name: t('Ports'),
value: item.ports?.map((port, index) => (_jsx(Port, { port: port }, index))),
},
] }), item.to && item.to.length > 0 && (_jsxs(Box, { sx: { mt: 2 }, children: [_jsx(Typography, { sx: { fontWeight: 600, mb: 1 }, children: t('translation|To') }), _jsx(NameValueTable, { rows: [
{
name: t('ipBlock'),
value: item.to?.map(to => {
const { cidr, except = [] } = to.ipBlock || {};
if (!cidr) {
return _jsx(_Fragment, {});
}
if (cidr && except.length === 0) {
return _jsx(_Fragment, { children: `cidr: ${cidr}` });
}
return (_jsx(_Fragment, { children: `cidr: ${cidr}, ${t('except: {{ cidrExceptions }}', {
cidrExceptions: except.join(', '),
})}` }));
}),
},
{
name: t('namespaceSelector'),
value: item.to?.map(to => {
if (!to.namespaceSelector) {
return _jsx(_Fragment, {});
}
const { matchLabels = {}, matchExpressions = [] } = to.namespaceSelector || {};
return prepareMatchLabelsAndExpressions(matchLabels, matchExpressions);
}),
},
{
name: t('podSelector'),
value: item.to?.map(to => {
if (!to.podSelector) {
return _jsx(_Fragment, {});
}
const { matchLabels = {}, matchExpressions = [] } = to.podSelector || {};
return prepareMatchLabelsAndExpressions(matchLabels, matchExpressions);
}),
},
] })] }))] }))) }));
}
return (_jsx(DetailsGrid, { resourceType: NetworkPolicy, name: name, namespace: namespace, cluster: cluster, withEvents: true, extraInfo: item => item && [
{
name: t('Pod Selector'),
value: _jsx(PodSelector, { networkPolicy: item }),
},
], extraSections: item => item && [
{
id: 'networkpolicy-ingress',
section: _jsx(Ingress, { ingress: item.jsonData.spec.ingress }),
},
{
id: 'networkpolicy-egress',
section: _jsx(Egress, { egress: item.jsonData.spec.egress }),
},
] }));
}