@kinvolk/headlamp-plugin
Version:
The needed infrastructure for building Headlamp plugins.
86 lines (85 loc) • 4.39 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 { isEqual } from 'lodash';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { useHistory } from 'react-router-dom';
import { isElectron } from '../../../helpers/isElectron';
import { useClustersConf, useClustersVersion } from '../../../lib/k8s';
import Event from '../../../lib/k8s/event';
import { createRouteURL } from '../../../lib/router';
import { PageGrid } from '../../common/Resource';
import SectionBox from '../../common/SectionBox';
import SectionFilterHeader from '../../common/SectionFilterHeader';
import ClusterTable from './ClusterTable';
import { ENABLE_RECENT_CLUSTERS } from './config';
import { getCustomClusterNames } from './customClusterNames';
import RecentClusters from './RecentClusters';
export default function Home() {
const history = useHistory();
const clusters = useClustersConf() || {};
if (!isElectron() && Object.keys(clusters).length === 1) {
history.push(createRouteURL('cluster', { cluster: Object.keys(clusters)[0] }));
return null;
}
return _jsx(HomeComponent, { clusters: clusters }, Object.keys(clusters).join(''));
}
function useWarningSettingsPerCluster(clusterNames) {
const warningsMap = Event.useWarningList(clusterNames);
const [warningLabels, setWarningLabels] = React.useState({});
const maxWarnings = 50;
function renderWarningsText(warnings, clusterName) {
const numWarnings = (!!warnings[clusterName]?.error && -1) || (warnings[clusterName]?.warnings?.length ?? -1);
if (numWarnings === -1) {
return '⋯';
}
if (numWarnings >= maxWarnings) {
return `${maxWarnings}+`;
}
return numWarnings.toString();
}
React.useEffect(() => {
setWarningLabels(currentWarningLabels => {
const newWarningLabels = {};
for (const cluster of clusterNames) {
newWarningLabels[cluster] = renderWarningsText(warningsMap, cluster);
}
if (!isEqual(newWarningLabels, currentWarningLabels)) {
return newWarningLabels;
}
return currentWarningLabels;
});
}, [warningsMap]);
return warningLabels;
}
function HomeComponent(props) {
const { clusters } = props;
const [customNameClusters, setCustomNameClusters] = React.useState(getCustomClusterNames(clusters));
const { t } = useTranslation(['translation', 'glossary']);
const [versions, errors] = useClustersVersion(Object.values(clusters));
const warningLabels = useWarningSettingsPerCluster(Object.values(customNameClusters).map(c => c.name));
React.useEffect(() => {
setCustomNameClusters(currentNames => {
if (isEqual(currentNames, getCustomClusterNames(clusters))) {
return currentNames;
}
return getCustomClusterNames(clusters);
});
}, [customNameClusters]);
const memoizedComponent = React.useMemo(() => (_jsxs(PageGrid, { children: [ENABLE_RECENT_CLUSTERS && (_jsx(SectionBox, { headerProps: { headerStyle: 'main' }, title: t('Home'), children: _jsx(RecentClusters, { clusters: Object.values(customNameClusters), onButtonClick: () => { } }) })), _jsx(SectionBox, { title: _jsx(SectionFilterHeader, { title: t('All Clusters'), noNamespaceFilter: true, headerStyle: ENABLE_RECENT_CLUSTERS ? 'subsection' : 'main' }), headerProps: ENABLE_RECENT_CLUSTERS ? { headerStyle: 'main' } : undefined, children: _jsx(ClusterTable, { customNameClusters: customNameClusters, versions: versions, errors: errors, warningLabels: warningLabels, clusters: clusters }) })] })), [customNameClusters, errors, versions, warningLabels]);
return memoizedComponent;
}