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 7eeece5 topoendpoint (#260)
7eeece5 is described below
commit 7eeece5b7b39cee0551adf3233bdcb163691ed97
Author: bigflybrother <[email protected]>
AuthorDate: Sat Mar 7 19:25:52 2020 +0800
topoendpoint (#260)
Co-authored-by: 吴晟 Wu Sheng <[email protected]>
---
.../modules/dashboard/modules/dashboard-option.ts | 4 +-
src/views/components/topology/chart/topo.vue | 6 +-
.../topology/endpoint}/endpoints-survey.vue | 15 +-
src/views/containers/topology/endpoint/index.vue | 76 +++++++++++
src/views/containers/topology/topology.vue | 4 +-
src/views/containers/topology/window-endpoint.vue | 151 ---------------------
6 files changed, 86 insertions(+), 170 deletions(-)
diff --git a/src/store/modules/dashboard/modules/dashboard-option.ts
b/src/store/modules/dashboard/modules/dashboard-option.ts
index 51808cc..4630cb6 100644
--- a/src/store/modules/dashboard/modules/dashboard-option.ts
+++ b/src/store/modules/dashboard/modules/dashboard-option.ts
@@ -121,13 +121,13 @@ const actions: ActionTree<State, any> = {
context.commit(types.SET_SERVICES, res.data.data.services);
});
},
- GET_SERVICE_ENDPOINTS(context: { commit: Commit, state: any }) {
+ GET_SERVICE_ENDPOINTS(context: { commit: Commit, state: any }, params: any) {
if (!context.state.currentService.key) {
return new Promise((resolve) => resolve());
}
return graph
.query('queryEndpoints')
- .params({serviceId: context.state.currentService.key, keyword: ''})
+ .params({serviceId: context.state.currentService.key, keyword: '',
...params})
.then((res: AxiosResponse) => {
context.commit(types.SET_ENDPOINTS, res.data.data.getEndpoints);
});
diff --git a/src/views/components/topology/chart/topo.vue
b/src/views/components/topology/chart/topo.vue
index 060d19c..d1ecfd7 100644
--- a/src/views/components/topology/chart/topo.vue
+++ b/src/views/components/topology/chart/topo.vue
@@ -113,9 +113,11 @@ export default {
this.$store.commit('rocketTopo/SET_NODE', {});
this.$store.dispatch('rocketTopo/CLEAR_TOPO_INFO');
this.$store.commit('rocketTopo/SET_MODE', d.detectPoints);
- this.$store.dispatch(this.$store.state.rocketTopo.mode ?
'rocketTopo/GET_TOPO_SERVICE_INFO' : 'rocketTopo/GET_TOPO_CLIENT_INFO', { ...d,
duration: this.$store.getters.durationTime });
+ this.$store.dispatch(this.$store.state.rocketTopo.mode ?
'rocketTopo/GET_TOPO_SERVICE_INFO' :
+ 'rocketTopo/GET_TOPO_CLIENT_INFO', { ...d, duration:
this.$store.getters.durationTime });
this.$store.commit('rocketTopo/SET_CALLBACK', () => {
- this.$store.dispatch(this.$store.state.rocketTopo.mode ?
'rocketTopo/GET_TOPO_SERVICE_INFO' : 'rocketTopo/GET_TOPO_CLIENT_INFO', { ...d,
duration: this.$store.getters.durationTime });
+ this.$store.dispatch(this.$store.state.rocketTopo.mode ?
'rocketTopo/GET_TOPO_SERVICE_INFO' :
+ 'rocketTopo/GET_TOPO_CLIENT_INFO', { ...d, duration:
this.$store.getters.durationTime });
});
},
resize() {
diff --git a/src/views/components/topology/endpoints-survey.vue
b/src/views/containers/topology/endpoint/endpoints-survey.vue
similarity index 80%
rename from src/views/components/topology/endpoints-survey.vue
rename to src/views/containers/topology/endpoint/endpoints-survey.vue
index b685d2c..0c21916 100644
--- a/src/views/components/topology/endpoints-survey.vue
+++ b/src/views/containers/topology/endpoint/endpoints-survey.vue
@@ -14,20 +14,17 @@ specific language governing permissions and * limitations
under the License. */
<DashboardItem
v-for="(i, index) in rocketComps.tree[0].children[2].children"
:key="index + i.t + i.w + i.d"
- :index="index"
- :rocketGlobal="rocketGlobal"
+ :rocketGlobal="{edit: false}"
: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';
+ import DashboardItem from '@/views/components/dashboard/dashboard-item.vue';
@Component({
components: {
@@ -35,15 +32,7 @@ specific language governing permissions and * limitations
under the License. */
},
})
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>
diff --git a/src/views/containers/topology/endpoint/index.vue
b/src/views/containers/topology/endpoint/index.vue
new file mode 100644
index 0000000..73af5e3
--- /dev/null
+++ b/src/views/containers/topology/endpoint/index.vue
@@ -0,0 +1,76 @@
+/** * 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="current" icon="package" />
+ <ToolBarEndpointSelect
+ @onChoose="selectEndpoint"
+ :title="$t('currentEndpoint')"
+ :current="stateDashboardOption.currentEndpoint"
+ :data="stateDashboardOption.endpoints"
+ icon="code"
+ />
+ </div>
+ <endpoints-survey />
+ </div>
+</template>
+
+<script lang="ts">
+ import Vue from 'vue';
+ import { Component, Watch, Prop } from 'vue-property-decorator';
+ import { Action, Getter, State, Mutation } from 'vuex-class';
+ import EndpointsSurvey from './endpoints-survey.vue';
+ import ToolBarSelect from '@/views/components/dashboard/tool-bar-select.vue';
+ import ToolBarEndpointSelect from
'@/views/components/dashboard/tool-bar-endpoint-select.vue';
+
+ interface Endpoint {
+ label: string;
+ key: string;
+ name?: string;
+ }
+
+ @Component({
+ components: {
+ EndpointsSurvey,
+ ToolBarSelect,
+ ToolBarEndpointSelect,
+ },
+ })
+ export default class WindowEndpoint extends Vue {
+ @State('rocketOption') private stateDashboardOption!: any;
+ @State('rocketData') private rocketComps!: any;
+ @Getter('durationTime') private durationTime: any;
+ @Action('SELECT_ENDPOINT') private SELECT_ENDPOINT: any;
+ @Mutation('SET_CURRENT_SERVICE') private SET_CURRENT_SERVICE: any;
+ @Action('GET_SERVICE_ENDPOINTS') private GET_SERVICE_ENDPOINTS: any;
+ @Action('MIXHANDLE_CHANGE_GROUP_WITH_CURRENT') private
MIXHANDLE_CHANGE_GROUP_WITH_CURRENT: any;
+ @Prop() private current!: { key: number | string; label: number | string };
+
+ private selectEndpoint(i: any) {
+ this.SELECT_ENDPOINT({ endpoint: i, duration: this.durationTime });
+ }
+
+ private beforeMount() {
+ this.SET_CURRENT_SERVICE(this.current);
+ this.MIXHANDLE_CHANGE_GROUP_WITH_CURRENT({ index: 0, current: 2 });
+ this.GET_SERVICE_ENDPOINTS({ duration: this.durationTime, serviceId:
this.current.key }).then(() => {
+ this.selectEndpoint(this.stateDashboardOption.endpoints[0]);
+ });
+ }
+ }
+</script>
+
+<style lang="scss">
+ .rk-dashboard-bar {
+ flex-shrink: 0;
+ color: #efefef;
+ background-color: #333840;
+ }
+</style>
diff --git a/src/views/containers/topology/topology.vue
b/src/views/containers/topology/topology.vue
index 3fc4942..c5397a9 100644
--- a/src/views/containers/topology/topology.vue
+++ b/src/views/containers/topology/topology.vue
@@ -16,7 +16,7 @@ specific language governing permissions and * limitations
under the License. */
<rk-sidebox :show="dialog.length" @update:show="dialog = ''" :fixed="true"
width="80%">
<window-endpoint
v-if="dialog === 'endpoint'"
- :endpoints="stateDashboardOption.endpoints"
+ :current="this.current"
/>
<window-instance
v-if="dialog === 'instance'"
@@ -37,7 +37,7 @@ specific language governing permissions and * limitations
under the License. */
import { Vue, Component } from 'vue-property-decorator';
import { State, Action, Getter, Mutation } from 'vuex-class';
import { AxiosResponse } from 'axios';
- import WindowEndpoint from '@/views/containers/topology/window-endpoint.vue';
+ import WindowEndpoint from '@/views/containers/topology/endpoint/index.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';
diff --git a/src/views/containers/topology/window-endpoint.vue
b/src/views/containers/topology/window-endpoint.vue
deleted file mode 100644
index 343299d..0000000
--- a/src/views/containers/topology/window-endpoint.vue
+++ /dev/null
@@ -1,151 +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"
- />
- <ToolBarEndpointSelect
- @onChoose="selectEndpoint"
- :title="$t('currentEndpoint')"
- :current="stateDashboardOption.currentEndpoint"
- :data="endpoints"
- icon="code"
- >
- </ToolBarEndpointSelect>
- </div>
- <endpoints-survey
- v-if="!rocketComps.loading"
- :style="`overflow: auto; height: ${endpointsSurveyHeight}`"
- />
- </div>
-</template>
-
-<script lang="ts">
- import EndpointsSurvey from
'@/views/components/topology/endpoints-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 Endpoint {
- label: string;
- key: string;
- name?: string;
- }
-
- @Component({
- components: {
- EndpointsSurvey,
- ToolBarSelect,
- ToolBarEndpointSelect,
- },
- })
- export default class WindowEndpoint extends Vue {
- @State('rocketOption') private stateDashboardOption!: any;
- @State('rocketData') private rocketComps!: any;
- @Getter('durationTime') private durationTime: any;
- @Action('SELECT_ENDPOINT') private SELECT_ENDPOINT: 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 endpointsSurveyHeight = '100%';
-
- private tabsLoading = true;
- private endpointName: string = '0';
- private endpointKey: string = '0';
- private endpoints: any[] = [];
-
- private dragIndex: number = NaN;
-
- public dragStart(index: number) {
- this.dragIndex = index;
- }
-
- private selectEndpoint(i: any) {
- this.SELECT_ENDPOINT({ endpoint: i, duration: this.durationTime });
- }
-
- private handleRefresh() {
- this.GET_QUERY({
- serviceId: this.stateDashboardOption.currentService.key || '',
- endpointId: this.endpointKey || '',
- endpointName: this.endpointName || '',
- duration: this.durationTime,
- });
- }
-
- private handleOption() {
- this.MIXHANDLE_CHANGE_GROUP_WITH_CURRENT({ index: 0, current: 2 });
- return this.MIXHANDLE_GET_OPTION({
- compType: 'service',
- duration: this.durationTime,
- }).then(() => {
- this.handleRefresh();
- });
- }
-
- @Watch('stateDashboardOption.endpoints')
- private watchInstances(endpoints: Endpoint[]) {
- _.forEach(endpoints, (endpoint) => {
- endpoint.name = endpoint.label;
- });
- this.endpoints = endpoints;
- if (endpoints.length > 0 && this.endpointName === '0') {
- this.SELECT_ENDPOINT({
- endpoint: endpoints[0],
- duration: this.durationTime,
- });
- if (endpoints[0].name) {
- this.endpointName = endpoints[0].name;
- this.endpointKey = endpoints[0].key;
- }
- }
- this.tabsLoading = false;
- }
-
- private beforeMount() {
- this.handleOption();
- }
-
- private mounted() {
- this.resize();
- window.addEventListener('resize', this.resize);
- }
-
- private resize() {
- this.endpointsSurveyHeight = `${document.body.clientHeight - 101}px`;
- }
-
- private beforeDestroy() {
- window.removeEventListener('resize', this.resize);
- }
- }
-</script>
-
-<style lang="scss">
- .rk-dashboard-bar {
- flex-shrink: 0;
- color: #efefef;
- background-color: #333840;
- }
-</style>
