Sync bundle row state and bundle detail state

frontend/src/components/worksheets/BundleDetail/BundleDetail.jsx

@@ -14,7 +14,7 @@ import BundleActions from './BundleActions';
 
 const BundleDetail = ({
     uuid,
-    // Callback on metadata change.
+    bundleInfoFromRow,
     bundleMetadataChanged,
     contentExpanded,
     onOpen,
@@ -204,6 +204,25 @@ const BundleDetail = ({
         }
     };
 
+    /**
+     * This helper syncs the state info that is used to render the bundle row
+     * with the state info that is passed down into the bundle detail sidebar.
+     *
+     * This enables the bundle row and the bundle detail sidebar to show the
+     * exact same state information.
+     */
+    const syncBundleStateInfo = () => {
+        bundleInfo.state = bundleInfoFromRow.state;
+        bundleInfo.state_details = bundleInfoFromRow.state_details;
+        bundleInfo.metadata.time_preparing = bundleInfoFromRow.metadata.time_preparing;
+        bundleInfo.metadata.time_running = bundleInfoFromRow.metadata.time_running;
+        bundleInfo.metadata.time = bundleInfoFromRow.metadata.time;
+    };
+
+    if (bundleInfoFromRow && bundleInfo) {
+        syncBundleStateInfo();
+    }
+
     if (!bundleInfo) {
         if (metadataErrors.length) {
             return <ErrorMessage message='Error: Bundle Unavailable' />;

frontend/src/components/worksheets/BundleDetail/BundleFieldTable/BundleStateRow.jsx

@@ -1,6 +1,12 @@
 import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
-import { FINAL_BUNDLE_STATES } from '../../../../constants';
+import {
+    FINAL_BUNDLE_STATES,
+    RUN_BUNDLE_STATES,
+    UPLOADED_BUNDLE_STATES,
+    MAKE_BUNDLE_STATES,
+    OFFLINE_STATE,
+} from '../../../../constants';
 import BundleStateBox from '../BundleStateBox';
 import BundleFieldRow from './BundleFieldRow';
 
@@ -14,36 +20,35 @@ import BundleFieldRow from './BundleFieldRow';
 class BundleStateTable extends React.Component {
     constructor(props) {
         super(props);
-        const states = this.getStates();
-        this.state = {
-            states,
-        };
+        const bundleType = this.props.bundle.bundle_type.value;
+        const states = this.getStates(bundleType);
+        this.state = { states };
     }
 
-    getStates() {
-        const bundleType = this.props.bundle.bundle_type.value;
+    getStates(bundleType) {
         if (bundleType === 'run') {
-            return ['created', 'staged', 'starting', 'preparing', 'running', 'finalizing', 'ready'];
+            return RUN_BUNDLE_STATES;
         }
         if (bundleType === 'dataset') {
-            return ['created', 'uploading', 'ready'];
+            return UPLOADED_BUNDLE_STATES;
         }
         if (bundleType === 'make') {
-            return ['created', 'making', 'ready'];
+            return MAKE_BUNDLE_STATES;
         }
         return [];
     }
 
     getTime(state) {
-        const bundle = this.props.bundle;
-        let time;
+        const { bundle } = this.props;
+        const timePreparing = bundle.time_preparing?.value;
+        const timeRunning = bundle.time_running?.value;
+        const time = bundle.time?.value;
+
         if (state === 'preparing') {
-            time = bundle.time_preparing?.value;
-        } else if (state === 'running') {
-            time = bundle.time_running?.value || bundle.time?.value;
+            return timePreparing;
         }
-        if (time && time !== '0s') {
-            return time;
+        if (state === 'running') {
+            return timeRunning || time;
         }
     }
 
@@ -53,8 +58,9 @@ class BundleStateTable extends React.Component {
         const stateDetails = bundle.state_details?.value;
         const currentState = bundle.state.value;
         const inFinalState = FINAL_BUNDLE_STATES.includes(currentState);
+        const inOfflineState = currentState === OFFLINE_STATE;
 
-        if (inFinalState) {
+        if (inFinalState || inOfflineState) {
             return (
                 <BundleFieldRow
                     label='State'

frontend/src/components/worksheets/Worksheet/Worksheet.js

@@ -20,6 +20,7 @@ import {
     LOCAL_STORAGE_WORKSHEET_WIDTH,
     DIALOG_TYPES,
     AUTO_HIDDEN_DURATION,
+    FINAL_BUNDLE_STATES,
 } from '../../../constants';
 import WorksheetTerminal from '../WorksheetTerminal';
 import Loading from '../../Loading';
@@ -1224,13 +1225,12 @@ class Worksheet extends React.Component {
                 if (items[i].bundles_spec) {
                     for (var j = 0; j < items[i].bundles_spec.bundle_infos.length; j++) {
                         var bundle_info = items[i].bundles_spec.bundle_infos[j];
-                        if (bundle_info.bundle_type === 'run') {
-                            if (bundle_info.state !== 'ready' && bundle_info.state !== 'failed') {
-                                updatingBundleUuids[bundle_info.uuid] = true;
-                            } else {
-                                if (bundle_info.uuid in updatingBundleUuids)
-                                    delete updatingBundleUuids[bundle_info.uuid];
-                            }
+                        const inFinalState = FINAL_BUNDLE_STATES.includes(bundle_info.state);
+                        if (!inFinalState) {
+                            updatingBundleUuids[bundle_info.uuid] = true;
+                        } else {
+                            if (bundle_info.uuid in updatingBundleUuids)
+                                delete updatingBundleUuids[bundle_info.uuid];
                         }
                     }
                 }

frontend/src/components/worksheets/items/TableItem/BundleRow.js

@@ -306,6 +306,7 @@ class BundleRow extends Component {
                         >
                             <BundleDetail
                                 uuid={bundleInfo.uuid}
+                                bundleInfoFromRow={bundleInfo}
                                 bundleMetadataChanged={this.props.reloadWorksheet}
                                 onUpdate={this.receiveBundleInfoUpdates}
                                 onClose={() => {

frontend/src/constants.js

@@ -55,7 +55,23 @@ export const BUNDLE_STATES: String[] = [
 ];
 
 // All possible final bundle states
-export const FINAL_BUNDLE_STATES = ['ready', 'failed', 'killed', 'worker_offline'];
+export const FINAL_BUNDLE_STATES = ['ready', 'failed', 'killed'];
+
+export const RUN_BUNDLE_STATES = [
+    'created',
+    'staged',
+    'starting',
+    'preparing',
+    'running',
+    'finalizing',
+    'ready',
+];
+
+export const UPLOADED_BUNDLE_STATES = ['created', 'uploading', 'ready'];
+
+export const MAKE_BUNDLE_STATES = ['created', 'making', 'ready'];
+
+export const OFFLINE_STATE = 'worker_offline';
 
 // Autofill types for schemas.
 export const DEFAULT_POST_PROCESSOR = {

frontend/src/util/worksheet_utils.js

@@ -14,8 +14,8 @@ export function renderDuration(s) {
         return Math.round(duration) === 0 ? '' : Math.round(duration) + unit;
     }
 
-    if (s == null) {
-        return '<none>';
+    if (!s) {
+        return '';
     }
 
     var m = Math.floor(s / 60);