26 lines
825 B
TypeScript
26 lines
825 B
TypeScript
import Skeleton from 'react-loading-skeleton';
|
|
|
|
import { Alert, Text } from '@grafana/ui';
|
|
|
|
import { useGetAffectedItemsQuery } from '../../api/browseDashboardsAPI';
|
|
import { DashboardTreeSelection } from '../../types';
|
|
|
|
import { buildBreakdownString } from './utils';
|
|
|
|
export interface Props {
|
|
selectedItems: DashboardTreeSelection;
|
|
}
|
|
|
|
export const DescendantCount = ({ selectedItems }: Props) => {
|
|
const { data, isFetching, isLoading, error } = useGetAffectedItemsQuery(selectedItems);
|
|
|
|
return error ? (
|
|
<Alert severity="error" title="Unable to retrieve descendant information" />
|
|
) : (
|
|
<Text element="p" color="secondary">
|
|
{data && buildBreakdownString(data.folder, data.dashboard, data.libraryPanel, data.alertRule)}
|
|
{(isFetching || isLoading) && <Skeleton width={200} />}
|
|
</Text>
|
|
);
|
|
};
|