admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-17 18:12:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(editor): Insights FE fixes and improvements (#14398)

Browse Source 
Co-authored-by: r00gm <raul00gm@gmail.com>
This commit is contained in:
Csaba Tuncsik
2025-04-07 10:55:56 +02:00
committed by GitHub
parent 8f9ea23019
commit e8a7acda6b
17 changed files with 277 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/frontend/editor-ui/src/components/MainSidebar.vue
View File

@@ -111,7 +111,9 @@ const mainMenuItems = computed(() => [
customIconSize: 'medium',
position: 'bottom',
route: { to: { name: VIEWS.INSIGHTS } },
available: hasPermission(['rbac'], { rbac: { scope: 'insights:list' } }),
available:
settingsStore.settings.insights.enabled &&
hasPermission(['rbac'], { rbac: { scope: 'insights:list' } }),
},
{
id: 'help',

7
packages/frontend/editor-ui/src/components/WorkflowSettings.vue
View File

@@ -380,7 +380,11 @@ const toggleTimeout = () => {
const updateTimeSavedPerExecution = (value: string) => {
const numValue = parseInt(value, 10);
workflowSettings.value.timeSavedPerExecution = isNaN(numValue) ? undefined : numValue;
workflowSettings.value.timeSavedPerExecution = isNaN(numValue)
? undefined
: numValue < 0
? 0
: numValue;
};
onMounted(async () => {
@@ -826,6 +830,7 @@ onMounted(async () => {
:disabled="readOnlyEnv || !workflowPermissions.update"
data-test-id="workflow-settings-time-saved-per-execution"
type="number"
min="0"
@update:model-value="updateTimeSavedPerExecution"
/>
<span>{{ i18n.baseText('workflowSettings.timeSavedPerExecution.hint') }}</span>

2
packages/frontend/editor-ui/src/features/insights/chartjs.utils.ts
View File

@@ -52,7 +52,7 @@ export const generateLineChartOptions = (
callbacks: {
label(context: ScriptableContext<'line'>) {
const label = context.dataset.label ?? '';
return `${label} ${smartDecimal(context.parsed.y)}`;
return `${label} ${smartDecimal(context.parsed.y).toLocaleString('en-US')}`;
},
labelColor(context: ScriptableContext<'line'>) {
return {

52
packages/frontend/editor-ui/src/features/insights/components/InsightsSummary.test.ts
View File

@@ -36,38 +36,50 @@ describe('InsightsSummary', () => {
[[]],
[
[
{ id: 'total', value: 525, deviation: 85, unit: '' },
{ id: 'failed', value: 14, deviation: 3, unit: '' },
{ id: 'failureRate', value: 1.9, deviation: -0.8, unit: '%' },
{ id: 'timeSaved', value: 55.55555555555556, deviation: -5.164722222222222, unit: 'h' },
{ id: 'averageRunTime', value: 2.5, deviation: -0.5, unit: 's' },
{ id: 'total', value: 525, deviation: 85, unit: '', deviationUnit: '%' },
{ id: 'failed', value: 14, deviation: 3, unit: '', deviationUnit: '%' },
{ id: 'failureRate', value: 1.9, deviation: -0.8, unit: '%', deviationUnit: 'pp' },
{
id: 'timeSaved',
value: 55.55555555555556,
deviation: -5.164722222222222,
unit: 'h',
deviationUnit: 'h',
},
{ id: 'averageRunTime', value: 2.5, deviation: -0.5, unit: 's', deviationUnit: 's' },
],
],
[
[
{ id: 'total', value: 525, deviation: 85, unit: '' },
{ id: 'failed', value: 14, deviation: 3, unit: '' },
{ id: 'failureRate', value: 1.9, deviation: -0.8, unit: '%' },
{ id: 'timeSaved', value: 0, deviation: 0, unit: 'h' },
{ id: 'averageRunTime', value: 2.5, deviation: -0.5, unit: 's' },
{ id: 'total', value: 525, deviation: 85, unit: '', deviationUnit: '%' },
{ id: 'failed', value: 14, deviation: 3, unit: '', deviationUnit: '%' },
{ id: 'failureRate', value: 1.9, deviation: -0.8, unit: '%', deviationUnit: 'pp' },
{ id: 'timeSaved', value: 0, deviation: 0, unit: 'h', deviationUnit: 'h' },
{ id: 'averageRunTime', value: 2.5, deviation: -0.5, unit: 's', deviationUnit: 's' },
],
],
[
[
{ id: 'total', value: 525, deviation: -2, unit: '' },
{ id: 'failed', value: 14, deviation: -3, unit: '' },
{ id: 'failureRate', value: 1.9, deviation: 0.8, unit: '%' },
{ id: 'timeSaved', value: 55.55555555555556, deviation: 0, unit: 'h' },
{ id: 'averageRunTime', value: 2.5, deviation: 0.5, unit: 's' },
{ id: 'total', value: 525, deviation: -2, unit: '', deviationUnit: '%' },
{ id: 'failed', value: 14, deviation: -3, unit: '', deviationUnit: '%' },
{ id: 'failureRate', value: 1.9, deviation: 0.8, unit: '%', deviationUnit: 'pp' },
{ id: 'timeSaved', value: 55.55555555555556, deviation: 0, unit: 'h', deviationUnit: 'h' },
{ id: 'averageRunTime', value: 2.5, deviation: 0.5, unit: 's', deviationUnit: 's' },
],
],
[
[
{ id: 'total', value: 525, deviation: null, unit: '' },
{ id: 'failed', value: 14, deviation: null, unit: '' },
{ id: 'failureRate', value: 1.9, deviation: null, unit: '%' },
{ id: 'timeSaved', value: 55.55555555555556, deviation: null, unit: 'h' },
{ id: 'averageRunTime', value: 2.5, deviation: null, unit: 's' },
{ id: 'total', value: 525, deviation: null, unit: '', deviationUnit: '%' },
{ id: 'failed', value: 14, deviation: null, unit: '', deviationUnit: '%' },
{ id: 'failureRate', value: 1.9, deviation: null, unit: '%', deviationUnit: 'pp' },
{
id: 'timeSaved',
value: 55.55555555555556,
deviation: null,
unit: 'h',
deviationUnit: 'h',
},
{ id: 'averageRunTime', value: 2.5, deviation: null, unit: 's', deviationUnit: 's' },
],
],
])('should render the summary correctly', (summary) => {

61
packages/frontend/editor-ui/src/features/insights/components/InsightsSummary.vue
View File

@@ -8,7 +8,7 @@ import {
import type { InsightsSummaryDisplay } from '@/features/insights/insights.types';
import type { InsightsSummary } from '@n8n/api-types';
import { smartDecimal } from '@n8n/utils/number/smartDecimal';
import { computed, useCssModule } from 'vue';
import { computed, ref, useCssModule } from 'vue';
import { useRoute } from 'vue-router';
const props = defineProps<{
@@ -20,6 +20,8 @@ const i18n = useI18n();
const route = useRoute();
const $style = useCssModule();
const lastNDays = ref(7);
const summaryTitles = computed<Record<keyof InsightsSummary, string>>(() => ({
total: i18n.baseText('insights.banner.title.total'),
failed: i18n.baseText('insights.banner.title.failed'),
@@ -35,7 +37,6 @@ const summaryWithRouteLocations = computed(() =>
})),
);
const getSign = (n: number) => (n > 0 ? '+' : undefined);
const getImpactStyle = (id: keyof InsightsSummary, value: number) => {
const impact = INSIGHTS_UNIT_IMPACT_MAPPING[id];
if (value === 0 || impact === INSIGHT_IMPACT_TYPES.NEUTRAL) {
@@ -53,18 +54,25 @@ const getImpactStyle = (id: keyof InsightsSummary, value: number) => {
<template>
<div :class="$style.insights">
<N8nHeading bold tag="h3" size="small" color="text-light" class="mb-xs">{{
i18n.baseText('insights.banner.title', { interpolate: { count: 7 } })
}}</N8nHeading>
<N8nLoading v-if="loading" :class="$style.loading" :cols="5" />
<ul v-else data-test-id="insights-summary-tabs">
<li
v-for="{ id, value, deviation, unit, to } in summaryWithRouteLocations"
v-for="{ id, value, deviation, deviationUnit, unit, to } in summaryWithRouteLocations"
:key="id"
:data-test-id="`insights-summary-tab-${id}`"
>
<router-link :to="to" :exact-active-class="$style.activeTab">
<strong>{{ summaryTitles[id] }}</strong>
<strong>
<N8nTooltip placement="bottom" :disabled="id !== 'timeSaved'">
<template #content>
{{ i18n.baseText('insights.banner.title.timeSaved.tooltip') }}
</template>
{{ summaryTitles[id] }}
</N8nTooltip>
</strong>
<small :class="$style.days">{{
i18n.baseText('insights.lastNDays', { interpolate: { count: lastNDays } })
}}</small>
<span v-if="value === 0 && id === 'timeSaved'" :class="$style.empty">
<em>--</em>
<small>
@@ -84,14 +92,19 @@ const getImpactStyle = (id: keyof InsightsSummary, value: number) => {
</span>
<span v-else>
<em
>{{ smartDecimal(value) }} <i>{{ unit }}</i></em
>{{ smartDecimal(value).toLocaleString('en-US') }} <i>{{ unit }}</i></em
>
<small v-if="deviation !== null" :class="getImpactStyle(id, deviation)">
<N8nIcon
:class="[$style.icon, getImpactStyle(id, deviation)]"
:icon="deviation === 0 ? 'caret-right' : deviation > 0 ? 'caret-up' : 'caret-down'"
/>
{{ getSign(deviation) }}{{ smartDecimal(deviation) }}
<N8nTooltip placement="bottom" :disabled="id !== 'failureRate'">
<template #content>
{{ i18n.baseText('insights.banner.failureRate.deviation.tooltip') }}
</template>
{{ smartDecimal(Math.abs(deviation)).toLocaleString('en-US') }}{{ deviationUnit }}
</N8nTooltip>
</small>
</span>
</router-link>
@@ -108,7 +121,7 @@ const getImpactStyle = (id: keyof InsightsSummary, value: number) => {
ul {
display: flex;
height: 91px;
height: 101px;
align-items: stretch;
justify-content: space-evenly;
border: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
@@ -131,9 +144,10 @@ const getImpactStyle = (id: keyof InsightsSummary, value: number) => {
a {
display: grid;
align-items: center;
align-content: center;
width: 100%;
height: 100%;
padding: var(--spacing-m) var(--spacing-l);
padding: var(--spacing-3xs) var(--spacing-l) 0;
border-bottom: 3px solid transparent;
&:hover {
@@ -148,17 +162,25 @@ const getImpactStyle = (id: keyof InsightsSummary, value: number) => {
}
strong {
justify-self: flex-start;
color: var(--color-text-dark);
font-size: var(--font-size-s);
font-weight: 400;
white-space: nowrap;
margin-bottom: var(--spacing-2xs);
margin-bottom: var(--spacing-3xs);
}
.days {
padding: 0;
margin: 0 0 var(--spacing-xs);
color: var(--color-text-light);
font-size: var(--font-size-2xs);
font-weight: var(--font-weight-normal);
}
span {
display: flex;
align-items: baseline;
gap: var(--spacing-xs);
&.empty {
em {
@@ -185,7 +207,7 @@ const getImpactStyle = (id: keyof InsightsSummary, value: number) => {
align-items: baseline;
justify-content: flex-start;
color: var(--color-text-dark);
font-size: var(--font-size-2xl);
font-size: 24px;
line-height: 100%;
font-weight: 600;
font-style: normal;
@@ -202,9 +224,10 @@ const getImpactStyle = (id: keyof InsightsSummary, value: number) => {
position: relative;
display: flex;
align-items: center;
padding: 0 0 0 18px;
font-size: 14px;
font-weight: 400;
padding: 0 0 0 14px;
margin: 0 0 0 var(--spacing-xs);
font-size: var(--font-size-2xs);
font-weight: var(--font-weight-bold);
white-space: nowrap;
}
}
@@ -223,13 +246,13 @@ const getImpactStyle = (id: keyof InsightsSummary, value: number) => {
color: var(--color-text-light);
.icon {
font-size: 23px;
font-size: 17px;
}
}
.icon {
position: absolute;
font-size: 32px;
font-size: 17px;
left: 0;
top: 50%;
transform: translateY(-50%);

87
packages/frontend/editor-ui/src/features/insights/components/__snapshots__/InsightsSummary.test.ts.snap
View File

@@ -2,62 +2,99 @@
exports[`InsightsSummary > should render the summary correctly 1`] = `
"<div class="insights">
<h3 class="n8n-heading text-light size-small bold mb-xs mb-xs">Production executions for the last 7 days</h3>
<ul data-test-id="insights-summary-tabs"></ul>
</div>"
`;
exports[`InsightsSummary > should render the summary correctly 2`] = `
"<div class="insights">
<h3 class="n8n-heading text-light size-small bold mb-xs mb-xs">Production executions for the last 7 days</h3>
<ul data-test-id="insights-summary-tabs">
<li data-test-id="insights-summary-tab-total"><a to="[object Object]" exact-active-class="activeTab"><strong>Total</strong><span><em>525 <i></i></em><small class="positive"><span class="n8n-text compact size-medium regular n8n-icon icon positive icon positive n8n-icon icon positive icon positive"><svg class="svg-inline--fa fa-caret-up fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-up" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z"></path></svg></span> +85</small></span></a></li>
<li data-test-id="insights-summary-tab-failed"><a to="[object Object]" exact-active-class="activeTab"><strong>Failed</strong><span><em>14 <i></i></em><small class="negative"><span class="n8n-text compact size-medium regular n8n-icon icon negative icon negative n8n-icon icon negative icon negative"><svg class="svg-inline--fa fa-caret-up fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-up" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z"></path></svg></span> +3</small></span></a></li>
<li data-test-id="insights-summary-tab-failureRate"><a to="[object Object]" exact-active-class="activeTab"><strong>Failure rate</strong><span><em>1.9 <i>%</i></em><small class="positive"><span class="n8n-text compact size-medium regular n8n-icon icon positive icon positive n8n-icon icon positive icon positive"><svg class="svg-inline--fa fa-caret-down fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span> -0.8</small></span></a></li>
<li data-test-id="insights-summary-tab-timeSaved"><a to="[object Object]" exact-active-class="activeTab"><strong>Time saved</strong><span><em>55.56 <i>h</i></em><small class="negative"><span class="n8n-text compact size-medium regular n8n-icon icon negative icon negative n8n-icon icon negative icon negative"><svg class="svg-inline--fa fa-caret-down fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span> -5.16</small></span></a></li>
<li data-test-id="insights-summary-tab-averageRunTime"><a to="[object Object]" exact-active-class="activeTab"><strong>Avg. run time</strong><span><em>2.5 <i>s</i></em><small class="neutral"><span class="n8n-text compact size-medium regular n8n-icon icon neutral icon neutral n8n-icon icon neutral icon neutral"><svg class="svg-inline--fa fa-caret-down fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span> -0.5</small></span></a></li>
<li data-test-id="insights-summary-tab-total"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Prod. executions</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>525 <i></i></em><small class="positive"><span class="n8n-text compact size-medium regular n8n-icon icon positive icon positive n8n-icon icon positive icon positive"><svg class="svg-inline--fa fa-caret-up fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-up" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 85%</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a></li>
<li data-test-id="insights-summary-tab-failed"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Failed prod. executions</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>14 <i></i></em><small class="negative"><span class="n8n-text compact size-medium regular n8n-icon icon negative icon negative n8n-icon icon negative icon negative"><svg class="svg-inline--fa fa-caret-up fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-up" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 3%</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a></li>
<li data-test-id="insights-summary-tab-failureRate"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Failure rate</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>1.9 <i>%</i></em><small class="positive"><span class="n8n-text compact size-medium regular n8n-icon icon positive icon positive n8n-icon icon positive icon positive"><svg class="svg-inline--fa fa-caret-down fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 0.8pp</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a></li>
<li data-test-id="insights-summary-tab-timeSaved"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Time saved</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>55.56 <i>h</i></em><small class="negative"><span class="n8n-text compact size-medium regular n8n-icon icon negative icon negative n8n-icon icon negative icon negative"><svg class="svg-inline--fa fa-caret-down fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 5.16h</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a></li>
<li data-test-id="insights-summary-tab-averageRunTime"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Run time (avg.)</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>2.5 <i>s</i></em><small class="neutral"><span class="n8n-text compact size-medium regular n8n-icon icon neutral icon neutral n8n-icon icon neutral icon neutral"><svg class="svg-inline--fa fa-caret-down fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 0.5s</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a></li>
</ul>
</div>"
`;
exports[`InsightsSummary > should render the summary correctly 3`] = `
"<div class="insights">
<h3 class="n8n-heading text-light size-small bold mb-xs mb-xs">Production executions for the last 7 days</h3>
<ul data-test-id="insights-summary-tabs">
<li data-test-id="insights-summary-tab-total"><a to="[object Object]" exact-active-class="activeTab"><strong>Total</strong><span><em>525 <i></i></em><small class="positive"><span class="n8n-text compact size-medium regular n8n-icon icon positive icon positive n8n-icon icon positive icon positive"><svg class="svg-inline--fa fa-caret-up fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-up" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z"></path></svg></span> +85</small></span></a></li>
<li data-test-id="insights-summary-tab-failed"><a to="[object Object]" exact-active-class="activeTab"><strong>Failed</strong><span><em>14 <i></i></em><small class="negative"><span class="n8n-text compact size-medium regular n8n-icon icon negative icon negative n8n-icon icon negative icon negative"><svg class="svg-inline--fa fa-caret-up fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-up" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z"></path></svg></span> +3</small></span></a></li>
<li data-test-id="insights-summary-tab-failureRate"><a to="[object Object]" exact-active-class="activeTab"><strong>Failure rate</strong><span><em>1.9 <i>%</i></em><small class="positive"><span class="n8n-text compact size-medium regular n8n-icon icon positive icon positive n8n-icon icon positive icon positive"><svg class="svg-inline--fa fa-caret-down fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span> -0.8</small></span></a></li>
<li data-test-id="insights-summary-tab-timeSaved"><a to="[object Object]" exact-active-class="activeTab"><strong>Time saved</strong><span class="empty"><em>--</em><small><span class="n8n-text compact size-medium regular n8n-icon icon el-tooltip__trigger el-tooltip__trigger icon el-tooltip__trigger el-tooltip__trigger n8n-icon icon el-tooltip__trigger el-tooltip__trigger icon el-tooltip__trigger el-tooltip__trigger"><svg class="svg-inline--fa fa-info-circle fa-w-16 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="info-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="" fill="currentColor" d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path></svg></span>
<li data-test-id="insights-summary-tab-total"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Prod. executions</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>525 <i></i></em><small class="positive"><span class="n8n-text compact size-medium regular n8n-icon icon positive icon positive n8n-icon icon positive icon positive"><svg class="svg-inline--fa fa-caret-up fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-up" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 85%</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a></li>
<li data-test-id="insights-summary-tab-failed"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Failed prod. executions</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>14 <i></i></em><small class="negative"><span class="n8n-text compact size-medium regular n8n-icon icon negative icon negative n8n-icon icon negative icon negative"><svg class="svg-inline--fa fa-caret-up fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-up" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 3%</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a></li>
<li data-test-id="insights-summary-tab-failureRate"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Failure rate</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>1.9 <i>%</i></em><small class="positive"><span class="n8n-text compact size-medium regular n8n-icon icon positive icon positive n8n-icon icon positive icon positive"><svg class="svg-inline--fa fa-caret-down fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 0.8pp</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a></li>
<li data-test-id="insights-summary-tab-timeSaved"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Time saved</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span class="empty"><em>--</em><small><span class="n8n-text compact size-medium regular n8n-icon icon el-tooltip__trigger el-tooltip__trigger icon el-tooltip__trigger el-tooltip__trigger n8n-icon icon el-tooltip__trigger el-tooltip__trigger icon el-tooltip__trigger el-tooltip__trigger"><svg class="svg-inline--fa fa-info-circle fa-w-16 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="info-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="" fill="currentColor" d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path></svg></span>
<!--teleport start-->
<!--teleport end--></small></span>
</a></li>
<li data-test-id="insights-summary-tab-averageRunTime"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Run time (avg.)</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>2.5 <i>s</i></em><small class="neutral"><span class="n8n-text compact size-medium regular n8n-icon icon neutral icon neutral n8n-icon icon neutral icon neutral"><svg class="svg-inline--fa fa-caret-down fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 0.5s</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a></li>
<li data-test-id="insights-summary-tab-averageRunTime"><a to="[object Object]" exact-active-class="activeTab"><strong>Avg. run time</strong><span><em>2.5 <i>s</i></em><small class="neutral"><span class="n8n-text compact size-medium regular n8n-icon icon neutral icon neutral n8n-icon icon neutral icon neutral"><svg class="svg-inline--fa fa-caret-down fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span> -0.5</small></span></a></li>
</ul>
</div>"
`;
exports[`InsightsSummary > should render the summary correctly 4`] = `
"<div class="insights">
<h3 class="n8n-heading text-light size-small bold mb-xs mb-xs">Production executions for the last 7 days</h3>
<ul data-test-id="insights-summary-tabs">
<li data-test-id="insights-summary-tab-total"><a to="[object Object]" exact-active-class="activeTab"><strong>Total</strong><span><em>525 <i></i></em><small class="negative"><span class="n8n-text compact size-medium regular n8n-icon icon negative icon negative n8n-icon icon negative icon negative"><svg class="svg-inline--fa fa-caret-down fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span> -2</small></span></a></li>
<li data-test-id="insights-summary-tab-failed"><a to="[object Object]" exact-active-class="activeTab"><strong>Failed</strong><span><em>14 <i></i></em><small class="positive"><span class="n8n-text compact size-medium regular n8n-icon icon positive icon positive n8n-icon icon positive icon positive"><svg class="svg-inline--fa fa-caret-down fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span> -3</small></span></a></li>
<li data-test-id="insights-summary-tab-failureRate"><a to="[object Object]" exact-active-class="activeTab"><strong>Failure rate</strong><span><em>1.9 <i>%</i></em><small class="negative"><span class="n8n-text compact size-medium regular n8n-icon icon negative icon negative n8n-icon icon negative icon negative"><svg class="svg-inline--fa fa-caret-up fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-up" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z"></path></svg></span> +0.8</small></span></a></li>
<li data-test-id="insights-summary-tab-timeSaved"><a to="[object Object]" exact-active-class="activeTab"><strong>Time saved</strong><span><em>55.56 <i>h</i></em><small class="neutral"><span class="n8n-text compact size-medium regular n8n-icon icon neutral icon neutral n8n-icon icon neutral icon neutral"><svg class="svg-inline--fa fa-caret-right fa-w-6 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path class="" fill="currentColor" d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"></path></svg></span> 0</small></span></a></li>
<li data-test-id="insights-summary-tab-averageRunTime"><a to="[object Object]" exact-active-class="activeTab"><strong>Avg. run time</strong><span><em>2.5 <i>s</i></em><small class="neutral"><span class="n8n-text compact size-medium regular n8n-icon icon neutral icon neutral n8n-icon icon neutral icon neutral"><svg class="svg-inline--fa fa-caret-up fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-up" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z"></path></svg></span> +0.5</small></span></a></li>
<li data-test-id="insights-summary-tab-total"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Prod. executions</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>525 <i></i></em><small class="negative"><span class="n8n-text compact size-medium regular n8n-icon icon negative icon negative n8n-icon icon negative icon negative"><svg class="svg-inline--fa fa-caret-down fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 2%</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a></li>
<li data-test-id="insights-summary-tab-failed"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Failed prod. executions</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>14 <i></i></em><small class="positive"><span class="n8n-text compact size-medium regular n8n-icon icon positive icon positive n8n-icon icon positive icon positive"><svg class="svg-inline--fa fa-caret-down fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 3%</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a></li>
<li data-test-id="insights-summary-tab-failureRate"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Failure rate</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>1.9 <i>%</i></em><small class="negative"><span class="n8n-text compact size-medium regular n8n-icon icon negative icon negative n8n-icon icon negative icon negative"><svg class="svg-inline--fa fa-caret-up fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-up" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 0.8pp</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a></li>
<li data-test-id="insights-summary-tab-timeSaved"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Time saved</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>55.56 <i>h</i></em><small class="neutral"><span class="n8n-text compact size-medium regular n8n-icon icon neutral icon neutral n8n-icon icon neutral icon neutral"><svg class="svg-inline--fa fa-caret-right fa-w-6 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path class="" fill="currentColor" d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 0h</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a></li>
<li data-test-id="insights-summary-tab-averageRunTime"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Run time (avg.)</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>2.5 <i>s</i></em><small class="neutral"><span class="n8n-text compact size-medium regular n8n-icon icon neutral icon neutral n8n-icon icon neutral icon neutral"><svg class="svg-inline--fa fa-caret-up fa-w-10 medium" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-up" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path class="" fill="currentColor" d="M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z"></path></svg></span><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> 0.5s</span>
<!--teleport start-->
<!--teleport end--></small></span>
</a></li>
</ul>
</div>"
`;
exports[`InsightsSummary > should render the summary correctly 5`] = `
"<div class="insights">
<h3 class="n8n-heading text-light size-small bold mb-xs mb-xs">Production executions for the last 7 days</h3>
<ul data-test-id="insights-summary-tabs">
<li data-test-id="insights-summary-tab-total"><a to="[object Object]" exact-active-class="activeTab"><strong>Total</strong><span><em>525 <i></i></em><!--v-if--></span></a></li>
<li data-test-id="insights-summary-tab-failed"><a to="[object Object]" exact-active-class="activeTab"><strong>Failed</strong><span><em>14 <i></i></em><!--v-if--></span></a></li>
<li data-test-id="insights-summary-tab-failureRate"><a to="[object Object]" exact-active-class="activeTab"><strong>Failure rate</strong><span><em>1.9 <i>%</i></em><!--v-if--></span></a></li>
<li data-test-id="insights-summary-tab-timeSaved"><a to="[object Object]" exact-active-class="activeTab"><strong>Time saved</strong><span><em>55.56 <i>h</i></em><!--v-if--></span></a></li>
<li data-test-id="insights-summary-tab-averageRunTime"><a to="[object Object]" exact-active-class="activeTab"><strong>Avg. run time</strong><span><em>2.5 <i>s</i></em><!--v-if--></span></a></li>
<li data-test-id="insights-summary-tab-total"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Prod. executions</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>525 <i></i></em><!--v-if--></span></a></li>
<li data-test-id="insights-summary-tab-failed"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Failed prod. executions</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>14 <i></i></em><!--v-if--></span></a></li>
<li data-test-id="insights-summary-tab-failureRate"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Failure rate</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>1.9 <i>%</i></em><!--v-if--></span></a></li>
<li data-test-id="insights-summary-tab-timeSaved"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Time saved</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>55.56 <i>h</i></em><!--v-if--></span></a></li>
<li data-test-id="insights-summary-tab-averageRunTime"><a to="[object Object]" exact-active-class="activeTab"><strong><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"> Run time (avg.)</span><!--teleport start--><!--teleport end--></strong><small class="days">Last 7 days</small><span><em>2.5 <i>s</i></em><!--v-if--></span></a></li>
</ul>
</div>"
`;

18
packages/frontend/editor-ui/src/features/insights/components/charts/InsightsChartAverageRuntime.vue
View File

@@ -1,17 +1,17 @@
<script lang="ts" setup>
import { computed } from 'vue';
import { Line } from 'vue-chartjs';
import { type ScriptableContext, type ChartData, Filler } from 'chart.js';
import dateformat from 'dateformat';
import type { InsightsByTime, InsightsSummaryType } from '@n8n/api-types';
import { useI18n } from '@/composables/useI18n';
import {
generateLinearGradient,
generateLineChartOptions,
} from '@/features/insights/chartjs.utils';
import { useI18n } from '@/composables/useI18n';
import { DATE_FORMAT_MASK, INSIGHTS_UNIT_MAPPING } from '@/features/insights/insights.constants';
import { transformInsightsAverageRunTime } from '@/features/insights/insights.utils';
import type { InsightsByTime, InsightsSummaryType } from '@n8n/api-types';
import { smartDecimal } from '@n8n/utils/number/smartDecimal';
import { INSIGHTS_UNIT_MAPPING } from '@/features/insights/insights.constants';
import { type ChartData, Filler, type ScriptableContext } from 'chart.js';
import dateformat from 'dateformat';
import { computed } from 'vue';
import { Line } from 'vue-chartjs';
const props = defineProps<{
data: InsightsByTime[];
@@ -27,7 +27,7 @@ const chartOptions = computed(() =>
callbacks: {
label: (context) => {
const label = context.dataset.label ?? '';
return `${label} ${smartDecimal(context.parsed.y)}${INSIGHTS_UNIT_MAPPING[props.type]}`;
return `${label} ${smartDecimal(context.parsed.y)}${INSIGHTS_UNIT_MAPPING[props.type](context.parsed.y)}`;
},
},
},
@@ -40,7 +40,7 @@ const chartData = computed<ChartData<'line'>>(() => {
const data: number[] = [];
for (const entry of props.data) {
labels.push(dateformat(entry.date, 'd. mmm'));
labels.push(dateformat(entry.date, DATE_FORMAT_MASK));
const value = transformInsightsAverageRunTime(entry.values.averageRunTime);

3
packages/frontend/editor-ui/src/features/insights/components/charts/InsightsChartFailed.vue
View File

@@ -8,6 +8,7 @@ import type { InsightsByTime, InsightsSummaryType } from '@n8n/api-types';
import { generateBarChartOptions } from '@/features/insights/chartjs.utils';
import { useI18n } from '@/composables/useI18n';
import { smartDecimal } from '@n8n/utils/number/smartDecimal';
import { DATE_FORMAT_MASK } from '@/features/insights/insights.constants';
const props = defineProps<{
data: InsightsByTime[];
@@ -37,7 +38,7 @@ const chartData = computed<ChartData<'bar'>>(() => {
const data: number[] = [];
for (const entry of props.data) {
labels.push(dateformat(entry.date, 'd. mmm'));
labels.push(dateformat(entry.date, DATE_FORMAT_MASK));
data.push(entry.values.failed);
}

22
packages/frontend/editor-ui/src/features/insights/components/charts/InsightsChartFailureRate.vue
View File

@@ -1,15 +1,15 @@
<script lang="ts" setup>
import { useI18n } from '@/composables/useI18n';
import { generateBarChartOptions } from '@/features/insights/chartjs.utils';
import { DATE_FORMAT_MASK, INSIGHTS_UNIT_MAPPING } from '@/features/insights/insights.constants';
import { transformInsightsFailureRate } from '@/features/insights/insights.utils';
import type { InsightsByTime, InsightsSummaryType } from '@n8n/api-types';
import { smartDecimal } from '@n8n/utils/number/smartDecimal';
import { useCssVar } from '@vueuse/core';
import type { ChartData } from 'chart.js';
import dateformat from 'dateformat';
import { computed } from 'vue';
import { Bar } from 'vue-chartjs';
import type { ChartData } from 'chart.js';
import { useCssVar } from '@vueuse/core';
import dateformat from 'dateformat';
import type { InsightsByTime, InsightsSummaryType } from '@n8n/api-types';
import { generateBarChartOptions } from '@/features/insights/chartjs.utils';
import { useI18n } from '@/composables/useI18n';
import { transformInsightsFailureRate } from '@/features/insights/insights.utils';
import { smartDecimal } from '@n8n/utils/number/smartDecimal';
import { INSIGHTS_UNIT_MAPPING } from '@/features/insights/insights.constants';
const props = defineProps<{
data: InsightsByTime[];
@@ -26,7 +26,7 @@ const chartOptions = computed(() =>
callbacks: {
label: (context) => {
const label = context.dataset.label ?? '';
return `${label} ${smartDecimal(context.parsed.y)}${INSIGHTS_UNIT_MAPPING[props.type]}`;
return `${label} ${smartDecimal(context.parsed.y)}${INSIGHTS_UNIT_MAPPING[props.type](context.parsed.y)}`;
},
},
},
@@ -39,7 +39,7 @@ const chartData = computed<ChartData<'bar'>>(() => {
const data: number[] = [];
for (const entry of props.data) {
labels.push(dateformat(entry.date, 'd. mmm'));
labels.push(dateformat(entry.date, DATE_FORMAT_MASK));
data.push(transformInsightsFailureRate(entry.values.failureRate));
}

34
packages/frontend/editor-ui/src/features/insights/components/charts/InsightsChartTimeSaved.vue
View File

@@ -1,17 +1,17 @@
<script lang="ts" setup>
import { computed } from 'vue';
import { Line } from 'vue-chartjs';
import { type ScriptableContext, type ChartData, Filler } from 'chart.js';
import dateformat from 'dateformat';
import type { InsightsByTime, InsightsSummaryType } from '@n8n/api-types';
import { useI18n } from '@/composables/useI18n';
import {
generateLinearGradient,
generateLineChartOptions,
} from '@/features/insights/chartjs.utils';
import { useI18n } from '@/composables/useI18n';
import { transformInsightsTimeSaved } from '@/features/insights/insights.utils';
import { smartDecimal } from '@n8n/utils/number/smartDecimal';
import { INSIGHTS_UNIT_MAPPING } from '@/features/insights/insights.constants';
import { DATE_FORMAT_MASK, INSIGHTS_UNIT_MAPPING } from '@/features/insights/insights.constants';
import type { InsightsByTime, InsightsSummaryType } from '@n8n/api-types';
import { type ChartData, Filler, type ScriptableContext } from 'chart.js';
import dateformat from 'dateformat';
import { computed } from 'vue';
import { Line } from 'vue-chartjs';
const props = defineProps<{
data: InsightsByTime[];
@@ -27,7 +27,18 @@ const chartOptions = computed(() =>
callbacks: {
label: (context) => {
const label = context.dataset.label ?? '';
return `${label} ${smartDecimal(context.parsed.y)}${INSIGHTS_UNIT_MAPPING[props.type]}`;
const value = Number(context.parsed.y);
return `${label} ${transformInsightsTimeSaved(value).toLocaleString('en-US')}${INSIGHTS_UNIT_MAPPING[props.type](value)}`;
},
},
},
},
scales: {
y: {
ticks: {
// eslint-disable-next-line id-denylist
callback(tickValue) {
return transformInsightsTimeSaved(Number(tickValue));
},
},
},
@@ -40,9 +51,8 @@ const chartData = computed<ChartData<'line'>>(() => {
const data: number[] = [];
for (const entry of props.data) {
labels.push(dateformat(entry.date, 'd. mmm'));
const timeSaved = transformInsightsTimeSaved(entry.values.timeSaved);
data.push(timeSaved);
labels.push(dateformat(entry.date, DATE_FORMAT_MASK));
data.push(entry.values.timeSaved);
}
return {

3
packages/frontend/editor-ui/src/features/insights/components/charts/InsightsChartTotal.vue
View File

@@ -7,6 +7,7 @@ import dateformat from 'dateformat';
import type { InsightsByTime, InsightsSummaryType } from '@n8n/api-types';
import { generateBarChartOptions } from '@/features/insights/chartjs.utils';
import { useI18n } from '@/composables/useI18n';
import { DATE_FORMAT_MASK } from '@/features/insights/insights.constants';
const props = defineProps<{
data: InsightsByTime[];
@@ -33,7 +34,7 @@ const chartData = computed<ChartData<'bar'>>(() => {
const failedData: number[] = [];
for (const entry of props.data) {
labels.push(dateformat(entry.date, 'd. mmm'));
labels.push(dateformat(entry.date, DATE_FORMAT_MASK));
succeededData.push(entry.values.succeeded);
failedData.push(entry.values.failed);
}

26
packages/frontend/editor-ui/src/features/insights/components/tables/InsightsTableWorkflows.vue
View File

@@ -1,4 +1,5 @@
<script lang="ts" setup="">
import { useI18n } from '@/composables/useI18n';
import { INSIGHTS_UNIT_MAPPING } from '@/features/insights/insights.constants';
import {
transformInsightsAverageRunTime,
@@ -18,6 +19,8 @@ const props = defineProps<{
loading?: boolean;
}>();
const i18n = useI18n();
type Item = InsightsByWorkflow['data'][number];
const rows = computed(() => props.data.data);
@@ -30,39 +33,46 @@ const headers = ref<Array<TableHeader<Item>>>([
disableSort: true,
},
{
title: 'Total executions',
title: i18n.baseText('insights.banner.title.total'),
key: 'total',
value(row) {
return row.total.toLocaleString('en-US');
},
},
{
title: 'Total failed executions',
title: i18n.baseText('insights.banner.title.failed'),
key: 'failed',
value(row) {
return row.failed.toLocaleString('en-US');
},
},
{
title: 'Average run time',
title: i18n.baseText('insights.banner.title.failureRate'),
key: 'failureRate',
value(row) {
return (
smartDecimal(transformInsightsFailureRate(row.failureRate)) +
INSIGHTS_UNIT_MAPPING.failureRate
INSIGHTS_UNIT_MAPPING.failureRate(row.failureRate)
);
},
},
{
title: 'Time saved',
title: i18n.baseText('insights.banner.title.timeSaved'),
key: 'timeSaved',
value(row) {
return (
smartDecimal(transformInsightsTimeSaved(row.timeSaved)) + INSIGHTS_UNIT_MAPPING.timeSaved
smartDecimal(transformInsightsTimeSaved(row.timeSaved)) +
INSIGHTS_UNIT_MAPPING.timeSaved(row.timeSaved)
);
},
},
{
title: 'Run time',
title: i18n.baseText('insights.banner.title.averageRunTime'),
key: 'averageRunTime',
value(row) {
return (
smartDecimal(transformInsightsAverageRunTime(row.averageRunTime)) +
INSIGHTS_UNIT_MAPPING.averageRunTime
INSIGHTS_UNIT_MAPPING.averageRunTime(row.averageRunTime)
);
},
},

25
packages/frontend/editor-ui/src/features/insights/insights.constants.ts
View File

@@ -8,12 +8,23 @@ export const INSIGHTS_SUMMARY_ORDER: InsightsSummaryType[] = [
'averageRunTime',
];
export const INSIGHTS_UNIT_MAPPING: Record<InsightsSummaryType, string> = {
total: '',
failed: '',
failureRate: '%',
timeSaved: 'h',
averageRunTime: 's',
export const INSIGHTS_UNIT_MAPPING: Record<InsightsSummaryType, (value: number) => string> = {
total: () => '',
failed: () => '',
failureRate: () => '%',
timeSaved: (value: number) => (Math.abs(value) < 3600 ? 'm' : 'h'),
averageRunTime: () => 's',
} as const;
export const INSIGHTS_DEVIATION_UNIT_MAPPING: Record<
InsightsSummaryType,
(deviation: number) => string
> = {
total: () => '%',
failed: () => '%',
failureRate: () => 'pp',
timeSaved: (deviation: number) => (Math.abs(deviation) < 3600 ? 'm' : 'h'),
averageRunTime: () => 's',
} as const;
export const INSIGHT_IMPACT_TYPES = {
@@ -32,3 +43,5 @@ export const INSIGHTS_UNIT_IMPACT_MAPPING: Record<
timeSaved: INSIGHT_IMPACT_TYPES.POSITIVE, // More time saved is good → positive (green)
averageRunTime: INSIGHT_IMPACT_TYPES.NEUTRAL, // Not good or bad → neutral (grey)
} as const;
export const DATE_FORMAT_MASK = 'mmm d';

5
packages/frontend/editor-ui/src/features/insights/insights.router.ts
View File

@@ -1,5 +1,6 @@
import { RouterView, type RouteRecordRaw } from 'vue-router';
import { VIEWS } from '@/constants';
import { useInsightsStore } from '@/features/insights/insights.store';
const MainSidebar = async () => await import('@/components/MainSidebar.vue');
const InsightsDashboard = async () =>
@@ -8,6 +9,10 @@ const InsightsDashboard = async () =>
export const insightsRoutes: RouteRecordRaw[] = [
{
path: '/insights',
beforeEnter() {
const insightsStore = useInsightsStore();
return insightsStore.isInsightsEnabled || { name: VIEWS.NOT_FOUND };
},
components: {
default: RouterView,
sidebar: MainSidebar,

9
packages/frontend/editor-ui/src/features/insights/insights.types.ts
View File

@@ -1,6 +1,10 @@
import type { INSIGHTS_UNIT_MAPPING } from '@/features/insights/insights.constants';
import type {
INSIGHTS_UNIT_MAPPING,
INSIGHTS_DEVIATION_UNIT_MAPPING,
} from '@/features/insights/insights.constants';
type InsightsDisplayUnits = typeof INSIGHTS_UNIT_MAPPING;
type InsightsDisplayDeviationUnits = typeof INSIGHTS_DEVIATION_UNIT_MAPPING;
export type InsightsSummaryDisplay = Array<
{
@@ -8,7 +12,8 @@ export type InsightsSummaryDisplay = Array<
id: K;
value: number;
deviation: number | null;
unit: InsightsDisplayUnits[K];
deviationUnit: ReturnType<InsightsDisplayDeviationUnits[K]>;
unit: ReturnType<InsightsDisplayUnits[K]>;
};
}[keyof InsightsDisplayUnits]
>;

38
packages/frontend/editor-ui/src/features/insights/insights.utils.ts
View File

@@ -3,28 +3,46 @@ import type { InsightsSummaryDisplay } from '@/features/insights/insights.types'
import {
INSIGHTS_SUMMARY_ORDER,
INSIGHTS_UNIT_MAPPING,
INSIGHTS_DEVIATION_UNIT_MAPPING,
} from '@/features/insights/insights.constants';
export const transformInsightsTimeSaved = (value: number): number => value / 3600; // we want to show saved time in hours
export const transformInsightsAverageRunTime = (value: number): number => value / 1000; // we want to show average run time in seconds
export const transformInsightsTimeSaved = (seconds: number): number =>
Math.round(seconds / (Math.abs(seconds) < 3600 ? 60 : 3600)); // we want to show saved time in minutes or hours
export const transformInsightsAverageRunTime = (ms: number): number => ms / 1000; // we want to show average run time in seconds
export const transformInsightsFailureRate = (value: number): number => value * 100; // we want to show failure rate in percentage
export const transformInsightsValues: Partial<
Record<InsightsSummaryType, (value: number) => number>
> = {
export const transformInsightsValues: Record<InsightsSummaryType, (value: number) => number> = {
total: (value: number) => value,
failed: (value: number) => value,
timeSaved: transformInsightsTimeSaved,
averageRunTime: transformInsightsAverageRunTime,
failureRate: transformInsightsFailureRate,
};
export const transformInsightsDeviation: Record<
InsightsSummaryType,
(value: number, deviation: number) => number
> = {
total: (value: number, deviation: number) => (deviation / value) * 100,
failed: (value: number, deviation: number) => (deviation / value) * 100,
timeSaved: (_: number, deviation: number) => transformInsightsTimeSaved(deviation),
averageRunTime: (_: number, deviation: number) => transformInsightsAverageRunTime(deviation),
failureRate: (_: number, deviation: number) => transformInsightsFailureRate(deviation),
};
export const transformInsightsSummary = (data: InsightsSummary | null): InsightsSummaryDisplay =>
data
? INSIGHTS_SUMMARY_ORDER.map((key) => ({
id: key,
value: transformInsightsValues[key]?.(data[key].value) ?? data[key].value,
deviation: data[key].deviation
? (transformInsightsValues[key]?.(data[key].deviation) ?? data[key].deviation)
: null,
unit: INSIGHTS_UNIT_MAPPING[key],
value: transformInsightsValues[key](data[key].value),
deviation:
data[key].deviation === null
? null
: transformInsightsDeviation[key](data[key].value, data[key].deviation),
deviationUnit:
data[key].deviation === null
? ''
: INSIGHTS_DEVIATION_UNIT_MAPPING[key](data[key].deviation),
unit: INSIGHTS_UNIT_MAPPING[key](data[key].value),
}))
: [];

14
packages/frontend/editor-ui/src/plugins/i18n/locales/en.json
View File

@@ -3073,15 +3073,17 @@
"freeAi.credits.showError.claim.message": "Enable to claim credits",
"freeAi.credits.showWarning.workflow.activation.title": "You're using free OpenAI API credits",
"freeAi.credits.showWarning.workflow.activation.description": "To make sure your workflow runs smoothly in the future, replace the free OpenAI API credits with your own API key.",
"insights.banner.title": "Production executions for the last {count} days",
"insights.lastNDays": "Last {count} days",
"insights.banner.timeSaved.tooltip": "No estimate available yet. To see potential time savings, {link} to each workflow from workflow settings.",
"insights.banner.timeSaved.tooltip.link.text": "add time estimates",
"insights.banner.title.total": "Total",
"insights.banner.title.failed": "Failed",
"insights.banner.title.succeeded": "Succeeded",
"insights.banner.title.total": "Prod. executions",
"insights.banner.title.failed": "Failed prod. executions",
"insights.banner.title.succeeded": "Successful prod. executions",
"insights.banner.title.failureRate": "Failure rate",
"insights.banner.title.timeSaved": "Time saved",
"insights.banner.title.timeSavedDailyAverage": "Time saved daily avg.",
"insights.banner.title.averageRunTime": "Avg. run time",
"insights.dashboard.title": "Insights"
"insights.banner.title.averageRunTime": "Run time (avg.)",
"insights.dashboard.title": "Insights",
"insights.banner.title.timeSaved.tooltip": "Total time saved calculated from your estimated time savings per execution across all workflows",
"insights.banner.failureRate.deviation.tooltip": "Percentage point change from previous period"
}