Fix ensembler deletion UI bugs (#352)

* Add modalClosed to onConfirm function

* Reset delete confirmation in delete job modal

* Add additional condition to ensure active router versions are displayed before current ones

* Make modalClosed unset all ensembler status

* Make modal display tables for both active and current router versions

* Refactor messages to make them reflect how router versions are displayed

* Refactor deletion messages for ensembling jobs to reflect singularity/plurality

* Add additional conditional handling to display ensembler deletion messages

* Fix inconsistent pop up message

* Reinstate terminate/delete button but disable it when ensembling job is terminating

ui/src/ensembler/components/modal/DeleteEnsemblerModal.js

@@ -54,40 +54,43 @@ export const DeleteEnsemblerModal = ({
   const modalClosed = () => {
     setCanDeleteEnsembler(true)
     setEnsemblerUsedByCurrentRouterVersion(false)
+    setEnsemblerUsedByActiveRouterVersion(false)
+    setEnsemblerUsedByActiveEnsemblingJob(false)
     setDeleteConfirmation("")
   }
 
   return (
     <ConfirmationModal
       title="Delete Ensembler"
       onCancel={() => modalClosed()}
-      onConfirm={submitForm}
+      onConfirm={(arg) => {submitForm(arg); modalClosed()}}
       isLoading={isLoading}
       content={
         <div>
           {canDeleteEnsembler ? (
             <div>
               <p>
-              You are about to delete Ensembler <b>{ensembler.name}</b>. This action cannot be undone. 
+              You are about to delete the Ensembler <b>{ensembler.name}</b>. This action <b>cannot</b> be undone.
               </p>
-              To confirm, please type "<b>{ensembler.name}</b>" in the box below
+              To confirm, please type "<b>{ensembler.name}</b>" in the box below:
               <EuiFieldText     
                 fullWidth            
                 placeholder={ensembler.name}
                 value={deleteConfirmation}
                 onChange={(e) => setDeleteConfirmation(e.target.value)}
                 isInvalid={deleteConfirmation !== ensembler.name} />              
             </div>
-          ) : ensemblerUsedByCurrentRouterVersion ? (
-            <div>
-              You cannot delete this ensembler because it is associated with a router version that is currently being used by a router
-              <br/> <br/> If you still wish to delete this ensembler, please <b>Deploy</b> another version on this router.
-            </div>
           ) : (
             <div>
-              You cannot delete this ensembler because there are <b>Active Router Versions</b> or <b>Ensembling Jobs</b> that use this ensembler. 
-              <br/> <br/> If you still wish to delete this ensembler, please <b>Undeploy</b> router versions and <b>Terminate</b> ensembling jobs that use this ensembler.
-            </div> 
+              You cannot delete this ensembler because it is:
+              <ul>
+                {ensemblerUsedByCurrentRouterVersion &&
+                  <li>associated with one or more router versions <b>currently</b> used by one or more routers
+                    {ensemblerUsedByActiveRouterVersion && ", and"}</li>}
+                {ensemblerUsedByActiveRouterVersion &&
+                  <li>used by one or more <b>Active Router Versions</b> or <b>Ensembling Jobs</b></li>}
+              </ul>
+            </div>
           )}
           {/* Only show The Ensembling Table if ensembler is not used by current router version */}
           {!ensemblerUsedByCurrentRouterVersion && (

ui/src/ensembler/components/table/ListEnsemblingJobsForEnsemblerTable.js

@@ -93,7 +93,8 @@ export const ListEnsemblingJobsForEnsemblerTable = ({
       {canDeleteEnsembler ? ( results.totalInactiveCount > 0 && (
         <div>
           <br/>
-          <p>Deleting this Ensembler will also delete {results.totalInactiveCount} <b>Failed</b> or <b>Completed</b> Ensembling Jobs that use this Ensembler </p>
+          Deleting this Ensembler will also delete {results.totalInactiveCount} <b>Failed</b> or <b>Completed</b>
+          &nbsp;Ensembling Job{results.totalInactiveCount > 1 && "s"} that use{results.totalInactiveCount === 1 && "s"} this Ensembler:
           <EuiBasicTable
             items={results.inactiveItems}
             loading={!isLoaded}
@@ -105,15 +106,16 @@ export const ListEnsemblingJobsForEnsemblerTable = ({
       )) : ( results.totalActiveCount > 0 && (
         <div>
           <br/>
-          <p>This Ensembler is being used by {results.totalActiveCount} <b>Active Ensembling Jobs</b>. 
-          If the ensembling jobs are in terminating state, please wait until the process complete to delete this ensembler</p>
+          This Ensembler is used by {results.totalActiveCount} <b>Active Ensembling Job{results.totalActiveCount > 1 && "s"}</b>.
+          If any ensembling jobs are in the terminating state, please wait until they are terminated to delete this ensembler.
           <EuiBasicTable
             items={results.activeItems}
             loading={!isLoaded}
             columns={columns}
             responsive={true}
             tableLayout="auto"
           />
+          If you wish to delete this ensembler, please <b>terminate</b> {results.totalActiveCount > 1 ? "these ensembling jobs" : "this ensembling job"}.
         </div>
       ))}
     </Fragment>

ui/src/ensembler/components/table/ListRouterVersionsForEnsemblerTable.js

@@ -18,6 +18,7 @@ export const ListRouterVersionsForEnsemblerTable = ({
   ensemblerUsedByCurrentRouterVersion
 }) => {
   const [results, setResults] = useState({ inactiveItems: [], activeItems:[], totalInactiveCount: 0, totalActiveCount:0 });
+  const [filteredActiveRouterVersions, setFilteredActiveRouterVersions] = useState([])
 
   const {
     appConfig: {
@@ -50,16 +51,15 @@ export const ListRouterVersionsForEnsemblerTable = ({
 
   useEffect(() => {
     if (results.activeItems.length > 0){
-      setEnsemblerUsedByActiveRouterVersion(true)
-    } else {
-      if (currentRouterVersion.isLoaded && !currentRouterVersion.error) {
-        if (currentRouterVersion.data.length > 0){
-          setEnsemblerUsedByCurrentRouterVersion(true)
-          setEnsemblerUsedByActiveRouterVersion(false)
-        } else {
-          setEnsemblerUsedByCurrentRouterVersion(false)
-          setEnsemblerUsedByActiveRouterVersion(false)
-        }
+      setEnsemblerUsedByActiveRouterVersion(true);
+    }
+
+    if (currentRouterVersion.isLoaded && !currentRouterVersion.error) {
+      if (currentRouterVersion.data.length > 0){
+        setEnsemblerUsedByCurrentRouterVersion(true);
+        setFilteredActiveRouterVersions(results.activeItems.filter(item => currentRouterVersion.data.every((e => e.id !== item.id))));
+      } else {
+        setEnsemblerUsedByCurrentRouterVersion(false)
       }
     }
   }, [results, currentRouterVersion, setEnsemblerUsedByActiveRouterVersion, setEnsemblerUsedByCurrentRouterVersion])
@@ -115,44 +115,54 @@ export const ListRouterVersionsForEnsemblerTable = ({
     </EuiCallOut>
   ) : (
     <Fragment>
-      {ensemblerUsedByCurrentRouterVersion ? (
-        currentRouterVersion.data.length > 0 && (
+      {canDeleteEnsembler && results.totalInactiveCount > 0 && (
         <div>
           <br/>
-          <p>The router version with the related ensembler is being used by {currentRouterVersion.data.length} <b>Routers</b></p>
+          Deleting this Ensembler will also delete {results.totalInactiveCount} <b>Failed</b> or <b>Undeployed</b>
+          &nbsp;Router Version{results.totalInactiveCount > 1 && "s"} that
+          use{results.totalInactiveCount === 1 && "s"} this Ensembler:
           <EuiBasicTable
-            items={currentRouterVersion.data}
+            items={results.inactiveItems}
             loading={!allRouterVersion.isLoaded && !currentRouterVersion.isLoaded}
             columns={columns}
             responsive={true}
             tableLayout="auto"
           />
         </div>
-      )) : canDeleteEnsembler ? ( results.totalInactiveCount > 0 && (
+      )}
+      {ensemblerUsedByCurrentRouterVersion && currentRouterVersion.data.length > 0 && (
         <div>
-          <br/>
-          <p>Deleting this Ensembler will also delete {results.totalInactiveCount} <b>Failed</b> or <b>Undeployed</b> Router Versions that use this Ensembler </p>
+          This Ensembler is used by {currentRouterVersion.data.length}
+          &nbsp;<b>Router{currentRouterVersion.data.length > 1 && "s"}</b>
+          &nbsp;in {currentRouterVersion.data.length > 1 ? "their" : "its"} <b>current</b> configuration:
           <EuiBasicTable
-            items={results.inactiveItems}
+            items={currentRouterVersion.data}
             loading={!allRouterVersion.isLoaded && !currentRouterVersion.isLoaded}
             columns={columns}
             responsive={true}
             tableLayout="auto"
           />
+          If you wish to delete this ensembler, please <b>deploy</b> another router version
+          for {currentRouterVersion.data.length > 1 ? "these routers" : "this router"}.
         </div>
-      )) : ( results.totalActiveCount > 0 && (
+      )}
+      {filteredActiveRouterVersions.length > 0 && (
         <div>
           <br/>
-          <p>This Ensembler is being used by {results.totalActiveCount} <b>Active Router Versions</b></p>
+          This Ensembler is {ensemblerUsedByCurrentRouterVersion && currentRouterVersion.data.length > 0 && "also"}
+          &nbsp;used by {filteredActiveRouterVersions.length}
+          &nbsp;<b>Active Router Version{filteredActiveRouterVersions.length > 1 && "s"}</b>:
           <EuiBasicTable
-            items={results.activeItems}
+            items={filteredActiveRouterVersions}
             loading={!allRouterVersion.isLoaded && !currentRouterVersion.isLoaded}
             columns={columns}
             responsive={true}
             tableLayout="auto"
           />
+          If you wish to delete this ensembler, please <b>undeploy</b>
+          &nbsp;{filteredActiveRouterVersions.length > 1 ? "these router versions" : "this router version"}.
         </div>
-      ))}
+      )}
     </Fragment>
   );
 };

ui/src/jobs/components/modal/DeleteJobModal.js

@@ -45,7 +45,8 @@ export const DeleteJobModal = ({
   return (
     <ConfirmationModal
       title={isActiveJobStatus(job.status) ? 'Delete Ensembling Jobs' : 'Terminate Ensembling Jobs'}
-      onConfirm={submitForm}
+      onCancel={() => setDeleteConfirmation("")}
+      onConfirm={(arg) => {submitForm(arg); setDeleteConfirmation("")}}
       isLoading={isLoading}
       disabled={deleteConfirmation !== job.name}
       content={

ui/src/jobs/list/ListEnsemblingJobsTable.js

@@ -158,18 +158,17 @@ export const ListEnsemblingJobsTable = ({
                 <EuiText size="xs">Monitoring</EuiText>
               </EuiButtonEmpty>
             </EuiFlexItem>
-              {item.status !== "terminating" && (
-              <EuiFlexItem grow={false} >
-                  <EuiButtonEmpty
-                    onClick={() => onDeleteJob(item)}
-                    color={"danger"}
-                    iconType={isActiveJobStatus(item.status) ? "trash" : "minusInCircle" }
-                    iconSide="left"
-                    size="xs">
-                    <EuiText size="xs"> {isActiveJobStatus(item.status) ? "Delete" : "Terminate" } </EuiText>
-                  </EuiButtonEmpty>
-              </EuiFlexItem>
-              )}
+            <EuiFlexItem grow={false} >
+                <EuiButtonEmpty
+                  onClick={() => onDeleteJob(item)}
+                  color={"danger"}
+                  iconType={isActiveJobStatus(item.status) ? "trash" : "minusInCircle" }
+                  iconSide="left"
+                  size="xs"
+                  isDisabled={item.status === "terminating"}>
+                  <EuiText size="xs"> {isActiveJobStatus(item.status) ? "Delete" : "Terminate" } </EuiText>
+                </EuiButtonEmpty>
+            </EuiFlexItem>
           </EuiFlexItem>
         </EuiFlexGroup>
       ),