@kinvolk/headlamp-plugin
Version:
The needed infrastructure for building Headlamp plugins.
98 lines (97 loc) • 4.16 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 Box from '@mui/material/Box';
import Breadcrumbs from '@mui/material/Breadcrumbs';
import Link from '@mui/material/Link';
import { useTranslation } from 'react-i18next';
import { getMainNode } from './graph/graphGrouping';
import { KubeIcon } from './kubeIcon/KubeIcon';
/**
* Find a path in graph from root to the selected node
*/
function findSelectionPath(graph, selectedNodeId) {
function dfs(node, path) {
path.push(node);
if (node.id === selectedNodeId) {
return path;
}
if (node.nodes) {
for (const child of node.nodes) {
const result = dfs(child, path);
if (result) {
return result;
}
}
}
path.pop();
return null;
}
const result = dfs(graph, []);
return result || [];
}
export function SelectionBreadcrumbs({ graph, selectedNodeId, onNodeClick, }) {
const { t } = useTranslation();
const path = findSelectionPath(graph, selectedNodeId);
return (_jsx(Breadcrumbs, { maxItems: 4, children: path.map((it, i) => {
const getLabel = (node) => {
if (node.id === 'root') {
return t('translation|Home');
}
if (node.label) {
return node.label;
}
if (node.kubeObject) {
return node.kubeObject.metadata.name;
}
const maybeMainNode = node.nodes ? getMainNode(node.nodes) : undefined;
if (maybeMainNode) {
return maybeMainNode.kubeObject?.metadata.name;
}
return '';
};
const kubeObject = it.kubeObject;
const apiGroup = kubeObject?.jsonData?.apiVersion && kubeObject.jsonData.apiVersion.includes('/')
? kubeObject.jsonData.apiVersion.split('/')[0]
: 'core';
const icon = kubeObject?.kind ? (_jsx(KubeIcon, { kind: kubeObject.kind, apiGroup: apiGroup, width: "24px", height: "24px" })) : null;
const subtitle = it.subtitle ?? it?.kubeObject?.kind;
const subtitleElement = subtitle ? _jsx(Box, { sx: { opacity: 0.7 }, children: subtitle }) : null;
const label = getLabel(it);
return i === path.length - 1 ? (_jsxs(Box, { title: label, sx: {
display: 'flex',
gap: 0.5,
maxWidth: '200px',
whiteSpace: 'nowrap',
overflow: 'hidden',
}, children: [icon, " ", subtitleElement, ' ', _jsx(Box, { sx: {
overflow: 'hidden',
textOverflow: 'ellipsis',
}, children: label })] }, it.id)) : (_jsxs(Link, { onClick: () => onNodeClick(it.id), title: label, sx: {
display: 'flex',
gap: 0.5,
textTransform: 'unset',
maxWidth: '200px',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
cursor: 'pointer',
}, children: [icon, " ", subtitleElement, ' ', _jsx(Box, { sx: {
overflow: 'hidden',
textOverflow: 'ellipsis',
}, children: label })] }, it.id));
}) }));
}