From cf7e6e453f317874ba467a3d11d9b05dfc808a48 Mon Sep 17 00:00:00 2001
From: Michael Kret <michael.k@radency.com>
Date: Wed, 30 Oct 2024 14:51:57 +0200
Subject: [PATCH] component update

---
 packages/editor-ui/src/api/workflows.ts       |  1 +
 .../editor-ui/src/components/WorkflowCard.vue |  5 +-
 .../src/components/WorkflowStatistic.vue      | 61 +++++++++++++++----
 3 files changed, 52 insertions(+), 15 deletions(-)

diff --git a/packages/editor-ui/src/api/workflows.ts b/packages/editor-ui/src/api/workflows.ts
index c65c788ae2..1eb157c84a 100644
--- a/packages/editor-ui/src/api/workflows.ts
+++ b/packages/editor-ui/src/api/workflows.ts
@@ -36,6 +36,7 @@ export async function getWorkflow(context: IRestApiContext, id: string, filter?:
 export async function getWorkflows(context: IRestApiContext, filter?: object) {
 	return await makeRestApiRequest<IWorkflowDb[]>(context, 'GET', '/workflows', {
 		includeScopes: true,
+		includeExecutionStatistics: true,
 		...(filter ? { filter } : {}),
 	});
 }
diff --git a/packages/editor-ui/src/components/WorkflowCard.vue b/packages/editor-ui/src/components/WorkflowCard.vue
index 0ce8a92f17..41d1850049 100644
--- a/packages/editor-ui/src/components/WorkflowCard.vue
+++ b/packages/editor-ui/src/components/WorkflowCard.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import type { IWorkflowDb, IUser } from '@/Interface';
+import type { IWorkflowDb, IUser, ExecutionStatistics } from '@/Interface';
 import {
 	DUPLICATE_MODAL_KEY,
 	MODAL_CONFIRM,
@@ -51,6 +51,7 @@ const props = withDefaults(
 			sharedWithProjects: [],
 			homeProject: {} as ProjectSharingData,
 			versionId: '',
+			executionStatistics: {} as unknown as ExecutionStatistics,
 		}),
 		readOnly: false,
 	},
@@ -267,7 +268,7 @@ function moveResource() {
 		</div>
 		<template #append>
 			<div :class="$style.cardActions" @click.stop>
-				<WorkflowStatistic />
+				<WorkflowStatistic :statistic="data.executionStatistics" />
 				<ProjectCardBadge
 					:resource="data"
 					:resource-type="ResourceType.Workflow"
diff --git a/packages/editor-ui/src/components/WorkflowStatistic.vue b/packages/editor-ui/src/components/WorkflowStatistic.vue
index 6e1296591f..9f32621f28 100644
--- a/packages/editor-ui/src/components/WorkflowStatistic.vue
+++ b/packages/editor-ui/src/components/WorkflowStatistic.vue
@@ -1,16 +1,43 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { type ExecutionStatistics } from '@/Interface';
+
+const props = defineProps<{
+	statistic?: ExecutionStatistics;
+}>();
+
+const total = props.statistic ? props.statistic.successes + props.statistic.errors : 0;
+
+const tooltip = `
+<p>${total} production executions since creation</p>
+<p>${props.statistic?.successes || 0} successful</p>
+<p>${props.statistic?.errors || 0} failed</p>
+`;
+</script>
 
 <template>
-	<n8n-tooltip placement="top">
+	<n8n-tooltip v-if="statistic && total" placement="top">
 		<div class="statusText">
-			<n8n-icon icon="play-circle" color="info" />
-			<n8n-text color="text-base" size="small" bold> 40 | </n8n-text>
-			<n8n-icon icon="check-circle" color="success" />
-			<n8n-text color="text-base" size="small" bold> 26 | </n8n-text>
-			<n8n-icon icon="exclamation-triangle" color="danger" />
-			<n8n-text color="text-base" size="small" bold> 14 </n8n-text>
+			<span class="info-wrapper">
+				<n8n-icon icon="tasks" color="info" />
+				<n8n-text color="text-base" size="small" bold
+					>{{ total }}<span class="separator">|</span></n8n-text
+				>
+			</span>
+			<span v-if="statistic?.successes" class="info-wrapper">
+				<n8n-icon icon="check-circle" color="success" />
+				<n8n-text color="text-base" size="small" bold
+					>{{ statistic.successes
+					}}<span v-if="statistic?.errors" class="separator">|</span></n8n-text
+				>
+			</span>
+			<span v-if="statistic?.errors" class="info-wrapper">
+				<n8n-icon icon="exclamation-triangle" color="danger" />
+				<n8n-text color="text-base" size="small" bold> {{ statistic?.errors }} </n8n-text>
+			</span>
 		</div>
-		<template #content> statistic details </template>
+		<template #content>
+			<n8n-text v-n8n-html="tooltip" size="small"></n8n-text>
+		</template>
 	</n8n-tooltip>
 </template>
 
@@ -18,12 +45,20 @@
 .statusText {
 	padding-right: var(--spacing-s);
 	box-sizing: border-box;
-	display: inline-block;
 	text-align: right;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
 
-.icon {
-	font-size: var(--font-size-2xs);
-	width: 12px;
+.info-wrapper {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: var(--spacing-4xs);
+}
+
+.separator {
+	margin: 0 var(--spacing-3xs);
 }
 </style>