PBENCH-1264 (distributed-system-analysis#3546)

Metadata in saved runs
mfleader · Sep 7, 2023 · 4bd2279 · 4bd2279
1 parent bf9f936
commit 4bd2279
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 60 deletions.
diff --git a/dashboard/src/actions/overviewActions.js b/dashboard/src/actions/overviewActions.js
@@ -156,12 +156,14 @@ export const updateDataset =
         );
 
         for (const key in response.data.metadata) {
-          if (checkNestedPath(key, item.metadata)) {
-            item.metadata = setValueFromPath(
-              key,
-              item.metadata,
-              response.data.metadata[key]
-            );
+          if (checkNestedPath(key, item.metadata) || key in item.metadata) {
+            if (checkNestedPath(key, item.metadata)) {
+              item.metadata = setValueFromPath(
+                key,
+                item.metadata,
+                response.data.metadata[key]
+              );
+            }
             if (key in item.metadata) {
               item.metadata[key] = response.data.metadata[key];
             }
@@ -552,14 +554,12 @@ const isServerInternal = (string) =>
  */
 
 const setValueFromPath = (path, obj, value) => {
-  const [head, ...rest] = path.split(".");
-
-  return {
-    ...obj,
-    [head]: rest.length
-      ? setValueFromPath(rest.join("."), obj[head], value)
-      : value,
+  const recurse = (plist, o, v) => {
+    const [head, ...rest] = plist;
+    return { ...o, [head]: rest.length ? recurse(rest, o[head], v) : v };
   };
+
+  return recurse(path.split("."), obj, value);
 };
 
 /**
@@ -570,13 +570,5 @@ const setValueFromPath = (path, obj, value) => {
  * @return {Boolean} - true/false if the object has/not the key
  */
 
-const checkNestedPath = function (path, obj = {}) {
-  const args = path.split(".");
-  for (let i = 0; i < args.length; i++) {
-    if (!obj || !obj.hasOwnProperty(args[i])) {
-      return false;
-    }
-    obj = obj[args[i]];
-  }
-  return true;
-};
+const checkNestedPath = (path, obj = {}) =>
+  path.split(".").reduce((a, p) => a?.[p], obj) !== undefined;
diff --git a/dashboard/src/modules/components/OverviewComponent/NewRunsComponent.jsx b/dashboard/src/modules/components/OverviewComponent/NewRunsComponent.jsx
@@ -148,7 +148,11 @@ const NewRunsComponent = () => {
     <div className="newruns-table-container">
       <OuterScrollContainer>
         <InnerScrollContainer>
-          <TableComposable isStickyHeader variant={"compact"}>
+          <TableComposable
+            isStickyHeader
+            variant={"compact"}
+            className="runs-table"
+          >
             <Thead>
               <Tr>
                 <Th />
@@ -173,7 +177,7 @@ const NewRunsComponent = () => {
               {initNewRuns.map((item, rowIndex) => {
                 const rowActions = moreActionItems(item);
                 return (
-                  <>
+                  <React.Fragment key={uid()}>
                     <Tr
                       key={uid()}
                       className={item[IS_ITEM_SEEN] ? "seen-row" : "unseen-row"}
@@ -219,7 +223,7 @@ const NewRunsComponent = () => {
                         </Td>
                       </Tr>
                     ) : null}
-                  </>
+                  </React.Fragment>
                 );
               })}
             </Tbody>

diff --git a/dashboard/src/modules/components/OverviewComponent/SavedRunsComponent.jsx b/dashboard/src/modules/components/OverviewComponent/SavedRunsComponent.jsx
@@ -10,16 +10,22 @@ import {
   START_PAGE_NUMBER,
 } from "assets/constants/overviewConstants";
 import {
+  ExpandableRowContent,
   InnerScrollContainer,
   OuterScrollContainer,
   TableComposable,
   Tbody,
+  Td,
   Th,
   Thead,
   Tr,
 } from "@patternfly/react-table";
+import {
+  MetadataRow,
+  RenderPagination,
+  SavedRunsRow,
+} from "./common-component";
 import React, { useCallback, useState } from "react";
-import { RenderPagination, SavedRunsRow } from "./common-component";
 import {
   deleteDataset,
   editMetadata,
@@ -32,11 +38,12 @@ import {
 } from "actions/overviewActions";
 import { useDispatch, useSelector } from "react-redux";
 
+import { uid } from "utils/helper";
+
 const SavedRunsComponent = () => {
   const dispatch = useDispatch();
-  const { savedRuns, selectedSavedRuns, initSavedRuns } = useSelector(
-    (state) => state.overview
-  );
+  const { savedRuns, selectedSavedRuns, initSavedRuns, checkedItems } =
+    useSelector((state) => state.overview);
 
   // Selecting helper
   const areAllRunsSelected =
@@ -120,7 +127,19 @@ const SavedRunsComponent = () => {
     [dispatch, savedRuns]
   );
   // Pagination helper
+  const [expandedRunNames, setExpandedRunNames] = React.useState([]);
+  const setRunExpanded = (run, isExpanding = true) =>
+    setExpandedRunNames((prevExpanded) => {
+      const otherExpandedRunNames = prevExpanded.filter((r) => r !== run.name);
+      return isExpanding
+        ? [...otherExpandedRunNames, run.name]
+        : otherExpandedRunNames;
+    });
 
+  const isRunExpanded = useCallback(
+    (run) => expandedRunNames.includes(run.name),
+    [expandedRunNames]
+  );
   const columnNames = {
     result: "Result",
     uploadedtime: "Uploaded Time",
@@ -131,9 +150,14 @@ const SavedRunsComponent = () => {
     <div className="savedRuns-table-container">
       <OuterScrollContainer>
         <InnerScrollContainer>
-          <TableComposable isStickyHeader variant={"compact"}>
+          <TableComposable
+            isStickyHeader
+            variant={"compact"}
+            className="runs-table"
+          >
             <Thead>
               <Tr>
+                <Th />
                 <Th
                   width={10}
                   select={{
@@ -157,32 +181,51 @@ const SavedRunsComponent = () => {
               {initSavedRuns.map((item, rowIndex) => {
                 const rowActions = moreActionItems(item);
                 return (
-                  <Tr
-                    key={item.resource_id}
-                    className={item[IS_ITEM_SEEN] ? "seen-row" : "unseen-row"}
-                  >
-                    <SavedRunsRow
-                      item={item}
-                      rowActions={rowActions}
-                      rowIndex={rowIndex}
-                      makeFavorites={makeFavorites}
-                      columnNames={columnNames}
-                      onSelectRuns={onSelectRuns}
-                      isRowSelected={isRowSelected}
-                      textInputEdit={(val) =>
-                        updateTblValue(val, NAME_KEY, item.resource_id)
-                      }
-                      toggleEdit={toggleEdit}
-                      onDateSelect={(_event, str) =>
-                        updateTblValue(
-                          str,
-                          SERVER_DELETION_KEY,
-                          item.resource_id
-                        )
-                      }
-                      saveRowData={saveRowData}
-                    />
-                  </Tr>
+                  <React.Fragment key={uid()}>
+                    <Tr
+                      key={item.resource_id}
+                      className={item[IS_ITEM_SEEN] ? "seen-row" : "unseen-row"}
+                    >
+                      <SavedRunsRow
+                        item={item}
+                        rowActions={rowActions}
+                        setRunExpanded={setRunExpanded}
+                        isRunExpanded={isRunExpanded}
+                        rowIndex={rowIndex}
+                        makeFavorites={makeFavorites}
+                        columnNames={columnNames}
+                        onSelectRuns={onSelectRuns}
+                        isRowSelected={isRowSelected}
+                        textInputEdit={(val) =>
+                          updateTblValue(val, NAME_KEY, item.resource_id)
+                        }
+                        toggleEdit={toggleEdit}
+                        onDateSelect={(_event, str) =>
+                          updateTblValue(
+                            str,
+                            SERVER_DELETION_KEY,
+                            item.resource_id
+                          )
+                        }
+                        saveRowData={saveRowData}
+                      />
+                    </Tr>
+                    {checkedItems && checkedItems.length > 0 ? (
+                      <Tr isExpanded={isRunExpanded(item)} key={uid()}>
+                        <Td colSpan={8}>
+                          <ExpandableRowContent>
+                            <div className="pf-u-m-md">
+                              <MetadataRow
+                                key={uid()}
+                                checkedItems={checkedItems}
+                                item={item}
+                              />
+                            </div>
+                          </ExpandableRowContent>
+                        </Td>
+                      </Tr>
+                    ) : null}
+                  </React.Fragment>
                 );
               })}
             </Tbody>

diff --git a/dashboard/src/modules/components/OverviewComponent/common-component.jsx b/dashboard/src/modules/components/OverviewComponent/common-component.jsx
@@ -327,9 +327,28 @@ export const NewRunsRow = (props) => {
 };
 
 export const SavedRunsRow = (props) => {
-  const { item, rowIndex, columnNames, rowActions } = props;
+  const {
+    item,
+    rowIndex,
+    columnNames,
+    rowActions,
+    isRunExpanded,
+    setRunExpanded,
+  } = props;
   return (
     <>
+      <Td
+        expand={
+          item.metadata
+            ? {
+                rowIndex,
+                isExpanded: isRunExpanded(item),
+                onToggle: () => setRunExpanded(item, !isRunExpanded(item)),
+                expandId: "saved-runs-table",
+              }
+            : undefined
+        }
+      />
       <Td
         select={{
           rowIndex,

diff --git a/dashboard/src/modules/components/OverviewComponent/index.less b/dashboard/src/modules/components/OverviewComponent/index.less
@@ -25,7 +25,7 @@
       .pf-c-scroll-inner-wrapper {
         height: 100%;
       }
-      table {
+      .runs-table {
         height: 40vh;
       }
     }
@@ -47,7 +47,7 @@
     }
     .newruns-table-container {
       height: 90%;
-      table {
+      .runs-table {
         height: 40vh;
       }
       .pf-c-scroll-outer-wrapper {