@kinvolk/headlamp-plugin
Version:
The needed infrastructure for building Headlamp plugins.
83 lines (82 loc) • 4.25 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 Typography from '@mui/material/Typography';
import { TreeItem } from '@mui/x-tree-view/TreeItem';
import { TreeView } from '@mui/x-tree-view/TreeView';
// import * as buffer from 'buffer';
import React from 'react';
import { useTranslation } from 'react-i18next';
import getDocDefinitions from '../../../lib/docs';
import Empty from '../EmptyContent';
import Loader from '../Loader';
function DocsViewer(props) {
const { docSpecs } = props;
const [docs, setDocs] = React.useState([]);
const [docsLoading, setDocsLoading] = React.useState(false);
const { t } = useTranslation();
React.useEffect(() => {
setDocsLoading(true);
// fetch docSpecs for all the resources specified
Promise.allSettled(docSpecs.map((docSpec) => {
return getDocDefinitions(docSpec.apiVersion, docSpec.kind);
}))
.then(values => {
const docSpecsFromApi = values.map((value, index) => {
if (value.status === 'fulfilled') {
return {
data: value.value,
error: null,
kind: docSpecs[index].kind,
};
}
else if (value.status === 'rejected') {
return {
data: null,
error: value.reason,
kind: docSpecs[index].kind,
};
}
});
setDocsLoading(false);
setDocs(docSpecsFromApi);
})
.catch(() => {
setDocsLoading(false);
});
}, [docSpecs]);
function makeItems(name, value, key) {
return (_jsxs(TreeItem, { nodeId: `${key}`, label: _jsxs("div", { children: [_jsx(Typography, { display: "inline", children: name }), "\u00A0", _jsxs(Typography, { display: "inline", color: "textSecondary", variant: "caption", children: ["(", value.type, ")"] })] }), children: [_jsx(Typography, { color: "textSecondary", children: value.description }), Object.entries(value.properties || {}).map(([name, value], i) => makeItems(name, value, `${key}_${i}`))] }, key));
}
return (_jsx(_Fragment, { children: docsLoading ? (_jsx(Loader, { title: t('Loading documentation') })) : docs.length === 0 ? (_jsx(Empty, { children: t('No documentation available.') })) : (docs.map((docSpec, idx) => {
if (!docSpec.error && !docSpec.data) {
return (_jsx(Empty, { children: t('No documentation for type {{ docsType }}.', {
docsType: docSpec?.kind?.trim() || '""',
}) }, `empty_msg_${idx}`));
}
if (docSpec.error) {
return (_jsx(Empty, { color: "error", children: docSpec.error.message }, `empty_msg_${idx}`));
}
if (docSpec.data) {
return (_jsxs(Box, { p: 2, children: [_jsx(Typography, { children: t('Showing documentation for: {{ docsType }}', {
docsType: docSpec.kind.trim(),
}) }), _jsx(TreeView, { sx: { flexGrow: 1, maxWidth: 400 }, defaultCollapseIcon: _jsx(Icon, { icon: "mdi:chevron-down" }), defaultExpandIcon: _jsx(Icon, { icon: "mdi:chevron-right" }), children: Object.entries(docSpec.data.properties || {}).map(([name, value], i) => makeItems(name, value, i.toString())) })] }, `docs_${idx}`));
}
})) }));
}
export default DocsViewer;