fix alarm unable to search (#222)
diff --git a/src/views/components/alarm/alarm-tool.vue b/src/views/components/alarm/alarm-tool.vue
index 786aedd..ef18c42 100644
--- a/src/views/components/alarm/alarm-tool.vue
+++ b/src/views/components/alarm/alarm-tool.vue
@@ -1,25 +1,26 @@
/**
- * 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>
<nav class="rk-alarm-tool flex-h">
- <AlarmSelect v-show="!inTopo" :title="this.$t('filterScope')" :value="alarmScope" @input="handleFilter" :data="alarmOptions"/>
+ <AlarmSelect v-show="!inTopo" :title="$t('filterScope')" :value="alarmScope" @input="handleFilter"
+ :data="alarmOptions"/>
<div class="mr-10" style="padding: 3px 15px 0">
- <div class="sm grey">{{this.$t('searchKeyword')}}</div>
+ <div class="sm grey">{{$t('searchKeyword')}}</div>
<input :disabled="inTopo" type="text" v-model="keyword" class="rk-alarm-tool-input" @input="handleRefresh(1)">
</div>
<RkPage class="mt-15" :currentSize="20" :currentPage="pageNum" @changePage="handlePage" :total="total"/>
@@ -27,71 +28,96 @@
</template>
<script lang="ts">
-import Vue from 'vue';
-import { Component, Prop, Model } from 'vue-property-decorator';
-import AlarmSelect from './alarm-select.vue';
-import { Action, Mutation } from 'vuex-class';
+ import Vue from 'vue';
+ import { Component, Prop } from 'vue-property-decorator';
+ import { Action, Mutation } from 'vuex-class';
+ import AlarmSelect from './alarm-select.vue';
-@Component({components: {AlarmSelect}})
-export default class AlarmTool extends Vue {
- @Mutation('SET_EVENTS') private SET_EVENTS: any;
- @Action('rocketAlarm/GET_ALARM') private GET_ALARM: any;
- @Prop() private durationTime: any;
- @Prop() private total!: number;
- private pageNum: number = 1;
- @Prop({default: {label: 'All', key: ''}})
- private alarmScope: any;
- @Prop({default: false, type: Boolean})
- private inTopo!: boolean;
- private alarmOptions: any = [
- {label: 'All', key: ''},
- {label: 'Service', key: 'Service'},
- {label: 'ServiceInstance', key: 'ServiceInstance'},
- {label: 'Endpoint', key: 'Endpoint'},
- ];
- @Prop({default: ''})
- private keyword!: string;
+ @Component({components: {AlarmSelect}})
+ export default class AlarmTool extends Vue {
+ @Mutation('SET_EVENTS') private SET_EVENTS: any;
+ @Action('rocketAlarm/GET_ALARM') private GET_ALARM: any;
+ @Prop() private durationTime: any;
+ @Prop() private total!: number;
+ private pageNum: number = 1;
+ @Prop({type: Object, default: () => ({label: 'All', key: ''})})
+ private alarmScope: any;
+ @Prop({default: false, type: Boolean})
+ private inTopo!: boolean;
+ private alarmOptions: any = [
+ {label: 'All', key: ''},
+ {label: 'Service', key: 'Service'},
+ {label: 'ServiceInstance', key: 'ServiceInstance'},
+ {label: 'Endpoint', key: 'Endpoint'},
+ ];
- private handlePage(pageNum: number) {
- this.handleRefresh(pageNum);
+ private keyword: string = '';
+
+ @Prop()
+ private propKeyword!: string;
+
+ private created() {
+ if (this.propKeyword) {
+ this.keyword = this.propKeyword;
+ }
+ }
+
+ private handlePage(pageNum: number) {
+ this.handleRefresh(pageNum);
+ }
+
+ private handleFilter(i: any) {
+ this.alarmScope = i;
+ this.handleRefresh(1);
+ }
+
+ private handleRefresh(pageNum: number) {
+ this.pageNum = pageNum;
+ const params: any = {
+ duration: this.durationTime,
+ paging: {
+ pageNum,
+ pageSize: 20,
+ needTotal: true,
+ },
+ };
+ if (this.alarmScope.key) {
+ params.scope = this.alarmScope.key;
+ }
+ if (this.keyword) {
+ params.keyword = this.keyword;
+ }
+ this.GET_ALARM(params);
+ }
+
+ private beforeMount() {
+ this.SET_EVENTS([() => {
+ this.handleRefresh(1);
+ }]);
+ this.handleRefresh(1);
+ }
+
+ private beforeDestroy() {
+ this.SET_EVENTS([]);
+ }
+
}
- private handleFilter(i: any) {
- this.alarmScope = i;
- this.handleRefresh(1);
- }
- private handleRefresh(pageNum: number) {
- this.pageNum = pageNum;
- const params: any = {
- duration: this.durationTime,
- paging: {
- pageNum,
- pageSize: 20,
- needTotal: true,
- },
- };
- if (this.alarmScope.key) { params.scope = this.alarmScope.key; }
- if (this.keyword) { params.keyword = this.keyword; }
- this.GET_ALARM(params);
- }
- private beforeMount() {
- this.SET_EVENTS([() => { this.handleRefresh(1); } ]);
- }
-}
</script>
<style lang="scss">
-.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;
-}
+ .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/alarm.vue b/src/views/containers/alarm.vue
index 61c6afb..af58623 100644
--- a/src/views/containers/alarm.vue
+++ b/src/views/containers/alarm.vue
@@ -17,7 +17,7 @@
<template>
<div class="rk-alarm flex-v">
- <AlarmTool :durationTime="durationTime" :total="rocketAlarm.total" :alarmScope="alarmScope" :inTopo="inTopo" :keyword="keyword"/>
+ <AlarmTool :durationTime="durationTime" :total="rocketAlarm.total" :alarmScope="alarmScope" :inTopo="inTopo" :prop-keyword="keyword"/>
<div style="flex-grow: 1;overflow: auto;height: 100%;">
<AlarmTable :data="rocketAlarm.alarmService"/>
</div>
