feat: update manage history (#146)

* feat: update manage history * feat: shuffle results-beta * feat: update gitignore * chore: update ignored files
newrelic · Dec 9, 2022 · 5c9dbd1 · 5c9dbd1
1 parent f909a33
commit 5c9dbd1
Show file tree

Hide file tree

Showing 26 changed files with 1,092 additions and 101 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,4 +4,5 @@ tmp*
 dist*
 old*
 .serverless*
-backend/.serverless*
+backend/.serverless*
+nerdlets-beta/*
diff --git a/nerdlets/optimizer-beta/components/collectionView/card/index.js b/nerdlets/optimizer-beta/components/collectionView/card/index.js
@@ -210,6 +210,17 @@ export default function CollectionCard(props) {
                   >
                     Edit recommendations config
                   </DropdownItem>
+                  <DropdownItem
+                    onClick={() =>
+                      updateDataState({
+                        jobHistoryOpen: true,
+                        jobHistoryFilter: collection.id,
+                        jobHistoryFilterName: document.name
+                      })
+                    }
+                  >
+                    Manage History
+                  </DropdownItem>
                   <DropdownItem
                     onClick={() => deleteWorkloadCollection(collection.id)}
                   >

diff --git a/nerdlets/optimizer-beta/components/jobHistory/history.js b/nerdlets/optimizer-beta/components/jobHistory/history.js
@@ -16,45 +16,34 @@ import DataContext from '../../context/data';
 // eslint-disable-next-line no-unused-vars
 export default function History(props) {
   const dataContext = useContext(DataContext);
-  const { jobStatus, deleteJobHistory, updateDataState } = dataContext;
+  const {
+    jobStatus,
+    deletingJobDocuments,
+    deleteMultiJobHistory,
+    updateDataState,
+    jobHistoryFilter,
+    jobHistoryFilterName,
+    selectedHistory = {},
+    selectedJobs = []
+  } = dataContext;
   // const [writingDocument, setWriteState] = useState(false);
   const [searchText, setSearch] = useState('');
   const [column, setColumn] = useState(0);
   const [sortingType, setSortingType] = useState(
     TableHeaderCell.SORTING_TYPE.NONE
   );
 
-  const filteredJobs = (jobStatus || []).filter(
-    j =>
-      (j?.wlCollectionName || '')
-        .toLowerCase()
-        .includes(searchText.toLowerCase()) ||
-      j.id.includes(searchText.toLowerCase())
-  );
-
-  // const writeDocument = () => {
-  //   setWriteState(true);
-
-  //   const document = {
-  //     name,
-  //     createdBy: email,
-  //     lastEditedBy: email
-  //   };
-
-  //   AccountStorageMutation.mutate({
-  //     accountId: selectedAccount.id,
-  //     actionType: AccountStorageMutation.ACTION_TYPE.WRITE_DOCUMENT,
-  //     collection: 'workloadCollections',
-  //     documentId: uuidv4(),
-  //     document
-  //   }).then(value => {
-  //     // eslint-disable-next-line no-console
-  //     console.log('wrote document', value);
-
-  //     setWriteState(false);
-  //     updateDataState({ jobHistoryOpen: false });
-  //   });
-  // };
+  const filteredJobs = (jobStatus || [])
+    .filter(j =>
+      jobHistoryFilter ? jobHistoryFilter === j.wlCollectionId : true
+    )
+    .filter(
+      j =>
+        (j?.wlCollectionName || '')
+          .toLowerCase()
+          .includes(searchText.toLowerCase()) ||
+        j.id.includes(searchText.toLowerCase())
+    );
 
   const currentTime = new Date().getTime();
 
@@ -67,33 +56,19 @@ export default function History(props) {
     }
   };
 
-  const actions = () => {
-    const allActions = [
-      {
-        label: 'Delete',
-        type: TableRow.ACTION_TYPE.DESTRUCTIVE,
-        onClick: (evt, { item }) => {
-          deleteJobHistory(item);
-        }
-      }
-    ];
-
-    return allActions;
-  };
-
   return (
     <div>
       <HeadingText
         type={HeadingText.TYPE.HEADING_3}
         style={{ fontSize: '18px' }}
       >
-        Optimizer History
+        Optimizer History {jobHistoryFilter ? `- ${jobHistoryFilterName}` : ''}
       </HeadingText>
       <BlockText type={BlockText.TYPE.PARAGRAPH}>
         View and manage your optimization history
       </BlockText>
       <TextField
-        style={{ width: '100%', paddingBottom: '15px' }}
+        style={{ width: '100%', paddingBottom: '15px', paddingTop: '5px' }}
         type={TextField.TYPE.SEARCH}
         // label="Workload collection name"
         placeholder="eg. my name or job id"
@@ -106,6 +81,17 @@ export default function History(props) {
           items={filteredJobs}
           multivalue
           style={{ padding: '0px', fontSize: '12px', maxHeight: '500px' }}
+          selected={({ item }) => selectedHistory?.[item.id] === true}
+          onSelect={(evt, { item }) => {
+            selectedHistory[item.id] = evt.target.checked;
+            if (selectedHistory[item.id] === false)
+              delete selectedHistory[item.id];
+            updateDataState({ selectedHistory });
+            const sJobs = filteredJobs.filter(job =>
+              Object.keys(selectedHistory).find(key => key === job.id)
+            );
+            updateDataState({ selectedJobs: sJobs });
+          }}
         >
           <TableHeader>
             <TableHeaderCell
@@ -139,7 +125,7 @@ export default function History(props) {
             const failed = currentTime - startedAt > 900000 && !completedAt; // 15m
 
             return (
-              <TableRow actions={actions()}>
+              <TableRow>
                 <TableRowCell
                   additionalValue={wlCollectionName ? item.id : undefined}
                 >
@@ -168,18 +154,32 @@ export default function History(props) {
         'No job history found'
       )}
       <br />
-      {/* <Button
-        loading={writingDocument}
-        type={Button.TYPE.PRIMARY}
-        disabled={checkboxValues.length === 0 || !name.trim()}
-        onClick={() => writeDocument()}
+      {(selectedJobs || []).length}/{filteredJobs.length} selected
+      <br /> <br />
+      <Button
+        enabled={selectedJobs.length > 0}
+        style={{ float: 'left' }}
+        loading={deletingJobDocuments}
+        disabled={selectedJobs.length === 0}
+        onClick={async () => {
+          await deleteMultiJobHistory(selectedJobs);
+          updateDataState({ selectedHistory: {}, selectedJobs: [] });
+        }}
       >
-        Create
-      </Button> */}
+        Delete selected
+      </Button>
       &nbsp;
       <Button
         style={{ float: 'right' }}
-        onClick={() => updateDataState({ jobHistoryOpen: false })}
+        onClick={() =>
+          updateDataState({
+            jobHistoryOpen: false,
+            jobHistoryFilter: null,
+            jobHistoryFilterName: null,
+            selectedHistory: {},
+            selectedJobs: []
+          })
+        }
       >
         Close
       </Button>

diff --git a/...-beta/components/jobHistory/historyNew.js → ...-beta/components/jobHistory/historyOld.js b/...-beta/components/jobHistory/historyNew.js → ...-beta/components/jobHistory/historyOld.js
@@ -16,16 +16,10 @@ import DataContext from '../../context/data';
 // eslint-disable-next-line no-unused-vars
 export default function History(props) {
   const dataContext = useContext(DataContext);
-  const {
-    jobStatus,
-    deletingJobDocuments,
-    deleteMultiJobHistory,
-    updateDataState
-  } = dataContext;
+  const { jobStatus, deleteJobHistory, updateDataState } = dataContext;
   // const [writingDocument, setWriteState] = useState(false);
   const [searchText, setSearch] = useState('');
   const [column, setColumn] = useState(0);
-  const [selected, setSelected] = useState({});
   const [sortingType, setSortingType] = useState(
     TableHeaderCell.SORTING_TYPE.NONE
   );
@@ -38,6 +32,30 @@ export default function History(props) {
       j.id.includes(searchText.toLowerCase())
   );
 
+  // const writeDocument = () => {
+  //   setWriteState(true);
+
+  //   const document = {
+  //     name,
+  //     createdBy: email,
+  //     lastEditedBy: email
+  //   };
+
+  //   AccountStorageMutation.mutate({
+  //     accountId: selectedAccount.id,
+  //     actionType: AccountStorageMutation.ACTION_TYPE.WRITE_DOCUMENT,
+  //     collection: 'workloadCollections',
+  //     documentId: uuidv4(),
+  //     document
+  //   }).then(value => {
+  //     // eslint-disable-next-line no-console
+  //     console.log('wrote document', value);
+
+  //     setWriteState(false);
+  //     updateDataState({ jobHistoryOpen: false });
+  //   });
+  // };
+
   const currentTime = new Date().getTime();
 
   const onClickTableHeaderCell = (nextColumn, { nextSortingType }) => {
@@ -49,9 +67,19 @@ export default function History(props) {
     }
   };
 
-  const selectedJobs = filteredJobs.filter(job =>
-    Object.keys(selected).find(key => key === job.id)
-  );
+  const actions = () => {
+    const allActions = [
+      {
+        label: 'Delete',
+        type: TableRow.ACTION_TYPE.DESTRUCTIVE,
+        onClick: (evt, { item }) => {
+          deleteJobHistory(item);
+        }
+      }
+    ];
+
+    return allActions;
+  };
 
   return (
     <div>
@@ -78,12 +106,6 @@ export default function History(props) {
           items={filteredJobs}
           multivalue
           style={{ padding: '0px', fontSize: '12px', maxHeight: '500px' }}
-          selected={({ item }) => selected?.[item.id] === true}
-          onSelect={(evt, { item }) => {
-            selected[item.id] = evt.target.checked;
-            if (selected[item.id] === false) delete selected[item.id];
-            setSelected(selected);
-          }}
         >
           <TableHeader>
             <TableHeaderCell
@@ -117,7 +139,7 @@ export default function History(props) {
             const failed = currentTime - startedAt > 900000 && !completedAt; // 15m
 
             return (
-              <TableRow>
+              <TableRow actions={actions()}>
                 <TableRowCell
                   additionalValue={wlCollectionName ? item.id : undefined}
                 >
@@ -146,17 +168,14 @@ export default function History(props) {
         'No job history found'
       )}
       <br />
-      <Button
-        enabled={selectedJobs.length > 0}
-        style={{ float: 'left' }}
-        loading={deletingJobDocuments}
-        disabled={selectedJobs.length === 0}
-        onClick={() => {
-          deleteMultiJobHistory(selectedJobs);
-        }}
+      {/* <Button
+        loading={writingDocument}
+        type={Button.TYPE.PRIMARY}
+        disabled={checkboxValues.length === 0 || !name.trim()}
+        onClick={() => writeDocument()}
       >
-        Delete selected
-      </Button>
+        Create
+      </Button> */}
       &nbsp;
       <Button
         style={{ float: 'right' }}

diff --git a/nerdlets/optimizer-beta/components/jobHistory/index.js b/nerdlets/optimizer-beta/components/jobHistory/index.js
@@ -11,7 +11,15 @@ export default function JobHistoryModal(props) {
   return (
     <Modal
       hidden={!jobHistoryOpen}
-      onClose={() => updateDataState({ jobHistoryOpen: false })}
+      onClose={() =>
+        updateDataState({
+          jobHistoryOpen: false,
+          jobHistoryFilter: null,
+          jobHistoryFilterName: null,
+          selectedHistory: {},
+          selectedJobs: []
+        })
+      }
     >
       <History />
     </Modal>

diff --git a/nerdlets/optimizer-beta/context/data.js b/nerdlets/optimizer-beta/context/data.js
@@ -491,13 +491,19 @@ export class DataProvider extends Component {
   deleteMultiJobHistory = selected => {
     return new Promise(resolve => {
       this.setState({ deletingJobDocuments: true }, async () => {
-        const deletePromises = selected.map(data =>
-          this.deleteJobHistory(data)
-        );
-        await Promise.all(deletePromises);
-        this.setState({ deletingJobDocuments: false }, () => {
-          this.fetchJobStatus();
-          resolve();
+        const workloadQueue = queue((workload, callback) => {
+          this.deleteJobHistory(workload).then(() => {
+            callback();
+          });
+        }, 5);
+
+        workloadQueue.push(selected);
+
+        workloadQueue.drain(() => {
+          this.setState({ deletingJobDocuments: false }, () => {
+            this.fetchJobStatus();
+            resolve();
+          });
         });
       });
     });

diff --git a/nerdlets/optimizer/components/jobHistory/history.js b/nerdlets/optimizer/components/jobHistory/history.js
@@ -179,7 +179,13 @@ export default function History(props) {
       &nbsp;
       <Button
         style={{ float: 'right' }}
-        onClick={() => updateDataState({ jobHistoryOpen: false })}
+        onClick={() =>
+          updateDataState({
+            jobHistoryOpen: false,
+            jobHistoryFilter: null,
+            jobHistoryFilterName: null
+          })
+        }
       >
         Close
       </Button>

diff --git a/nerdlets/optimizer/components/jobHistory/index.js b/nerdlets/optimizer/components/jobHistory/index.js
@@ -11,7 +11,13 @@ export default function JobHistoryModal(props) {
   return (
     <Modal
       hidden={!jobHistoryOpen}
-      onClose={() => updateDataState({ jobHistoryOpen: false })}
+      onClose={() =>
+        updateDataState({
+          jobHistoryOpen: false,
+          jobHistoryFilter: null,
+          jobHistoryFilterName: null
+        })
+      }
     >
       <History />
     </Modal>