@kinvolk/headlamp-plugin/lib/components/crd/CustomResourceInstancesList.js

The needed infrastructure for building Headlamp plugins.

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 Alert from '@mui/material/Alert';
import AlertTitle from '@mui/material/AlertTitle';
import { useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import CRD from '../../lib/k8s/crd';
import { useNamespaces } from '../../redux/filterSlice';
import { EmptyContent as Empty, Link, Loader, ResourceListView, ShowHideLabel } from '../common/';
function CrInstancesView({ crds }) {
    const { t } = useTranslation(['glossary', 'translation']);
    const dataClassCrds = crds.map(crd => {
        const crdClass = crd.makeCRClass();
        // eslint-disable-next-line react-hooks/rules-of-hooks
        const data = crdClass.useList({ cluster: crd.cluster, namespace: useNamespaces() });
        return { data, crdClass, crd };
    });
    const queries = dataClassCrds.map(it => it.data);
    const [isWarningClosed, setIsWarningClosed] = useState(false);
    const { crInstancesList, getCRDForCR, isLoading, crdsFailedToLoad, allFailed } = useMemo(() => {
        const isLoading = queries.some(it => it.isLoading || it.isFetching);
        // Collect the names of CRD that failed to load lists
        const crdsFailedToLoad = [];
        queries.forEach((it, i) => {
            if (it.isError) {
                crdsFailedToLoad.push(crds[i].metadata.name);
            }
        });
        // Create a map to be able to link to CRD by CR kind
        const crKindToCRDMap = queries.reduce((acc, { items }, index) => {
            if (items?.[0]) {
                acc[items[0].kind] = crds[index];
            }
            return acc;
        }, {});
        const getCRDForCR = (cr) => crKindToCRDMap[cr.kind];
        return {
            crInstancesList: queries.flatMap(it => it.items ?? []),
            getCRDForCR,
            isLoading,
            crdsFailedToLoad,
            allFailed: crdsFailedToLoad.length === queries.length,
        };
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, queries);
    if (isLoading) {
        return _jsx(Loader, { title: t('translation|Loading custom resource instances') });
    }
    if (crInstancesList.length === 0) {
        return _jsx(Empty, { children: t('translation|No custom resources instances found.') });
    }
    return (_jsxs(_Fragment, { children: [crdsFailedToLoad.length > 0 && !allFailed && !isWarningClosed && (_jsxs(Alert, { severity: "warning", variant: "outlined", onClose: () => setIsWarningClosed(true), sx: theme => ({ margin: theme.spacing(2, 2, 0, 2) }), children: [_jsx(AlertTitle, { children: t('translation|Failed to load custom resource instances') }), _jsx(ShowHideLabel, { children: crdsFailedToLoad.join(', ') })] })), _jsx(ResourceListView, { title: "Custom Resource Instances", headerProps: {
                    noNamespaceFilter: false,
                }, errorMessage: allFailed ? t('translation|Failed to load custom resource instances') : undefined, data: crInstancesList, columns: [
                    {
                        label: 'Instance name',
                        getValue: cr => {
                            return cr.metadata.name;
                        },
                        render: cr => {
                            return (_jsx(Link, { routeName: "customresource", params: {
                                    crName: cr.metadata.name,
                                    crd: getCRDForCR(cr).metadata.name,
                                    namespace: cr.metadata.namespace ?? '-',
                                }, activeCluster: cr.cluster, children: cr.metadata.name }));
                        },
                    },
                    {
                        label: 'CRD',
                        filterVariant: 'multi-select',
                        getValue: cr => cr.kind,
                        render: cr => {
                            return (_jsx(Link, { routeName: "crd", params: {
                                    name: getCRDForCR(cr).metadata.name,
                                }, activeCluster: cr.cluster, children: cr.kind }));
                        },
                    },
                    'cluster',
                    {
                        label: 'Categories',
                        getValue: cr => {
                            const categories = getCRDForCR(cr).jsonData.status?.acceptedNames?.categories;
                            return categories !== undefined ? categories.toString().split(',').join(', ') : '';
                        },
                    },
                    'namespace',
                    'labels',
                    'age',
                ] })] }));
}
export function CrInstanceList() {
    const { t } = useTranslation(['glossary', 'translation']);
    const { items: crds, error: crdsError, isLoading: isLoadingCRDs, } = CRD.useList({ namespace: useNamespaces() });
    if (crdsError) {
        return (_jsx(Empty, { color: "error", children: t('translation|Error getting custom resource definitions: {{ errorMessage }}', {
                errorMessage: crdsError,
            }) }));
    }
    if (isLoadingCRDs || !crds) {
        return _jsx(Loader, { title: t('translation|Loading custom resource definitions') });
    }
    return _jsx(CrInstancesView, { crds: crds }, crds.map(it => it.metadata.name).join(','));
}