refactor(editor): Migrate RunInfo.vue to composition API (#10721)

This commit is contained in:
Ricardo Espinoza 2024-09-10 10:20:40 -04:00 committed by GitHub
parent 482b5d8bec
commit c64f37d580
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

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