src/views/components/alarm/alarm-tool.vue

/** * 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="$t('filterScope')"
      :value="alarmScope"
      @input="handleFilter"
      :data="alarmOptions"
    />
    <div class="mr-10" style="padding: 3px 15px 0">
      <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"
    />
  </nav>
</template>

<script lang="ts">
  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({ 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 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([]);
    }
  }
</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;
  }
</style>