mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

component update

Browse source
This commit is contained in:
Michael Kret 2024-10-30 14:51:57 +02:00 committed by Ivan Atanasov
parent db51b3a5f4
commit cf7e6e453f
No known key found for this signature in database
3 changed files with 52 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/editor-ui/src/api/workflows.ts
View file

@ -36,6 +36,7 @@ export async function getWorkflow(context: IRestApiContext, id: string, filter?:
export async function getWorkflows(context: IRestApiContext, filter?: object) { export async function getWorkflows(context: IRestApiContext, filter?: object) {
return await makeRestApiRequest<IWorkflowDb[]>(context, 'GET', '/workflows', { return await makeRestApiRequest<IWorkflowDb[]>(context, 'GET', '/workflows', {
includeScopes: true, includeScopes: true,
includeExecutionStatistics: true,
...(filter ? { filter } : {}), ...(filter ? { filter } : {}),
}); });
} }

5
packages/editor-ui/src/components/WorkflowCard.vue
View file

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed } from 'vue';
import type { IWorkflowDb, IUser } from '@/Interface'; import type { IWorkflowDb, IUser, ExecutionStatistics } from '@/Interface';
import { import {
DUPLICATE_MODAL_KEY, DUPLICATE_MODAL_KEY,
MODAL_CONFIRM, MODAL_CONFIRM,
@ -51,6 +51,7 @@ const props = withDefaults(
sharedWithProjects: [], sharedWithProjects: [],
homeProject: {} as ProjectSharingData, homeProject: {} as ProjectSharingData,
versionId: '', versionId: '',
executionStatistics: {} as unknown as ExecutionStatistics,
}), }),
readOnly: false, readOnly: false,
}, },
@ -267,7 +268,7 @@ function moveResource() {
</div> </div>
<template #append> <template #append>
<div :class="$style.cardActions" @click.stop> <div :class="$style.cardActions" @click.stop>
<WorkflowStatistic /> <WorkflowStatistic :statistic="data.executionStatistics" />
<ProjectCardBadge <ProjectCardBadge
:resource="data" :resource="data"
:resource-type="ResourceType.Workflow" :resource-type="ResourceType.Workflow"

61
packages/editor-ui/src/components/WorkflowStatistic.vue
View file

@ -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> <template>
<n8n-tooltip placement="top"> <n8n-tooltip v-if="statistic && total" placement="top">
<div class="statusText"> <div class="statusText">
<n8n-icon icon="play-circle" color="info" /> <span class="info-wrapper">
<n8n-text color="text-base" size="small" bold> 40 | </n8n-text> <n8n-icon icon="tasks" color="info" />
<n8n-icon icon="check-circle" color="success" /> <n8n-text color="text-base" size="small" bold
<n8n-text color="text-base" size="small" bold> 26 | </n8n-text> >{{ total }}<span class="separator">|</span></n8n-text
<n8n-icon icon="exclamation-triangle" color="danger" /> >
<n8n-text color="text-base" size="small" bold> 14 </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> </div>
<template #content> statistic details </template> <template #content>
<n8n-text v-n8n-html="tooltip" size="small"></n8n-text>
</template>
</n8n-tooltip> </n8n-tooltip>
</template> </template>
@ -18,12 +45,20 @@
.statusText { .statusText {
padding-right: var(--spacing-s); padding-right: var(--spacing-s);
box-sizing: border-box; box-sizing: border-box;
display: inline-block;
text-align: right; text-align: right;
display: flex;
align-items: center;
justify-content: center;
} }
.icon { .info-wrapper {
font-size: var(--font-size-2xs); display: flex;
width: 12px; align-items: center;
justify-content: center;
gap: var(--spacing-4xs);
}
.separator {
margin: 0 var(--spacing-3xs);
} }
</style> </style>