mirror of
https://github.com/n8n-io/n8n.git
synced 2025-03-05 20:50:17 -08:00
ab74bade05
## Summary Adding node execution status indicator to the output panel ([Figma HiFi](https://www.figma.com/file/iUduV3M4W5wZT7Gw5vgDn1/NDV-output-pane-success-state)). ## Related tickets and issues Fixes ADO-480 ## Review / Merge checklist - [x] PR title and summary are descriptive. **Remember, the title automatically goes into the changelog. Use `(no-changelog)` otherwise.** ([conventions](https://github.com/n8n-io/n8n/blob/master/.github/pull_request_title_conventions.md)) - [ ] [Docs updated](https://github.com/n8n-io/n8n-docs) or follow-up ticket created. - [x] Tests included. > A bug is not considered fixed, unless a test is added to prevent it from happening again. > A feature is not complete without tests.
78 lines
1.9 KiB
Vue
78 lines
1.9 KiB
Vue
<template>
|
|
<n8n-info-tip
|
|
v-if="hasStaleData"
|
|
theme="warning"
|
|
type="tooltip"
|
|
tooltipPlacement="right"
|
|
data-test-id="node-run-info-stale"
|
|
>
|
|
<span
|
|
v-html="
|
|
$locale.baseText(
|
|
hasPinData
|
|
? 'ndv.output.staleDataWarning.pinData'
|
|
: 'ndv.output.staleDataWarning.regular',
|
|
)
|
|
"
|
|
></span>
|
|
</n8n-info-tip>
|
|
<n8n-info-tip
|
|
v-else-if="runMetadata"
|
|
type="tooltip"
|
|
:theme="theme"
|
|
:data-test-id="`node-run-info-${theme}`"
|
|
tooltipPlacement="right"
|
|
>
|
|
<div>
|
|
<n8n-text :bold="true" size="small"
|
|
>{{
|
|
runTaskData.error
|
|
? $locale.baseText('runData.executionStatus.failed')
|
|
: $locale.baseText('runData.executionStatus.success')
|
|
}} </n8n-text
|
|
><br />
|
|
<n8n-text :bold="true" size="small">{{
|
|
$locale.baseText('runData.startTime') + ':'
|
|
}}</n8n-text>
|
|
{{ runMetadata.startTime }}<br />
|
|
<n8n-text :bold="true" size="small">{{
|
|
$locale.baseText('runData.executionTime') + ':'
|
|
}}</n8n-text>
|
|
{{ runMetadata.executionTime }} {{ $locale.baseText('runData.ms') }}
|
|
</div>
|
|
</n8n-info-tip>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from 'vue';
|
|
import type { ITaskData } from 'n8n-workflow';
|
|
import { convertToDisplayDateComponents } from '@/utils/formatters/dateFormatter';
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
taskData: {}, // ITaskData
|
|
hasStaleData: Boolean,
|
|
hasPinData: Boolean,
|
|
},
|
|
|
|
computed: {
|
|
theme(): string {
|
|
return this.runTaskData?.error ? 'danger' : 'success';
|
|
},
|
|
runTaskData(): ITaskData {
|
|
return this.taskData as ITaskData;
|
|
},
|
|
runMetadata(): { executionTime: number; startTime: string } | null {
|
|
if (!this.runTaskData) {
|
|
return null;
|
|
}
|
|
const { date, time } = convertToDisplayDateComponents(this.runTaskData.startTime);
|
|
return {
|
|
executionTime: this.runTaskData.executionTime,
|
|
startTime: `${date} at ${time}`,
|
|
};
|
|
},
|
|
},
|
|
});
|
|
</script>
|