Delete/ingestor

src/hooks/useClusterInfo.ts

@@ -18,6 +18,7 @@ export const useClusterInfo = () => {
 	} = useQuery<AxiosResponse<Ingestor[]>, Error>(['fetch-cluster-info'], () => getClusterInfo(), {
 		retry: false,
 		refetchOnWindowFocus: false,
+		enabled: false,
 		onSuccess: (data) => {
 			setClusterStore((store) => setIngestorMachines(store, data.data));
 		},

src/pages/Systems/DeleteIngestorModal.tsx

@@ -0,0 +1,79 @@
+import { Stack, Text, Group, Button, Modal } from '@mantine/core';
+import { useClusterInfo, useDeleteIngestor } from '@/hooks/useClusterInfo';
+import { useClusterStore, clusterStoreReducers } from './providers/ClusterProvider';
+import classes from './styles/Systems.module.css';
+import { useCallback } from 'react';
+
+function sanitizeIngestorUrl(url: string) {
+	if (url.startsWith('http://')) {
+		url = url.slice(7);
+	} else if (url.startsWith('https://')) {
+		url = url.slice(8);
+	}
+
+	if (url.endsWith('/')) {
+		url = url.slice(0, -1);
+	}
+
+	return url;
+}
+
+const { setCurrentMachine } = clusterStoreReducers;
+
+const ModalTitle = () => {
+	return <Text style={{ fontWeight: 600 }}>Confirm Delete</Text>;
+};
+
+export default function DeleteIngestorModal(props: { modalOpened: boolean; closeModal: () => void }) {
+	const { deleteIngestorMutation, deleteIngestorIsLoading } = useDeleteIngestor();
+	const { getClusterInfoRefetch } = useClusterInfo();
+	const [currentMachineAddress, setClusterStore] = useClusterStore((store) => store.currentMachine);
+	const [currentMachineType] = useClusterStore((store) => store.currentMachineType);
+
+	const onDeleteIngestorSuccess = useCallback(() => {
+		getClusterInfoRefetch();
+		setClusterStore((store) => setCurrentMachine(store, store.querierMachine.domain_name, 'querier'));
+		props.closeModal();
+	}, []);
+
+	const deleteIngestor = useCallback(() => {
+		if (!currentMachineAddress || currentMachineType !== 'ingestor') return;
+
+		deleteIngestorMutation({
+			ingestorUrl: sanitizeIngestorUrl(currentMachineAddress),
+			onSuccess: onDeleteIngestorSuccess,
+		});
+	}, [currentMachineAddress, currentMachineType]);
+
+	return (
+		<Modal
+			styles={{ header: { paddingBottom: '0rem' } }}
+			opened={props.modalOpened}
+			onClose={props.closeModal}
+			title={<ModalTitle />}
+			centered
+			size="36rem">
+			{currentMachineAddress ? (
+				<Stack style={{ paddingBottom: '0rem' }} gap={24}>
+					<Stack gap={0}>
+						<Text style={{ fontSize: '0.8rem' }}>Do you want to delete {currentMachineAddress} ? </Text>
+					</Stack>
+					<Group justify="flex-end">
+						<Button
+							className={classes.deleteBtn}
+							loading={deleteIngestorIsLoading}
+							onClick={deleteIngestor}
+							variant="filled">
+							Delete
+						</Button>
+						<Button onClick={props.closeModal} variant="default">
+							Cancel
+						</Button>
+					</Group>
+				</Stack>
+			) : (
+				<Text fw={500}>Cannot Load Ingestor Address</Text>
+			)}
+		</Modal>
+	);
+}

src/pages/Systems/MachineInfo.tsx

@@ -1,14 +1,17 @@
-import { Skeleton, Stack, Group, Text, ThemeIcon, Tooltip, CopyButton, ActionIcon } from '@mantine/core';
+import { Skeleton, Stack, Group, Text, ThemeIcon, Tooltip, CopyButton, ActionIcon, px } from '@mantine/core';
 import { useClusterStore } from './providers/ClusterProvider';
 import classes from './styles/Systems.module.css';
 import { HumanizeNumber, formatBytes } from '@/utils/formatBytes';
 import { Sparkline } from '@mantine/charts';
 import _ from 'lodash';
 import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
+import DeleteIngestorModal from './DeleteIngestorModal';
 import { useCallback, useEffect, useState } from 'react';
 import { PrometheusMetricResponse, SanitizedMetrics, parsePrometheusResponse, sanitizeIngestorData } from './utils';
-import { IconAlertCircle, IconCheck, IconCopy } from '@tabler/icons-react';
+import { IconAlertCircle, IconTrash, IconCheck, IconCopy } from '@tabler/icons-react';
+import IconButton from '@/components/Button/IconButton';
 
+const renderDeleteIcon = () => <IconTrash size={px('1rem')} stroke={1.5} />;
 const fetchIngestorMetrics = async () => {
 	const endpoint = `/api/v1/metrics`;
 	const response = await fetch(endpoint, {
@@ -60,7 +63,13 @@ const useFetchQuerierMetrics = () => {
 	return { isQuerierMetricsFetching: isMetricsFetching, metrics, fetchQuerierMetrics: fetchData };
 };
 
-const InfoItem = (props: { title: string; value: string; width?: string; loading?: boolean; showCopyBtn?: boolean }) => {
+const InfoItem = (props: {
+	title: string;
+	value: string;
+	width?: string;
+	loading?: boolean;
+	showCopyBtn?: boolean;
+}) => {
 	return (
 		<Stack w={props.width ? props.width : '25%'} gap={4}>
 			<Group gap={0}>
@@ -100,32 +109,48 @@ const InfoItem = (props: { title: string; value: string; width?: string; loading
 };
 
 const IngestorInfo = () => {
+	const [isDeleteModalOpen, setDeleteModalOpen] = useState(false);
 	const [recentRecord] = useClusterStore((store) => store.currentMachineRecentRecord);
 	const [ingestorMachines] = useClusterStore((store) => store.ingestorMachines);
 	const ingestor = _.find(ingestorMachines, (ingestor) => ingestor.domain_name === recentRecord?.address);
+	const [selectedMachine] = useClusterStore((store) => store.currentMachine);
+	const ingestorInfo = _.find(ingestorMachines, (ingestor) => ingestor.domain_name === selectedMachine);
 	const error = ingestor ? ingestor.error : null || null;
+	const toggleDeleteModal = useCallback(() => {
+		setDeleteModalOpen((prev) => !prev);
+	}, []);
 	return (
 		<Stack style={{ width: '70%', height: '100%' }} className={classes.machineInfoSection}>
 			<Stack style={{ flexDirection: 'row', alignItems: 'center' }} gap={8}>
-				<Text fw={500}>Instance Info</Text>
-				{error && (
-					<Tooltip label={error}>
-						<ThemeIcon className={classes.infoIcon} variant="filled" size="sm">
-							<IconAlertCircle stroke={1.5} />
-						</ThemeIcon>
-					</Tooltip>
-				)}
+				<Group style={{ justifyContent: 'space-between', width: '100%' }}>
+					<Group>
+						<Text fw={500}>Instance Info</Text>
+						{error && (
+							<Tooltip label={error}>
+								<ThemeIcon className={classes.infoIcon} variant="filled" size="sm">
+									<IconAlertCircle stroke={1.5} />
+								</ThemeIcon>
+							</Tooltip>
+						)}
+					</Group>
+					{!ingestorInfo?.reachable ? (
+						<IconButton renderIcon={renderDeleteIcon} size={38} onClick={toggleDeleteModal} tooltipLabel="Delete" />
+					) : null}
+				</Group>
 			</Stack>
+
+			<DeleteIngestorModal modalOpened={isDeleteModalOpen} closeModal={toggleDeleteModal} />
+
 			<Stack flex={1} style={{ justifyContent: 'space-around' }}>
 				<Stack style={{ width: '100%', flexDirection: 'row' }}>
-					<InfoItem title="Address" value={recentRecord?.address || ''} showCopyBtn />
-					<InfoItem title="Cache" value={recentRecord?.cache || ''} />
+					<InfoItem title="Address" value={ingestorInfo?.domain_name || '–'} showCopyBtn />
+					<InfoItem title="Cache" value={recentRecord?.cache || '–'} />
 					<InfoItem title="Staging Files" value={HumanizeNumber(recentRecord?.parseable_staging_files || 0)} />
 					<InfoItem title="Staging Size" value={formatBytes(recentRecord?.parseable_storage_size_staging || 0) || ''} />
 				</Stack>
 				<Stack style={{ width: '100%', flexDirection: 'row' }}>
-					<InfoItem title="Commit" value={recentRecord?.commit || ''} />
-					<InfoItem title="Staging Directory" width="75%" value={recentRecord?.staging || ''} />
+					<InfoItem title="Commit" value={recentRecord?.commit || '–'} />
+					<InfoItem title="Staging Directory" width="75%" value={ingestorInfo?.staging_path || '–'} />
 				</Stack>
 			</Stack>
 		</Stack>