portainer/app/react/kubernetes/dashboard/DashboardView.tsx

146 lines
5.0 KiB
TypeScript

import { Box, Database, FileCode, Layers, Lock, Shuffle } from 'lucide-react';
import { useQueryClient } from 'react-query';
import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
import Route from '@/assets/ico/route.svg?c';
import { DashboardGrid } from '@@/DashboardItem/DashboardGrid';
import { DashboardItem } from '@@/DashboardItem/DashboardItem';
import { PageHeader } from '@@/PageHeader';
import { useApplicationsForCluster } from '../applications/application.queries';
import { usePVCsForCluster } from '../volumes/queries';
import { useServicesForCluster } from '../services/service';
import { useIngresses } from '../ingresses/queries';
import { useConfigMapsForCluster } from '../configs/configmap.service';
import { useSecretsForCluster } from '../configs/secret.service';
import { useNamespacesQuery } from '../namespaces/queries/useNamespacesQuery';
import { EnvironmentInfo } from './EnvironmentInfo';
export function DashboardView() {
const queryClient = useQueryClient();
const environmentId = useEnvironmentId();
const { data: namespaces, ...namespacesQuery } =
useNamespacesQuery(environmentId);
const namespaceNames = namespaces && Object.keys(namespaces);
const { data: applications, ...applicationsQuery } =
useApplicationsForCluster(environmentId, namespaceNames);
const { data: pvcs, ...pvcsQuery } = usePVCsForCluster(
environmentId,
namespaceNames
);
const { data: services, ...servicesQuery } = useServicesForCluster(
environmentId,
namespaceNames
);
const { data: ingresses, ...ingressesQuery } = useIngresses(
environmentId,
namespaceNames
);
const { data: configMaps, ...configMapsQuery } = useConfigMapsForCluster(
environmentId,
namespaceNames
);
const { data: secrets, ...secretsQuery } = useSecretsForCluster(
environmentId,
namespaceNames
);
return (
<>
<PageHeader
title="Dashboard"
breadcrumbs={[{ label: 'Environment summary' }]}
reload
onReload={() =>
queryClient.invalidateQueries(['environments', environmentId])
}
/>
<div className="col-sm-12 flex flex-col gap-y-5">
<EnvironmentInfo />
<DashboardGrid>
<DashboardItem
value={namespaceNames?.length}
isLoading={namespacesQuery.isLoading}
isRefetching={namespacesQuery.isRefetching}
icon={Layers}
to="kubernetes.resourcePools"
type="Namespace"
dataCy="dashboard-namespace"
/>
<DashboardItem
value={applications?.length}
isLoading={applicationsQuery.isLoading || namespacesQuery.isLoading}
isRefetching={
applicationsQuery.isRefetching || namespacesQuery.isRefetching
}
icon={Box}
to="kubernetes.applications"
type="Application"
dataCy="dashboard-application"
/>
<DashboardItem
value={services?.length}
isLoading={servicesQuery.isLoading || namespacesQuery.isLoading}
isRefetching={
servicesQuery.isRefetching || namespacesQuery.isRefetching
}
icon={Shuffle}
to="kubernetes.services"
type="Service"
dataCy="dashboard-service"
/>
<DashboardItem
value={ingresses?.length}
isLoading={ingressesQuery.isLoading || namespacesQuery.isLoading}
isRefetching={
ingressesQuery.isRefetching || namespacesQuery.isRefetching
}
icon={Route}
to="kubernetes.ingresses"
type="Ingress"
pluralType="Ingresses"
dataCy="dashboard-ingress"
/>
<DashboardItem
value={configMaps?.length}
isLoading={configMapsQuery.isLoading || namespacesQuery.isLoading}
isRefetching={
configMapsQuery.isRefetching || namespacesQuery.isRefetching
}
icon={FileCode}
to="kubernetes.configurations"
params={{ tab: 'configmaps' }}
type="ConfigMap"
dataCy="dashboard-configmaps"
/>
<DashboardItem
value={secrets?.length}
isLoading={secretsQuery.isLoading || namespacesQuery.isLoading}
isRefetching={
secretsQuery.isRefetching || namespacesQuery.isRefetching
}
icon={Lock}
to="kubernetes.configurations"
params={{ tab: 'secrets' }}
type="Secret"
dataCy="dashboard-secrets"
/>
<DashboardItem
value={pvcs?.length}
isLoading={pvcsQuery.isLoading || namespacesQuery.isLoading}
isRefetching={
pvcsQuery.isRefetching || namespacesQuery.isRefetching
}
icon={Database}
to="kubernetes.volumes"
type="Volume"
dataCy="dashboard-volume"
/>
</DashboardGrid>
</div>
</>
);
}