mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-19 02:51:14 +00:00
feat(editor): implement executions preview via the new executions tab in node view (#4311)
* ✨ Added main header tabs with current workflow execution count * ⚡ feat(editor): header tab navigation (no-changelog) (#4244) * ✨ Adding current workflow execution list to the Vuex store * ✨ Updating current workflow executions after running a workflow from the node view * ✨ Keeping the tab view content alive when switching tabs in main header * ✨ Updating main header controls to work with current workflow regardless of active tab * 🐛 Fixing a bug with previous WF executions still visible after creating a new WF * ⚡ Updating saved status when new WF is created * ✨ Implemented initial version of execution perview * ✨ Keeping the WF view alive when switching to executions tab in new navigation * ✨ Implemented executions landing page * ✨ Simplifying node view navigation * ✨ Updating executions view zoom and selection to work with the new layout * ✨ Using N8nRadioButtons component for main header tabs * 💄 Implementing executions page states. Minor refactoring. * ⚡ Merge conflict fixes and pieces of code that were left behind * ⚡ Fixing layout and scrolling changes introduced after sync with master branch * ⚡ Removing keep-alive from node view which broke template opening and some more leftover code * ✔️ Fixing linting errors * ✔️ One more lint error * ⚡ Implemented executions preview using iframes * ⚡ Fixing zoom menu positioning in iframe and adding different loading types to workflow preview * ⚡ Fixing navigation to and from WF templates and template loading * ⚡ Updating and fixing navigation to and from node view * 👌 Addressing previous PR comments * 🐛 Fixing infinite loading when saving a new workflow * 🐛 Handling opening already opened WF when not on Node view * ✨ Implemented empty states for executions view * ⚡ Adding execute button shake flag to the store so it doesn't mess up navigation by modifying route params * 💄 Started adding new styles to execution sidebar * 💄 Adding hover style for execution list * ⚡ Added ExecutionsCard component and added executions helper mixin * ✔️ Fixing leftover conflict * ✔️ One more conflict * ✨ Implemented retry execution menu and manual execution icon. Other minor updates * ✨ Implemented executions filtering * 💄 Updating running executions details in preview * ⚡ Added info accordion to executions sidebar * ✨ Implemented auto-refresh for executions sidebar * 💄 Adding running execution landing page, minor fixes * 💄 General refactoring * ✔️ Adding leftover conflict changes * ✔️ Updating `InfoTip` component test snapshots * ✔️ Fixing linting error * ✔️ Fixing lint errors in vuex store module * 👌 Started addressing review feedback * ⚡ Updating executions preview behaviour when filters are applied * 🐛 Fixing a bug where nodes and connections disappear if something is saved from executions view before loading WF in the main NodeView * 🐛 Fixing pasting in executions view and wrong workflow activator state * ⚡ Improved workflow switching and navigation, updated error message when trying to paste into execution * ⚡ Some more navigation updates * 💄 Fixing tab centering, execution filter button layout, added auto-refresh checkbox * 🐛 Fixing a bug when saving workflow using save button * 💄 Addressing design feedback, added delete execution button * ⚡ Moving main execution logic to the root executions view * ⚡ Implemented execution delete function * ⚡ Updating how switching tabs for new unsaved workflows work * ⚡ Remembering active execution when switching tabs * 💄 Addressing design feedback regarding info accordion * 💄 Updating execution card styling * ⚡ Resetting executions when creating new workflow * Fixing lint error * ⚡ Hiding executions preview is active execution is not in the results. Updated execution list spacing * ⚡ Fixing navigation to and from templates and executions * ⚡ Implemented execution lazy loading and added new background to execution preview * 💄 Disabling import when on executions tab * ⚡ Handling opening executions from different workflow * ⚡ Updating active execution on route change * ⚡ Updating execution tab detection * ⚡ Simplifying and updating navigation. Adding new route for new workflows * ⚡ Updating workflow saving logic to work with new routes * 🐛 Fixing a bug when returning to executions from different workflow * 💄 Updating executions info accordion and node details view modal in execution preview * 💄 Updating workflow activated modal to point to new executions view * ⚡ Implemented opening new executions view from execution modal * ⚡ Handling jsplumb init errors, updating unknown executions style * ⚡ Updating main sidebar after syncing branch * ⚡ Opening new trigger menu from executions view * 💄 Updating sidebar resize behaviour * ✔️ Fixing lint errors * ⚡ Loading executions when mounting executions view * ⚡ Resetting execution data when creating a new workflow * 💄 Minor wording updates * ⚡ Not reloading node view when new workflows are saved * Removing leftover console log * 🐛 Fixed a bug with save dialog not appearing when leaving executions tab * ⚡ Updating manual execution settings detection in info accordion * 💄 Addressing UI issues found during bug bash * Fixing workflow saving logic * ⚡ Preventing navigation if clicked tab is already opened * ⚡ Updating lazy loading behaviour * ⚡ Updating delete executions flow * ⚡ Added retry executions button to the execution preview * ⚡ Adding empty execution state, updating trigger detection logic, removing listeners when node view is not active * 💄 Cosmetic code improvements * ⚡ Trying the performance fix for nodeBase * ⚡ Removing the `NodeBase`fix * 🐛 Fixing a bug when saving the current workflow * 👌 Addressing code review feedback
This commit is contained in:
Milorad FIlipović
committed by
GitHub
GitHub
parent
99157cf581
commit
d833345092
@@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<div
|
||||
:class="{
|
||||
['execution-card']: true,
|
||||
[$style.executionCard]: true,
|
||||
[$style.active]: isActive,
|
||||
[$style[executionUIDetails.name]]: true,
|
||||
[$style.highlight]: highlight,
|
||||
}"
|
||||
>
|
||||
<router-link
|
||||
:class="$style.executionLink"
|
||||
:to="{ name: VIEWS.EXECUTION_PREVIEW, params: { workflowId: currentWorkflow, executionId: execution.id }}"
|
||||
>
|
||||
<div :class="$style.description">
|
||||
<n8n-text color="text-dark" :bold="true" size="medium">{{ executionUIDetails.startTime }}</n8n-text>
|
||||
<div :class="$style.executionStatus">
|
||||
<n8n-spinner v-if="executionUIDetails.name === 'running'" size="small" :class="[$style.spinner, 'mr-4xs']"/>
|
||||
<n8n-text :class="$style.statusLabel" size="small">{{ executionUIDetails.label }}</n8n-text>
|
||||
<n8n-text v-if="executionUIDetails.name === 'running'" :color="isActive? 'text-dark' : 'text-base'" size="small">
|
||||
{{ $locale.baseText('executionDetails.runningTimeRunning', { interpolate: { time: executionUIDetails.runningTime } }) }}
|
||||
</n8n-text>
|
||||
<n8n-text v-else-if="executionUIDetails.name !== 'waiting' && executionUIDetails.name !== 'unknown'" :color="isActive? 'text-dark' : 'text-base'" size="small">
|
||||
{{ $locale.baseText('executionDetails.runningTimeFinished', { interpolate: { time: executionUIDetails.runningTime } }) }}
|
||||
</n8n-text>
|
||||
</div>
|
||||
<div v-if="execution.mode === 'retry'">
|
||||
<n8n-text :color="isActive? 'text-dark' : 'text-base'" size="small">
|
||||
{{ $locale.baseText('executionDetails.retry') }} #{{ execution.retryOf }}
|
||||
</n8n-text>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="$style.icons">
|
||||
<n8n-action-dropdown
|
||||
v-if="executionUIDetails.name === 'error'"
|
||||
:class="[$style.icon, $style.retry]"
|
||||
:items="retryExecutionActions"
|
||||
activatorIcon="redo"
|
||||
@select="onRetryMenuItemSelect"
|
||||
/>
|
||||
<font-awesome-icon
|
||||
v-if="execution.mode === 'manual'"
|
||||
:class="[$style.icon, $style.manual]"
|
||||
:title="$locale.baseText('executionsList.manual')"
|
||||
icon="flask"
|
||||
/>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { IExecutionsSummary } from '@/Interface';
|
||||
import mixins from 'vue-typed-mixins';
|
||||
import { executionHelpers, IExecutionUIData } from '../mixins/executionsHelpers';
|
||||
import { VIEWS } from '../../constants';
|
||||
import { showMessage } from '../mixins/showMessage';
|
||||
import { restApi } from '../mixins/restApi';
|
||||
|
||||
export default mixins(
|
||||
executionHelpers,
|
||||
showMessage,
|
||||
restApi,
|
||||
).extend({
|
||||
name: 'execution-card',
|
||||
data() {
|
||||
return {
|
||||
VIEWS,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
execution: {
|
||||
type: Object as () => IExecutionsSummary,
|
||||
required: true,
|
||||
},
|
||||
highlight: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
retryExecutionActions(): object[] {
|
||||
return [
|
||||
{ id: 'current-workflow', label: this.$locale.baseText('executionsList.retryWithCurrentlySavedWorkflow') },
|
||||
{ id: 'original-workflow', label: this.$locale.baseText('executionsList.retryWithOriginalWorkflow') },
|
||||
];
|
||||
},
|
||||
executionUIDetails(): IExecutionUIData {
|
||||
return this.getExecutionUIDetails(this.execution);
|
||||
},
|
||||
isActive(): boolean {
|
||||
return this.execution.id === this.$route.params.executionId;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onRetryMenuItemSelect(action: string): void {
|
||||
this.$emit('retryExecution', { execution: this.execution, command: action });
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style module lang="scss">
|
||||
.executionCard {
|
||||
display: flex;
|
||||
padding-right: var(--spacing-2xs);
|
||||
|
||||
&.active {
|
||||
padding: 0 var(--spacing-2xs) var(--spacing-2xs) 0;
|
||||
border-left: var(--spacing-4xs) var(--border-style-base) transparent !important;
|
||||
|
||||
.executionStatus {
|
||||
color: var(--color-text-dark) !important;
|
||||
}
|
||||
}
|
||||
|
||||
& + &.active { padding-top: var(--spacing-2xs); }
|
||||
|
||||
&:hover, &.active {
|
||||
.executionLink {
|
||||
background-color: var(--color-foreground-base);
|
||||
}
|
||||
}
|
||||
|
||||
&.running {
|
||||
.spinner {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
&, & .executionLink {
|
||||
border-left: var(--spacing-4xs) var(--border-style-base) hsl(var(--color-warning-h), 94%, 80%);
|
||||
}
|
||||
.statusLabel, .spinner { color: var(--color-warning); }
|
||||
}
|
||||
|
||||
&.success {
|
||||
&, & .executionLink {
|
||||
border-left: var(--spacing-4xs) var(--border-style-base) hsl(var(--color-success-h), 60%, 70%);
|
||||
}
|
||||
}
|
||||
|
||||
&.waiting {
|
||||
&, & .executionLink {
|
||||
border-left: var(--spacing-4xs) var(--border-style-base) hsl(var(--color-secondary-h), 94%, 80%);
|
||||
}
|
||||
.statusLabel { color: var(--color-secondary); }
|
||||
}
|
||||
|
||||
&.error {
|
||||
&, & .executionLink {
|
||||
border-left: var(--spacing-4xs) var(--border-style-base) hsl(var(--color-danger-h), 94%, 80%);
|
||||
}
|
||||
.statusLabel { color: var(--color-danger ); }
|
||||
}
|
||||
|
||||
&.unknown {
|
||||
&, & .executionLink {
|
||||
border-left: var(--spacing-4xs) var(--border-style-base) var(--color-text-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.executionLink {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: var(--color-text-base);
|
||||
font-size: var(--font-size-xs);
|
||||
padding: var(--spacing-xs);
|
||||
padding-right: var(--spacing-s);
|
||||
border-radius: var(--border-radius-base);
|
||||
position: relative;
|
||||
left: calc(-1 * var(--spacing-4xs)); // Hide link border under card border so it's not visible when not hovered
|
||||
|
||||
&:active {
|
||||
.icon, .statusLabel {
|
||||
color: var(--color-text-base);;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icons {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: var(--font-size-s);
|
||||
|
||||
&.retry {
|
||||
svg {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&.manual {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
& + & {
|
||||
margin-left: var(--spacing-2xs);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user