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) {
return await makeRestApiRequest<IWorkflowDb[]>(context, 'GET', '/workflows', {
includeScopes: true,
includeExecutionStatistics: true,
...(filter ? { filter } : {}),
});
}

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

@ -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"

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>
<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>