Add title/footer component to job metrics and parameters.

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>

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>

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"