@kinvolk/headlamp-plugin
Version:
The needed infrastructure for building Headlamp plugins.
127 lines (126 loc) • 5.69 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 Grid from '@mui/material/Grid';
import React, { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import CronJob from '../../lib/k8s/cronJob';
import DaemonSet from '../../lib/k8s/daemonSet';
import Deployment from '../../lib/k8s/deployment';
import Job from '../../lib/k8s/job';
import JobSet from '../../lib/k8s/jobSet';
import Pod from '../../lib/k8s/pod';
import ReplicaSet from '../../lib/k8s/replicaSet';
import StatefulSet from '../../lib/k8s/statefulSet';
import { getReadyReplicas, getTotalReplicas } from '../../lib/util';
import Link from '../common/Link';
import { PageGrid } from '../common/Resource';
import ResourceListView from '../common/Resource/ResourceListView';
import { SectionBox } from '../common/SectionBox';
import { WorkloadCircleChart } from './Charts';
export default function Overview() {
const [pods] = Pod.useList();
const [deployments] = Deployment.useList();
const [statefulSets] = StatefulSet.useList();
const [daemonSets] = DaemonSet.useList();
const [replicaSets] = ReplicaSet.useList();
const [jobs] = Job.useList();
const [cronJobs] = CronJob.useList();
const [jobSets] = JobSet.useList();
const workloadsData = useMemo(() => ({
Pod: pods ?? [],
Deployment: deployments ?? [],
StatefulSet: statefulSets ?? [],
DaemonSet: daemonSets ?? [],
ReplicaSet: replicaSets ?? [],
Job: jobs ?? [],
CronJob: cronJobs ?? [],
JobSet: jobSets ?? [],
}), [pods, deployments, statefulSets, daemonSets, replicaSets, jobs, cronJobs, jobSets]);
const { t } = useTranslation('glossary');
function getPods(item) {
return `${getReadyReplicas(item)}/${getTotalReplicas(item)}`;
}
function sortByReplicas(w1, w2) {
const totalReplicasDiff = getTotalReplicas(w1) - getTotalReplicas(w2);
if (totalReplicasDiff === 0) {
return getReadyReplicas(w1) - getReadyReplicas(w2);
}
return totalReplicasDiff;
}
// All items except the pods since those shouldn't be shown in the table (only the chart).
const jointItems = React.useMemo(() => {
let joint = [];
// Get all items except the pods since those shouldn't be shown in the table (only the chart).
for (const [key, items] of Object.entries(workloadsData)) {
if (key === 'Pod') {
continue;
}
joint = joint.concat(items);
}
joint = joint.filter(Boolean);
// Return null if no items are yet loaded, so we show the spinner in the table.
if (joint.some(it => it === undefined)) {
return null;
}
return joint;
}, [workloadsData]);
const workloads = [
Pod,
Deployment,
StatefulSet,
DaemonSet,
ReplicaSet,
Job,
CronJob,
JobSet,
];
const workloadLabel = {
[Pod.className]: t('glossary|Pods'),
[Deployment.className]: t('glossary|Deployments'),
[StatefulSet.className]: t('glossary|Stateful Sets'),
[DaemonSet.className]: t('glossary|Daemon Sets'),
[ReplicaSet.className]: t('glossary|Replica Sets'),
[Job.className]: t('glossary|Jobs'),
[CronJob.className]: t('glossary|Cron Jobs'),
[JobSet.className]: t('glossary|Job Sets'),
};
function ChartLink({ workload }) {
return _jsx(Link, { routeName: workload.pluralName, children: workloadLabel[workload.className] });
}
return (_jsxs(PageGrid, { children: [_jsx(SectionBox, { py: 2, mt: 1, children: _jsx(Grid, { container: true, justifyContent: "flex-start", alignItems: "flex-start", spacing: 2, children: workloads.map(workload => (_jsx(Grid, { item: true, lg: 3, md: 4, xs: 6, style: { minWidth: 0 }, children: _jsx(WorkloadCircleChart, { workloadData: workloadsData[workload.className] || null, title: _jsx(ChartLink, { workload: workload }), partialLabel: t('translation|Failed'), totalLabel: t('translation|Running') }) }, workload.className))) }) }), _jsx(ResourceListView, { title: t('Workloads'), reflectInURL: true, columns: [
'kind',
{
id: 'name',
label: t('translation|Name'),
gridTemplate: 'auto',
getValue: item => item.metadata.name,
render: item => _jsx(Link, { kubeObject: item }),
},
'namespace',
'cluster',
{
id: 'pods',
label: t('Pods'),
gridTemplate: 'min-content',
getValue: item => item && getPods(item),
sort: sortByReplicas,
},
'age',
], data: jointItems, headerProps: {
noNamespaceFilter: false,
}, id: "headlamp-workloads" })] }));
}