Task sidebar and task index actions menus

hashicorp · Nov 8, 2023 · 69f457a · 69f457a
1 parent b5a8a12
commit 69f457a
Show file tree

Hide file tree

Showing 9 changed files with 104 additions and 9 deletions.
diff --git a/ui/app/components/task-context-sidebar.hbs b/ui/app/components/task-context-sidebar.hbs
@@ -13,13 +13,21 @@
 	>
 	{{#if @task}}
 		{{keyboard-commands this.keyCommands}}
-		<header>
+		<header class={{if this.shouldShowActions "has-actions"}}>
 			<h1 class="title">
 				{{@task.name}}
 				<span class="state {{@task.state}}">
 					{{@task.state}}
 				</span>
 			</h1>
+			{{#if this.shouldShowActions}}
+				<Hds::Dropdown class="actions-dropdown" as |dd|>
+					<dd.ToggleButton @color="secondary" @text="Actions" @size="medium" />
+					{{#each @task.task.actions as |action|}}
+						<dd.Interactive {{on "click" (perform this.runAction action (get (object-at 0 action.allocations) "id"))}} @text="{{action.name}}" />
+					{{/each}}
+				</Hds::Dropdown>
+			{{/if}}
 			<LinkTo
 				class="link"
 				title={{@task.name}}

diff --git a/ui/app/components/task-context-sidebar.js b/ui/app/components/task-context-sidebar.js
@@ -7,8 +7,13 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency';
 
 export default class TaskContextSidebarComponent extends Component {
+  @service notifications;
+  @service nomadActions;
+
   get isSideBarOpen() {
     return !!this.args.task;
   }
@@ -37,4 +42,26 @@ export default class TaskContextSidebarComponent extends Component {
   @action toggleWide() {
     this.wide = !this.wide;
   }
+
+  get shouldShowActions() {
+    return (
+      this.args.task.state === 'running' &&
+      this.args.task.task.actions?.length &&
+      this.nomadActions.hasActionPermissions
+    );
+  }
+
+  @task(function* (action, allocID) {
+    try {
+      const job = this.args.task.task.taskGroup.job;
+      yield job.runAction(action, allocID);
+    } catch (err) {
+      this.notifications.add({
+        title: `Error starting ${action.name}`,
+        message: err,
+        color: 'critical',
+      });
+    }
+  })
+  runAction;
 }
diff --git a/ui/app/controllers/allocations/allocation/task/index.js b/ui/app/controllers/allocations/allocation/task/index.js
@@ -8,9 +8,11 @@ import { computed as overridable } from 'ember-overridable-computed';
 import { task } from 'ember-concurrency';
 import classic from 'ember-classic-decorator';
 import messageForError from 'nomad-ui/utils/message-from-adapter-error';
+import { inject as service } from '@ember/service';
 
 @classic
 export default class IndexController extends Controller {
+  @service nomadActions;
   @overridable(() => {
     // { title, description }
     return null;
@@ -32,4 +34,26 @@ export default class IndexController extends Controller {
     }
   })
   restartTask;
+
+  get shouldShowActions() {
+    return (
+      this.model.state === 'running' &&
+      this.model.task.actions?.length &&
+      this.nomadActions.hasActionPermissions
+    );
+  }
+
+  @task(function* (action, allocID) {
+    try {
+      const job = this.model.task.taskGroup.job;
+      yield job.runAction(action, allocID);
+    } catch (err) {
+      this.notifications.add({
+        title: `Error starting ${action.name}`,
+        message: err,
+        color: 'critical',
+      });
+    }
+  })
+  runAction;
 }
diff --git a/ui/app/services/nomad-actions.js b/ui/app/services/nomad-actions.js
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+// Guess who just found out that "actions" is a reserved name in Ember?
+// Signed, the person who just renamed this NomadActions.
+
+// @ts-check
+import Service from '@ember/service';
+import { inject as service } from '@ember/service';
+
+export default class NomadActionsService extends Service {
+  @service can;
+
+  // Note: future Actions Governance work (https://github.com/hashicorp/nomad/issues/18800)
+  // will require this to be a computed property that depends on the current user's permissions.
+  // For now, we simply check alloc exec privileges.
+  get hasActionPermissions() {
+    return this.can.can('exec allocation');
+  }
+}
diff --git a/ui/app/styles/components/sidebar.scss b/ui/app/styles/components/sidebar.scss
@@ -115,6 +115,10 @@ $subNavOffset: 49px;
     margin-bottom: 24px;
     height: 50px;
 
+    &.has-actions {
+      grid-template-columns: 1fr auto auto auto;
+    }
+
     .title {
       margin-bottom: unset;
     }

diff --git a/ui/app/styles/core/notifications.scss b/ui/app/styles/core/notifications.scss
@@ -7,7 +7,7 @@ section.notifications {
   position: fixed;
   bottom: 20px;
   right: 20px;
-  z-index: 100;
+  z-index: $z-notification;
   justify-items: right;
   display: grid;
 

diff --git a/ui/app/styles/utils/z-indices.scss b/ui/app/styles/utils/z-indices.scss
@@ -4,6 +4,7 @@
  */
 
 $z-modal: 300;
+$z-notification: 350;
 $z-tooltip: 250;
 $z-gutter: 220;
 $z-gutter-backdrop: 219;

diff --git a/ui/app/templates/allocations/allocation/task/index.hbs b/ui/app/templates/allocations/allocation/task/index.hbs
@@ -30,8 +30,8 @@
       </div>
     </div>
   {{/if}}
-  <h1 class="title with-flex" data-test-title>
-    <div>
+  <Hds::PageHeader class="job-page-header" as |PH|>
+    <PH.Title data-test-title>
       {{this.model.name}}
       {{#if this.model.isConnectProxy}}
         <ProxyTag @class="bumper-left" />
@@ -44,8 +44,8 @@
       >
         {{this.model.state}}
       </span>
-    </div>
-    <div>
+    </PH.Title>
+    <PH.Actions>
       {{#if this.model.isRunning}}
         <div class="two-step-button">
           <Exec::OpenButton
@@ -55,6 +55,16 @@
             @task={{this.model.task}}
           />
         </div>
+
+        {{#if this.shouldShowActions}}
+          <Hds::Dropdown class="actions-dropdown" as |dd|>
+            <dd.ToggleButton @color="secondary" @text="Actions" @size="medium" />
+            {{#each this.model.task.actions as |action|}}
+              <dd.Interactive {{on "click" (perform this.runAction action (get (object-at 0 action.allocations) "id"))}} @text="{{action.name}}" />
+            {{/each}}
+          </Hds::Dropdown>
+        {{/if}}
+
         <TwoStepButton
           data-test-restart
           @alignRight={{true}}
@@ -67,8 +77,8 @@
           @onConfirm={{perform this.restartTask}}
         />
       {{/if}}
-    </div>
-  </h1>
+    </PH.Actions>
+  </Hds::PageHeader>
   <div class="boxed-section is-small">
     <div class="boxed-section-body inline-definitions">
       <span class="label">

diff --git a/ui/app/templates/components/job-page/parts/title.hbs b/ui/app/templates/components/job-page/parts/title.hbs
@@ -15,7 +15,6 @@
     {{yield}}
   </PH.Title>
   <PH.Actions>
-
       {{#if (not (eq this.job.status "dead"))}}
         {{#if (can "exec allocation" namespace=this.job.namespace)}}
           {{#if (and this.job.actions.length this.job.allocations.length)}}