[ui] View to add a new task

Adds a view at '/datajobs/new' to display a list of
ways to schedule a task. The modal to add a single
repository is moved from the task list to this view.

Signed-off-by: Eva Millán <[email protected]>

Author: evamillan

ui/src/assets/main.css

@@ -16,4 +16,4 @@ a {
   color: #1f2328;
   font-weight: 500;
   text-decoration: none;
-}
+}

ui/src/components/TaskList/FormDialog.vue renamed to ui/src/components/FormDialog.vue

@@ -1,14 +1,16 @@
 <template>
   <v-dialog v-model="isOpen" max-width="600">
     <template #activator="{ props: activatorProps }">
-      <v-btn
-        class="ml-auto"
-        color="secondary"
-        prepend-icon="mdi-plus"
-        text="Add"
-        variant="flat"
-        v-bind="activatorProps"
-      ></v-btn>
+      <slot name="activator" v-bind="{ props: activatorProps }">
+        <v-btn
+          class="ml-auto"
+          color="secondary"
+          prepend-icon="mdi-plus"
+          text="Add"
+          variant="flat"
+          v-bind="activatorProps"
+        ></v-btn>
+      </slot>
     </template>
 
     <v-card title="Schedule task">
@@ -47,29 +49,10 @@
           </v-col>
         </v-row>
         <v-row>
-          <v-col cols="6">
-            <v-radio-group
-              v-model="formData.scheduler.job_interval"
-              density="comfortable"
-              size="small"
-            >
-              <template #label>
-                <span class="text-subtitle-2">Interval</span>
-              </template>
-              <v-radio :value="86400" label="Every day"></v-radio>
-              <v-radio :value="604800" label="Every week"></v-radio>
-              <v-radio value="custom" label="Custom"></v-radio>
-            </v-radio-group>
-            <v-text-field
-              v-model="customInterval"
-              class="ml-8"
-              label="Every"
-              type="number"
-              suffix="seconds"
-              hide-details
-              required
-            >
-            </v-text-field>
+          <v-col>
+            <p class="text-subtitle-2 mb-4">Schedule</p>
+            <interval-selector v-model="formData.scheduler.job_interval" density="comfortable">
+            </interval-selector>
           </v-col>
         </v-row>
       </v-card-text>
@@ -83,8 +66,11 @@
   </v-dialog>
 </template>
 <script>
+import IntervalSelector from './IntervalSelector.vue'
+
 export default {
   name: 'FormDialog',
+  components: { IntervalSelector },
   emits: ['create'],
   data() {
     return {
@@ -99,7 +85,7 @@ export default {
           }
         },
         scheduler: {
-          job_interval: 604800,
+          job_interval: '604800',
           job_max_retries: 1
         }
       },
@@ -108,9 +94,6 @@ export default {
   },
   methods: {
     onSave() {
-      if (this.formData.scheduler.job_interval === 'custom') {
-        this.formData.scheduler.job_interval = this.customInterval
-      }
       this.$emit('create', this.formData)
       this.isOpen = false
     }

ui/src/components/TaskList/TaskList.vue

@@ -5,7 +5,14 @@
       <v-chip class="ml-2" density="comfortable">
         {{ count }}
       </v-chip>
-      <form-dialog @create="$emit('create', $event)" />
+      <v-btn
+        :to="{ name: 'newTask' }"
+        class="ml-auto"
+        color="secondary"
+        prepend-icon="mdi-plus"
+        text="Add"
+        variant="flat"
+      ></v-btn>
     </h1>
 
     <task-list-item
@@ -35,13 +42,12 @@
   </div>
 </template>
 <script>
-import FormDialog from './FormDialog.vue'
 import TaskListItem from './TaskListItem.vue'
 
 export default {
   name: 'TaskList',
-  components: { FormDialog, TaskListItem },
-  emits: ['create', 'delete', 'reschedule', 'update:page'],
+  components: { TaskListItem },
+  emits: ['delete', 'reschedule', 'update:page'],
   props: {
     tasks: {
       type: Array,

ui/src/components/TaskList/TaskListItem.vue

@@ -11,33 +11,33 @@
         <v-row>
           <v-col>
             <v-card-title class="text-subtitle-2 pb-0 d-flex align-center">
-            {{ id }}
-            <v-chip :color="status.toLowerCase()" class="ml-3" density="compact" size="small">
-              {{ status }}
-            </v-chip>
-          </v-card-title>
-          <v-card-subtitle class="font-weight-medium">
-            <v-icon :aria-label="backend" role="img" aria-hidden="false" size="small">
-              {{ 'mdi-' + backend }}
-            </v-icon>
-            {{ category }}
-            <v-tooltip v-if="uri" :text="uri" location="bottom" open-delay="200">
-              <template #activator="{ props }">
-                <span v-bind="props"> from {{ uri }} </span>
-              </template>
-            </v-tooltip>
-          </v-card-subtitle>
+              {{ id }}
+              <v-chip :color="status.toLowerCase()" class="ml-3" density="compact" size="small">
+                {{ status }}
+              </v-chip>
+            </v-card-title>
+            <v-card-subtitle class="font-weight-medium">
+              <v-icon :aria-label="backend" role="img" aria-hidden="false" size="small">
+                {{ 'mdi-' + backend }}
+              </v-icon>
+              {{ category }}
+              <v-tooltip v-if="uri" :text="uri" location="bottom" open-delay="200">
+                <template #activator="{ props }">
+                  <span v-bind="props"> from {{ uri }} </span>
+                </template>
+              </v-tooltip>
+            </v-card-subtitle>
           </v-col>
           <v-col class="px-0 py-md-6">
-            <div class="d-flex flex-wrap justify-end ">
+            <div class="d-flex flex-wrap justify-end">
               <v-tooltip
                 v-for="job in jobs"
                 :key="job.uuid"
                 :text="`#${job.job_num} ${job.status}`"
                 :eager="false"
                 location="bottom"
               >
-                <template v-slot:activator="{ props }">
+                <template #activator="{ props }">
                   <v-icon v-bind="props" :color="job.status"> mdi-square </v-icon>
                 </template>
               </v-tooltip>

ui/src/plugins/vuetify.js

@@ -41,10 +41,6 @@ export default createVuetify({
     VAlert: {
       variant: 'tonal'
     },
-    VBtn: {
-      variant: 'outlined',
-      size: 'small'
-    },
     VCombobox: {
       variant: 'outlined',
       density: 'comfortable'

ui/src/router/index.js

@@ -26,6 +26,34 @@ const router = createRouter({
           name: 'taskList',
           component: () => import('../views/Task/ListView.vue')
         },
+        {
+          path: 'new',
+          name: 'newTaskList',
+          meta: {
+            breadcrumb: {
+              title: 'New task',
+              to: { name: 'newTask' }
+            }
+          },
+          children: [
+            {
+              path: '',
+              name: 'newTask',
+              component: () => import('../views/Task/NewTask.vue')
+            },
+            {
+              path: 'sbom',
+              name: 'loadSbom',
+              meta: {
+                breadcrumb: {
+                  title: 'Load SBoM',
+                  to: { name: 'loadSbom' }
+                }
+              },
+              component: () => import('../views/Task/LoadSbom.vue')
+            }
+          ]
+        },
         {
           path: ':id',
           name: 'task',

ui/src/stories/FormDialog.stories.js

@@ -0,0 +1,9 @@
+import FormDialog from '@/components/FormDialog.vue'
+
+export default {
+  title: 'Components/FormDialog',
+  component: FormDialog,
+  tags: ['autodocs']
+}
+
+export const Default = {}

ui/src/views/Task/NewTask.vue

@@ -0,0 +1,95 @@
+<template>
+  <v-container>
+    <h1 class="text-h6 my-4">New task</h1>
+
+    <form-dialog @create="createTask($event)">
+      <template #activator="{ props: activatorProps }">
+        <v-card
+          v-bind="activatorProps"
+          title="Add a repository"
+          subtitle="Collect data from a single git repository"
+          prepend-icon="mdi-git"
+          variant="outlined"
+        ></v-card>
+      </template>
+    </form-dialog>
+
+    <v-card
+      :to="{ name: 'loadSbom' }"
+      title="Load SPDX SBoM file"
+      subtitle="Load repositories from an SBoM file in SPDX format"
+      prepend-icon="mdi-file-upload-outline"
+      variant="outlined"
+    ></v-card>
+
+    <v-snackbar v-model="snackbar.open" :color="snackbar.color">
+      {{ snackbar.text }}
+    </v-snackbar>
+  </v-container>
+</template>
+<script>
+import { API } from '@/services/api'
+import FormDialog from '@/components/FormDialog.vue'
+
+export default {
+  name: 'NewTask',
+  components: { FormDialog },
+  data() {
+    return {
+      snackbar: {
+        open: false,
+        color: 'success',
+        text: ''
+      }
+    }
+  },
+  methods: {
+    async createTask(formData) {
+      try {
+        const response = await API.scheduler.create(formData)
+        Object.assign(this.snackbar, {
+          open: true,
+          color: 'success',
+          text: response.data.message
+        })
+        this.$router.push({ name: 'taskList' })
+      } catch (error) {
+        Object.assign(this.snackbar, {
+          open: true,
+          color: 'error',
+          text: error.response?.data?.message || error
+        })
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@media (min-width: 1280px) {
+  .v-container {
+    max-width: 900px;
+  }
+}
+:deep(.v-card) {
+  background: rgb(var(--v-theme-surface));
+  border: thin solid rgba(0, 0, 0, 0.08);
+  margin-bottom: 12px;
+
+  .v-card-title {
+    font-size: 1rem;
+  }
+
+  .v-card-item__prepend {
+    margin-inline-end: 1rem;
+    background: #fff8f2;
+    padding: 8px;
+    border-radius: 4px;
+    border: thin solid currentColor;
+    color: rgb(var(--v-theme-secondary), 0.08);
+
+    .v-icon {
+      color: rgb(var(--v-theme-secondary));
+    }
+  }
+}
+</style>