@kinvolk/headlamp-plugin
Version:
The needed infrastructure for building Headlamp plugins.
92 lines (91 loc) • 5.45 kB
JavaScript
import { jsx as _jsx, 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 { Icon } from '@iconify/react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import React from 'react';
import { useTranslation } from 'react-i18next';
import Link from '../Link';
export function EnvVarGrid(props) {
const { envVars = [], namespace, cluster } = props;
const { t } = useTranslation();
const [expanded, setExpanded] = React.useState(false);
const defaultNumShown = 20;
const validEnvVars = envVars.filter(env => !!env && typeof env.name === 'string' && env.name.trim() !== '');
const EnvEntry = React.forwardRef((props, ref) => {
return (_jsx(Typography, { ...props, sx: theme => ({
color: theme.palette.text.primary,
borderRadius: theme.shape.borderRadius + 'px',
backgroundColor: theme.palette.background.muted,
border: '1px solid',
borderColor: theme.palette.divider,
fontSize: theme.typography.pxToRem(14),
padding: '4px 8px',
marginRight: theme.spacing(1),
whiteSpace: 'nowrap',
display: 'inline-block',
maxWidth: '400px',
overflow: 'hidden',
textOverflow: 'ellipsis',
}), ref: ref }));
});
EnvEntry.displayName = 'EnvEntry';
const renderEnvVar = (envVar) => {
// Fallback:
if (!envVar.name) {
return null;
}
// Secret Key:
if (envVar.valueFrom?.secretKeyRef) {
const { name: secretName, key: secretKey } = envVar.valueFrom.secretKeyRef;
if (!secretName) {
return (_jsxs(EnvEntry, { component: "span", children: [envVar.name, ": ", t('translation|Invalid Secret Reference')] }, envVar.name));
}
const secretUrl = `/c/${encodeURIComponent(cluster)}/secrets/${encodeURIComponent(namespace)}/${encodeURIComponent(secretName)}`;
return (_jsxs(EnvEntry, { component: "span", children: [envVar.name, ":", ' ', _jsxs(Link, { to: secretUrl, style: { textDecoration: 'underline', fontWeight: 'bold' }, children: ["Secret: ", secretName, " ", secretKey ? `(Key: ${secretKey})` : ''] })] }, envVar.name));
}
// Config Map:
if (envVar.valueFrom?.configMapKeyRef) {
const { name: cmName, key: cmKey } = envVar.valueFrom.configMapKeyRef;
if (!cmName) {
return (_jsxs(EnvEntry, { component: "span", children: [envVar.name, ": ", t('translation|Invalid Config Map Reference')] }, envVar.name));
}
const configMapUrl = `/c/${encodeURIComponent(cluster)}/configmaps/${encodeURIComponent(namespace)}/${encodeURIComponent(cmName)}`;
return (_jsxs(EnvEntry, { component: "span", children: [envVar.name, ":", ' ', _jsxs(Link, { to: configMapUrl, style: { textDecoration: 'underline', fontWeight: 'bold' }, children: ["ConfigMap: ", cmName, " ", cmKey ? `(Key: ${cmKey})` : ''] })] }, envVar.name));
}
// FieldRef:
if (envVar.valueFrom?.fieldRef) {
const { fieldPath } = envVar.valueFrom.fieldRef;
return (_jsxs(EnvEntry, { component: "span", children: [envVar.name, ": FieldRef ", fieldPath ? `(${fieldPath})` : t('translation|Invalid fieldRef')] }, envVar.name));
}
// ResourceFieldRef:
if (envVar.valueFrom?.resourceFieldRef) {
const { resource } = envVar.valueFrom.resourceFieldRef;
return (_jsxs(EnvEntry, { component: "span", children: [envVar.name, ": ResourceField", ' ', resource ? `(${resource})` : t('translation|Invalid resourceFieldRef')] }, envVar.name));
}
// Plaintext
return (_jsxs(EnvEntry, { component: "span", children: [envVar.name, ": ", (envVar.value || '').trim()] }, envVar.name));
};
return (_jsxs(Box, { children: [_jsx(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 }, children: validEnvVars
.slice(0, expanded ? validEnvVars.length : defaultNumShown)
.map(env => renderEnvVar(env)) }), validEnvVars.length > defaultNumShown && (_jsx(Button, { onClick: () => setExpanded(!expanded), size: "small", "aria-expanded": expanded, "aria-label": expanded ? t('translation|Show fewer') : t('translation|Show all environment variables'), startIcon: _jsx(Icon, { icon: expanded ? 'mdi:menu-up' : 'mdi:menu-down' }), sx: { mt: 1, mb: 1 }, children: !expanded
? t('translation|Show all environment variables (+{{count}} more)', {
count: validEnvVars.length - defaultNumShown,
})
: t('translation|Show fewer') }))] }));
}