You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@skywalking.apache.org by wu...@apache.org on 2020/12/09 09:34:36 UTC
[skywalking-rocketbot-ui] branch master updated: feat: implement
refreshing data for topology by updating date (#398)
This is an automated email from the ASF dual-hosted git repository.
wusheng 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 9118f0e feat: implement refreshing data for topology by updating date (#398)
9118f0e is described below
commit 9118f0e73d069461ba0c2a49a70aa086d5d82817
Author: Qiuxia Fan <fi...@outlook.com>
AuthorDate: Wed Dec 9 17:31:42 2020 +0800
feat: implement refreshing data for topology by updating date (#398)
---
src/views/components/topology/chart-line.vue | 6 +-
src/views/components/topology/topo-aside.vue | 15 ++--
.../components/topology/topo-detect-point.vue | 85 ++++++++++++----------
src/views/components/topology/topo-services.vue | 9 ++-
src/views/containers/topology/topology.vue | 8 +-
5 files changed, 69 insertions(+), 54 deletions(-)
diff --git a/src/views/components/topology/chart-line.vue b/src/views/components/topology/chart-line.vue
index eb9cd80..12111d6 100644
--- a/src/views/components/topology/chart-line.vue
+++ b/src/views/components/topology/chart-line.vue
@@ -29,10 +29,9 @@ limitations under the License. -->
@Prop() private intervalTime!: any;
get option() {
- const temp: any = [];
const keys = Object.keys(this.data || {}).filter((i: any) => Array.isArray(this.data[i]) && this.data[i].length);
- keys.forEach((i: any, index: number) => {
- const serie: any = {
+ const temp = keys.map((i: string, index: number) => {
+ return {
data: this.data[i].map((item: any, itemIndex: number) => [this.intervalTime[itemIndex], item]),
name: i,
type: 'line',
@@ -43,7 +42,6 @@ limitations under the License. -->
type: 'solid',
},
};
- temp.push(serie);
});
const color: string[] = [
'#30A4EB',
diff --git a/src/views/components/topology/topo-aside.vue b/src/views/components/topology/topo-aside.vue
index ce18a9f..fbef552 100644
--- a/src/views/components/topology/topo-aside.vue
+++ b/src/views/components/topology/topo-aside.vue
@@ -71,6 +71,8 @@ limitations under the License. -->
import TopoChart from './topo-chart.vue';
import TopoService from './topo-services.vue';
import TopoDetectPoint from './topo-detect-point.vue';
+ import { DurationTime } from '@/types/global';
+ import compareObj from '@/utils/comparison';
@Component({
components: {
@@ -87,7 +89,6 @@ limitations under the License. -->
@Action('rocketTopo/CLEAR_TOPO') private CLEAR_TOPO: any;
@Action('rocketTopo/CLEAR_TOPO_INFO') private CLEAR_TOPO_INFO: any;
@Mutation('SET_COMPS_TREE') private SET_COMPS_TREE: any;
- @Mutation('SET_EVENTS') private SET_EVENTS: any;
@Mutation('rocketTopo/SET_MODE_STATUS') private SET_MODE_STATUS: any;
private dialogTopoVisible = false;
private drawerMainBodyHeight = '100%';
@@ -103,10 +104,6 @@ limitations under the License. -->
this.drawerMainBodyHeight = `${document.body.clientHeight - 50}px`;
}
- private beforeMount() {
- this.SET_EVENTS([this.handleRefresh]);
- }
-
private created() {
this.SET_COMPS_TREE(this.initState.tree);
}
@@ -127,7 +124,6 @@ limitations under the License. -->
window.removeEventListener('resize', this.resize);
this.CLEAR_TOPO_INFO();
this.CLEAR_TOPO();
- this.SET_EVENTS([]);
}
get types() {
@@ -145,6 +141,13 @@ limitations under the License. -->
private showRadial() {
this.radioStatus = !this.radioStatus;
}
+
+ @Watch('durationTime')
+ private watchDurationTime(newValue: DurationTime, oldValue: DurationTime) {
+ if (compareObj(newValue, oldValue)) {
+ this.handleRefresh();
+ }
+ }
}
</script>
<style lang="scss">
diff --git a/src/views/components/topology/topo-detect-point.vue b/src/views/components/topology/topo-detect-point.vue
index 11d8df8..93eb6ab 100644
--- a/src/views/components/topology/topo-detect-point.vue
+++ b/src/views/components/topology/topo-detect-point.vue
@@ -70,7 +70,7 @@ limitations under the License. -->
unit="%"
/>
<ChartLine
- v-if="stateTopo.responsePercentile"
+ v-if="stateTopo.responsePercentile.p50.length"
:data="stateTopo.responsePercentile"
:intervalTime="intervalTime"
:title="$t('percentResponse')"
@@ -104,7 +104,7 @@ limitations under the License. -->
<rk-sidebox
class="instance-dependency"
width="80%"
- :fixed="true"
+ :fixed="false"
:title="
`${stateTopo.selectedServiceCall.source.name} -> ${stateTopo.selectedServiceCall.target.name} Instance Dependency`
"
@@ -122,6 +122,8 @@ limitations under the License. -->
import TopoChart from './topo-chart.vue';
import TopoInstanceDependency from './topo-instance-dependency.vue';
import ChartLine from './chart-line.vue';
+ import { DurationTime } from '@/types/global';
+ import compareObj from '@/utils/comparison';
@Component({
components: {
@@ -136,7 +138,6 @@ limitations under the License. -->
@Getter('durationTime') private durationTime: any;
@Action('MIXHANDLE_CHANGE_GROUP_WITH_CURRENT')
private MIXHANDLE_CHANGE_GROUP_WITH_CURRENT: any;
- @Action('MIXHANDLE_GET_OPTION') private MIXHANDLE_GET_OPTION: any;
@Mutation('rocketTopo/SET_MODE_STATUS') private SET_MODE_STATUS: any;
@Mutation('rocketTopo/SET_SELECTED_INSTANCE_CALL')
private SET_SELECTED_INSTANCE_CALL: any;
@@ -156,41 +157,6 @@ limitations under the License. -->
return this.stateTopo.currentNode.name && this.stateTopo.currentNode.isReal;
}
- @Watch('stateTopo.selectedServiceCall')
- private watchDetectPointNodeId(newValue: string) {
- if (newValue || this.stateTopo.currentNode.isReal) {
- this.showInfo = true;
- } else {
- this.showInfo = false;
- this.showInfoCount = 0;
- this.isMini = true;
- }
- }
-
- @Watch('stateTopo.currentNode.name')
- private watchCurrentNodeIsReal(newValue: boolean) {
- const service = this.stateTopo.currentNode;
- if (this.stateTopo.currentNode.isReal) {
- this.MIXHANDLE_CHANGE_GROUP_WITH_CURRENT({ index: 0, current: 1 });
- this.MIXHANDLE_GET_OPTION({
- compType: 'service',
- duration: this.durationTime,
- }).then(() => {
- this.GET_TOPO_SERVICE_DETAIL({
- serviceId: service.id || '',
- duration: this.durationTime,
- });
- });
- }
- if (newValue || this.stateTopo.selectedServiceCall) {
- this.showInfo = true;
- } else {
- this.showInfo = false;
- this.showInfoCount = 0;
- this.isMini = true;
- }
- }
-
private setShowInfo() {
this.showInfo = false;
this.showInfoCount = 1;
@@ -211,6 +177,7 @@ limitations under the License. -->
}
private openInstanceModal() {
+ this.stateTopo.selectedInstanceCall = null;
this.dialogTopoVisible = true;
if (!(this.stateTopo.selectedServiceCall && this.stateTopo.selectedServiceCall.source)) {
return;
@@ -221,6 +188,48 @@ limitations under the License. -->
duration: this.durationTime,
});
}
+
+ @Watch('durationTime')
+ private watchDurationTime(newValue: DurationTime, oldValue: DurationTime) {
+ if (compareObj(newValue, oldValue)) {
+ const service = this.stateTopo.currentNode;
+
+ this.GET_TOPO_SERVICE_DETAIL({
+ serviceId: service.id || '',
+ duration: this.durationTime,
+ });
+ }
+ }
+
+ @Watch('stateTopo.selectedServiceCall')
+ private watchDetectPointNodeId(newValue: string) {
+ if (newValue || this.stateTopo.currentNode.isReal) {
+ this.showInfo = true;
+ } else {
+ this.showInfo = false;
+ this.showInfoCount = 0;
+ this.isMini = true;
+ }
+ }
+
+ @Watch('stateTopo.currentNode.name')
+ private watchCurrentNodeIsReal(newValue: boolean) {
+ const service = this.stateTopo.currentNode;
+ if (this.stateTopo.currentNode.isReal) {
+ this.MIXHANDLE_CHANGE_GROUP_WITH_CURRENT({ index: 0, current: 1 });
+ this.GET_TOPO_SERVICE_DETAIL({
+ serviceId: service.id || '',
+ duration: this.durationTime,
+ });
+ }
+ if (newValue || this.stateTopo.selectedServiceCall) {
+ this.showInfo = true;
+ } else {
+ this.showInfo = false;
+ this.showInfoCount = 0;
+ this.isMini = true;
+ }
+ }
}
</script>
<style lang="scss">
diff --git a/src/views/components/topology/topo-services.vue b/src/views/components/topology/topo-services.vue
index c9b0f2c..26a24a1 100644
--- a/src/views/components/topology/topo-services.vue
+++ b/src/views/components/topology/topo-services.vue
@@ -33,6 +33,11 @@ limitations under the License. -->
private services = [{ key: 0, label: 'All services' }];
private service = { key: 0, label: 'All services' };
+ private created() {
+ this.fetchData();
+ this.renderTopo();
+ }
+
private fetchData() {
this.GET_SERVICES({ duration: this.durationTime }).then((json: any[]) => {
this.services = [...this.services, ...json];
@@ -44,6 +49,7 @@ limitations under the License. -->
// Avoid repeating fetchData() after enter the component for the first time.
if (compareObj(newValue, oldValue)) {
this.fetchData();
+ this.renderTopo();
}
}
@@ -56,8 +62,7 @@ limitations under the License. -->
});
}
- private created() {
- this.fetchData();
+ private renderTopo() {
const groups = localStorage.getItem('topology-groups');
if (groups) {
const jsonGroup = JSON.parse(groups);
diff --git a/src/views/containers/topology/topology.vue b/src/views/containers/topology/topology.vue
index 800e007..942be4c 100644
--- a/src/views/containers/topology/topology.vue
+++ b/src/views/containers/topology/topology.vue
@@ -130,10 +130,6 @@ limitations under the License. -->
this.SET_CURRENT_SERVICE(d);
}
}
- private beforeDestroy() {
- this.CLEAR_TOPO_INFO();
- this.CLEAR_TOPO();
- }
private changeInstanceComps(data: { type: string; json: any }) {
this.updateObjects = data.type;
if (!data.json) {
@@ -148,6 +144,10 @@ limitations under the License. -->
}
this.SET_TOPO_ENDPOINT(data.json);
}
+ private beforeDestroy() {
+ this.CLEAR_TOPO_INFO();
+ this.CLEAR_TOPO();
+ }
}
</script>
<style lang="scss">