From 2f0f136cac7180626b9ad34888248e38a5f3bfe1 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Mon, 27 Nov 2023 18:07:05 -0500
Subject: [PATCH] Add title/footer component to job metrics and parameters.

---
 .../Markdown/Elements/JobMetrics.vue          | 39 ++++++++++--------
 .../Markdown/Elements/JobParameters.vue       | 41 +++++++++++--------
 .../components/Markdown/MarkdownContainer.vue | 13 +++++-
 3 files changed, 57 insertions(+), 36 deletions(-)

diff --git a/client/src/components/Markdown/Elements/JobMetrics.vue b/client/src/components/Markdown/Elements/JobMetrics.vue
index 03aab3ffa538..e350e3ac11c1 100644
--- a/client/src/components/Markdown/Elements/JobMetrics.vue
+++ b/client/src/components/Markdown/Elements/JobMetrics.vue
@@ -1,26 +1,31 @@
+<script setup lang="ts">
+import JobMetrics from "@/components/JobMetrics/JobMetrics.vue";
+
+interface JobMetricsProps {
+    jobId: string;
+    title?: string;
+    footer?: string;
+}
+
+withDefaults(defineProps<JobMetricsProps>(), {
+    title: null,
+    footer: null,
+});
+</script>
+
 <template>
     <b-card nobody>
+        <b-card-title v-if="title">
+            <b>{{ title }}</b>
+        </b-card-title>
         <JobMetrics
             class="job-metrics"
-            :job-id="args.job_id"
+            :job-id="jobId"
             :should-show-aws-estimate="false"
             :should-show-carbon-emissions-estimates="false"
             :include-title="false" />
+        <b-card-footer v-if="footer">
+            {{ footer }}
+        </b-card-footer>
     </b-card>
 </template>
-
-<script>
-import JobMetrics from "components/JobMetrics/JobMetrics";
-
-export default {
-    components: {
-        JobMetrics,
-    },
-    props: {
-        args: {
-            type: Object,
-            default: null,
-        },
-    },
-};
-</script>
diff --git a/client/src/components/Markdown/Elements/JobParameters.vue b/client/src/components/Markdown/Elements/JobParameters.vue
index 2b19ab0e9594..049b68757183 100644
--- a/client/src/components/Markdown/Elements/JobParameters.vue
+++ b/client/src/components/Markdown/Elements/JobParameters.vue
@@ -1,21 +1,28 @@
+<script setup lang="ts">
+import JobParameters from "@/components/JobParameters/JobParameters.vue";
+
+interface JobParametersProps {
+    jobId: string;
+    param?: string;
+    title?: string;
+    footer?: string;
+}
+
+withDefaults(defineProps<JobParametersProps>(), {
+    param: undefined,
+    title: null,
+    footer: null,
+});
+</script>
+
 <template>
     <b-card nobody>
-        <JobParameters class="job-parameters" :job-id="args.job_id" :param="args.param" :include-title="false" />
+        <b-card-title v-if="title">
+            <b>{{ title }}</b>
+        </b-card-title>
+        <JobParameters class="job-parameters" :job-id="jobId" :param="param" :include-title="false" />
+        <b-card-footer v-if="footer">
+            {{ footer }}
+        </b-card-footer>
     </b-card>
 </template>
-
-<script>
-import JobParameters from "components/JobParameters/JobParameters";
-
-export default {
-    components: {
-        JobParameters,
-    },
-    props: {
-        args: {
-            type: Object,
-            default: null,
-        },
-    },
-};
-</script>
diff --git a/client/src/components/Markdown/MarkdownContainer.vue b/client/src/components/Markdown/MarkdownContainer.vue
index 13806a855da4..a76c465c10d0 100644
--- a/client/src/components/Markdown/MarkdownContainer.vue
+++ b/client/src/components/Markdown/MarkdownContainer.vue
@@ -148,8 +148,17 @@ function argToBoolean(args, name, booleanDefault) {
             <HistoryDatasetLink v-else-if="name == 'history_dataset_link'" :args="args" />
             <HistoryDatasetIndex v-else-if="name == 'history_dataset_index'" :args="args" />
             <InvocationTime v-else-if="name == 'invocation_time'" :args="args" :invocations="invocations" />
-            <JobMetrics v-else-if="name == 'job_metrics'" :args="args" />
-            <JobParameters v-else-if="name == 'job_parameters'" :args="args" />
+            <JobMetrics
+                v-else-if="name == 'job_metrics'"
+                :job-id="args.job_id"
+                :title="args.title"
+                :footer="args.footer" />
+            <JobParameters
+                v-else-if="name == 'job_parameters'"
+                :job-id="args.job_id"
+                :param="args.param || undefined"
+                :title="args.title"
+                :footer="args.footer" />
             <WorkflowDisplay
                 v-else-if="name == 'workflow_display'"
                 :workflow-id="args.workflow_id"