From d9fce67204be059784e1d6e4dc0a49c784de6044 Mon Sep 17 00:00:00 2001
From: Paul Pestov <10750176+paulpestov@users.noreply.github.com>
Date: Tue, 5 Dec 2023 23:31:30 +0100
Subject: [PATCH] feat: add titles to timeline item columns
---
src/components/Workflows.vue | 4 +--
.../workflows/WorkflowsTimeline.vue | 2 +-
.../workflows/timeline/TimelineItem.vue | 36 ++++++++++++-------
3 files changed, 26 insertions(+), 16 deletions(-)
diff --git a/src/components/Workflows.vue b/src/components/Workflows.vue
index eafff1e..7f20484 100644
--- a/src/components/Workflows.vue
+++ b/src/components/Workflows.vue
@@ -70,9 +70,9 @@
</template>
<template v-else>
<div class="flex mb-6">
- <p class="text-amber-600 flex-grow-0 p-4 bg-amber-100 rounded-md"><span class="font-semibold">Disclaimer:</span> This is an experimental view.</p>
+ <p class="text-amber-600 flex-grow-0 px-4 py-2 bg-amber-100 rounded-md text-sm"><span class="font-semibold">Disclaimer:</span> This is an experimental view.</p>
</div>
- <div class="flex mb-3">
+ <div class="flex mb-6">
<SelectButton v-model="selectedOption" :options="options" optionLabel="name"></SelectButton>
<Filters class="ml-auto"/>
</div>
diff --git a/src/components/workflows/WorkflowsTimeline.vue b/src/components/workflows/WorkflowsTimeline.vue
index 8a033b4..d912a1d 100644
--- a/src/components/workflows/WorkflowsTimeline.vue
+++ b/src/components/workflows/WorkflowsTimeline.vue
@@ -44,7 +44,7 @@ watch(selectedMetric,
unstyled
/>
</div>
- <div class="flex flex-col space-y-4">
+ <div class="flex flex-col space-y-6">
<template v-if="gtList.length > 0">
<TimelineItem v-for="gt in gtList" :key="gt.id" :gt="gt" :metric="selectedMetricValue" />
</template>
diff --git a/src/components/workflows/timeline/TimelineItem.vue b/src/components/workflows/timeline/TimelineItem.vue
index 287a6cd..69d96b7 100644
--- a/src/components/workflows/timeline/TimelineItem.vue
+++ b/src/components/workflows/timeline/TimelineItem.vue
@@ -9,6 +9,7 @@ import { Icon } from '@iconify/vue'
import { onMounted, ref } from "vue"
import { OverlayPanelDropdownStyles } from "@/helpers/pt"
import workflowsStore from "@/store/workflows-store"
+import HomeView from "@/views/HomeView.vue"
const props = defineProps<{
gt: GroundTruth,
@@ -75,31 +76,40 @@ function hideParametersOverlay() {
<template v-slot:default>
<div class="flex border-t border-gray-300 py-4 px-4">
<table class="table-fixed w-full">
- <tr v-for="workflow in workflows" :key="workflow.id">
+ <thead>
+ <tr class="">
+ <th class="text-left pb-4">{{ $t('workflows') }}</th>
+ <th class="text-left pb-4">{{ $t('processors') }}</th>
+ <th class="text-right pr-[314px] pb-4">{{ $t('timeline') }}</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr v-for="workflow in workflows" :key="workflow.id">
<td class="font-semibold pe-2">{{ workflow.label }}</td>
<td class="p-1 overflow-x-auto">
<span
- v-for="step in workflow.steps"
- :key="step.id"
- class="p-1 cursor-pointer"
- @mouseenter="showParametersOverlay(step, $event)"
- @mouseleave="hideParametersOverlay()"
+ v-for="step in workflow.steps"
+ :key="step.id"
+ class="p-1 cursor-pointer"
+ @mouseenter="showParametersOverlay(step, $event)"
+ @mouseleave="hideParametersOverlay()"
>
{{ getStepAcronym(step.id) }}
</span>
</td>
<td class="overflow-x-auto">
<MetricChart
- :runs="workflowsStore.getRuns(gt.id, workflow.id)"
- :workflow-name="workflow.label"
- :metric="metric"
- :width="400"
- :start-date="startDate"
- :end-date="endDate"
- class="flex justify-end"
+ :runs="workflowsStore.getRuns(gt.id, workflow.id)"
+ :workflow-name="workflow.label"
+ :metric="metric"
+ :width="400"
+ :start-date="startDate"
+ :end-date="endDate"
+ class="flex justify-end"
/>
</td>
</tr>
+ </tbody>
</table>
</div>
</template>
--
GitLab