fix: hide remove button for active jobs #1

kelp404 · Apr 8, 2020 · 7ec4910 · 7ec4910
1 parent 85292cb
commit 7ec4910
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 19 deletions.
diff --git a/lib/frontend/src/pages/job.js b/lib/frontend/src/pages/job.js
@@ -171,13 +171,17 @@ module.exports = class Job extends Base {
           {job.stacktrace.length > 0 && this.fieldRender('Stack', job.stacktrace)}
         </Modal.Body>
         <Modal.Footer>
-          <button
-            disabled={$isApiProcessing}
-            className="btn btn-outline-danger" type="button"
-            onClick={this.onClickRemoveButton}
-          >
-            Remove
-          </button>
+          {
+            job.state !== jobStates.ACTIVE && (
+              <button
+                disabled={$isApiProcessing}
+                className="btn btn-outline-danger" type="button"
+                onClick={this.onClickRemoveButton}
+              >
+                Remove
+              </button>
+            )
+          }
           {
             job.state === jobStates.FAILED && (
               <button

diff --git a/lib/frontend/src/pages/jobs.js b/lib/frontend/src/pages/jobs.js
@@ -224,8 +224,11 @@ module.exports = class Jobs extends Base {
       return <Loading/>;
     }
 
+    const currentState = params.state || jobStates.ACTIVE;
     const isDisableCleanButton = $isApiProcessing || jobs.items.length === 0 ||
-      [jobStates.COMPLETED, jobStates.FAILED].indexOf(params.state || jobStates.ACTIVE) < 0;
+      [jobStates.COMPLETED, jobStates.FAILED].indexOf(currentState) < 0;
+    const isShowRemoveButton = currentState !== jobStates.ACTIVE;
+
     return (
       <>
         <div className="tab-content" style={{minHeight: '60vh'}}>
@@ -264,17 +267,21 @@ module.exports = class Jobs extends Base {
                         </h5>
                         <small className="text-muted">{utils.formatDate(job.timestamp)}</small>
                       </div>
-                      <div>
-                        <OverlayTrigger overlay={<Tooltip>Remove</Tooltip>}>
-                          <a
-                            href="#delete"
-                            className={classNames('btn btn-link text-danger', {disabled: $isApiProcessing})}
-                            onClick={this.generateClickRemoveJobLinkHandler(job.id)}
-                          >
-                            <i className="far fa-trash-alt"/>
-                          </a>
-                        </OverlayTrigger>
-                      </div>
+                      {
+                        isShowRemoveButton && (
+                          <div>
+                            <OverlayTrigger overlay={<Tooltip>Remove</Tooltip>}>
+                              <a
+                                href="#delete"
+                                className={classNames('btn btn-link text-danger', {disabled: $isApiProcessing})}
+                                onClick={this.generateClickRemoveJobLinkHandler(job.id)}
+                              >
+                                <i className="far fa-trash-alt"/>
+                              </a>
+                            </OverlayTrigger>
+                          </div>
+                        )
+                      }
                     </div>
                   </div>
                 ))