From d1e0ba9970d1440113f9e2b263cf407260051b4f Mon Sep 17 00:00:00 2001 From: Nate Kelley Date: Fri, 7 Feb 2025 13:20:11 -0700 Subject: [PATCH] rename some vars --- web/src/app/app/dashboards/page.tsx | 2 +- .../DashboardIndividualProvider.tsx | 6 ++- .../useDashboardShare.ts | 19 ++++++-- .../useDashboardSubscribe.ts | 9 ++-- .../useDashboardUpdateConfig.ts | 48 ++++++++----------- 5 files changed, 45 insertions(+), 39 deletions(-) diff --git a/web/src/app/app/dashboards/page.tsx b/web/src/app/app/dashboards/page.tsx index 9c12bce8c..19b24b85b 100644 --- a/web/src/app/app/dashboards/page.tsx +++ b/web/src/app/app/dashboards/page.tsx @@ -1,5 +1,5 @@ import { DashboardListContainer } from './_DashboardListContainer'; -export default function DashboardPage(props: any) { +export default function DashboardPage() { return ; } diff --git a/web/src/context/Dashboards/DashboardIndividualProvider/DashboardIndividualProvider.tsx b/web/src/context/Dashboards/DashboardIndividualProvider/DashboardIndividualProvider.tsx index dec49660e..82e93ab6c 100644 --- a/web/src/context/Dashboards/DashboardIndividualProvider/DashboardIndividualProvider.tsx +++ b/web/src/context/Dashboards/DashboardIndividualProvider/DashboardIndividualProvider.tsx @@ -17,8 +17,6 @@ export const useBusterDashboards = () => { const [dashboards, setDashboard] = useState>({}); - const dashboardShare = useShareDashboard(); - const dashboardSubscribe = useDashboardSubscribe({ setDashboard }); const dashboardUpdateConfig = useDashboardUpdateConfig({ dashboards, setDashboard }); @@ -29,6 +27,10 @@ export const useBusterDashboards = () => { onUpdateDashboard: dashboardUpdateConfig.onUpdateDashboard }); + const dashboardShare = useShareDashboard({ + initializeDashboard: dashboardSubscribe.initializeDashboard + }); + const getDashboardMemoized = useMemoizedFn((id: string) => dashboards[id]); return { diff --git a/web/src/context/Dashboards/DashboardIndividualProvider/useDashboardShare.ts b/web/src/context/Dashboards/DashboardIndividualProvider/useDashboardShare.ts index 027481250..56ea9844c 100644 --- a/web/src/context/Dashboards/DashboardIndividualProvider/useDashboardShare.ts +++ b/web/src/context/Dashboards/DashboardIndividualProvider/useDashboardShare.ts @@ -1,8 +1,13 @@ +import { BusterDashboardResponse } from '@/api/asset_interfaces'; import { DashboardUpdate } from '@/api/buster_socket/dashboards'; import { useBusterWebSocket } from '@/context/BusterWebSocket'; import { useMemoizedFn } from 'ahooks'; -export const useShareDashboard = () => { +export const useShareDashboard = ({ + initializeDashboard +}: { + initializeDashboard: (d: BusterDashboardResponse) => void; +}) => { const busterSocket = useBusterWebSocket(); const onShareDashboard = useMemoizedFn( @@ -19,9 +24,15 @@ export const useShareDashboard = () => { | 'remove_teams' > ) => { - return busterSocket.emit({ - route: '/dashboards/update', - payload: props + return busterSocket.emitAndOnce({ + emitEvent: { + route: '/dashboards/update', + payload: props + }, + responseEvent: { + route: '/dashboards/update:updateDashboard', + callback: initializeDashboard + } }); } ); diff --git a/web/src/context/Dashboards/DashboardIndividualProvider/useDashboardSubscribe.ts b/web/src/context/Dashboards/DashboardIndividualProvider/useDashboardSubscribe.ts index a5d2a1c3a..7ccebb4c4 100644 --- a/web/src/context/Dashboards/DashboardIndividualProvider/useDashboardSubscribe.ts +++ b/web/src/context/Dashboards/DashboardIndividualProvider/useDashboardSubscribe.ts @@ -18,7 +18,7 @@ export const useDashboardSubscribe = ({ const getAssetPassword = useBusterAssetsContextSelector((state) => state.getAssetPassword); const dashboardsSubscribed = useRef>({}); - const _onGetDashboardState = useMemoizedFn((d: BusterDashboardResponse) => { + const initializeDashboard = useMemoizedFn((d: BusterDashboardResponse) => { const metrics = d.metrics; for (const metric of metrics) { @@ -63,18 +63,19 @@ export const useDashboardSubscribe = ({ useMount(() => { setTimeout(() => { - _onGetDashboardState(MOCK_DASHBOARD_RESPONSE); + initializeDashboard(MOCK_DASHBOARD_RESPONSE); }, 500); busterSocket.on({ route: '/dashboards/get:getDashboardState', - callback: _onGetDashboardState + callback: initializeDashboard }); }); return { subscribeToDashboard, unSubscribeToDashboard, - refreshDashboard + refreshDashboard, + initializeDashboard }; }; diff --git a/web/src/context/Dashboards/DashboardIndividualProvider/useDashboardUpdateConfig.ts b/web/src/context/Dashboards/DashboardIndividualProvider/useDashboardUpdateConfig.ts index 84d1e0a1e..de0630847 100644 --- a/web/src/context/Dashboards/DashboardIndividualProvider/useDashboardUpdateConfig.ts +++ b/web/src/context/Dashboards/DashboardIndividualProvider/useDashboardUpdateConfig.ts @@ -18,41 +18,33 @@ export const useDashboardUpdateConfig = ({ const busterSocket = useBusterWebSocket(); const _updateDashboardResponseToServer = useMemoizedFn( - ( - newDashboard: BusterDashboardResponse & { - status?: VerificationStatus; - } - ) => { - const oldDashboard = dashboards[newDashboard.dashboard.id]; - if (isEqual(oldDashboard, newDashboard)) { - return; - } - - busterSocket.emit({ - route: '/dashboards/update', - payload: { - id: newDashboard.dashboard.id, - description: newDashboard.dashboard.description, - title: newDashboard.dashboard.title, - config: newDashboard.dashboard.config - } - }); - } - ); - - const onUpdateDashboardRequest = useMemoizedFn( (newDashboard: Partial, dashboardId: string) => { const newDashboardState: BusterDashboardResponse = { ...dashboards[dashboardId], ...newDashboard }; + + const oldDashboard = dashboards[dashboardId]; + if (isEqual(oldDashboard, newDashboard)) { + return; + } + setDashboard((prevDashboards) => { return { ...prevDashboards, [dashboardId]: newDashboardState }; }); - _updateDashboardResponseToServer(newDashboardState); + + busterSocket.emit({ + route: '/dashboards/update', + payload: { + id: dashboardId, + description: newDashboardState.dashboard.description, + title: newDashboardState.dashboard.title, + config: newDashboardState.dashboard.config + } + }); } ); @@ -68,7 +60,7 @@ export const useDashboardUpdateConfig = ({ } }; - onUpdateDashboardRequest(newDashboardState, id); + _updateDashboardResponseToServer(newDashboardState, id); } ); @@ -84,14 +76,14 @@ export const useDashboardUpdateConfig = ({ } } }; - onUpdateDashboardRequest(newDashboardState, dashboardId); + _updateDashboardResponseToServer(newDashboardState, dashboardId); } ); const onVerifiedDashboard = useMemoizedFn( async ({ dashboardId, status }: { dashboardId: string; status: VerificationStatus }) => { - await _updateDashboardResponseToServer({ - ...dashboards[dashboardId], + return onUpdateDashboard({ + id: dashboardId, status }); }