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 74bb314 Fix: Topology instance detection (#259)
74bb314 is described below
commit 74bb314840d51c5f1968abd30827c8d4fb47c481
Author: bigflybrother <[email protected]>
AuthorDate: Sat Mar 7 18:57:56 2020 +0800
Fix: Topology instance detection (#259)
---
src/views/components/topology/chart/topo.vue | 4 -
src/views/components/topology/instances-survey.vue | 50 --------
src/views/containers/topology/instance/index.vue | 69 ++++++++++
.../topology/instance/instances-survey.vue | 36 ++++++
src/views/containers/topology/topology.vue | 6 +-
src/views/containers/topology/window-instance.vue | 141 ---------------------
6 files changed, 108 insertions(+), 198 deletions(-)
diff --git a/src/views/components/topology/chart/topo.vue
b/src/views/components/topology/chart/topo.vue
index 2226193..060d19c 100644
--- a/src/views/components/topology/chart/topo.vue
+++ b/src/views/components/topology/chart/topo.vue
@@ -92,10 +92,6 @@ export default {
},
// instace hexagon
handleGoInstance() {
- this.$store.dispatch('SELECT_SERVICE', {
- service: { key: this.current.id, label: this.current.name },
- duration: this.$store.getters.durationTime,
- });
this.$emit('setDialog','instance')
},
// endpoint hexagon
diff --git a/src/views/components/topology/instances-survey.vue
b/src/views/components/topology/instances-survey.vue
deleted file mode 100644
index 68f1a70..0000000
--- a/src/views/components/topology/instances-survey.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-/** * 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="dashboard-container clear">
- <DashboardItem
- v-for="(i, index) in rocketComps.tree[0].children[3].children"
- :key="index + i.t + i.w + i.d"
- :index="index"
- :rocketGlobal="rocketGlobal"
- :i="i"
- :dragIndex="dragIndex"
- @dragStart="dragStart"
- />
- </div>
-</template>
-
-<script lang="ts">
- import DashboardItem from '@/views/components/dashboard/dashboard-item.vue';
- import Vue from 'vue';
- import { Component } from 'vue-property-decorator';
- import { State } from 'vuex-class';
-
- @Component({
- components: {
- DashboardItem,
- },
- })
- export default class InstancesSurvey extends Vue {
- @State('rocketbot') private rocketGlobal: any;
- @State('rocketOption') private stateDashboardOption!: any;
- @State('rocketData') private rocketComps!: any;
-
- private dragIndex: number = NaN;
-
- public dragStart(index: number) {
- this.dragIndex = index;
- }
- }
-</script>
-
-<style lang="less" scoped></style>
diff --git a/src/views/containers/topology/instance/index.vue
b/src/views/containers/topology/instance/index.vue
new file mode 100644
index 0000000..a38e561
--- /dev/null
+++ b/src/views/containers/topology/instance/index.vue
@@ -0,0 +1,69 @@
+/** * 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 style="height: 100%">
+ <div class="rk-dashboard-bar flex-h">
+ <ToolBarSelect :selectable="false" :title="this.$t('currentService')"
:current="current" icon="package" />
+ <ToolBarSelect
+ @onChoose="selectInstance"
+ :title="$t('currentInstance')"
+ :current="stateDashboardOption.currentInstance"
+ :data="stateDashboardOption.instances"
+ icon="disk"
+ />
+ </div>
+ <instances-survey />
+ </div>
+</template>
+
+<script lang="ts">
+ import InstancesSurvey from './instances-survey.vue';
+ import ToolBarSelect from '@/views/components/dashboard/tool-bar-select.vue';
+ import ToolBarEndpointSelect from
'@/views/components/dashboard/tool-bar-endpoint-select.vue';
+ import _ from 'lodash';
+ import Vue from 'vue';
+ import { Component, PropSync, Watch, Prop } from 'vue-property-decorator';
+ import { Action, Getter, State } from 'vuex-class';
+
+ interface Instance {
+ label: string;
+ key: string;
+ name?: string;
+ }
+
+ @Component({
+ components: {
+ InstancesSurvey,
+ ToolBarSelect,
+ ToolBarEndpointSelect,
+ },
+ })
+ export default class WindowInstance extends Vue {
+ @State('rocketOption') private stateDashboardOption!: any;
+ @State('rocketData') private rocketComps!: any;
+ @Getter('durationTime') private durationTime: any;
+ @Action('SELECT_INSTANCE') private SELECT_INSTANCE: any;
+ @Action('GET_SERVICE_INSTANCES') private GET_SERVICE_INSTANCES: any;
+ @Action('MIXHANDLE_CHANGE_GROUP_WITH_CURRENT') private
MIXHANDLE_CHANGE_GROUP_WITH_CURRENT: any;
+ @Prop() private current!: { key: number | string; label: number | string };
+
+ private selectInstance(i: any) {
+ this.SELECT_INSTANCE({ instance: i, duration: this.durationTime });
+ }
+
+ private beforeMount() {
+ this.MIXHANDLE_CHANGE_GROUP_WITH_CURRENT({ index: 0, current: 3 });
+ this.GET_SERVICE_INSTANCES({ duration: this.durationTime, serviceId:
this.current.key }).then(() => {
+ this.selectInstance(this.stateDashboardOption.instances[0]);
+ });
+ }
+ }
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/containers/topology/instance/instances-survey.vue
b/src/views/containers/topology/instance/instances-survey.vue
new file mode 100644
index 0000000..55062cb
--- /dev/null
+++ b/src/views/containers/topology/instance/instances-survey.vue
@@ -0,0 +1,36 @@
+/** * 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="dashboard-container clear">
+ <DashboardItem
+ v-for="(i, index) in rocketComps.tree[0].children[3].children"
+ :key="index + i.t + i.w + i.d"
+ :rocketGlobal="{edit: false}"
+ :i="i"
+ />
+ </div>
+</template>
+
+<script lang="ts">
+ import Vue from 'vue';
+ import { Component } from 'vue-property-decorator';
+ import { State } from 'vuex-class';
+ import DashboardItem from '@/views/components/dashboard/dashboard-item.vue';
+
+ @Component({
+ components: {
+ DashboardItem,
+ },
+ })
+ export default class InstancesSurvey extends Vue {
+ @State('rocketData') private rocketComps!: any;
+ }
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/containers/topology/topology.vue
b/src/views/containers/topology/topology.vue
index e19816a..3fc4942 100644
--- a/src/views/containers/topology/topology.vue
+++ b/src/views/containers/topology/topology.vue
@@ -19,8 +19,8 @@ specific language governing permissions and * limitations
under the License. */
:endpoints="stateDashboardOption.endpoints"
/>
<window-instance
- v-else-if="dialog === 'instance'"
- :instances="stateDashboardOption.instances"
+ v-if="dialog === 'instance'"
+ :current="this.current"
/>
<window-trace
v-if="dialog === 'trace'"
@@ -38,7 +38,7 @@ specific language governing permissions and * limitations
under the License. */
import { State, Action, Getter, Mutation } from 'vuex-class';
import { AxiosResponse } from 'axios';
import WindowEndpoint from '@/views/containers/topology/window-endpoint.vue';
- import WindowInstance from '@/views/containers/topology/window-instance.vue';
+ import WindowInstance from '@/views/containers/topology/instance/index.vue';
import WindowTrace from '@/views/containers/topology/trace/index.vue';
import WindowAlarm from '@/views/containers/topology/alarm/index.vue';
import Topo from '../../components/topology/chart/topo.vue';
diff --git a/src/views/containers/topology/window-instance.vue
b/src/views/containers/topology/window-instance.vue
deleted file mode 100644
index fd24a13..0000000
--- a/src/views/containers/topology/window-instance.vue
+++ /dev/null
@@ -1,141 +0,0 @@
-/** * 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>
- <div class="rk-dashboard-bar flex-h">
- <ToolBarSelect
- :selectable="false"
- :title="this.$t('currentService')"
- :current="stateDashboardOption.currentService"
- :data="stateDashboardOption.services"
- icon="package"
- />
- <ToolBarSelect
- @onChoose="selectInstance"
- :title="$t('currentInstance')"
- :current="stateDashboardOption.currentInstance"
- :data="instances"
- icon="disk"
- />
- </div>
- <instances-survey
- :style="`overflow: auto; height: ${instancesSurveyHeight}`"
- />
- </div>
-</template>
-
-<script lang="ts">
- import InstancesSurvey from
'@/views/components/topology/instances-survey.vue';
- import ToolBarSelect from '@/views/components/dashboard/tool-bar-select.vue';
- import ToolBarEndpointSelect from
'@/views/components/dashboard/tool-bar-endpoint-select.vue';
- import _ from 'lodash';
- import Vue from 'vue';
- import { Component, PropSync, Watch } from 'vue-property-decorator';
- import { Action, Getter, State } from 'vuex-class';
-
- interface Instance {
- label: string;
- key: string;
- name?: string;
- }
-
- @Component({
- components: {
- InstancesSurvey,
- ToolBarSelect,
- ToolBarEndpointSelect,
- },
- })
- export default class WindowInstance extends Vue {
- @State('rocketOption') private stateDashboardOption!: any;
- @State('rocketData') private rocketComps!: any;
- @Getter('durationTime') private durationTime: any;
- @Action('SELECT_INSTANCE') private SELECT_INSTANCE: any;
- @Action('MIXHANDLE_CHANGE_GROUP_WITH_CURRENT')
- private MIXHANDLE_CHANGE_GROUP_WITH_CURRENT: any;
- @Action('MIXHANDLE_GET_OPTION') private MIXHANDLE_GET_OPTION: any;
- @Action('GET_QUERY') private GET_QUERY: any;
- @PropSync('isShow', { default: false })
- private isShowSync!: boolean;
- private instancesSurveyHeight = '100%';
-
- private tabsLoading = true;
- private instanceName: string = '0';
- private instances: any[] = [];
-
- private dragIndex: number = NaN;
-
- public dragStart(index: number) {
- this.dragIndex = index;
- }
-
- private selectInstance(i: any) {
- this.SELECT_INSTANCE({ instance: i, duration: this.durationTime });
- }
-
- private handleRefresh() {
- this.GET_QUERY({
- serviceId: this.stateDashboardOption.currentService.key || '',
- duration: this.durationTime,
- });
- }
-
- private handleOption() {
- this.MIXHANDLE_CHANGE_GROUP_WITH_CURRENT({ index: 0, current: 3 });
- return this.MIXHANDLE_GET_OPTION({
- compType: 'service',
- duration: this.durationTime,
- }).then(() => {
- this.handleRefresh();
- });
- }
-
- @Watch('stateDashboardOption.instances')
- private watchInstances(instances: Instance[]) {
- _.forEach(instances, (instance) => {
- instance.name = instance.label.includes('@')
- ? instance.label.split('@')[1]
- : instance.label;
- });
- this.instances = instances;
- if (instances.length > 0 && this.instanceName === '0') {
- this.SELECT_INSTANCE({
- instance: instances[0],
- duration: this.durationTime,
- });
- if (instances[0].name) {
- this.instanceName = instances[0].name;
- }
- }
- this.tabsLoading = false;
- }
-
- private beforeMount() {
- this.handleOption();
- }
-
- private mounted() {
- this.resize();
- window.addEventListener('resize', this.resize);
- }
-
- private resize() {
- this.instancesSurveyHeight = `${document.body.clientHeight - 101}px`;
- }
-
- private beforeDestroy() {
- window.removeEventListener('resize', this.resize);
- }
- }
-</script>
-
-<style lang="less" scoped></style>
