Merge pull request #208 from kytos-ng/ui/disable_modal

Added UI modal for disabling a switch
kytos-ng · Aug 16, 2024 · 0bc733c · 0bc733c
2 parents d939512 + 974dd9f
commit 0bc733c
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 26 deletions.
diff --git a/CHANGELOG.rst b/CHANGELOG.rst
@@ -10,6 +10,7 @@ All notable changes to the ``topology`` project will be documented in this file.
 Added
 =====
 - Added endpoint ``DELETE v3/interfaces/{interface_id}`` to delete an interface.
+- Added confirmation windown to confirm the disabling or enabling of a switch in the UI interface.
 
 Changed
 =======

diff --git a/ui/k-info-panel/link_info.kytos b/ui/k-info-panel/link_info.kytos
@@ -236,16 +236,16 @@
               title: 'Delete link: Success',
               description: 'The link ' + name + ' was deleted.',
          }
-         _this.$kytos.$emit("setNotification", notification)
-         _this.$kytos.$emit("hideInfoPanel")
+         _this.$kytos.eventBus.$emit("setNotification", notification)
+         _this.$kytos.eventBus.$emit("hideInfoPanel")
        });
        request.fail(function(data) {
          let notification = {
               icon: 'gear',
               title: 'Delete link: Failure',
               description: data.status + ': ' + data.responseJSON.description + ' The link ' + name + ' was not deleted.',
          }
-         _this.$kytos.$emit("setNotification", notification)
+         _this.$kytos.eventBus.$emit("setNotification", notification)
        });
      },
    },

diff --git a/ui/k-info-panel/switch_info.kytos b/ui/k-info-panel/switch_info.kytos
@@ -2,13 +2,13 @@
     <k-accordion>
       <div class="buttons">
         <div class="button-left">
-          <k-button @click="bt_state_toggle" :title="next_state"></k-button>
+          <k-button @click="bt_disable" :title="next_state"></k-button>
         </div>
         <div class="button-right">
           <k-button @click="bt_delete" title="Delete"></k-button>
         </div>
       </div>
-      <template v-if="show_modal">
+      <template v-if="show_dl_modal">
         <div class="modal-mask">
           <div class="modal-wrapper">
             <div class="modal-container">
@@ -18,12 +18,12 @@
               </div>
               <div class="modal-body">
                 <slot name="body">
-                  Delete Switch {{metadata.node_name !== undefined && metadata.node_name.length !== 0? metadata.node_name : metadata.id}}
+                  Delete Switch {{metadata.node_name !== undefined && metadata.node_name.length !== 0? metadata.node_name : metadata.id}}?
                 </slot>
               </div>
               <div class="modal-footer">
                 <slot name="footer">
-                  <k-button tooltip="Cancel" title="Cancel" @click="modal_cancel">
+                  <k-button tooltip="Cancel" title="Cancel" @click="modal_dl_cancel">
                   </k-button>
                   <k-button id="modal-delete" tooltip="Delete" title="Delete" @click="modal_delete">
                   </k-button>
@@ -33,6 +33,31 @@
           </div>
         </div>
       </template>
+      <template v-else-if="show_dis_modal">
+        <div class="modal-mask">
+          <div class="modal-wrapper">
+            <div class="modal-container">
+              <div class="modal-header">
+                <slot name="header">
+                </slot>
+              </div>
+              <div class="modal-body">
+                <slot name="body">
+                  {{next_state}} Switch {{metadata.node_name !== undefined && metadata.node_name.length !== 0? metadata.node_name : metadata.id}}?
+                </slot>
+              </div>
+              <div class="modal-footer">
+                <slot name="footer">
+                  <k-button tooltip="Cancel" title="Cancel" @click="modal_dis_cancel">
+                  </k-button>
+                  <k-button id="modal-delete" tooltip="Disable/Enable switch" :title="next_state" @click="modal_disable">
+                  </k-button>
+                </slot>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
       <k-accordion-item title="Usage Radar" v-if="this.metadata.id">
         <k-switch-radar :dpid="metadata.id" :showGrid="true" :showAxis="true" :showLabels="true" :showLegend="false"></k-switch-radar>
       </k-accordion-item>
@@ -146,7 +171,8 @@
        flows: [],
        links: [],
        headers: ['Links'],
-       show_modal: false
+       show_dl_modal: false,
+       show_dis_modal: false
      }
    },
    methods: {
@@ -308,7 +334,7 @@
        }
        this.$kytos.eventBus.$emit("setNotification", notification)
      },
-     bt_state_toggle(){
+     state_toggle(){
        let request = $.ajax({
                         type:"POST",
                         url: this.$kytos_server_api + "kytos/topology/v3/switches/" + this.metadata.dpid
@@ -317,6 +343,16 @@
        request.done(this.msg_state_success)
        request.fail(this.msg_state_failure)
      },
+     bt_disable(){
+      this.show_dis_modal = true
+     },
+     modal_dis_cancel(){
+      this.show_dis_modal = false;
+     },
+     modal_disable(){
+      this.show_dis_modal = false;
+      this.state_toggle()
+     },
      bt_request(){
        var interfaces = {}
        interfaces["interfaces"] = this.chosen_interfaces
@@ -346,13 +382,13 @@
        })
      },
      bt_delete(){
-       this.show_modal = true;
+       this.show_dl_modal = true;
      },
-     modal_cancel(){
-       this.show_modal = false;
+     modal_dl_cancel(){
+       this.show_dl_modal = false;
      },
      modal_delete(){
-       this.show_modal = false;
+       this.show_dl_modal = false;
        this.delete_switch();
      },
      delete_switch(){
@@ -362,21 +398,21 @@
                         url: this.$kytos_server_api + "kytos/topology/v3/switches/" + this.metadata.dpid,
                         async: true,});
        request.done(function() {
-        let notification = {
-              icon: 'gear',
-              title: 'Delete Switch: Success',
-              description: 'The switch ' + _this.metadata.dpid + ' was deleted.',
-        }
-        _this.$kytos.$emit("setNotification", notification)
-        _this.$kytos.$emit("hideInfoPanel")
+          let notification = {
+                icon: 'gear',
+                title: 'Delete Switch: Success',
+                description: 'The switch ' + _this.metadata.dpid + ' was deleted.',
+          }
+          _this.$kytos.eventBus.$emit("setNotification", notification)
+          _this.$kytos.eventBus.$emit("hideInfoPanel")
        });
        request.fail(function(data) {
-        let notification = {
-              icon: 'gear',
-              title: 'Delete Switch: Failure',
-              description: data.status + ': ' + data.responseJSON.description + ' The switch ' + _this.metadata.dpid + ' was not deleted.',
-        }
-        _this.$kytos.$emit("setNotification", notification)
+          let notification = {
+                icon: 'gear',
+                title: 'Delete Switch: Failure',
+                description: data.status + ': ' + data.responseJSON.description + ' The switch ' + _this.metadata.dpid + ' was not deleted.',
+          }
+          _this.$kytos.eventBus.$emit("setNotification", notification)
        });
      },
    },
-Original file line number
+Diff line change
@@ Expand Up @@
     Added
     =====
     - Added endpoint ``DELETE v3/interfaces/{interface_id}`` to delete an interface.
+    - Added confirmation windown to confirm the disabling or enabling of a switch in the UI interface.
     Changed
     =======
@@ Expand Down @@