mirror of
https://github.com/n8n-io/n8n.git
synced 2025-01-11 21:07:28 -08:00
refactor(editor): Migrate RunInfo.vue
to composition API (#10721)
This commit is contained in:
parent
482b5d8bec
commit
c64f37d580
|
@ -1,33 +1,34 @@
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
|
||||||
import type { ITaskData } from 'n8n-workflow';
|
import type { ITaskData } from 'n8n-workflow';
|
||||||
import { convertToDisplayDateComponents } from '@/utils/formatters/dateFormatter';
|
import { convertToDisplayDateComponents } from '@/utils/formatters/dateFormatter';
|
||||||
|
import { computed } from 'vue';
|
||||||
|
import { useI18n } from '@/composables/useI18n';
|
||||||
|
|
||||||
export default defineComponent({
|
const i18n = useI18n();
|
||||||
props: {
|
|
||||||
taskData: {}, // ITaskData
|
|
||||||
hasStaleData: Boolean,
|
|
||||||
hasPinData: Boolean,
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
const props = defineProps<{
|
||||||
theme(): string {
|
taskData: ITaskData | null;
|
||||||
return this.runTaskData?.error ? 'danger' : 'success';
|
hasStaleData?: boolean;
|
||||||
},
|
hasPinData?: boolean;
|
||||||
runTaskData(): ITaskData {
|
}>();
|
||||||
return this.taskData as ITaskData;
|
|
||||||
},
|
const runTaskData = computed(() => {
|
||||||
runMetadata(): { executionTime: number; startTime: string } | null {
|
return props.taskData;
|
||||||
if (!this.runTaskData) {
|
});
|
||||||
return null;
|
|
||||||
}
|
const theme = computed(() => {
|
||||||
const { date, time } = convertToDisplayDateComponents(this.runTaskData.startTime);
|
return props.taskData?.error ? 'danger' : 'success';
|
||||||
return {
|
});
|
||||||
executionTime: this.runTaskData.executionTime,
|
|
||||||
startTime: `${date} at ${time}`,
|
const runMetadata = computed(() => {
|
||||||
};
|
if (!runTaskData.value) {
|
||||||
},
|
return null;
|
||||||
},
|
}
|
||||||
|
const { date, time } = convertToDisplayDateComponents(runTaskData.value.startTime);
|
||||||
|
return {
|
||||||
|
executionTime: runTaskData.value.executionTime,
|
||||||
|
startTime: `${date} at ${time}`,
|
||||||
|
};
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -41,7 +42,7 @@ export default defineComponent({
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
v-html="
|
v-html="
|
||||||
$locale.baseText(
|
i18n.baseText(
|
||||||
hasPinData
|
hasPinData
|
||||||
? 'ndv.output.staleDataWarning.pinData'
|
? 'ndv.output.staleDataWarning.pinData'
|
||||||
: 'ndv.output.staleDataWarning.regular',
|
: 'ndv.output.staleDataWarning.regular',
|
||||||
|
@ -59,19 +60,17 @@ export default defineComponent({
|
||||||
<div>
|
<div>
|
||||||
<n8n-text :bold="true" size="small"
|
<n8n-text :bold="true" size="small"
|
||||||
>{{
|
>{{
|
||||||
runTaskData.error
|
runTaskData?.error
|
||||||
? $locale.baseText('runData.executionStatus.failed')
|
? i18n.baseText('runData.executionStatus.failed')
|
||||||
: $locale.baseText('runData.executionStatus.success')
|
: i18n.baseText('runData.executionStatus.success')
|
||||||
}} </n8n-text
|
}} </n8n-text
|
||||||
><br />
|
><br />
|
||||||
<n8n-text :bold="true" size="small">{{
|
<n8n-text :bold="true" size="small">{{ i18n.baseText('runData.startTime') + ':' }}</n8n-text>
|
||||||
$locale.baseText('runData.startTime') + ':'
|
|
||||||
}}</n8n-text>
|
|
||||||
{{ runMetadata.startTime }}<br />
|
{{ runMetadata.startTime }}<br />
|
||||||
<n8n-text :bold="true" size="small">{{
|
<n8n-text :bold="true" size="small">{{
|
||||||
$locale.baseText('runData.executionTime') + ':'
|
i18n.baseText('runData.executionTime') + ':'
|
||||||
}}</n8n-text>
|
}}</n8n-text>
|
||||||
{{ runMetadata.executionTime }} {{ $locale.baseText('runData.ms') }}
|
{{ runMetadata.executionTime }} {{ i18n.baseText('runData.ms') }}
|
||||||
</div>
|
</div>
|
||||||
</n8n-info-tip>
|
</n8n-info-tip>
|
||||||
</template>
|
</template>
|
||||||
|
|
Loading…
Reference in a new issue