This is an automated email from the ASF dual-hosted git repository.
ywang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/skywalking-rocketbot-ui.git
The following commit(s) were added to refs/heads/master by this push:
new b2c6c64 fix "The "topo-services" component did not update the data in
time after modifying the time range on the topology page." (#139)
b2c6c64 is described below
commit b2c6c648f86a449c8c3a8daa677227b73fe606d8
Author: x22x22 <[email protected]>
AuthorDate: Sun Aug 25 10:52:01 2019 +0800
fix "The "topo-services" component did not update the data in time after
modifying the time range on the topology page." (#139)
* fix "The "topo-services" component did not update the data in time after
modifying the time range on the topology page."
* fix "The "topo-services" component did not update the data in time after
modifying the time range on the topology page."
fix "The "topo-services" component did not update the data in time after
modifying the time range on the topology page."
* fix "The "topo-services" component did not update the data in time after
modifying the time range on the topology page."
fix "The "topo-services" component did not update the data in time after
modifying the time range on the topology page."
* fix "The "topo-services" component did not update the data in time after
modifying the time range on the topology page."
fix "The "topo-services" component did not update the data in time after
modifying the time range on the topology page."
---
src/utils/comparison.ts | 27 ++++++
src/views/components/topology/topo-services.vue | 118 +++++++++++++-----------
2 files changed, 93 insertions(+), 52 deletions(-)
diff --git a/src/utils/comparison.ts b/src/utils/comparison.ts
new file mode 100644
index 0000000..2ef47d4
--- /dev/null
+++ b/src/utils/comparison.ts
@@ -0,0 +1,27 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Shallow comparison of two objects.
+ * @param objA Object A to be compared
+ * @param objB Object B to be compared
+ */
+const compareObj = (objA: object, objB: object): boolean => {
+ return JSON.stringify(Object.entries(objA).sort(), null, 0) !==
JSON.stringify(Object.entries(objB).sort(), null, 0);
+};
+
+export default compareObj;
diff --git a/src/views/components/topology/topo-services.vue
b/src/views/components/topology/topo-services.vue
index f401998..7689ea4 100644
--- a/src/views/components/topology/topo-services.vue
+++ b/src/views/components/topology/topo-services.vue
@@ -1,70 +1,84 @@
/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+* Licensed to the Apache Software Foundation (ASF) under one or more
+* contributor license agreements. See the NOTICE file distributed with
+* this work for additional information regarding copyright ownership.
+* The ASF licenses this file to You under the Apache License, Version 2.0
+* (the "License"); you may not use this file except in compliance with
+* the License. You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
<template>
-<div class="link-topo-aside-box mb-10" style="padding:0">
- <TopoSelect class="mb-5" :current="service" :data="services"
@onChoose="handleChange"/>
- <!-- <select v-model="service" class="mr10 topo-aside-server mb-5"
style="width: 100%;" @change="handleChange">
- <option v-for="item in services" :value="item.key" :label="item.label"
:key="item.key"></option>
- </select> -->
-</div>
+ <div class="link-topo-aside-box mb-10" style="padding:0">
+ <TopoSelect class="mb-5" :current="service" :data="services"
@onChoose="handleChange"/>
+ <!-- <select v-model="service" class="mr10 topo-aside-server mb-5"
style="width: 100%;" @change="handleChange">
+ <option v-for="item in services" :value="item.key" :label="item.label"
:key="item.key"></option>
+ </select> -->
+ </div>
</template>
<script lang="ts">
-import { Vue, Component } from 'vue-property-decorator';
-import { State, Getter, Action } from 'vuex-class';
-import Axios, { AxiosResponse } from 'axios';
-import TopoSelect from './topo-select.vue';
+ import { DurationTime } from '@/types/global';
+ import compareObj from '@/utils/comparison';
+ import Axios, { AxiosResponse } from 'axios';
+ import { Component, Vue, Watch } from 'vue-property-decorator';
+ import { Action, Getter } from 'vuex-class';
+ import TopoSelect from './topo-select.vue';
-@Component({components: {TopoSelect}})
-export default class TopologyServices extends Vue {
- @Getter('durationTime') public durationTime: any;
- @Action('rocketTopo/GET_TOPO') public GET_TOPO: any;
- private services = [{key: 0, label: 'All services'}];
- private service = {key: 0, label: 'All services'};
- private fetchData() {
- Axios.post('/graphql', {
- query: `
+ @Component({components: {TopoSelect}})
+ export default class TopologyServices extends Vue {
+ @Getter('durationTime') public durationTime: any;
+ @Action('rocketTopo/GET_TOPO') public GET_TOPO: any;
+ private services = [{key: 0, label: 'All services'}];
+ private service = {key: 0, label: 'All services'};
+
+ private fetchData() {
+ Axios.post('/graphql', {
+ query: `
query queryServices($duration: Duration!) {
services: getAllServices(duration: $duration) {
key: id
label: name
}
}`,
- variables: {
- duration: this.durationTime,
- }}).then((res: AxiosResponse) => {
+ variables: {
+ duration: this.durationTime,
+ },
+ }).then((res: AxiosResponse) => {
this.services = res.data.data.services
- ?
- [{key: 0, label: 'All services'}, ...res.data.data.services]
- :
- [{key: 0, label: 'All services'}];
+ ?
+ [{key: 0, label: 'All services'}, ...res.data.data.services]
+ :
+ [{key: 0, label: 'All services'}];
});
+ }
+
+ @Watch('durationTime')
+ private watchDurationTime(newValue: DurationTime, oldValue: DurationTime) {
+ // Avoid repeating fetchData() after enter the component for the first
time.
+ if (compareObj(newValue, oldValue)) {
+ this.fetchData();
+ }
+ }
+
+ private handleChange(i: any) {
+ this.service = i;
+ this.GET_TOPO({serviceId: this.service.key, duration:
this.durationTime});
+ }
+
+ private created() {
+ this.fetchData();
+ }
}
- private handleChange(i: any) {
- this.service = i;
- this.GET_TOPO({serviceId: this.service.key, duration: this.durationTime});
- }
- private created() {
- this.fetchData();
- }
-}
</script>
<style lang="scss">
-.topo-server.dao-select .dao-select-main .dao-select-switch{
- border: 0;
-}
+ .topo-server.dao-select .dao-select-main .dao-select-switch {
+ border: 0;
+ }
</style>
