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 b682496 Fix: Topology alarm detection (#258)
b682496 is described below
commit b6824961e8c695bbbaf5d254ded70e5f01d81499
Author: Allen Wang <[email protected]>
AuthorDate: Fri Mar 6 13:55:15 2020 +0800
Fix: Topology alarm detection (#258)
---
src/store/modules/topology/index.ts | 8 ---
src/views/components/topology/chart/topo.vue | 12 ++--
src/views/containers/topology/alarm/alarm-tool.vue | 79 ++++++++++++++++++++++
src/views/containers/topology/alarm/index.vue | 39 +++++++++++
src/views/containers/topology/topology.vue | 18 ++---
src/views/containers/topology/window-alarm.vue | 54 ---------------
6 files changed, 135 insertions(+), 75 deletions(-)
diff --git a/src/store/modules/topology/index.ts
b/src/store/modules/topology/index.ts
index b9fd73e..c316c70 100644
--- a/src/store/modules/topology/index.ts
+++ b/src/store/modules/topology/index.ts
@@ -60,8 +60,6 @@ export interface State {
getSLATrend: number[];
getThroughputTrend: number[];
responsePercentile: { [key: string]: number[] };
- showDialog: boolean;
- showDialogType: string;
instanceDependency: {
calls: Call[];
nodes: Node[];
@@ -89,8 +87,6 @@ const initState: State = {
getSLATrend: [],
getThroughputTrend: [],
responsePercentile: {},
- showDialog: false,
- showDialogType: '',
instanceDependency: {
calls: [],
nodes: [],
@@ -105,10 +101,6 @@ const getters = {};
// mutations
const mutations = {
- [types.SET_SHOW_DIALOG](state: State, type: string) {
- state.showDialog = !!type;
- state.showDialogType = type;
- },
[types.SET_CALLBACK](state: State, data: any) {
state.callback = data;
},
diff --git a/src/views/components/topology/chart/topo.vue
b/src/views/components/topology/chart/topo.vue
index 678add2..2226193 100644
--- a/src/views/components/topology/chart/topo.vue
+++ b/src/views/components/topology/chart/topo.vue
@@ -82,25 +82,29 @@ export default {
links: 'update',
},
methods: {
+ // alarm hexagon
handleGoAlarm() {
- this.$store.commit('rocketTopo/SET_SHOW_DIALOG', 'alarm');
+ this.$emit('setDialog','alarm')
},
+ // trace hexagon
handleGoTrace() {
- this.$store.commit('rocketTopo/SET_SHOW_DIALOG', 'trace');
+ this.$emit('setDialog','trace')
},
+ // instace hexagon
handleGoInstance() {
this.$store.dispatch('SELECT_SERVICE', {
service: { key: this.current.id, label: this.current.name },
duration: this.$store.getters.durationTime,
});
- this.$store.commit('rocketTopo/SET_SHOW_DIALOG', 'instance');
+ this.$emit('setDialog','instance')
},
+ // endpoint hexagon
handleGoEndpoint() {
this.$store.dispatch('SELECT_SERVICE', {
service: { key: this.current.id, label: this.current.name },
duration: this.$store.getters.durationTime,
});
- this.$store.commit('rocketTopo/SET_SHOW_DIALOG', 'endpoint');
+ this.$emit('setDialog','endpoint');
},
handleNodeClick(d) {
this.$emit('setCurrent', { key: d.id, label: d.name });
diff --git a/src/views/containers/topology/alarm/alarm-tool.vue
b/src/views/containers/topology/alarm/alarm-tool.vue
new file mode 100644
index 0000000..c9844fe
--- /dev/null
+++ b/src/views/containers/topology/alarm/alarm-tool.vue
@@ -0,0 +1,79 @@
+/** * 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>
+ <nav class="rk-alarm-tool flex-h">
+ <div class="mr-10" style="padding: 3px 15px 0">
+ <div class="sm grey">{{ $t('searchKeyword') }}</div>
+ <input type="text" disabled v-model="keyword"
class="rk-alarm-tool-input" @input="handleFetch(1)" />
+ </div>
+ <RkPage
+ class="mt-15"
+ :currentSize="20"
+ :currentPage="pageNum"
+ @changePage="(pageNum) => handleFetch(pageNum)"
+ :total="total"
+ />
+ </nav>
+</template>
+
+<script lang="ts">
+ import Vue from 'vue';
+ import { Component, Prop } from 'vue-property-decorator';
+ import { Action, Mutation, Getter } from 'vuex-class';
+
+ interface Option {
+ key: string | number;
+ label: string | number;
+ }
+
+ @Component
+ export default class AlarmTool extends Vue {
+ @Getter('durationTime') private durationTime: any;
+ @Mutation('SET_EVENTS') private SET_EVENTS: any;
+ @Action('rocketAlarm/GET_ALARM') private GET_ALARM: any;
+ @Prop() private total!: number;
+ @Prop() private keyword!: string;
+ private pageNum: number = 1;
+ private handleFetch(pageNum: number) {
+ this.pageNum = pageNum;
+ this.GET_ALARM({
+ duration: this.durationTime,
+ scope: 'Service',
+ paging: {
+ pageNum,
+ pageSize: 20,
+ needTotal: true,
+ },
+ keyword: this.keyword,
+ });
+ }
+
+ private beforeMount() {
+ this.handleFetch(1);
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ .rk-alarm-tool {
+ border-bottom: 1px solid #c1c5ca41;
+ height: 52px;
+ background-color: #333840;
+ padding: 0 15px;
+ color: #efefef;
+ flex-shrink: 0;
+ }
+
+ .rk-alarm-tool-input {
+ border-style: unset;
+ outline: 0;
+ padding: 2px 5px;
+ border-radius: 3px;
+ }
+</style>
diff --git a/src/views/containers/topology/alarm/index.vue
b/src/views/containers/topology/alarm/index.vue
new file mode 100644
index 0000000..7eb5991
--- /dev/null
+++ b/src/views/containers/topology/alarm/index.vue
@@ -0,0 +1,39 @@
+/** * 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="rk-alarm flex-v">
+ <AlarmTool :keyword="current.label" :total="rocketAlarm.total" />
+ <AlarmTable :data="rocketAlarm.alarmService" />
+ </div>
+</template>
+
+<script lang="ts">
+ import Vue from 'vue';
+ import Component from 'vue-class-component';
+ import AlarmTool from './alarm-tool.vue';
+ import AlarmTable from '@/views/components/alarm/alarm-table.vue';
+ import { State } from 'vuex-class';
+ import { Prop } from 'vue-property-decorator';
+
+ @Component({
+ components: { AlarmTool, AlarmTable },
+ })
+ export default class Alarm extends Vue {
+ @State('rocketAlarm') private rocketAlarm!: any;
+ @Prop() private current!: { key: number | string; label: number | string };
+ }
+</script>
+
+<style lang="scss">
+ .rk-alarm {
+ flex-grow: 1;
+ height: 100%;
+ min-height: 0;
+ }
+</style>
diff --git a/src/views/containers/topology/topology.vue
b/src/views/containers/topology/topology.vue
index 154f538..653f175 100644
--- a/src/views/containers/topology/topology.vue
+++ b/src/views/containers/topology/topology.vue
@@ -12,24 +12,23 @@ specific language governing permissions and * limitations
under the License. */
<template>
<div class="rk-topo">
<TopoAside />
- <Topo :current="current" @setCurrent="setCurrent" :nodes="stateTopo.nodes"
:links="stateTopo.calls"/>
- <rk-sidebox :show.sync="stateTopo.showDialog" :fixed="true" width="80%">
+ <Topo :current="current" @setDialog="(type) => dialog = type"
@setCurrent="setCurrent" :nodes="stateTopo.nodes" :links="stateTopo.calls"/>
+ <rk-sidebox :show="dialog.length" @update:show="dialog = ''" :fixed="true"
width="80%">
<window-endpoint
- v-if="stateTopo.showDialogType === 'endpoint'"
+ v-if="dialog === 'endpoint'"
:endpoints="stateDashboardOption.endpoints"
/>
<window-instance
- v-else-if="stateTopo.showDialogType === 'instance'"
+ v-else-if="dialog === 'instance'"
:instances="stateDashboardOption.instances"
/>
<window-trace
- v-else-if="stateTopo.showDialogType === 'trace'"
+ v-else-if="dialog === 'trace'"
:service="this.current"
/>
<window-alarm
- v-else-if="stateTopo.showDialogType === 'alarm'"
- :alarmScope="{ label: 'Service', key: 'Service' }"
- :keyword="this.current.label"
+ v-if="dialog === 'alarm'"
+ :current="this.current"
/>
</rk-sidebox>
</div>
@@ -41,7 +40,7 @@ specific language governing permissions and * limitations
under the License. */
import WindowEndpoint from '@/views/containers/topology/window-endpoint.vue';
import WindowInstance from '@/views/containers/topology/window-instance.vue';
import WindowTrace from '@/views/containers/topology/window-trace.vue';
- import WindowAlarm from '@/views/containers/topology/window-alarm.vue';
+ import WindowAlarm from '@/views/containers/topology/alarm/index.vue';
import Topo from '../../components/topology/chart/topo.vue';
import TopoAside from '../../components/topology/topo-aside.vue';
import { State as topoState } from '@/store/modules/topology';
@@ -66,6 +65,7 @@ specific language governing permissions and * limitations
under the License. */
@Getter('durationTime') private durationTime: any;
private current: any = {};
+ private dialog: string = '';
private setCurrent(d: any): void {
this.current = d;
}
diff --git a/src/views/containers/topology/window-alarm.vue
b/src/views/containers/topology/window-alarm.vue
deleted file mode 100644
index 9e72aa3..0000000
--- a/src/views/containers/topology/window-alarm.vue
+++ /dev/null
@@ -1,54 +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="rk-alarm flex-v">
- <AlarmTool
- :durationTime="durationTime"
- :total="rocketAlarm.total"
- :alarmScope="alarmScope"
- :inTopo="true"
- :prop-keyword="keyword"
- />
- <div style="flex-grow: 1;overflow: auto;height: 100%;">
- <AlarmTable :data="rocketAlarm.alarmService" />
- </div>
- </div>
-</template>
-
-<script lang="ts">
- import Vue from 'vue';
- import Component from 'vue-class-component';
- import { Prop, PropSync } from 'vue-property-decorator';
- import AlarmTool from '../../components/alarm/alarm-tool.vue';
- import AlarmTable from '../../components/alarm/alarm-table.vue';
- import { State, Action, Getter } from 'vuex-class';
-
- @Component({
- components: { AlarmTool, AlarmTable },
- })
- export default class WindowAlarm extends Vue {
- @State('rocketAlarm') private rocketAlarm!: any;
- @Getter('durationTime') private durationTime: any;
- @Prop({ default: () => ({ label: 'All', key: '' }) })
- private alarmScope: any;
- @Prop({ default: '' })
- private keyword!: string;
- }
-</script>
-
-<style lang="scss">
- .rk-alarm {
- flex-grow: 1;
- height: 100%;
- min-height: 0;
- }
-</style>
