From bdbfdbec84381f2cb0679d992127d013c9ea0c5f Mon Sep 17 00:00:00 2001
From: Denis Gukov <denguk@gmail.com>
Date: Wed, 4 Nov 2020 16:57:55 +0500
Subject: [PATCH] feat(web2): run task

---
 web2/src/components/ItemListPageBase.js |  3 +
 web2/src/components/TaskForm.vue        | 50 ++++++++++++++++
 web2/src/components/TaskLogView.vue     | 74 ++++++++++++++++++++++++
 web2/src/views/project/TemplateView.vue | 76 ++++++++++++++-----------
 web2/src/views/project/Templates.vue    | 57 +++++++++++++++++--
 5 files changed, 222 insertions(+), 38 deletions(-)
 create mode 100644 web2/src/components/TaskForm.vue

diff --git a/web2/src/components/ItemListPageBase.js b/web2/src/components/ItemListPageBase.js
index c9c119c5..04dfb2ce 100644
--- a/web2/src/components/ItemListPageBase.js
+++ b/web2/src/components/ItemListPageBase.js
@@ -5,6 +5,9 @@ import ItemDialog from '@/components/ItemDialog.vue';
 import YesNoDialog from '@/components/YesNoDialog.vue';
 import { getErrorMessage } from '@/lib/error';
 
+/**
+ *
+ */
 export default {
   components: {
     YesNoDialog,
diff --git a/web2/src/components/TaskForm.vue b/web2/src/components/TaskForm.vue
new file mode 100644
index 00000000..7ad106f1
--- /dev/null
+++ b/web2/src/components/TaskForm.vue
@@ -0,0 +1,50 @@
+<template>
+  <v-form
+    ref="form"
+    lazy-validation
+    v-model="formValid"
+    v-if="item != null"
+  >
+    <v-alert
+      :value="formError"
+      color="error"
+      class="pb-2"
+    >{{ formError }}</v-alert>
+
+    <v-text-field
+      v-model="item.playbook"
+      label="Playbook Override"
+      :disabled="formSaving"
+    ></v-text-field>
+
+    <v-text-field
+      v-model="item.environment"
+      label="Environment Override (*MUST* be valid JSON)"
+      :disabled="formSaving"
+    ></v-text-field>
+
+    <v-text-field
+      v-model="item.arguments"
+      label="Extra CLI Arguments"
+      :disabled="formSaving"
+    ></v-text-field>
+  </v-form>
+</template>
+<script>
+import ItemFormBase from '@/components/ItemFormBase';
+
+export default {
+  mixins: [ItemFormBase],
+  props: {
+    templateId: Number,
+  },
+  created() {
+    this.item.template_id = this.templateId;
+  },
+  methods: {
+    getItemsUrl() {
+      return `/api/project/${this.projectId}/tasks`;
+    },
+  },
+};
+</script>
diff --git a/web2/src/components/TaskLogView.vue b/web2/src/components/TaskLogView.vue
index e69de29b..da321b16 100644
--- a/web2/src/components/TaskLogView.vue
+++ b/web2/src/components/TaskLogView.vue
@@ -0,0 +1,74 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col>
+        <v-list two-line subheader>
+          <v-list-item>
+            <v-list-item-content>
+              <v-list-item-title>Author</v-list-item-title>
+              <v-list-item-subtitle>{{ item.user_name }}</v-list-item-subtitle>
+            </v-list-item-content>
+          </v-list-item>
+
+          <v-list-item>
+            <v-list-item-content>
+              <v-list-item-title>Status</v-list-item-title>
+              <v-list-item-subtitle>{{ item.status }}</v-list-item-subtitle>
+            </v-list-item-content>
+          </v-list-item>
+        </v-list>
+      </v-col>
+      <v-col>
+        <v-list two-line subheader>
+          <v-list-item>
+            <v-list-item-content>
+              <v-list-item-title>Created</v-list-item-title>
+              <v-list-item-subtitle>{{ item.created }}</v-list-item-subtitle>
+            </v-list-item-content>
+          </v-list-item>
+
+          <v-list-item>
+            <v-list-item-content>
+              <v-list-item-title>Started</v-list-item-title>
+              <v-list-item-subtitle>{{ item.start }}</v-list-item-subtitle>
+            </v-list-item-content>
+          </v-list-item>
+
+          <v-list-item>
+            <v-list-item-content>
+              <v-list-item-title>Ended</v-list-item-title>
+              <v-list-item-subtitle>{{ item.end }}</v-list-item-subtitle>
+            </v-list-item-content>
+          </v-list-item>
+        </v-list>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+<script>
+import axios from 'axios';
+
+export default {
+  props: {
+    taskId: Number,
+    projectId: Number,
+  },
+  async created() {
+    await this.loadData();
+  },
+  methods: {
+    async loadData() {
+      this.item = (await axios({
+        method: 'get',
+        url: `/api/project/${this.projectId}/tasks/${this.taskId}`,
+        responseType: 'json',
+      })).data;
+      this.output = (await axios({
+        method: 'get',
+        url: `/api/project/${this.projectId}/tasks/${this.taskId}/output`,
+        responseType: 'json',
+      })).data;
+    },
+  },
+};
+</script>
diff --git a/web2/src/views/project/TemplateView.vue b/web2/src/views/project/TemplateView.vue
index 1571230b..3c6df18b 100644
--- a/web2/src/views/project/TemplateView.vue
+++ b/web2/src/views/project/TemplateView.vue
@@ -72,45 +72,53 @@
       >
         <v-icon left>mdi-pencil</v-icon>
       </v-btn>
-
     </v-toolbar>
 
-    <v-list two-line subheader>
-      <v-list-item>
-        <v-list-item-content>
-          <v-list-item-title>Playbook</v-list-item-title>
-          <v-list-item-subtitle>{{ item.playbook }}</v-list-item-subtitle>
-        </v-list-item-content>
-      </v-list-item>
+    <v-container class="pa-0">
+      <v-row>
+        <v-col>
+          <v-list two-line subheader>
+            <v-list-item>
+              <v-list-item-content>
+                <v-list-item-title>Playbook</v-list-item-title>
+                <v-list-item-subtitle>{{ item.playbook }}</v-list-item-subtitle>
+              </v-list-item-content>
+            </v-list-item>
 
-      <v-list-item>
-        <v-list-item-content>
-          <v-list-item-title>SSH Key</v-list-item-title>
-          <v-list-item-subtitle>{{ item.ssh_key_id }}</v-list-item-subtitle>
-        </v-list-item-content>
-      </v-list-item>
+            <v-list-item>
+              <v-list-item-content>
+                <v-list-item-title>SSH Key</v-list-item-title>
+                <v-list-item-subtitle>{{ item.ssh_key_id }}</v-list-item-subtitle>
+              </v-list-item-content>
+            </v-list-item>
+          </v-list>
+        </v-col>
+        <v-col>
+          <v-list two-line subheader>
+            <v-list-item>
+              <v-list-item-content>
+                <v-list-item-title>Inventory</v-list-item-title>
+                <v-list-item-subtitle>{{ item.inventory_id }}</v-list-item-subtitle>
+              </v-list-item-content>
+            </v-list-item>
 
-      <v-list-item>
-        <v-list-item-content>
-          <v-list-item-title>Inventory</v-list-item-title>
-          <v-list-item-subtitle>{{ item.inventory_id }}</v-list-item-subtitle>
-        </v-list-item-content>
-      </v-list-item>
+            <v-list-item>
+              <v-list-item-content>
+                <v-list-item-title>Environment</v-list-item-title>
+                <v-list-item-subtitle>{{ item.environment_id }}</v-list-item-subtitle>
+              </v-list-item-content>
+            </v-list-item>
 
-      <v-list-item>
-        <v-list-item-content>
-          <v-list-item-title>Environment</v-list-item-title>
-          <v-list-item-subtitle>{{ item.environment_id }}</v-list-item-subtitle>
-        </v-list-item-content>
-      </v-list-item>
-
-      <v-list-item>
-        <v-list-item-content>
-          <v-list-item-title>Repository</v-list-item-title>
-          <v-list-item-subtitle>{{ item.repository_id }}</v-list-item-subtitle>
-        </v-list-item-content>
-      </v-list-item>
-    </v-list>
+            <v-list-item>
+              <v-list-item-content>
+                <v-list-item-title>Repository</v-list-item-title>
+                <v-list-item-subtitle>{{ item.repository_id }}</v-list-item-subtitle>
+              </v-list-item-content>
+            </v-list-item>
+          </v-list>
+        </v-col>
+      </v-row>
+    </v-container>
 
     <h4 class="ml-4 mt-4">Task History</h4>
     <v-data-table
diff --git a/web2/src/views/project/Templates.vue b/web2/src/views/project/Templates.vue
index a2bc85cc..90f9b2de 100644
--- a/web2/src/views/project/Templates.vue
+++ b/web2/src/views/project/Templates.vue
@@ -9,7 +9,7 @@
       <template v-slot:form="{ onSave, onError, needSave, needReset }">
         <TemplateForm
           :project-id="projectId"
-          :item-id="itemId"
+          item-id="new"
           @save="onSave"
           @error="onError"
           :need-save="needSave"
@@ -18,6 +18,36 @@
       </template>
     </ItemDialog>
 
+    <ItemDialog
+      v-model="newTaskDialog"
+      save-button-text="Run"
+      title="New Task"
+      @save="onTaskCreate"
+    >
+      <template v-slot:form="{ onSave, onError, needSave, needReset }">
+        <TaskForm
+          :project-id="projectId"
+          item-id="new"
+          :template-id="itemId"
+          @save="onSave"
+          @error="onError"
+          :need-save="needSave"
+          :need-reset="needReset"
+        />
+      </template>
+    </ItemDialog>
+
+    <ItemDialog
+      v-model="taskLogDialog"
+      save-button-text="Delete"
+      title="Task Log"
+      @save="onTaskAskDelete"
+    >
+      <template v-slot:form="{}">
+        <TaskLogView :item-id="taskId" />
+      </template>
+    </ItemDialog>
+
     <v-toolbar flat color="white">
       <v-app-bar-nav-icon @click="showDrawer()"></v-app-bar-nav-icon>
       <v-toolbar-title>Task Templates</v-toolbar-title>
@@ -56,8 +86,8 @@
         {{ repositories.find((x) => x.id === item.repository_id).name }}
       </template>
 
-      <template v-slot:item.actions="{}">
-        <v-btn text color="black" class="pl-1 pr-2">
+      <template v-slot:item.actions="{ item }">
+        <v-btn text color="black" class="pl-1 pr-2" @click="createTask(item.id)">
           <v-icon class="pr-1">mdi-play</v-icon>
           Run
         </v-btn>
@@ -73,9 +103,11 @@
 import ItemListPageBase from '@/components/ItemListPageBase';
 import TemplateForm from '@/components/TemplateForm.vue';
 import axios from 'axios';
+import TaskForm from '@/components/TaskForm.vue';
+import TaskLogView from '@/components/TaskLogView.vue';
 
 export default {
-  components: { TemplateForm },
+  components: { TaskLogView, TemplateForm, TaskForm },
   mixins: [ItemListPageBase],
   async created() {
     await this.loadData();
@@ -86,6 +118,9 @@ export default {
       inventory: null,
       environment: null,
       repositories: null,
+      newTaskDialog: null,
+      taskLogDialog: null,
+      taskId: null,
     };
   },
   computed: {
@@ -94,6 +129,20 @@ export default {
     },
   },
   methods: {
+    onTaskCreate(e) {
+      this.taskId = e.item.id;
+      this.taskLogDialog = true;
+    },
+
+    onTaskAskDelete() {
+      // TODO: stop task
+    },
+
+    createTask(itemId) {
+      this.itemId = itemId;
+      this.newTaskDialog = true;
+    },
+
     getHeaders() {
       return [
         {