From ba5d2a89d905f5216ea9e0b0aa18e44c5d986e43 Mon Sep 17 00:00:00 2001
From: Koustav Das <78158736+Koustavd18@users.noreply.github.com>
Date: Thu, 23 Jan 2025 17:44:45 +0530
Subject: [PATCH] fix: hot tier refresh (#429)

---
 src/hooks/useHotTier.ts                      |  1 +
 src/pages/Stream/Views/Manage/Management.tsx |  1 +
 src/pages/Stream/Views/Manage/Settings.tsx   | 57 +++++++++++++++-----
 3 files changed, 45 insertions(+), 14 deletions(-)

diff --git a/src/hooks/useHotTier.ts b/src/hooks/useHotTier.ts
index ecd928e1..a38e6204 100644
--- a/src/hooks/useHotTier.ts
+++ b/src/hooks/useHotTier.ts
@@ -63,6 +63,7 @@ export const useHotTier = (streamName: string, hasSettingsAccess: boolean) => {
 	return {
 		getHotTierInfoError,
 		getHotTierInfoLoading,
+		refetchHotTierInfo,
 		updateHotTier,
 		deleteHotTier,
 		isDeleting,
diff --git a/src/pages/Stream/Views/Manage/Management.tsx b/src/pages/Stream/Views/Manage/Management.tsx
index 9c993a9e..42b7d871 100644
--- a/src/pages/Stream/Views/Manage/Management.tsx
+++ b/src/pages/Stream/Views/Manage/Management.tsx
@@ -44,6 +44,7 @@ const Management = (props: { schemaLoading: boolean }) => {
 						isLoading={isHotTierLoading || isRetentionLoading}
 						updateRetentionConfig={getRetentionConfig.updateLogStreamRetention}
 						updateHotTierInfo={hotTierFetch.updateHotTier}
+						refetchHotTierInfo={hotTierFetch.refetchHotTierInfo}
 						deleteHotTierInfo={hotTierFetch.deleteHotTier}
 						isDeleting={hotTierFetch.isDeleting}
 						isUpdating={hotTierFetch.isUpdating}
diff --git a/src/pages/Stream/Views/Manage/Settings.tsx b/src/pages/Stream/Views/Manage/Settings.tsx
index d291851e..f53ba9d0 100644
--- a/src/pages/Stream/Views/Manage/Settings.tsx
+++ b/src/pages/Stream/Views/Manage/Settings.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Divider, Loader, Modal, NumberInput, Stack, TextInput } from '@mantine/core';
+import { Box, Button, Divider, Group, Loader, Modal, NumberInput, px, Stack, TextInput } from '@mantine/core';
 import classes from '../../styles/Management.module.css';
 import { Text } from '@mantine/core';
 import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
@@ -6,14 +6,17 @@ import { useForm } from '@mantine/form';
 import _ from 'lodash';
 import { useCallback, useEffect, useState } from 'react';
 import { useStreamStore } from '../../providers/StreamProvider';
-import { IconCheck, IconTrash, IconX } from '@tabler/icons-react';
+import { IconCheck, IconX, IconReload } from '@tabler/icons-react';
 import { sanitizeBytes, convertGibToBytes } from '@/utils/formatBytes';
 import timeRangeUtils from '@/utils/timeRangeUtils';
 import ErrorView from './ErrorView';
 import RestrictedView from '@/components/Misc/RestrictedView';
+import IconButton from '@/components/Button/IconButton';
 
 const { formatDateWithTimezone } = timeRangeUtils;
 
+const renderRefreshIcon = () => <IconReload size={px('1rem')} stroke={1.5} />;
+
 const Header = () => {
 	return (
 		<Stack className={classes.headerContainer} style={{ minHeight: '3rem', maxHeight: '3rem' }}>
@@ -168,6 +171,7 @@ const DeleteHotTierModal = (props: {
 
 const HotTierConfig = (props: {
 	updateHotTierInfo: ({ size }: { size: string }) => void;
+	refetchHotTierInfo: () => void;
 	deleteHotTierInfo: ({ onSuccess }: { onSuccess: () => void }) => void;
 	isDeleting: boolean;
 	isUpdating: boolean;
@@ -228,21 +232,23 @@ const HotTierConfig = (props: {
 			/>
 			<Stack style={{ flexDirection: 'row', justifyContent: 'space-between' }} gap={8}>
 				<Text className={classes.fieldTitle}>Hot Tier Storage Size</Text>
-				{!hotTierNotSet && streamType === 'UserDefined' ? (
-					<IconTrash onClick={openDeleteModal} stroke={1.2} size="1.2rem" className={classes.deleteIcon} />
+				{!hotTierNotSet ? (
+					<Group style={{ justifyContent: 'end' }}>
+						<IconButton
+							size={38}
+							renderIcon={renderRefreshIcon}
+							onClick={props.refetchHotTierInfo}
+							tooltipLabel="Refresh now"
+						/>
+					</Group>
 				) : null}
 			</Stack>
-			<Stack style={{ flexDirection: 'row', justifyContent: 'space-between', height: '3.8rem' }}>
-				<Stack gap={4} style={{ ...(hotTierNotSet ? { display: 'none' } : {}) }}>
-					<Text className={classes.fieldDescription}>Oldest Record:</Text>
-					<Text className={classes.fieldDescription}>
-						{_.isEmpty(oldestEntry) ? 'No Entries Stored' : formatDateWithTimezone(oldestEntry)}
-					</Text>
-				</Stack>
+			<Stack style={{ flexDirection: 'row', height: '6.8rem' }}>
 				<Stack style={{ width: hotTierNotSet ? '100%' : '50%' }} gap={isDirty || hotTierNotSet ? 16 : 4}>
-					<Stack style={{}} gap={12}>
+					<Stack gap={12}>
 						{streamType === 'UserDefined' ? (
 							<NumberInput
+								w={hotTierNotSet ? '100%' : '50%'}
 								classNames={{ label: classes.fieldDescription }}
 								placeholder="Size in GiB"
 								key="size"
@@ -257,7 +263,7 @@ const HotTierConfig = (props: {
 						) : null}
 						<Text
 							className={classes.fieldDescription}
-							ta="end"
+							ta="start"
 							style={{ ...(isDirty || hotTierNotSet ? { display: 'none' } : {}) }}>
 							{humanizedUsedSize} used | {humanizedAvailableSize} available
 						</Text>
@@ -265,7 +271,7 @@ const HotTierConfig = (props: {
 					<Stack
 						style={{
 							flexDirection: 'row',
-							justifyContent: 'flex-end',
+							justifyContent: 'flex-start',
 							...(!isDirty || hotTierNotSet ? { display: 'none' } : {}),
 						}}
 						gap={12}>
@@ -289,6 +295,18 @@ const HotTierConfig = (props: {
 						</Stack>
 						{props.isUpdating && <Loader size="sm" />}
 					</Stack>
+
+					{!hotTierNotSet && streamType === 'UserDefined' ? (
+						<Stack
+							style={{ alignItems: 'flex-start', paddingTop: '0.8rem', ...(hotTierNotSet ? { display: 'none' } : {}) }}>
+							<Box>
+								<Button variant="outline" onClick={openDeleteModal}>
+									Delete
+								</Button>
+							</Box>
+						</Stack>
+					) : null}
+
 					<Stack style={{ alignItems: 'flex-end', ...(!hotTierNotSet ? { display: 'none' } : {}) }}>
 						<Box>
 							<Button onClick={onUpdate} disabled={localSizeValue <= 0} loading={props.isUpdating}>
@@ -297,6 +315,15 @@ const HotTierConfig = (props: {
 						</Box>
 					</Stack>
 				</Stack>
+				<Divider orientation="vertical" size={2} style={{ ...(hotTierNotSet ? { display: 'none' } : {}) }} />
+				<Stack
+					gap={4}
+					style={{ ...(hotTierNotSet ? { display: 'none' } : { display: 'flex', justifyContent: 'flex-start' }) }}>
+					<Text style={{ fontSize: '11.2px' }}>Oldest Record:</Text>
+					<Text className={classes.fieldDescription}>
+						{_.isEmpty(oldestEntry) ? 'No Entries Stored' : formatDateWithTimezone(oldestEntry)}
+					</Text>
+				</Stack>
 			</Stack>
 		</Stack>
 	);
@@ -310,6 +337,7 @@ const Settings = (props: {
 	isLoading: boolean;
 	updateRetentionConfig: ({ config }: { config: any }) => void;
 	updateHotTierInfo: ({ size }: { size: string }) => void;
+	refetchHotTierInfo: () => void;
 	deleteHotTierInfo: ({ onSuccess }: { onSuccess: () => void }) => void;
 	isDeleting: boolean;
 	isUpdating: boolean;
@@ -333,6 +361,7 @@ const Settings = (props: {
 						) : (
 							<>
 								<HotTierConfig
+									refetchHotTierInfo={props.refetchHotTierInfo}
 									updateHotTierInfo={props.updateHotTierInfo}
 									deleteHotTierInfo={props.deleteHotTierInfo}
 									isDeleting={props.isDeleting}