ui: add action to delete traffic type (#8076)

Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>

ui/public/locales/en.json

@@ -634,6 +634,7 @@
 "label.delete.sslcertificate": "Delete SSL certificate",
 "label.delete.tag": "Remove tag",
 "label.delete.term": "Delete term",
+"label.delete.traffic.type": "Delete traffic type",
 "label.delete.tungsten.address.group": "Delete Address Group",
 "label.delete.tungsten.fabric.tag": "Delete Tag",
 "label.delete.tungsten.fabric.tag.type": "Delete Tag type",
@@ -2453,6 +2454,7 @@
 "message.confirm.delete.pa": "Please confirm that you would like to delete Palo Alto.",
 "message.confirm.delete.provider": "Please confirm that you would like to delete this provider?",
 "message.confirm.delete.srx": "Please confirm that you would like to delete SRX.",
+"message.confirm.delete.traffic.type": "Please confirm that you would like to delete traffic type.",
 "message.confirm.destroy.router": "All services provided by this virtual router will be interrupted. Please confirm that you want to stop this router. Please confirm that you would like to destroy this router.",
 "message.confirm.disable.autoscale.vmgroup": "Please confirm that you want to disable this autoscale vm group.",
 "message.confirm.disable.host": "Please confirm that you want to disable the host.",
@@ -2536,6 +2538,7 @@
 "message.delete.tag.failed": "Failed to delete tag",
 "message.delete.tag.for.networkacl": "Remove tag for NetworkACL",
 "message.delete.tag.processing": "Deleting tag...",
+"message.delete.traffic.type.processing": "Deleting traffic type...",
 "message.delete.tungsten.policy.rule": "Please confirm that you want to delete Policy Rule?",
 "message.delete.tungsten.tag": "Are you sure you want to remove this Tag from this Policy?",
 "message.delete.user": "Please confirm that you would like to delete this user.",
@@ -3067,6 +3070,7 @@
 "message.template.iso": "Please select a template or ISO to continue.",
 "message.template.type.change.warning": "WARNING: Changing the template type to SYSTEM will disable further changes to the template.",
 "message.tooltip.reserved.system.netmask": "The network prefix that defines the pod subnet. Uses CIDR notation.",
+"message.traffic.type.deleted": "Successfully deleted traffic type",
 "message.traffic.type.to.basic.zone": "traffic type to basic zone",
 "message.trigger.shutdown": "Please confirm that you would like to trigger a shutdown on this Management server. It will not accept any new Async Jobs and will terminate after there are no pending jobs.",
 "message.type.values.to.add": "Please add additonal values by typing them in",

ui/src/views/infra/network/TrafficTypesTab.vue

@@ -19,6 +19,20 @@
   <a-spin :spinning="fetchLoading">
     <a-tabs :tabPosition="device === 'mobile' ? 'top' : 'left'" :animated="false">
       <a-tab-pane v-for="(item, index) in traffictypes" :tab="item.traffictype" :key="index">
+        <a-popconfirm
+          :title="$t('message.confirm.delete.traffic.type')"
+          @confirm="deleteTrafficType(itemd)"
+          :okText="$t('label.yes')"
+          :cancelText="$t('label.no')" >
+          <a-button
+            type="primary"
+            danger
+            style="width: 100%; margin-bottom: 10px"
+            :loading="loading"
+            :disabled="!('deleteTrafficType' in $store.getters.apis)">
+            <template #icon><delete-outlined /></template> {{ $t('label.delete.traffic.type') }}
+          </a-button>
+        </a-popconfirm>
         <div
           v-for="(type, idx) in ['kvmnetworklabel', 'vmwarenetworklabel', 'xennetworklabel', 'hypervnetworklabel', 'ovm3networklabel']"
           :key="idx"
@@ -113,14 +127,7 @@ export default {
   },
   methods: {
     async fetchData () {
-      this.fetchLoading = true
-      api('listTrafficTypes', { physicalnetworkid: this.resource.id }).then(json => {
-        this.traffictypes = json.listtraffictypesresponse.traffictype
-      }).catch(error => {
-        this.$notifyError(error)
-      }).finally(() => {
-        this.fetchLoading = false
-      })
+      this.fetchTrafficTypes()
       this.fetchLoading = true
       api('listNetworks', {
         listAll: true,
@@ -143,6 +150,16 @@ export default {
         this.fetchGuestNetwork()
       }
     },
+    fetchTrafficTypes () {
+      this.fetchLoading = true
+      api('listTrafficTypes', { physicalnetworkid: this.resource.id }).then(json => {
+        this.traffictypes = json.listtraffictypesresponse.traffictype
+      }).catch(error => {
+        this.$notifyError(error)
+      }).finally(() => {
+        this.fetchLoading = false
+      })
+    },
     fetchZones () {
       return new Promise((resolve, reject) => {
         this.fetchLoading = true
@@ -174,6 +191,36 @@ export default {
       }).finally(() => {
         this.fetchLoading = false
       })
+    },
+    deleteTrafficType (trafficType) {
+      api('deleteTrafficType', { id: trafficType.id }).then(response => {
+        this.$pollJob({
+          jobId: response.deletetraffictyperesponse.jobid,
+          title: this.$t('label.delete.traffic.type'),
+          description: trafficType.traffictype,
+          successMessage: this.$t('message.traffic.type.deleted') + ' ' + trafficType.traffictype,
+          successMethod: () => {
+            this.fetchLoading = false
+            this.fetchTrafficTypes()
+          },
+          errorMessage: this.$t('message.delete.failed'),
+          errorMethod: () => {
+            this.fetchLoading = false
+            this.fetchTrafficTypes()
+          },
+          loadingMessage: this.$t('message.delete.traffic.type.processing'),
+          catchMessage: this.$t('error.fetching.async.job.result'),
+          catchMethod: () => {
+            this.fetchLoading = false
+            this.fetchTrafficTypes()
+          }
+        })
+      }).catch(error => {
+        this.$notifyError(error)
+      }).finally(() => {
+        this.fetchLoading = false
+        this.fetchTrafficTypes()
+      })
     }
   }
 }