From d939425db315430833d5d14075ee5cc86c72cd60 Mon Sep 17 00:00:00 2001 From: "brian.mulier" Date: Mon, 27 Jan 2025 18:37:18 +0100 Subject: [PATCH] feat(ui): don't load all revisions, optimize unnecessary calls and add back query params upon changing revisions closes #6806 --- ui/src/components/flows/FlowRevisions.vue | 191 +++++++++++----------- ui/src/stores/flow.js | 8 +- 2 files changed, 105 insertions(+), 94 deletions(-) diff --git a/ui/src/components/flows/FlowRevisions.vue b/ui/src/components/flows/FlowRevisions.vue index 3838c191d98..e3a5f62bb8e 100644 --- a/ui/src/components/flows/FlowRevisions.vue +++ b/ui/src/components/flows/FlowRevisions.vue @@ -9,64 +9,55 @@ /> - +
- + - +  {{ $t('see full revision') }} - +  {{ $t('restore') }}
- - {{ $t('invalid source') }}
- {{ revisionLeftError }} - - - + - +
- + - +  {{ $t('see full revision') }} - +  {{ $t('restore') }}
- - {{ $t('invalid source') }}
- {{ revisionRightError }} - - - + import {mapState} from "vuex"; - import YamlUtils from "../../utils/yamlUtils"; import Editor from "../../components/inputs/Editor.vue"; import Crud from "override/components/auth/Crud.vue"; import Drawer from "../Drawer.vue"; @@ -109,44 +99,48 @@ }, methods: { load() { - this.$store - .dispatch("flow/loadRevisions", this.$route.params) - .then(() => { - const revisionLength = this.revisions.length; - if (revisionLength > 0) { - this.revisionRight = revisionLength - 1; - } - if (revisionLength > 1) { - this.revisionLeft = revisionLength - 2; - } - if (this.$route.query.revisionRight) { - this.revisionRight = this.revisionIndex( - this.$route.query.revisionRight - ); - if ( - !this.$route.query.revisionLeft && - this.revisionRight > 0 - ) { - this.revisionLeft = this.revisions.length - 1; - } - } - if (this.$route.query.revisionLeft) { - this.revisionLeft = this.revisionIndex( - this.$route.query.revisionLeft - ); - } - }); + const currentRevision = this.flow.revision; + + this.revisions = [...Array(currentRevision).keys()].map(((k, i) => { + if (currentRevision === this.revisionNumber(i)) { + return this.flow; + } + return {revision: i + 1}; + })); + + if (this.$route.query.revisionRight) { + this.revisionRightIndex = this.revisionIndex( + this.$route.query.revisionRight + ); + if ( + !this.$route.query.revisionLeft && + this.revisionRightIndex > 0 + ) { + this.revisionLeftIndex = this.revisionRightIndex - 1; + } + } else if (currentRevision > 0) { + this.revisionRightIndex = currentRevision - 1; + } + + if (this.$route.query.revisionLeft) { + this.revisionLeftIndex = this.revisionIndex( + this.$route.query.revisionLeft + ); + } else if (currentRevision > 1) { + this.revisionLeftIndex = currentRevision - 2; + } }, revisionIndex(revision) { - const rev = parseInt(revision); - for (let i = 0; i < this.revisions.length; i++) { - if (rev === this.revisions[i].revision) { - return i; - } + const revisionInt = parseInt(revision); + + if (revisionInt < 1 || revisionInt > this.revisions.length) { + return undefined; } + + return revisionInt - 1; }, revisionNumber(index) { - return this.revisions[index].revision; + return index + 1; }, seeRevision(index, revision) { this.revisionId = index @@ -167,61 +161,74 @@ addQuery() { this.$router.push({query: { ...this.$route.query, - ...{revisionLeft:this.revisionLeft + 1, revisionRight: this.revisionRight + 1}} + ...{revisionLeft:this.revisionLeftIndex + 1, revisionRight: this.revisionRightIndex + 1}} }); }, - transformRevision(source) { - if (source.exception) { - return YamlUtils.stringify(YamlUtils.parse(source.source)); - } + async fetchRevision(revision) { + const revisionFetched = await this.$store.dispatch("flow/loadFlow", { + namespace: this.flow.namespace, + id: this.flow.id, + revision, + allowDeleted: true, + store: false + }); + this.revisions[this.revisionIndex(revision)] = revisionFetched; - return source.source ? source.source : YamlUtils.stringify(source); + return revisionFetched; + }, + options(excludeRevisionIndex) { + return this.revisions + .filter((_, index) => index !== excludeRevisionIndex) + .map(({revision}) => ({value: this.revisionIndex(revision), text: revision})); } }, computed: { - ...mapState("flow", ["flow", "revisions"]), - options() { - return (this.revisions || []).map((revision, x) => { - return { - value: x, - text: revision.revision, - }; - }); - }, - revisionLeftError() { - if (this.revisionLeft === undefined) { - return ""; + ...mapState("flow", ["flow"]) + }, + watch: { + revisionLeftIndex: async function (newValue, oldValue) { + if (newValue === oldValue) { + return; } - return this.revisions[this.revisionLeft].exception - }, - revisionRightError() { - if (this.revisionRight === undefined) { - return ""; + if (newValue === undefined) { + this.revisionLeftText = undefined; } - return this.revisions[this.revisionRight].exception - }, - revisionLeftText() { - if (this.revisionLeft === undefined) { - return ""; + const leftRevision = this.revisions[newValue]; + let source = leftRevision.source; + if (!source) { + source = (await this.fetchRevision(leftRevision.revision)).source; } - return this.transformRevision(this.revisions[this.revisionLeft]); + this.revisionLeftText = source; }, - revisionRightText() { - if (this.revisionRight === undefined) { - return ""; + revisionRightIndex: async function (newValue, oldValue) { + if (newValue === oldValue) { + return; } - return this.transformRevision(this.revisions[this.revisionRight]); - }, + if (newValue === undefined) { + this.revisionRightText = undefined; + } + + const rightRevision = this.revisions[newValue]; + let source = rightRevision.source; + if (!source) { + source = (await this.fetchRevision(rightRevision.revision)).source; + } + + this.revisionRightText = source; + } }, data() { return { - revisionLeft: undefined, - revisionRight: undefined, + revisionLeftIndex: undefined, + revisionRightIndex: undefined, + revisionLeftText: undefined, + revisionRightText: undefined, revision: undefined, + revisions: [], revisionId: undefined, revisionYaml: undefined, sideBySide: true, diff --git a/ui/src/stores/flow.js b/ui/src/stores/flow.js index 13e7ad86ff0..f75531adf95 100644 --- a/ui/src/stores/flow.js +++ b/ui/src/stores/flow.js @@ -62,9 +62,13 @@ export default { }, loadFlow({commit}, options) { const httpClient = options.httpClient ?? this.$http - return httpClient.get(`${apiUrl(this)}/flows/${options.namespace}/${options.id}${options.source === undefined ? "?source=true" : ""}`, + return httpClient.get(`${apiUrl(this)}/flows/${options.namespace}/${options.id}`, { - params: options, + params: { + revision: options.revision, + allowDeleted: options.allowDeleted, + source: options.source === undefined ? true : undefined + }, validateStatus: (status) => { return options.deleted ? status === 200 || status === 404 : status === 200; }