Skip to content

Commit d939425

Browse files
brian-mulier-pbrian-mulier-p
committed
feat(ui): don't load all revisions, optimize unnecessary calls and add back query params upon changing revisions
closes #6806
1 parent b518a7b commit d939425

File tree

2 files changed

+105
-94
lines changed

2 files changed

+105
-94
lines changed

‎ui/src/components/flows/FlowRevisions.vue

+99-92
Original file line numberDiff line numberDiff line change
@@ -9,64 +9,55 @@
99
/>
1010
</el-select>
1111
<el-row :gutter="15">
12-
<el-col :span="12" v-if="revisionLeft !== undefined">
12+
<el-col :span="12" v-if="revisionLeftIndex !== undefined">
1313
<div class="revision-select mb-3">
14-
<el-select v-model="revisionLeft">
14+
<el-select v-model="revisionLeftIndex" @change="addQuery">
1515
<el-option
16-
v-for="item in options"
16+
v-for="item in options(revisionRightIndex)"
1717
:key="item.value"
1818
:label="item.text"
1919
:value="item.value"
2020
/>
2121
</el-select>
2222
<el-button-group>
23-
<el-button :icon="FileCode" @click="seeRevision(revisionLeft, revisionLeftText)">
23+
<el-button :icon="FileCode" @click="seeRevision(revisionLeftIndex, revisionLeftText)">
2424
<span class="d-none d-lg-inline-block">&nbsp;{{ $t('see full revision') }}</span>
2525
</el-button>
26-
<el-button :icon="Restore" :disabled="revisionNumber(revisionLeft) === flow.revision" @click="restoreRevision(revisionLeft, revisionLeftText)">
26+
<el-button :icon="Restore" :disabled="revisionNumber(revisionLeftIndex) === flow.revision" @click="restoreRevision(revisionLeftIndex, revisionLeftText)">
2727
<span class="d-none d-lg-inline-block">&nbsp;{{ $t('restore') }}</span>
2828
</el-button>
2929
</el-button-group>
3030
</div>
3131

32-
<el-alert v-if="revisionLeftError" type="warning" show-icon :closable="false" class="mb-0 mt-3">
33-
<strong>{{ $t('invalid source') }}</strong><br>
34-
{{ revisionLeftError }}
35-
</el-alert>
36-
37-
<crud class="mt-3" permission="FLOW" :detail="{namespace: $route.params.namespace, flowId: $route.params.id, revision: revisionNumber(revisionLeft)}" />
32+
<crud class="mt-3" permission="FLOW" :detail="{namespace: $route.params.namespace, flowId: $route.params.id, revision: revisionNumber(revisionLeftIndex)}" />
3833
</el-col>
39-
<el-col :span="12" v-if="revisionRight !== undefined">
34+
<el-col :span="12" v-if="revisionRightIndex !== undefined">
4035
<div class="revision-select mb-3">
41-
<el-select v-model="revisionRight">
36+
<el-select v-model="revisionRightIndex" @change="addQuery">
4237
<el-option
43-
v-for="item in options"
38+
v-for="item in options(revisionLeftIndex)"
4439
:key="item.value"
4540
:label="item.text"
4641
:value="item.value"
4742
/>
4843
</el-select>
4944
<el-button-group>
50-
<el-button :icon="FileCode" @click="seeRevision(revisionRight, revisionRightText)">
45+
<el-button :icon="FileCode" @click="seeRevision(revisionRightIndex, revisionRightText)">
5146
<span class="d-none d-lg-inline-block">&nbsp;{{ $t('see full revision') }}</span>
5247
</el-button>
53-
<el-button :icon="Restore" :disabled="revisionNumber(revisionRight) === flow.revision" @click="restoreRevision(revisionRight, revisionRightText)">
48+
<el-button :icon="Restore" :disabled="revisionNumber(revisionRightIndex) === flow.revision" @click="restoreRevision(revisionRightIndex, revisionRightText)">
5449
<span class="d-none d-lg-inline-block">&nbsp;{{ $t('restore') }}</span>
5550
</el-button>
5651
</el-button-group>
5752
</div>
5853

59-
<el-alert v-if="revisionRightError" type="warning" show-icon :closable="false" class="mb-0 mt-3">
60-
<strong>{{ $t('invalid source') }}</strong><br>
61-
{{ revisionRightError }}
62-
</el-alert>
63-
64-
<crud class="mt-3" permission="FLOW" :detail="{namespace: $route.params.namespace, flowId: $route.params.id, revision: revisionNumber(revisionRight)}" />
54+
<crud class="mt-3" permission="FLOW" :detail="{namespace: $route.params.namespace, flowId: $route.params.id, revision: revisionNumber(revisionRightIndex)}" />
6555
</el-col>
6656
</el-row>
6757

6858
<editor
6959
class="mt-1"
60+
v-if="revisionLeftText && revisionRightText"
7061
:diff-side-by-side="sideBySide"
7162
:model-value="revisionRightText"
7263
:original="revisionLeftText"
@@ -96,7 +87,6 @@
9687

9788
<script>
9889
import {mapState} from "vuex";
99-
import YamlUtils from "../../utils/yamlUtils";
10090
import Editor from "../../components/inputs/Editor.vue";
10191
import Crud from "override/components/auth/Crud.vue";
10292
import Drawer from "../Drawer.vue";
@@ -109,44 +99,48 @@
10999
},
110100
methods: {
111101
load() {
112-
this.$store
113-
.dispatch("flow/loadRevisions", this.$route.params)
114-
.then(() => {
115-
const revisionLength = this.revisions.length;
116-
if (revisionLength > 0) {
117-
this.revisionRight = revisionLength - 1;
118-
}
119-
if (revisionLength > 1) {
120-
this.revisionLeft = revisionLength - 2;
121-
}
122-
if (this.$route.query.revisionRight) {
123-
this.revisionRight = this.revisionIndex(
124-
this.$route.query.revisionRight
125-
);
126-
if (
127-
!this.$route.query.revisionLeft &&
128-
this.revisionRight > 0
129-
) {
130-
this.revisionLeft = this.revisions.length - 1;
131-
}
132-
}
133-
if (this.$route.query.revisionLeft) {
134-
this.revisionLeft = this.revisionIndex(
135-
this.$route.query.revisionLeft
136-
);
137-
}
138-
});
102+
const currentRevision = this.flow.revision;
103+
104+
this.revisions = [...Array(currentRevision).keys()].map(((k, i) => {
105+
if (currentRevision === this.revisionNumber(i)) {
106+
return this.flow;
107+
}
108+
return {revision: i + 1};
109+
}));
110+
111+
if (this.$route.query.revisionRight) {
112+
this.revisionRightIndex = this.revisionIndex(
113+
this.$route.query.revisionRight
114+
);
115+
if (
116+
!this.$route.query.revisionLeft &&
117+
this.revisionRightIndex > 0
118+
) {
119+
this.revisionLeftIndex = this.revisionRightIndex - 1;
120+
}
121+
} else if (currentRevision > 0) {
122+
this.revisionRightIndex = currentRevision - 1;
123+
}
124+
125+
if (this.$route.query.revisionLeft) {
126+
this.revisionLeftIndex = this.revisionIndex(
127+
this.$route.query.revisionLeft
128+
);
129+
} else if (currentRevision > 1) {
130+
this.revisionLeftIndex = currentRevision - 2;
131+
}
139132
},
140133
revisionIndex(revision) {
141-
const rev = parseInt(revision);
142-
for (let i = 0; i < this.revisions.length; i++) {
143-
if (rev === this.revisions[i].revision) {
144-
return i;
145-
}
134+
const revisionInt = parseInt(revision);
135+
136+
if (revisionInt < 1 || revisionInt > this.revisions.length) {
137+
return undefined;
146138
}
139+
140+
return revisionInt - 1;
147141
},
148142
revisionNumber(index) {
149-
return this.revisions[index].revision;
143+
return index + 1;
150144
},
151145
seeRevision(index, revision) {
152146
this.revisionId = index
@@ -167,61 +161,74 @@
167161
addQuery() {
168162
this.$router.push({query: {
169163
...this.$route.query,
170-
...{revisionLeft:this.revisionLeft + 1, revisionRight: this.revisionRight + 1}}
164+
...{revisionLeft:this.revisionLeftIndex + 1, revisionRight: this.revisionRightIndex + 1}}
171165
});
172166
},
173-
transformRevision(source) {
174-
if (source.exception) {
175-
return YamlUtils.stringify(YamlUtils.parse(source.source));
176-
}
167+
async fetchRevision(revision) {
168+
const revisionFetched = await this.$store.dispatch("flow/loadFlow", {
169+
namespace: this.flow.namespace,
170+
id: this.flow.id,
171+
revision,
172+
allowDeleted: true,
173+
store: false
174+
});
175+
this.revisions[this.revisionIndex(revision)] = revisionFetched;
177176
178-
return source.source ? source.source : YamlUtils.stringify(source);
177+
return revisionFetched;
178+
},
179+
options(excludeRevisionIndex) {
180+
return this.revisions
181+
.filter((_, index) => index !== excludeRevisionIndex)
182+
.map(({revision}) => ({value: this.revisionIndex(revision), text: revision}));
179183
}
180184
},
181185
computed: {
182-
...mapState("flow", ["flow", "revisions"]),
183-
options() {
184-
return (this.revisions || []).map((revision, x) => {
185-
return {
186-
value: x,
187-
text: revision.revision,
188-
};
189-
});
190-
},
191-
revisionLeftError() {
192-
if (this.revisionLeft === undefined) {
193-
return "";
186+
...mapState("flow", ["flow"])
187+
},
188+
watch: {
189+
revisionLeftIndex: async function (newValue, oldValue) {
190+
if (newValue === oldValue) {
191+
return;
194192
}
195193
196-
return this.revisions[this.revisionLeft].exception
197-
},
198-
revisionRightError() {
199-
if (this.revisionRight === undefined) {
200-
return "";
194+
if (newValue === undefined) {
195+
this.revisionLeftText = undefined;
201196
}
202197
203-
return this.revisions[this.revisionRight].exception
204-
},
205-
revisionLeftText() {
206-
if (this.revisionLeft === undefined) {
207-
return "";
198+
const leftRevision = this.revisions[newValue];
199+
let source = leftRevision.source;
200+
if (!source) {
201+
source = (await this.fetchRevision(leftRevision.revision)).source;
208202
}
209203
210-
return this.transformRevision(this.revisions[this.revisionLeft]);
204+
this.revisionLeftText = source;
211205
},
212-
revisionRightText() {
213-
if (this.revisionRight === undefined) {
214-
return "";
206+
revisionRightIndex: async function (newValue, oldValue) {
207+
if (newValue === oldValue) {
208+
return;
215209
}
216210
217-
return this.transformRevision(this.revisions[this.revisionRight]);
218-
},
211+
if (newValue === undefined) {
212+
this.revisionRightText = undefined;
213+
}
214+
215+
const rightRevision = this.revisions[newValue];
216+
let source = rightRevision.source;
217+
if (!source) {
218+
source = (await this.fetchRevision(rightRevision.revision)).source;
219+
}
220+
221+
this.revisionRightText = source;
222+
}
219223
},
220224
data() {
221225
return {
222-
revisionLeft: undefined,
223-
revisionRight: undefined,
226+
revisionLeftIndex: undefined,
227+
revisionRightIndex: undefined,
228+
revisionLeftText: undefined,
229+
revisionRightText: undefined,
224230
revision: undefined,
231+
revisions: [],
225232
revisionId: undefined,
226233
revisionYaml: undefined,
227234
sideBySide: true,

‎ui/src/stores/flow.js

+6-2
Original file line numberDiff line numberDiff line change
@@ -62,9 +62,13 @@ export default {
6262
},
6363
loadFlow({commit}, options) {
6464
const httpClient = options.httpClient ?? this.$http
65-
return httpClient.get(`${apiUrl(this)}/flows/${options.namespace}/${options.id}${options.source === undefined ? "?source=true" : ""}`,
65+
return httpClient.get(`${apiUrl(this)}/flows/${options.namespace}/${options.id}`,
6666
{
67-
params: options,
67+
params: {
68+
revision: options.revision,
69+
allowDeleted: options.allowDeleted,
70+
source: options.source === undefined ? true : undefined
71+
},
6872
validateStatus: (status) => {
6973
return options.deleted ? status === 200 || status === 404 : status === 200;
7074
}

0 commit comments

Comments
 (0)