feat(frontend): redesign common Job creation form

This commit makes the following changes to the Job creation form in the frontend:

- Jobs can now be created through the all-jobs page and the experiment -> job page.
- Entrypoint dropdown will be greyed out until experiment is selected, and will only show
  entrypoints that are linked to the selected experiment
- Queue dropdown will be greyed out until entrypoint is selected, and will only show queues that
  are linked to the selected entrypoint
- A message with link that opens a dialog box to update experiment/entrypoint associations is added
  under the Entrypoint dropdown
- A message with link that opens a dialog box to update entrypoint/queue associations is added under
  the Queue dropdown
- Returning to an unsaved form should give you the option to load previous values

Author: henrychoy

src/frontend/src/dialogs/AppendResource.vue

@@ -0,0 +1,125 @@
+<template>
+  <DialogComponent 
+    v-model="showDialog"
+    @emitSubmit="submit"
+    :hideDraftBtn="true"
+  >
+    <template #title>
+      <label id="modalTitle">
+        Assign {{ childResourceType }} for '{{ parentResourceObj.name }}'
+      </label>
+    </template>
+    <q-select
+      outlined
+      dense
+      v-model="childResourceObjs"
+      use-input
+      use-chips
+      multiple
+      option-label="name"
+      option-value="id"
+      input-debounce="100"
+      :options="childResourceOptions"
+      @filter="getChildResources"
+    >
+      <template v-slot:before>
+        <div class="field-label text-capitalize">{{ childResourceType }}:</div>
+      </template>
+      <template v-slot:selected>
+        <div>
+          <div
+            v-for="(resource, i) in childResourceObjs"
+            :key="resource.id"
+            :class="i > 0 ? 'q-mt-xs' : ''"
+            >
+              <q-chip
+                removable
+                color="secondary"
+                text-color="white"
+                class="q-ml-xs "
+                @remove="childResourceObjs.splice(i, 1)"
+              >
+                {{ resource.name }}
+              </q-chip>
+          </div>
+        </div>
+      </template>
+    </q-select>
+  </DialogComponent>
+</template>
+
+<script setup>
+  import { ref, watch, computed } from 'vue'
+  import DialogComponent from './DialogComponent.vue'
+  import * as api from '@/services/dataApi'
+  import * as notify from '../notify'
+
+
+  const props = defineProps(['parentResourceType', 'parentResourceObj', 'childResourceType' ])
+  const emit = defineEmits(['submit'])
+
+  const showDialog = defineModel()
+
+  const childResourceObjs = ref([])
+  const selectedChildIds = computed(() => {
+    return childResourceObjs.value.map((obj) => obj.id)
+  })
+
+  const childResourceOptions = ref([])
+  const originalChildIds = ref()
+
+  watch(showDialog, (newVal) => {
+    if(newVal) {
+      console.log('props = ', props.parentResourceObj)
+      childResourceObjs.value = JSON.parse(JSON.stringify(props.parentResourceObj[props.childResourceType]))
+      originalChildIds.value = JSON.parse(JSON.stringify(props.parentResourceObj[props.childResourceType].map((obj) => obj.id)))
+    }
+  })
+
+  async function submit() {
+    let childIdsToAdd = []
+    let childIdsToRemove = []
+
+    selectedChildIds.value.forEach((id) => {
+      if (!originalChildIds.value.includes(id)) {
+        childIdsToAdd.push(id)
+      }
+    })
+
+    originalChildIds.value.forEach((id) => {
+      if (!selectedChildIds.value.includes(id)) {
+        childIdsToRemove.push(id)
+      }
+    })
+
+    try {
+      if(childIdsToAdd.length > 0) {
+        await api.appendResource(props.parentResourceType, props.parentResourceObj.id, props.childResourceType, childIdsToAdd)
+      }
+      for(const id of childIdsToRemove) {
+        await api.removeResourceFromResource(props.parentResourceType, props.parentResourceObj.id, props.childResourceType, id)
+      }
+      notify.success(`Successfully updated ${props.childResourceType} for  '${props.parentResourceObj.name}'`)
+      showDialog.value = false
+      emit('submit')
+    } catch (err) {
+      notify.error(err.message)
+    }
+  }
+
+  async function getChildResources(val = '', update) {
+    update(async () => {
+      try {
+        const res = await api.getData(props.childResourceType, {
+          search: val,
+          rowsPerPage: 0, // get all
+          index: 0
+        })
+        childResourceOptions.value = res.data.data.filter((ep) => !selectedChildIds.value.includes(ep.id))
+      } catch(err) {
+        notify.error(err.response.data.message)
+      } 
+    })
+  }
+
+</script>

src/frontend/src/router/index.ts

@@ -48,6 +48,10 @@ const router = createRouter({
       path: '/experiments/:id/jobs/:jobId',
       component: () => import('../views/CreateJob.vue')
     },
+    {
+      path: '/jobs/new',
+      component: () => import('../views/CreateJob.vue')
+    },
     {
       path: '/experiments/:id',
       component: () => import('../views/CreateExperiment.vue')

src/frontend/src/services/dataApi.ts

@@ -315,6 +315,14 @@ export async function removePluginFromEntrypoint(entrypointId: string, pluginId:
   return await axios.delete(`/api/entrypoints/${entrypointId}/plugins/${pluginId}`)
 }
 
+export async function appendResource<T extends ItemType>(parentResourceType: T, parentResourceId: number, childResourceType: T, ids: number[]) {
+  return await axios.post(`/api/${parentResourceType}/${parentResourceId}/${childResourceType}`, {ids})
+}
+
+export async function removeResourceFromResource<T extends ItemType>(parentResourceType: T, parentResourceId: number, childResourceType: T, id: number) {
+  return await axios.delete(`/api/${parentResourceType}/${parentResourceId}/${childResourceType}/${id}`)
+}
+
 export async function getVersions(id: string,) {
   return await axios.get(`/api/models/${id}/versions`)
 }

src/frontend/src/views/AllJobsView.vue

@@ -11,8 +11,11 @@
     ref="tableRef"
     :hideEditBtn="true"
     @editTags="(row) => { editObjTags = row; showTagsDialog = true }"
-    :hideCreateBtn="true"
+    @create="router.push('/jobs/new')"
   >
+    <template #body-cell-experiment="props">
+      {{ props.row.experiment.name }}
+    </template>
     <template #body-cell-entrypoint="props">
       {{ props.row.entrypoint.name }}
     </template>
@@ -61,6 +64,7 @@
   const columns = [
     { name: 'description', label: 'Description', align: 'left', field: 'description', sortable: true, },
     { name: 'id', label: 'Job ID', align: 'left', field: 'id', sortable: false, },
+    { name: 'experiment', label: 'Experiment', align: 'left', field: 'experiment', sortable: false, },
     { name: 'entrypoint', label: 'Entrypoint', align: 'left', field: 'entrypoint', sortable: false, },
     { name: 'queue', label: 'Queue', align: 'left', field: 'queue', sortable: false, },
     { name: 'status', label: 'Status', align: 'left', field: 'status', sortable: true },