ui: add move to top/bottom for acl rules list (#9119)

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

ui/src/core/lazy_lib/icons_use.js

@@ -167,6 +167,8 @@ import {
   UserOutlined,
   UserSwitchOutlined,
   UploadOutlined,
+  VerticalAlignBottomOutlined,
+  VerticalAlignTopOutlined,
   WarningOutlined,
   WifiOutlined,
   SolutionOutlined
@@ -326,6 +328,8 @@ export default {
     app.component('UserOutlined', UserOutlined)
     app.component('UserSwitchOutlined', UserSwitchOutlined)
     app.component('UploadOutlined', UploadOutlined)
+    app.component('VerticalAlignBottomOutlined', VerticalAlignBottomOutlined)
+    app.component('VerticalAlignTopOutlined', VerticalAlignTopOutlined)
     app.component('WarningOutlined', WarningOutlined)
     app.component('WifiOutlined', WifiOutlined)
     app.component('renderIcon', renderIcon)

ui/src/views/network/AclListRulesTab.vue

@@ -90,6 +90,16 @@
               </div>
             </div>
             <div class="list__actions">
+              <tooltip-button
+                v-if="element.id !== acls[0].id"
+                :tooltip="$t('label.move.to.top')"
+                icon="vertical-align-top-outlined"
+                @onClick="() => moveRuleToTop(element)" />
+              <tooltip-button
+                v-if="element.id !== acls[acls.length - 1].id"
+                :tooltip="$t('label.move.to.bottom')"
+                icon="vertical-align-bottom-outlined"
+                @onClick="() => moveRuleToBottom(element)" />
               <tooltip-button :tooltip="$t('label.tags')" icon="tag-outlined" @onClick="() => openTagsModal(element)" />
               <tooltip-button :tooltip="$t('label.edit')" icon="edit-outlined" @onClick="() => openEditRuleModal(element)" />
               <tooltip-button
@@ -636,6 +646,12 @@ export default {
 
       if (e.moved.newIndex + 1 < this.acls.length) nextaclruleid = this.acls[e.moved.newIndex + 1].id
 
+      this.moveRule(
+        id,
+        previousaclruleid,
+        nextaclruleid)
+    },
+    moveRule (id, previousaclruleid, nextaclruleid) {
       this.fetchLoading = true
       api('moveNetworkAclItem', {
         id,
@@ -668,6 +684,12 @@ export default {
         this.fetchLoading = false
       })
     },
+    moveRuleToTop (element) {
+      this.moveRule(element.id, null, this.acls[0].id)
+    },
+    moveRuleToBottom (element) {
+      this.moveRule(element.id, this.acls[this.acls.length - 1].id, null)
+    },
     exportAclList () {
       const csvData = this.csv({ data: this.acls })