src/views/storage/ScheduledSnapshots.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>
  <div class="list-schedule">
    <a-table
      size="small"
      :columns="columns"
      :dataSource="dataSchedules"
      :rowKey="record => record.id"
      :pagination="false"
      :loading="loading">
      <div slot="icon" slot-scope="text, record">
        <label class="interval-icon">
          <span v-if="record.intervaltype===0">
            <a-icon type="clock-circle" />
          </span>
          <span class="custom-icon icon-daily" v-else-if="record.intervaltype===1">
            <a-icon type="calendar" />
          </span>
          <span class="custom-icon icon-weekly" v-else-if="record.intervaltype===2">
            <a-icon type="calendar" />
          </span>
          <span class="custom-icon icon-monthly" v-else-if="record.intervaltype===3">
            <a-icon type="calendar" />
          </span>
        </label>
      </div>
      <div slot="time" slot-scope="text, record">
        <label class="interval-content">
          <span v-if="record.intervaltype===0">{{ record.schedule + $t('label.min.past.hour') }}</span>
          <span v-else>{{ record.schedule.split(':')[1] + ':' + record.schedule.split(':')[0] }}</span>
        </label>
      </div>
      <div slot="interval" slot-scope="text, record">
        <span v-if="record.intervaltype===2">
          {{ $t('label.interval.weekly').replace('{number}', $t(listDayOfWeek[record.schedule.split(':')[2] - 1])) }}
        </span>
        <span v-else-if="record.intervaltype===3">
          {{ $t('label.interval.monthly').replace('{number}', record.schedule.split(':')[2]) }}
        </span>
      </div>
      <div slot="timezone" slot-scope="text, record">
        <label>{{ getTimeZone(record.timezone) }}</label>
      </div>
      <div slot="tags" slot-scope="text, record">
        <a-tag v-for="(tag, index) in record.tags" :key="index">{{ tag.key + '=' + tag.value }}</a-tag>
      </div>
      <div slot="action" class="account-button-action" slot-scope="text, record">
        <a-tooltip placement="top">
          <template slot="title">
            {{ $t('label.delete.schedule') }}
          </template>
          <a-button
            type="danger"
            shape="circle"
            icon="close"
            size="small"
            :loading="actionLoading"
            @click="handleClickDelete(record)"/>
        </a-tooltip>
      </div>
    </a-table>
  </div>
</template>

<script>
import { api } from '@/api'
import { timeZoneName } from '@/utils/timezone'

export default {
  name: 'ScheduledSnapshots',
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    dataSource: {
      type: Array,
      required: true
    },
    resource: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      actionLoading: false,
      columns: [],
      dataSchedules: [],
      listDayOfWeek: ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday']
    }
  },
  created () {
    this.columns = [
      {
        title: '',
        dataIndex: 'icon',
        width: 30,
        scopedSlots: { customRender: 'icon' }
      },
      {
        title: this.$t('time'),
        dataIndex: 'schedule',
        scopedSlots: { customRender: 'time' }
      },
      {
        title: '',
        dataIndex: 'interval',
        scopedSlots: { customRender: 'interval' }
      },
      {
        title: this.$t('timezone'),
        dataIndex: 'timezone',
        scopedSlots: { customRender: 'timezone' }
      },
      {
        title: this.$t('keep'),
        dataIndex: 'maxsnaps',
        scopedSlots: { customRender: 'keep' }
      },
      {
        title: this.$t('tags'),
        dataIndex: 'tags',
        scopedSlots: { customRender: 'tags' }
      },
      {
        title: this.$t('action'),
        dataIndex: 'action',
        width: 50,
        scopedSlots: { customRender: 'action' }
      }
    ]
  },
  mounted () {
    this.dataSchedules = this.dataSource
  },
  watch: {
    dataSource (newData, oldData) {
      this.dataSchedules = newData
    }
  },
  methods: {
    handleClickDelete (record) {
      const params = {}
      params.id = record.id
      this.actionLoading = true
      api('deleteSnapshotPolicies', params).then(json => {
        if (json.deletesnapshotpoliciesresponse.success) {
          this.$notification.success({
            message: 'Delete Snapshot Policy',
            description: 'Successfully deleted snapshot policy'
          })

          this.$emit('refresh')
        }
      }).catch(error => {
        this.$notification.error({
          message: 'Request Failed',
          description: (error.response && error.response.headers && error.response.headers['x-description']) || error.message
        })
      }).finally(() => {
        this.actionLoading = false
      })
    },
    getTimeZone (timeZone) {
      return timeZoneName(timeZone)
    }
  }
}
</script>

<style lang="less" scoped>
  .interval-icon {
    span {
      position: relative;
      font-size: 18px;
    }

    .custom-icon:before {
      font-size: 8px;
      position: absolute;
      top: 8px;
      left: 3.5px;
      color: #000;
      font-weight: 700;
      line-height: 1.7;
    }

    .icon-daily:before {
      content: "01";
      left: 5px;
      top: 7px;
      line-height: 1.9;
    }

    .icon-weekly:before {
      content: "1-7";
      left: 3px;
      line-height: 1.7;
    }

    .icon-monthly:before {
      content: "***";
    }
  }

  /deep/.ant-btn > .anticon {
    line-height: 1.8;
  }
</style>