[UI]: Refresh button does not refresh run logs, metrics, or events #3476

Author: olgenn

frontend/package-lock.json

@@ -119,6 +119,7 @@
     "rc-tooltip": "^5.2.2",
     "react": "^18.3.1",
     "react-avatar": "^5.0.3",
+    "react-bus": "^4.0.1",
     "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
     "react-hook-form": "^7.53.0",

frontend/package.json

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Provider as BusProvider } from 'react-bus';
 import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { RouterProvider } from 'react-router-dom';
@@ -36,7 +37,9 @@ if (container) {
     root.render(
         <React.StrictMode>
             <Provider store={store}>
-                <RouterProvider router={router} />
+                <BusProvider>
+                    <RouterProvider router={router} />
+                </BusProvider>
             </Provider>
         </React.StrictMode>,
     );

frontend/src/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useListener } from 'react-bus';
 import { useTranslation } from 'react-i18next';
 import { useNavigate, useParams } from 'react-router-dom';
 import Button from '@cloudscape-design/components/button';
@@ -12,13 +13,15 @@ import { useLazyGetAllEventsQuery } from 'services/events';
 
 import { useColumnsDefinitions } from 'pages/Events/List/hooks/useColumnDefinitions';
 
+import { RUN_DETAILS_REFRESH_LIST_EVENT } from '../../constants';
+
 export const EventsList = () => {
     const { t } = useTranslation();
     const params = useParams();
     const paramRunId = params.runId ?? '';
     const navigate = useNavigate();
 
-    const { data, isLoading, isLoadingMore } = useInfiniteScroll<IEvent, TEventListRequestParams>({
+    const { data, isLoading, isLoadingMore, refreshList } = useInfiniteScroll<IEvent, TEventListRequestParams>({
         useLazyQuery: useLazyGetAllEventsQuery,
         args: { limit: DEFAULT_TABLE_PAGE_SIZE, within_runs: [paramRunId] },
 
@@ -28,6 +31,8 @@ export const EventsList = () => {
         }),
     });
 
+    useListener(RUN_DETAILS_REFRESH_LIST_EVENT, refreshList);
+
     const { items, collectionProps } = useCollection<IEvent>(data, {
         selection: {},
     });

frontend/src/pages/Runs/Details/Events/List/index.tsx

@@ -1,11 +1,14 @@
 import React, { useEffect, useMemo } from 'react';
+import { useListener } from 'react-bus';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 
 import { CodeEditor, Container, Header, Loader } from 'components';
 
 import { useGetRunQuery } from 'services/run';
 
+import { RUN_DETAILS_REFRESH_LIST_EVENT } from '../constants';
+
 interface AceEditorElement extends HTMLElement {
     env?: {
         editor?: {
@@ -20,11 +23,17 @@ export const RunInspect = () => {
     const paramProjectName = params.projectName ?? '';
     const paramRunId = params.runId ?? '';
 
-    const { data: runData, isLoading } = useGetRunQuery({
+    const {
+        data: runData,
+        isLoading,
+        refetch,
+    } = useGetRunQuery({
         project_name: paramProjectName,
         id: paramRunId,
     });
 
+    useListener(RUN_DETAILS_REFRESH_LIST_EVENT, refetch);
+
     const jsonContent = useMemo(() => {
         if (!runData) return '';
         return JSON.stringify(runData, null, 2);

frontend/src/pages/Runs/Details/Inspect/index.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useMemo } from 'react';
+import { useListener } from 'react-bus';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 
@@ -7,6 +8,7 @@ import { Box, ColumnLayout, Container, Header, LineChart } from 'components';
 import { riseRouterException } from 'libs';
 import { useGetRunQuery } from 'services/run';
 
+import { RUN_DETAILS_REFRESH_LIST_EVENT } from '../../constants';
 import { bytesFormatter, formatPercent, formatTime } from './helpers';
 import { useMetricsData } from './useMetricsData';
 
@@ -32,14 +34,23 @@ export const JobMetrics: React.FC = () => {
         return runData.jobs.find((job) => job.job_spec.job_name === paramJobName) ?? null;
     }, [runData]);
 
-    const { cpuChartProps, memoryChartProps, eachGPUChartProps, eachGPUMemoryChartProps, isLoading } = useMetricsData({
+    const {
+        cpuChartProps,
+        memoryChartProps,
+        eachGPUChartProps,
+        eachGPUMemoryChartProps,
+        isLoading,
+        refetch: refetchMetrics,
+    } = useMetricsData({
         project_name: paramProjectName,
         run_name: runData?.run_spec.run_name ?? '',
         run_id: runData?.id ?? '',
         job_num: jobData?.job_spec.job_num ?? 0,
         limit: 1000,
     });
 
+    useListener(RUN_DETAILS_REFRESH_LIST_EVENT, refetchMetrics);
+
     const statusType = isLoading || isLoadingRun ? 'loading' : 'finished';
 
     useEffect(() => {

frontend/src/pages/Runs/Details/Jobs/Metrics/index.tsx

@@ -15,7 +15,11 @@ import {
 import { bytesFormatter, getChartProps } from './helpers';
 
 export const useMetricsData = (params: TJobMetricsRequestParams) => {
-    const { data: metricsData, isLoading } = useGetMetricsQuery(params, {
+    const {
+        data: metricsData,
+        isLoading,
+        refetch,
+    } = useGetMetricsQuery(params, {
         skip: !params.run_name,
     });
 
@@ -76,5 +80,5 @@ export const useMetricsData = (params: TJobMetricsRequestParams) => {
         });
     }, [metricsData]);
 
-    return { cpuChartProps, eachGPUChartProps, memoryChartProps, eachGPUMemoryChartProps, isLoading };
+    return { cpuChartProps, eachGPUChartProps, memoryChartProps, eachGPUMemoryChartProps, isLoading, refetch };
 };

frontend/src/pages/Runs/Details/Jobs/Metrics/useMetricsData.ts

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useListener } from 'react-bus';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 import classNames from 'classnames';
@@ -10,6 +11,7 @@ import { useLazyGetProjectLogsQuery } from 'services/project';
 import { useGetRunQuery } from 'services/run';
 
 import { LogRow } from './components/LogRow';
+import { RUN_DETAILS_REFRESH_LIST_EVENT } from '../constants';
 import { decodeLogs, getJobSubmissionId } from './helpers';
 
 import { IProps } from './types';
@@ -116,6 +118,10 @@ export const Logs: React.FC<IProps> = ({ className, projectName, runName, jobSub
         getLogItems();
     }, []);
 
+    const refreshLogs = useCallback(() => getLogItems(), []);
+
+    useListener(RUN_DETAILS_REFRESH_LIST_EVENT, refreshLogs);
+
     useLayoutEffect(() => {
         if (logsForView.length && logsForView.length <= LIMIT_LOG_ROWS) {
             scrollToBottom();

frontend/src/pages/Runs/Details/Logs/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useListener } from 'react-bus';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 import { format } from 'date-fns';
@@ -28,9 +29,9 @@ import {
     getRunListItemRegion,
     getRunListItemResources,
     getRunListItemSchedule,
-    getRunListItemServiceUrl,
     getRunListItemSpotLabelKey,
 } from '../../List/helpers';
+import { RUN_DETAILS_REFRESH_LIST_EVENT } from '../constants';
 import { EventsList } from '../Events/List';
 import { JobList } from '../Jobs/List';
 import { ConnectToRunWithDevEnvConfiguration } from './ConnectToRunWithDevEnvConfiguration';
@@ -42,11 +43,17 @@ export const RunDetails = () => {
     const paramProjectName = params.projectName ?? '';
     const paramRunId = params.runId ?? '';
 
-    const { data: runData, isLoading: isLoadingRun } = useGetRunQuery({
+    const {
+        data: runData,
+        isLoading: isLoadingRun,
+        refetch,
+    } = useGetRunQuery({
         project_name: paramProjectName,
         id: paramRunId,
     });
 
+    useListener(RUN_DETAILS_REFRESH_LIST_EVENT, refetch);
+
     const schedule = runData ? getRunListItemSchedule(runData) : null;
     const nextTriggeredAt = runData ? runData.next_triggered_at : null;
 

frontend/src/pages/Runs/Details/RunDetails/index.tsx

@@ -5,3 +5,5 @@ export enum CodeTab {
     Events = 'events',
     Inspect = 'inspect',
 }
+
+export const RUN_DETAILS_REFRESH_LIST_EVENT = 'RUN_DETAILS_REFRESH_LIST_EVENT';