Resolve "Display workflow execution parameters"

Closes #83 (closed)

src/components/workflows/modals/ParameterModal.vue

+<script setup lang="ts">
+import BootstrapModal from "@/components/modals/BootstrapModal.vue";
+import { computed, onMounted, reactive, watch } from "vue";
+import { useWorkflowExecutionStore } from "@/stores/workflowExecutions";
+import type { RouteParamsRaw } from "vue-router";
+import { Modal } from "bootstrap";
+import { useRouter } from "vue-router";
+import FontAwesomeIcon from "@/components/FontAwesomeIcon.vue";
+import { useWorkflowStore } from "@/stores/workflows";
+
+const workflowRepository = useWorkflowStore();
+const executionRepository = useWorkflowExecutionStore();
+const router = useRouter();
+
+let parameterModal: Modal | null = null;
+
+const props = defineProps<{
+  modalID: string;
+  executionId?: string;
+}>();
+
+const parameterState = reactive<{
+  loading: boolean;
+  error: boolean;
+}>({
+  loading: false,
+  error: false,
+});
+
+const workflowName = computed<string>(() => {
+  if (props.executionId) {
+    const execution = executionRepository.executionMapping[props.executionId];
+    if (
+      execution?.workflow_id != undefined &&
+      execution?.workflow_version_id != undefined
+    ) {
+      return (
+        workflowRepository.getName(execution.workflow_id) +
+        "@" +
+        workflowRepository.getName(execution.workflow_version_id)
+      );
+    }
+  }
+  return "";
+});
+
+function fetchWorkflowExecutionParameters(executionId?: string) {
+  parameterState.error = false;
+  if (executionId != undefined) {
+    parameterState.loading = true;
+    executionRepository
+      .fetchExecutionParameters(executionId)
+      .catch(() => {
+        parameterState.error = true;
+      })
+      .finally(() => {
+        parameterState.loading = false;
+      });
+  }
+}
+
+function handleBucketLinkClick(s3String: string) {
+  parameterModal?.hide();
+  router.push({
+    name: "bucket",
+    params: getS3LinkParameters(s3String),
+  });
+}
+
+function getS3LinkParameters(s3String: string): RouteParamsRaw {
+  const pathComponents = s3String.slice(5).split("/");
+  const s3File =
+    pathComponents.length > 1 &&
+    pathComponents[pathComponents.length - 1].includes(".");
+  return {
+    bucketName: pathComponents[0],
+    subFolders: pathComponents.slice(1, s3File ? -1 : undefined),
+  };
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function isBucketLink(value: any): boolean {
+  if (typeof value === "string") {
+    return value.startsWith("s3://");
+  }
+  return false;
+}
+
+watch(
+  () => props.executionId,
+  (newId, oldId) => {
+    if (newId != oldId) {
+      fetchWorkflowExecutionParameters(newId);
+    }
+  },
+);
+
+onMounted(() => {
+  fetchWorkflowExecutionParameters(props.executionId);
+  parameterModal = Modal.getOrCreateInstance("#" + props.modalID);
+});
+</script>
+
+<template>
+  <bootstrap-modal
+    :modalID="modalID"
+    :static-backdrop="false"
+    modal-label="Workflow Execution Parameters Modal"
+  >
+    <template v-slot:header
+      >Workflow Execution Parameters
+      <b>
+        {{ workflowName }}
+      </b>
+    </template>
+    <template v-slot:body>
+      <div v-if="parameterState.error" class="text-center fs-4 mt-5">
+        <font-awesome-icon
+          icon="fa-solid fa-magnifying-glass"
+          class="mb-3 fs-0"
+          style="color: var(--bs-secondary)"
+        />
+        <p>
+          Workflow Execution <i>{{ props.executionId }}</i> not found
+        </p>
+      </div>
+      <table v-else-if="props.executionId" class="table table-hover">
+        <caption class="placeholder-glow">
+          <span v-if="parameterState.loading" class="placeholder col-1"></span>
+          <template v-else>
+            {{
+              Object.keys(executionRepository.parameters[props.executionId])
+                .length
+            }}
+          </template>
+          Parameters
+        </caption>
+        <tbody>
+          <template v-if="parameterState.loading">
+            <tr v-for="n in 6" :key="n">
+              <th scope="row" style="width: 20%" class="placeholder-glow">
+                <div class="placeholder col-12"></div>
+              </th>
+              <td class="placeholder-glow">
+                <div class="placeholder col-8"></div>
+              </td>
+            </tr>
+          </template>
+          <template v-else>
+            <tr
+              v-for="(value, name) in executionRepository.parameters[
+                props.executionId
+              ]"
+              :key="name"
+            >
+              <th scope="row" style="width: 10%" class="text-end">
+                <b>{{ name }}</b>
+              </th>
+              <td>
+                <router-link
+                  v-if="isBucketLink(value)"
+                  :to="{
+                    name: 'bucket',
+                    params: getS3LinkParameters(value),
+                  }"
+                  @click.prevent="handleBucketLinkClick(value)"
+                  >{{ value }}
+                </router-link>
+                <template v-else>{{ value }}</template>
+              </td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+    </template>
+    <template v-slot:footer>
+      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+        Close
+      </button>
+    </template>
+  </bootstrap-modal>
+</template>
+
+<style scoped></style>