ui/src/views/network/FirewallRules.vue - cloudstack - Git at Google

 // 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>
       <div class="form" v-ctrl-enter="addRule">
         <div class="form__item">
           <div class="form__label">{{ $t('label.sourcecidr') }}</div>
           <a-input v-focus="true" v-model:value="newRule.cidrlist"></a-input>
         </div>
         <div class="form__item">
           <div class="form__label">{{ $t('label.protocol') }}</div>
           <a-select
             v-model:value="newRule.protocol"
             style="width: 100%;"
             @change="resetRulePorts"
             showSearch
             optionFilterProp="label"
             :filterOption="(input, option) => {
               return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }" >
             <a-select-option value="tcp" :label="$t('label.tcp')">{{ $t('label.tcp') }}</a-select-option>
             <a-select-option value="udp" :label="$t('label.udp')">{{ $t('label.udp') }}</a-select-option>
             <a-select-option value="icmp" :label="$t('label.icmp')">{{ $t('label.icmp') }}</a-select-option>
           </a-select>
         </div>
         <div v-show="newRule.protocol === 'tcp' || newRule.protocol === 'udp'" class="form__item">
           <div class="form__label">{{ $t('label.startport') }}</div>
           <a-input v-model:value="newRule.startport"></a-input>
         </div>
         <div v-show="newRule.protocol === 'tcp' || newRule.protocol === 'udp'" class="form__item">
           <div class="form__label">{{ $t('label.endport') }}</div>
           <a-input v-model:value="newRule.endport"></a-input>
         </div>
         <div v-show="newRule.protocol === 'icmp'" class="form__item">
           <div class="form__label">{{ $t('label.icmptype') }}</div>
           <a-select
             v-model:value="newRule.icmptype"
             @change="val => { updateIcmpCodes(val) }"
             showSearch
             optionFilterProp="label"
             :filterOption="(input, option) => {
               return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }" >
             <a-select-option v-for="(opt) in icmpTypes" :key="opt.index" :label="opt.description">
               {{ opt.index + ' - ' + opt.description }}
             </a-select-option>
           </a-select>
         </div>
         <div v-show="newRule.protocol === 'icmp'" class="form__item">
           <div class="form__label">{{ $t('label.icmpcode') }}</div>
           <a-select
             v-model:value="newRule.icmpcode"
             showSearch
             optionFilterProp="label"
             :filterOption="(input, option) => {
               return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }" >
             <a-select-option v-for="(opt) in icmpCodes" :key="opt.code" :label="opt.description">
               {{ opt.code + ' - ' + opt.description }}
             </a-select-option>
           </a-select>
         </div>
         <div class="form__item" style="margin-left: auto;">
           <a-button :disabled="!('createFirewallRule' in $store.getters.apis)" type="primary" ref="submit" @click="addRule">{{ $t('label.add') }}</a-button>
         </div>
       </div>
     </div>

     <a-divider/>
     <a-button
       v-if="(('deleteFirewallRule' in $store.getters.apis) && this.selectedItems.length > 0)"
       type="primary"
       danger
       style="width: 100%; margin-bottom: 15px"
       @click="bulkActionConfirmation()">
       <template #icon><delete-outlined /></template>
       {{ $t('label.action.bulk.delete.firewall.rules') }}
     </a-button>
     <a-table
       size="small"
       style="overflow-y: auto"
       :loading="loading"
       :columns="columns"
       :dataSource="firewallRules"
       :pagination="false"
       :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
       :rowKey="record => record.id">
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'protocol'">
           {{ getCapitalise(record.protocol) }}
         </template>
         <template v-if="column.key === 'startport'">
           {{ record.icmptype >= 0 ? String(record.icmptype): record.startport >= 0 ? String(record.startport): 'All' }}
         </template>
         <template v-if="column.key === 'endport'">
           {{ record.icmpcode >= 0 ? String(record.icmpcode): record.endport >= 0 ? String(record.endport): 'All' }}
         </template>
         <template v-if="column.key === 'actions'">
           <div class="actions">
             <tooltip-button :tooltip="$t('label.edit.tags')" icon="tag-outlined" buttonClass="rule-action" @onClick="() => openTagsModal(record.id)" />
             <tooltip-button
               :tooltip="$t('label.delete')"
               type="primary"
               :danger="true"
               icon="delete-outlined"
               buttonClass="rule-action"
               :disabled="!('deleteFirewallRule' in $store.getters.apis)"
               @onClick="deleteRule(record)" />
           </div>
         </template>
       </template>
     </a-table>
     <a-pagination
       class="pagination"
       size="small"
       :current="page"
       :pageSize="pageSize"
       :total="totalCount"
       :showTotal="total => `${$t('label.total')} ${total} ${$t('label.items')}`"
       :pageSizeOptions="['10', '20', '40', '80', '100']"
       @change="handleChangePage"
       @showSizeChange="handleChangePageSize"
       showSizeChanger>
       <template #buildOptionText="props">
         <span>{{ props.value }} / {{ $t('label.page') }}</span>
       </template>
     </a-pagination>

     <a-modal
       :title="$t('label.edit.tags')"
       :visible="tagsModalVisible"
       :footer="null"
       :closable="true"
       :afterClose="closeModal"
       :maskClosable="false"
       @cancel="tagsModalVisible = false">
       <a-form
         layout="vertical"
         :ref="formRef"
         :model="form"
         :rules="rules"
         @finish="handleAddTag"
         v-ctrl-enter="handleAddTag"
        >
         <div class="add-tags">
           <div class="add-tags__input">
             <p class="add-tags__label">{{ $t('label.key') }}</p>
             <a-form-item name="key" ref="key">
               <a-input
                 v-focus="true"
                 v-model:value="form.key" />
             </a-form-item>
           </div>
           <div class="add-tags__input">
             <p class="add-tags__label">{{ $t('label.value') }}</p>
             <a-form-item name="value" ref="value">
               <a-input v-model:value="form.value" />
             </a-form-item>
           </div>
           <a-button
             style="margin-bottom: 5px;"
             ref="submit"
             type="primary"
             :disabled="!('createTags' in $store.getters.apis)"
             @click="handleAddTag"
             :loading="addTagLoading">{{ $t('label.add') }}</a-button>
         </div>
       </a-form>

       <a-divider />

       <div class="tags-container">
         <span class="tags" v-for="(tag) in tags" :key="tag.key">
           <a-tag :key="tag.key" :closable="'deleteTags' in $store.getters.apis" @close="() => handleDeleteTag(tag)">
             {{ tag.key }} = {{ tag.value }}
           </a-tag>
         </span>
       </div>

       <a-button class="add-tags-done" @click="tagsModalVisible = false" type="primary">{{ $t('label.done') }}</a-button>
     </a-modal>

     <bulk-action-view
       v-if="showConfirmationAction || showGroupActionModal"
       :showConfirmationAction="showConfirmationAction"
       :showGroupActionModal="showGroupActionModal"
       :items="firewallRules"
       :selectedRowKeys="selectedRowKeys"
       :selectedItems="selectedItems"
       :columns="columns"
       :selectedColumns="selectedColumns"
       action="deleteFirewallRule"
       :loading="loading"
       :message="message"
       @group-action="deleteRules"
       @handle-cancel="handleCancel"
       @close-modal="closeModal" />
   </div>
 </template>

 <script>
 import { reactive, ref, toRaw } from 'vue'
 import { api } from '@/api'
 import Status from '@/components/widgets/Status'
 import TooltipButton from '@/components/widgets/TooltipButton'
 import BulkActionView from '@/components/view/BulkActionView'
 import eventBus from '@/config/eventBus'

 export default {
   components: {
     Status,
     TooltipButton,
     BulkActionView
   },
   props: {
     resource: {
       type: Object,
       required: true
     }
   },
   inject: ['parentFetchData', 'parentToggleLoading'],
   data () {
     return {
       selectedRowKeys: [],
       showGroupActionModal: false,
       selectedItems: [],
       selectedColumns: [],
       filterColumns: ['State', 'Actions'],
       showConfirmationAction: false,
       message: {
         title: this.$t('label.action.bulk.delete.firewall.rules'),
         confirmMessage: this.$t('label.confirm.delete.firewall.rules')
       },
       loading: true,
       addTagLoading: false,
       firewallRules: [],
       newRule: {
         protocol: 'tcp',
         cidrlist: null,
         ipaddressid: this.resource.id,
         icmptype: null,
         icmpcode: null,
         startport: null,
         endport: null
       },
       protocolNumbers: [],
       icmpTypes: [],
       icmpCodes: [],
       tagsModalVisible: false,
       selectedRule: null,
       tags: [],
       totalCount: 0,
       page: 1,
       pageSize: 10,
       columns: [
         {
           title: this.$t('label.sourcecidr'),
           dataIndex: 'cidrlist'
         },
         {
           key: 'protocol',
           title: this.$t('label.protocol')
         },
         {
           key: 'startport',
           title: `${this.$t('label.startport')}/${this.$t('label.icmptype')}`
         },
         {
           key: 'endport',
           title: `${this.$t('label.endport')}/${this.$t('label.icmpcode')}`
         },
         {
           title: this.$t('label.state'),
           dataIndex: 'state'
         },
         {
           key: 'actions',
           title: this.$t('label.actions')
         }
       ]
     }
   },
   computed: {
     hasSelected () {
       return this.selectedRowKeys.length > 0
     }
   },
   created () {
     this.initForm()
     this.fetchNetworkProtocols()
     this.fetchData()
   },
   watch: {
     resource: {
       deep: true,
       handler (newItem) {
         if (!newItem || !newItem.id) {
           return
         }
         this.fetchData()
       }
     }
   },
   methods: {
     initForm () {
       this.formRef = ref()
       this.form = reactive({})
       this.rules = reactive({
         key: [{ required: true, message: this.$t('message.specify.tag.key') }],
         value: [{ required: true, message: this.$t('message.specify.tag.value') }]
       })
     },
     fetchNetworkProtocols () {
       api('listNetworkProtocols', {
         option: 'protocolnumber'
       }).then(json => {
         this.protocolNumbers = json.listnetworkprotocolsresponse?.networkprotocol || []
       })
       api('listNetworkProtocols', {
         option: 'icmptype'
       }).then(json => {
         this.icmpTypes.push({ index: -1, description: this.$t('label.all') })
         const results = json.listnetworkprotocolsresponse?.networkprotocol || []
         for (const result of results) {
           this.icmpTypes.push(result)
         }
       })
     },
     updateIcmpCodes (val) {
       this.newRule.icmpcode = -1
       this.icmpCodes = []
       this.icmpCodes.push({ code: -1, description: this.$t('label.all') })
       const icmpType = this.icmpTypes.find(icmpType => icmpType.index === val)
       if (icmpType && icmpType.details) {
         const icmpTypeDetails = icmpType.details
         for (const k of Object.keys(icmpTypeDetails)) {
           this.icmpCodes.push({ code: parseInt(k), description: icmpTypeDetails[k] })
         }
       }
     },
     fetchData () {
       this.loading = true
       api('listFirewallRules', {
         listAll: true,
         ipaddressid: this.resource.id,
         page: this.page,
         pageSize: this.pageSize
       }).then(response => {
         this.firewallRules = response.listfirewallrulesresponse.firewallrule || []
         this.totalCount = response.listfirewallrulesresponse.count || 0
       }).catch(error => {
         this.$notifyError(error)
       }).finally(() => {
         this.loading = false
       })
     },
     setSelection (selection) {
       this.selectedRowKeys = selection
       this.$emit('selection-change', this.selectedRowKeys)
       this.selectedItems = (this.firewallRules.filter(function (item) {
         return selection.indexOf(item.id) !== -1
       }))
     },
     resetSelection () {
       this.setSelection([])
     },
     onSelectChange (selectedRowKeys, selectedRows) {
       this.setSelection(selectedRowKeys)
     },
     bulkActionConfirmation () {
       this.showConfirmationAction = true
       this.selectedColumns = this.columns.filter(column => {
         return !this.filterColumns.includes(column.title)
       })
       this.selectedItems = this.selectedItems.map(v => ({ ...v, status: 'InProgress' }))
     },
     handleCancel () {
       eventBus.emit('update-bulk-job-status', { items: this.selectedItems, action: false })
       this.showGroupActionModal = false
       this.selectedItems = []
       this.selectedColumns = []
       this.selectedRowKeys = []
       this.parentFetchData()
     },
     deleteRules (e) {
       this.showConfirmationAction = false
       this.selectedColumns.splice(0, 0, {
         key: 'status',
         dataIndex: 'status',
         title: this.$t('label.operation.status'),
         filters: [
           { text: 'In Progress', value: 'InProgress' },
           { text: 'Success', value: 'success' },
           { text: 'Failed', value: 'failed' }
         ]
       })
       if (this.selectedRowKeys.length > 0) {
         this.showGroupActionModal = true
       }
       for (const rule of this.selectedItems) {
         this.deleteRule(rule)
       }
     },
     getCapitalise (val) {
       if (val === 'all') return this.$t('label.all')
       return val.toUpperCase()
     },
     deleteRule (rule) {
       this.loading = true
       api('deleteFirewallRule', { id: rule.id }).then(response => {
         const jobId = response.deletefirewallruleresponse.jobid
         eventBus.emit('update-job-details', { jobId, resourceId: null })
         this.$pollJob({
           title: this.$t('label.action.delete.firewall'),
           description: rule.id,
           jobId: jobId,
           successMessage: this.$t('message.success.remove.firewall.rule'),
           successMethod: () => {
             if (this.selectedItems.length > 0) {
               eventBus.emit('update-resource-state', { selectedItems: this.selectedItems, resource: rule.id, state: 'success' })
             }
             this.fetchData()
           },
           errorMessage: this.$t('message.remove.firewall.rule.failed'),
           errorMethod: () => {
             if (this.selectedItems.length > 0) {
               eventBus.emit('update-resource-state', { selectedItems: this.selectedItems, resource: rule.id, state: 'failed' })
             }
             this.fetchData()
           },
           loadingMessage: this.$t('message.remove.firewall.rule.processing'),
           catchMessage: this.$t('error.fetching.async.job.result'),
           catchMethod: () => this.fetchData(),
           bulkAction: `${this.selectedItems.length > 0}` && this.showGroupActionModal
         })
       }).catch(error => {
         this.$notifyError(error)
         this.fetchData()
       })
     },
     addRule () {
       if (this.loading) return
       this.loading = true
       api('createFirewallRule', { ...this.newRule }).then(response => {
         this.$pollJob({
           jobId: response.createfirewallruleresponse.jobid,
           successMessage: this.$t('message.success.add.firewall.rule'),
           successMethod: () => {
             this.resetAllRules()
             this.fetchData()
           },
           errorMessage: this.$t('message.add.firewall.rule.failed'),
           errorMethod: () => {
             this.resetAllRules()
             this.fetchData()
           },
           loadingMessage: this.$t('message.add.firewall.rule.processing'),
           catchMessage: this.$t('error.fetching.async.job.result'),
           catchMethod: () => {
             this.resetAllRules()
             this.fetchData()
           }
         })
       }).catch(error => {
         this.$notifyError(error)
         this.resetAllRules()
         this.fetchData()
       })
     },
     resetAllRules () {
       this.newRule.protocol = 'tcp'
       this.newRule.cidrlist = null
       this.newRule.networkid = this.resource.id
       this.resetRulePorts()
     },
     resetRulePorts () {
       this.newRule.icmptype = null
       this.newRule.icmpcode = null
       this.newRule.startport = null
       this.newRule.endport = null
     },
     closeModal () {
       this.selectedRule = null
       this.tagsModalVisible = false
       this.form.key = null
       this.form.value = null
       this.showConfirmationAction = false
     },
     openTagsModal (id) {
       this.initForm()
       this.selectedRule = id
       this.tagsModalVisible = true

       api('listTags', {
         resourceId: id,
         resourceType: 'FirewallRule',
         listAll: true
       }).then(response => {
         this.tags = response.listtagsresponse.tag || []
       }).catch(error => {
         this.$notifyError(error)
         this.closeModal()
       })
     },
     handleAddTag (e) {
       e.preventDefault()
       if (this.addTagLoading) return

       this.formRef.value.validate().then(() => {
         const values = toRaw(this.form)

         this.addTagLoading = true
         api('createTags', {
           'tags[0].key': values.key,
           'tags[0].value': values.value,
           resourceIds: this.selectedRule,
           resourceType: 'FirewallRule'
         }).then(response => {
           this.$pollJob({
             jobId: response.createtagsresponse.jobid,
             successMessage: this.$t('message.success.add.tag'),
             successMethod: () => {
               this.parentToggleLoading()
               this.openTagsModal(this.selectedRule)
             },
             errorMessage: this.$t('message.add.tag.failed'),
             errorMethod: () => {
               this.parentToggleLoading()
               this.closeModal()
             },
             loadingMessage: this.$t('message.add.tag.processing'),
             catchMessage: this.$t('error.fetching.async.job.result'),
             catchMethod: () => {
               this.parentFetchData()
               this.parentToggleLoading()
               this.closeModal()
             }
           })
         }).catch(error => {
           this.$notifyError(error)
         }).finally(() => {
           this.addTagLoading = false
         })
       }).catch(error => {
         this.formRef.value.scrollToField(error.errorFields[0].name)
       })
     },
     handleDeleteTag (tag) {
       api('deleteTags', {
         'tags[0].key': tag.key,
         'tags[0].value': tag.value,
         resourceIds: this.selectedRule,
         resourceType: 'FirewallRule'
       }).then(response => {
         this.$pollJob({
           jobId: response.deletetagsresponse.jobid,
           successMessage: this.$t('message.success.delete.tag'),
           successMethod: () => {
             this.parentToggleLoading()
             this.openTagsModal(this.selectedRule)
           },
           errorMessage: this.$t('message.delete.tag.failed'),
           errorMethod: () => {
             this.parentToggleLoading()
             this.closeModal()
           },
           loadingMessage: this.$t('message.delete.tag.processing'),
           catchMessage: this.$t('error.fetching.async.job.result'),
           catchMethod: () => {
             this.parentFetchData()
             this.parentToggleLoading()
             this.closeModal()
           }
         })
       }).catch(error => {
         this.$notifyError(error)
       })
     },
     handleChangePage (page, pageSize) {
       this.page = page
       this.pageSize = pageSize
       this.fetchData()
     },
     handleChangePageSize (currentPage, pageSize) {
       this.page = currentPage
       this.pageSize = pageSize
       this.fetchData()
     },
     capitalise (val) {
       return val.toUpperCase()
     }
   }
 }
 </script>

 <style scoped lang="scss">
   .rule {

     &-container {
       display: flex;
       width: 100%;
       flex-wrap: wrap;
       margin-right: -20px;
       margin-bottom: -10px;
     }

     &__item {
       padding-right: 20px;
       margin-bottom: 20px;

       @media (min-width: 760px) {
         flex: 1;
       }

     }

     &__title {
       font-weight: bold;
     }

   }

   .add-btn {
     width: 100%;
     padding-top: 15px;
     padding-bottom: 15px;
     height: auto;
   }

   .add-actions {
     display: flex;
     justify-content: flex-end;
     margin-right: -20px;
     margin-bottom: 20px;

     @media (min-width: 760px) {
       margin-top: 20px;
     }

     button {
       margin-right: 20px;
     }

   }

   .form {
     display: flex;
     align-items: flex-end;
     margin-right: -20px;
     flex-direction: column;
     margin-bottom: 20px;

     @media (min-width: 760px) {
       flex-direction: row;
     }

     &__item {
       display: flex;
       flex-direction: column;
       flex: 1;
       padding-right: 20px;
       margin-bottom: 20px;

       @media (min-width: 760px) {
         margin-bottom: 0;
       }

       input,
       .ant-select {
         margin-top: auto;
       }

     }

     &__label {
       font-weight: bold;
     }

   }

   .rule-action {

     &:not(:last-of-type) {
       margin-right: 10px;
     }

   }

   .tags {
     margin-bottom: 10px;
   }

   .add-tags {
     display: flex;
     align-items: flex-end;
     justify-content: space-between;

     &__input {
       margin-right: 10px;
     }

     &__label {
       margin-bottom: 5px;
       font-weight: bold;
     }

   }

   .tags-container {
     display: flex;
     flex-wrap: wrap;
     margin-bottom: 10px;
   }

   .add-tags-done {
     display: block;
     margin-left: auto;
   }
   .pagination {
     margin-top: 20px;
   }

 </style>
	// 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>
	<div class="form" v-ctrl-enter="addRule">
	<div class="form__item">
	<div class="form__label">{{ $t('label.sourcecidr') }}</div>
	<a-input v-focus="true" v-model:value="newRule.cidrlist"></a-input>
	</div>
	<div class="form__item">
	<div class="form__label">{{ $t('label.protocol') }}</div>
	<a-select
	v-model:value="newRule.protocol"
	style="width: 100%;"
	@change="resetRulePorts"
	showSearch
	optionFilterProp="label"
	:filterOption="(input, option) => {
	return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
	}" >
	<a-select-option value="tcp" :label="$t('label.tcp')">{{ $t('label.tcp') }}</a-select-option>
	<a-select-option value="udp" :label="$t('label.udp')">{{ $t('label.udp') }}</a-select-option>
	<a-select-option value="icmp" :label="$t('label.icmp')">{{ $t('label.icmp') }}</a-select-option>
	</a-select>
	</div>
	<div v-show="newRule.protocol === 'tcp' \|\| newRule.protocol === 'udp'" class="form__item">
	<div class="form__label">{{ $t('label.startport') }}</div>
	<a-input v-model:value="newRule.startport"></a-input>
	</div>
	<div v-show="newRule.protocol === 'tcp' \|\| newRule.protocol === 'udp'" class="form__item">
	<div class="form__label">{{ $t('label.endport') }}</div>
	<a-input v-model:value="newRule.endport"></a-input>
	</div>
	<div v-show="newRule.protocol === 'icmp'" class="form__item">
	<div class="form__label">{{ $t('label.icmptype') }}</div>
	<a-select
	v-model:value="newRule.icmptype"
	@change="val => { updateIcmpCodes(val) }"
	showSearch
	optionFilterProp="label"
	:filterOption="(input, option) => {
	return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
	}" >
	<a-select-option v-for="(opt) in icmpTypes" :key="opt.index" :label="opt.description">
	{{ opt.index + ' - ' + opt.description }}
	</a-select-option>
	</a-select>
	</div>
	<div v-show="newRule.protocol === 'icmp'" class="form__item">
	<div class="form__label">{{ $t('label.icmpcode') }}</div>
	<a-select
	v-model:value="newRule.icmpcode"
	showSearch
	optionFilterProp="label"
	:filterOption="(input, option) => {
	return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0
	}" >
	<a-select-option v-for="(opt) in icmpCodes" :key="opt.code" :label="opt.description">
	{{ opt.code + ' - ' + opt.description }}
	</a-select-option>
	</a-select>
	</div>
	<div class="form__item" style="margin-left: auto;">
	<a-button :disabled="!('createFirewallRule' in $store.getters.apis)" type="primary" ref="submit" @click="addRule">{{ $t('label.add') }}</a-button>
	</div>
	</div>
	</div>

	<a-divider/>
	<a-button
	v-if="(('deleteFirewallRule' in $store.getters.apis) && this.selectedItems.length > 0)"
	type="primary"
	danger
	style="width: 100%; margin-bottom: 15px"
	@click="bulkActionConfirmation()">
	<template #icon><delete-outlined /></template>
	{{ $t('label.action.bulk.delete.firewall.rules') }}
	</a-button>
	<a-table
	size="small"
	style="overflow-y: auto"
	:loading="loading"
	:columns="columns"
	:dataSource="firewallRules"
	:pagination="false"
	:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
	:rowKey="record => record.id">
	<template #bodyCell="{ column, record }">
	<template v-if="column.key === 'protocol'">
	{{ getCapitalise(record.protocol) }}
	</template>
	<template v-if="column.key === 'startport'">
	{{ record.icmptype >= 0 ? String(record.icmptype): record.startport >= 0 ? String(record.startport): 'All' }}
	</template>
	<template v-if="column.key === 'endport'">
	{{ record.icmpcode >= 0 ? String(record.icmpcode): record.endport >= 0 ? String(record.endport): 'All' }}
	</template>
	<template v-if="column.key === 'actions'">
	<div class="actions">
	<tooltip-button :tooltip="$t('label.edit.tags')" icon="tag-outlined" buttonClass="rule-action" @onClick="() => openTagsModal(record.id)" />
	<tooltip-button
	:tooltip="$t('label.delete')"
	type="primary"
	:danger="true"
	icon="delete-outlined"
	buttonClass="rule-action"
	:disabled="!('deleteFirewallRule' in $store.getters.apis)"
	@onClick="deleteRule(record)" />
	</div>
	</template>
	</template>
	</a-table>
	<a-pagination
	class="pagination"
	size="small"
	:current="page"
	:pageSize="pageSize"
	:total="totalCount"
	:showTotal="total => `${$t('label.total')} ${total} ${$t('label.items')}`"
	:pageSizeOptions="['10', '20', '40', '80', '100']"
	@change="handleChangePage"
	@showSizeChange="handleChangePageSize"
	showSizeChanger>
	<template #buildOptionText="props">
	<span>{{ props.value }} / {{ $t('label.page') }}</span>
	</template>
	</a-pagination>

	<a-modal
	:title="$t('label.edit.tags')"
	:visible="tagsModalVisible"
	:footer="null"
	:closable="true"
	:afterClose="closeModal"
	:maskClosable="false"
	@cancel="tagsModalVisible = false">
	<a-form
	layout="vertical"
	:ref="formRef"
	:model="form"
	:rules="rules"
	@finish="handleAddTag"
	v-ctrl-enter="handleAddTag"
	>
	<div class="add-tags">
	<div class="add-tags__input">
	<p class="add-tags__label">{{ $t('label.key') }}</p>
	<a-form-item name="key" ref="key">
	<a-input
	v-focus="true"
	v-model:value="form.key" />
	</a-form-item>
	</div>
	<div class="add-tags__input">
	<p class="add-tags__label">{{ $t('label.value') }}</p>
	<a-form-item name="value" ref="value">
	<a-input v-model:value="form.value" />
	</a-form-item>
	</div>
	<a-button
	style="margin-bottom: 5px;"
	ref="submit"
	type="primary"
	:disabled="!('createTags' in $store.getters.apis)"
	@click="handleAddTag"
	:loading="addTagLoading">{{ $t('label.add') }}</a-button>
	</div>
	</a-form>

	<a-divider />

	<div class="tags-container">
	<span class="tags" v-for="(tag) in tags" :key="tag.key">
	<a-tag :key="tag.key" :closable="'deleteTags' in $store.getters.apis" @close="() => handleDeleteTag(tag)">
	{{ tag.key }} = {{ tag.value }}
	</a-tag>
	</span>
	</div>

	<a-button class="add-tags-done" @click="tagsModalVisible = false" type="primary">{{ $t('label.done') }}</a-button>
	</a-modal>

	<bulk-action-view
	v-if="showConfirmationAction \|\| showGroupActionModal"
	:showConfirmationAction="showConfirmationAction"
	:showGroupActionModal="showGroupActionModal"
	:items="firewallRules"
	:selectedRowKeys="selectedRowKeys"
	:selectedItems="selectedItems"
	:columns="columns"
	:selectedColumns="selectedColumns"
	action="deleteFirewallRule"
	:loading="loading"
	:message="message"
	@group-action="deleteRules"
	@handle-cancel="handleCancel"
	@close-modal="closeModal" />
	</div>
	</template>

	<script>
	import { reactive, ref, toRaw } from 'vue'
	import { api } from '@/api'
	import Status from '@/components/widgets/Status'
	import TooltipButton from '@/components/widgets/TooltipButton'
	import BulkActionView from '@/components/view/BulkActionView'
	import eventBus from '@/config/eventBus'

	export default {
	components: {
	Status,
	TooltipButton,
	BulkActionView
	},
	props: {
	resource: {
	type: Object,
	required: true
	}
	},
	inject: ['parentFetchData', 'parentToggleLoading'],
	data () {
	return {
	selectedRowKeys: [],
	showGroupActionModal: false,
	selectedItems: [],
	selectedColumns: [],
	filterColumns: ['State', 'Actions'],
	showConfirmationAction: false,
	message: {
	title: this.$t('label.action.bulk.delete.firewall.rules'),
	confirmMessage: this.$t('label.confirm.delete.firewall.rules')
	},
	loading: true,
	addTagLoading: false,
	firewallRules: [],
	newRule: {
	protocol: 'tcp',
	cidrlist: null,
	ipaddressid: this.resource.id,
	icmptype: null,
	icmpcode: null,
	startport: null,
	endport: null
	},
	protocolNumbers: [],
	icmpTypes: [],
	icmpCodes: [],
	tagsModalVisible: false,
	selectedRule: null,
	tags: [],
	totalCount: 0,
	page: 1,
	pageSize: 10,
	columns: [
	{
	title: this.$t('label.sourcecidr'),
	dataIndex: 'cidrlist'
	},
	{
	key: 'protocol',
	title: this.$t('label.protocol')
	},
	{
	key: 'startport',
	title: `${this.$t('label.startport')}/${this.$t('label.icmptype')}`
	},
	{
	key: 'endport',
	title: `${this.$t('label.endport')}/${this.$t('label.icmpcode')}`
	},
	{
	title: this.$t('label.state'),
	dataIndex: 'state'
	},
	{
	key: 'actions',
	title: this.$t('label.actions')
	}
	]
	}
	},
	computed: {
	hasSelected () {
	return this.selectedRowKeys.length > 0
	}
	},
	created () {
	this.initForm()
	this.fetchNetworkProtocols()
	this.fetchData()
	},
	watch: {
	resource: {
	deep: true,
	handler (newItem) {
	if (!newItem \|\| !newItem.id) {
	return
	}
	this.fetchData()
	}
	}
	},
	methods: {
	initForm () {
	this.formRef = ref()
	this.form = reactive({})
	this.rules = reactive({
	key: [{ required: true, message: this.$t('message.specify.tag.key') }],
	value: [{ required: true, message: this.$t('message.specify.tag.value') }]
	})
	},
	fetchNetworkProtocols () {
	api('listNetworkProtocols', {
	option: 'protocolnumber'
	}).then(json => {
	this.protocolNumbers = json.listnetworkprotocolsresponse?.networkprotocol \|\| []
	})
	api('listNetworkProtocols', {
	option: 'icmptype'
	}).then(json => {
	this.icmpTypes.push({ index: -1, description: this.$t('label.all') })
	const results = json.listnetworkprotocolsresponse?.networkprotocol \|\| []
	for (const result of results) {
	this.icmpTypes.push(result)
	}
	})
	},
	updateIcmpCodes (val) {
	this.newRule.icmpcode = -1
	this.icmpCodes = []
	this.icmpCodes.push({ code: -1, description: this.$t('label.all') })
	const icmpType = this.icmpTypes.find(icmpType => icmpType.index === val)
	if (icmpType && icmpType.details) {
	const icmpTypeDetails = icmpType.details
	for (const k of Object.keys(icmpTypeDetails)) {
	this.icmpCodes.push({ code: parseInt(k), description: icmpTypeDetails[k] })
	}
	}
	},
	fetchData () {
	this.loading = true
	api('listFirewallRules', {
	listAll: true,
	ipaddressid: this.resource.id,
	page: this.page,
	pageSize: this.pageSize
	}).then(response => {
	this.firewallRules = response.listfirewallrulesresponse.firewallrule \|\| []
	this.totalCount = response.listfirewallrulesresponse.count \|\| 0
	}).catch(error => {
	this.$notifyError(error)
	}).finally(() => {
	this.loading = false
	})
	},
	setSelection (selection) {
	this.selectedRowKeys = selection
	this.$emit('selection-change', this.selectedRowKeys)
	this.selectedItems = (this.firewallRules.filter(function (item) {
	return selection.indexOf(item.id) !== -1
	}))
	},
	resetSelection () {
	this.setSelection([])
	},
	onSelectChange (selectedRowKeys, selectedRows) {
	this.setSelection(selectedRowKeys)
	},
	bulkActionConfirmation () {
	this.showConfirmationAction = true
	this.selectedColumns = this.columns.filter(column => {
	return !this.filterColumns.includes(column.title)
	})
	this.selectedItems = this.selectedItems.map(v => ({ ...v, status: 'InProgress' }))
	},
	handleCancel () {
	eventBus.emit('update-bulk-job-status', { items: this.selectedItems, action: false })
	this.showGroupActionModal = false
	this.selectedItems = []
	this.selectedColumns = []
	this.selectedRowKeys = []
	this.parentFetchData()
	},
	deleteRules (e) {
	this.showConfirmationAction = false
	this.selectedColumns.splice(0, 0, {
	key: 'status',
	dataIndex: 'status',
	title: this.$t('label.operation.status'),
	filters: [
	{ text: 'In Progress', value: 'InProgress' },
	{ text: 'Success', value: 'success' },
	{ text: 'Failed', value: 'failed' }
	]
	})
	if (this.selectedRowKeys.length > 0) {
	this.showGroupActionModal = true
	}
	for (const rule of this.selectedItems) {
	this.deleteRule(rule)
	}
	},
	getCapitalise (val) {
	if (val === 'all') return this.$t('label.all')
	return val.toUpperCase()
	},
	deleteRule (rule) {
	this.loading = true
	api('deleteFirewallRule', { id: rule.id }).then(response => {
	const jobId = response.deletefirewallruleresponse.jobid
	eventBus.emit('update-job-details', { jobId, resourceId: null })
	this.$pollJob({
	title: this.$t('label.action.delete.firewall'),
	description: rule.id,
	jobId: jobId,
	successMessage: this.$t('message.success.remove.firewall.rule'),
	successMethod: () => {
	if (this.selectedItems.length > 0) {
	eventBus.emit('update-resource-state', { selectedItems: this.selectedItems, resource: rule.id, state: 'success' })
	}
	this.fetchData()
	},
	errorMessage: this.$t('message.remove.firewall.rule.failed'),
	errorMethod: () => {
	if (this.selectedItems.length > 0) {
	eventBus.emit('update-resource-state', { selectedItems: this.selectedItems, resource: rule.id, state: 'failed' })
	}
	this.fetchData()
	},
	loadingMessage: this.$t('message.remove.firewall.rule.processing'),
	catchMessage: this.$t('error.fetching.async.job.result'),
	catchMethod: () => this.fetchData(),
	bulkAction: `${this.selectedItems.length > 0}` && this.showGroupActionModal
	})
	}).catch(error => {
	this.$notifyError(error)
	this.fetchData()
	})
	},
	addRule () {
	if (this.loading) return
	this.loading = true
	api('createFirewallRule', { ...this.newRule }).then(response => {
	this.$pollJob({
	jobId: response.createfirewallruleresponse.jobid,
	successMessage: this.$t('message.success.add.firewall.rule'),
	successMethod: () => {
	this.resetAllRules()
	this.fetchData()
	},
	errorMessage: this.$t('message.add.firewall.rule.failed'),
	errorMethod: () => {
	this.resetAllRules()
	this.fetchData()
	},
	loadingMessage: this.$t('message.add.firewall.rule.processing'),
	catchMessage: this.$t('error.fetching.async.job.result'),
	catchMethod: () => {
	this.resetAllRules()
	this.fetchData()
	}
	})
	}).catch(error => {
	this.$notifyError(error)
	this.resetAllRules()
	this.fetchData()
	})
	},
	resetAllRules () {
	this.newRule.protocol = 'tcp'
	this.newRule.cidrlist = null
	this.newRule.networkid = this.resource.id
	this.resetRulePorts()
	},
	resetRulePorts () {
	this.newRule.icmptype = null
	this.newRule.icmpcode = null
	this.newRule.startport = null
	this.newRule.endport = null
	},
	closeModal () {
	this.selectedRule = null
	this.tagsModalVisible = false
	this.form.key = null
	this.form.value = null
	this.showConfirmationAction = false
	},
	openTagsModal (id) {
	this.initForm()
	this.selectedRule = id
	this.tagsModalVisible = true

	api('listTags', {
	resourceId: id,
	resourceType: 'FirewallRule',
	listAll: true
	}).then(response => {
	this.tags = response.listtagsresponse.tag \|\| []
	}).catch(error => {
	this.$notifyError(error)
	this.closeModal()
	})
	},
	handleAddTag (e) {
	e.preventDefault()
	if (this.addTagLoading) return

	this.formRef.value.validate().then(() => {
	const values = toRaw(this.form)

	this.addTagLoading = true
	api('createTags', {
	'tags[0].key': values.key,
	'tags[0].value': values.value,
	resourceIds: this.selectedRule,
	resourceType: 'FirewallRule'
	}).then(response => {
	this.$pollJob({
	jobId: response.createtagsresponse.jobid,
	successMessage: this.$t('message.success.add.tag'),
	successMethod: () => {
	this.parentToggleLoading()
	this.openTagsModal(this.selectedRule)
	},
	errorMessage: this.$t('message.add.tag.failed'),
	errorMethod: () => {
	this.parentToggleLoading()
	this.closeModal()
	},
	loadingMessage: this.$t('message.add.tag.processing'),
	catchMessage: this.$t('error.fetching.async.job.result'),
	catchMethod: () => {
	this.parentFetchData()
	this.parentToggleLoading()
	this.closeModal()
	}
	})
	}).catch(error => {
	this.$notifyError(error)
	}).finally(() => {
	this.addTagLoading = false
	})
	}).catch(error => {
	this.formRef.value.scrollToField(error.errorFields[0].name)
	})
	},
	handleDeleteTag (tag) {
	api('deleteTags', {
	'tags[0].key': tag.key,
	'tags[0].value': tag.value,
	resourceIds: this.selectedRule,
	resourceType: 'FirewallRule'
	}).then(response => {
	this.$pollJob({
	jobId: response.deletetagsresponse.jobid,
	successMessage: this.$t('message.success.delete.tag'),
	successMethod: () => {
	this.parentToggleLoading()
	this.openTagsModal(this.selectedRule)
	},
	errorMessage: this.$t('message.delete.tag.failed'),
	errorMethod: () => {
	this.parentToggleLoading()
	this.closeModal()
	},
	loadingMessage: this.$t('message.delete.tag.processing'),
	catchMessage: this.$t('error.fetching.async.job.result'),
	catchMethod: () => {
	this.parentFetchData()
	this.parentToggleLoading()
	this.closeModal()
	}
	})
	}).catch(error => {
	this.$notifyError(error)
	})
	},
	handleChangePage (page, pageSize) {
	this.page = page
	this.pageSize = pageSize
	this.fetchData()
	},
	handleChangePageSize (currentPage, pageSize) {
	this.page = currentPage
	this.pageSize = pageSize
	this.fetchData()
	},
	capitalise (val) {
	return val.toUpperCase()
	}
	}
	}
	</script>

	<style scoped lang="scss">
	.rule {

	&-container {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	margin-right: -20px;
	margin-bottom: -10px;
	}

	&__item {
	padding-right: 20px;
	margin-bottom: 20px;

	@media (min-width: 760px) {
	flex: 1;
	}

	}

	&__title {
	font-weight: bold;
	}

	}

	.add-btn {
	width: 100%;
	padding-top: 15px;
	padding-bottom: 15px;
	height: auto;
	}

	.add-actions {
	display: flex;
	justify-content: flex-end;
	margin-right: -20px;
	margin-bottom: 20px;

	@media (min-width: 760px) {
	margin-top: 20px;
	}

	button {
	margin-right: 20px;
	}

	}

	.form {
	display: flex;
	align-items: flex-end;
	margin-right: -20px;
	flex-direction: column;
	margin-bottom: 20px;

	@media (min-width: 760px) {
	flex-direction: row;
	}

	&__item {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding-right: 20px;
	margin-bottom: 20px;

	@media (min-width: 760px) {
	margin-bottom: 0;
	}

	input,
	.ant-select {
	margin-top: auto;
	}

	}

	&__label {
	font-weight: bold;
	}

	}

	.rule-action {

	&:not(:last-of-type) {
	margin-right: 10px;
	}

	}

	.tags {
	margin-bottom: 10px;
	}

	.add-tags {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;

	&__input {
	margin-right: 10px;
	}

	&__label {
	margin-bottom: 5px;
	font-weight: bold;
	}

	}

	.tags-container {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 10px;
	}

	.add-tags-done {
	display: block;
	margin-left: auto;
	}
	.pagination {
	margin-top: 20px;
	}

	</style>