Removed Prefix Length input from IPV6DefaultGateway table

Jira Story:https://jsw.ibm.com/browse/PFEBMC-3374
ibm-openbmc · Nov 17, 2024 · 154e0bc · 154e0bc
1 parent a51ba17
commit 154e0bc
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 106 deletions.
diff --git a/src/store/modules/Settings/NetworkStore.js b/src/store/modules/Settings/NetworkStore.js
@@ -419,9 +419,9 @@ const NetworkStore = {
           return {}; // if address doesn't match then skip address, no change
         }
       });
-      const filteredAddress = newIpv6StaticDefaultGatewayAddress.filter(
-        (item) => item.PrefixLength !== 0
-      );
+      let filteredAddress = [];
+      const newAddress = newIpv6StaticDefaultGatewayAddress[0];
+      filteredAddress.push(newAddress);
       const updatedIpv6Array = {
         IPv6StaticDefaultGateways: [...updatedIpv6, ...filteredAddress],
       };

diff --git a/src/views/Settings/Network/ModalIpv6StaticDefaultGateway.vue b/src/views/Settings/Network/ModalIpv6StaticDefaultGateway.vue
@@ -33,38 +33,6 @@
             </b-form-invalid-feedback>
           </b-form-group>
         </b-col>
-        <b-col sm="6">
-          <b-form-group
-            :label="$t('pageNetwork.modal.prefixLength')"
-            label-for="prefixLength"
-          >
-            <b-form-input
-              id="prefixLength"
-              v-model="form.prefixLength"
-              type="number"
-              :state="getValidationState($v.form.prefixLength)"
-              @blur="$v.form.prefixLength.$touch()"
-            />
-            <b-form-invalid-feedback role="alert">
-              <template v-if="!$v.form.prefixLength.required">
-                {{ $t('global.form.fieldRequired') }}
-              </template>
-              <template
-                v-if="
-                  !$v.form.prefixLength.minLength ||
-                  !$v.form.prefixLength.maxLength
-                "
-              >
-                {{
-                  $t('global.form.valueMustBeBetween', {
-                    min: 0,
-                    max: 128,
-                  })
-                }}
-              </template>
-            </b-form-invalid-feedback>
-          </b-form-group>
-        </b-col>
       </b-row>
     </b-form>
     <template #modal-footer="{ cancel }">
@@ -85,20 +53,11 @@
 
 <script>
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
-import {
-  required,
-  minValue,
-  maxValue,
-  helpers,
-} from 'vuelidate/lib/validators';
+import { required, helpers } from 'vuelidate/lib/validators';
 
 export default {
   mixins: [VuelidateMixin],
   props: {
-    prefixLength: {
-      type: Number,
-      default: 0,
-    },
     ipAddress: {
       type: String,
       default: '',
@@ -112,17 +71,13 @@ export default {
     return {
       form: {
         ipAddress: '',
-        prefixLength: 0,
       },
     };
   },
   watch: {
     ipAddress() {
       this.form.ipAddress = this.ipAddress;
     },
-    prefixLength() {
-      this.form.prefixLength = this.prefixLength;
-    },
   },
   validations() {
     return {
@@ -134,11 +89,6 @@ export default {
             /((^\s*((([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))\s*$)|(^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$))|(^\s*((?=.{1,255}$)(?=.*[A-Za-z].*)[0-9A-Za-z](?:(?:[0-9A-Za-z]|\b-){0,61}[0-9A-Za-z])?(?:\.[0-9A-Za-z](?:(?:[0-9A-Za-z]|\b-){0,61}[0-9A-Za-z])?)*)\s*$)/
           ),
         },
-        prefixLength: {
-          required,
-          minValue: minValue(0),
-          maxValue: maxValue(128),
-        },
       },
     };
   },
@@ -148,7 +98,6 @@ export default {
       if (this.$v.$invalid) return;
       this.$emit('ok', {
         Address: this.form.ipAddress,
-        PrefixLength: Number(this.form.prefixLength),
       });
       this.closeModal();
     },
@@ -173,3 +122,8 @@ export default {
   },
 };
 </script>
+<style scoped>
+#ipAddress {
+  width: 200%;
+}
+</style>
diff --git a/src/views/Settings/Network/Network.vue b/src/views/Settings/Network/Network.vue
@@ -56,7 +56,6 @@
       @ok="saveIpv6Address"
     />
     <modal-ipv6-static-default-gateway
-      :prefix-length="prefixLengthIpv6StaticDefaultGateway"
       :ip-address="ipAddressIpv6StaticDefaultGateway"
       :edit-modal="ipAddressIpv6StaticDefaultGateway !== ''"
       @ok="saveIpv6StaticDefaultGatewayAddress"
@@ -65,7 +64,6 @@
     <modal-hostname :hostname="currentHostname" @ok="saveHostname" />
   </b-container>
 </template>
-
 <script>
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
@@ -83,7 +81,6 @@ import TableIpv4 from './TableIpv4.vue';
 import TableDns from './TableDns.vue';
 import TableIpv6 from './TableIpv6.vue';
 import TableIpv6StaticDefaultGateway from './TableIpv6StaticDefaultGateway.vue';
-
 export default {
   name: 'Network',
   components: {
@@ -113,7 +110,6 @@ export default {
       ipAddress: '',
       ipAddressIpv6: '',
       ipAddressIpv6StaticDefaultGateway: '',
-      prefixLengthIpv6StaticDefaultGateway: 0,
       prefixLength: 0,
       subnet: '',
       loading,
@@ -143,7 +139,6 @@ export default {
       this.ipAddress = item.Address;
       this.ipAddressIpv6StaticDefaultGateway = item.Address;
       this.prefixLength = item.PrefixLength;
-      this.prefixLengthIpv6StaticDefaultGateway = item.PrefixLength;
     });
     this.$store.dispatch('network/setSelectedTabIndex', 0);
   },
@@ -158,11 +153,9 @@ export default {
       this.defaultGateway = this.$store.getters['network/networkSettings'][
         this.tabIndex
       ].defaultGateway;
-
       this.currentHostname = this.$store.getters['network/networkSettings'][
         this.tabIndex
       ].hostname;
-
       this.currentMacAddress = this.$store.getters['network/networkSettings'][
         this.tabIndex
       ].macAddress;
@@ -245,7 +238,6 @@ export default {
         //Edit selected row
         const selectedRow = {
           Address: this.ipAddressIpv6StaticDefaultGateway,
-          PrefixLength: 0,
         };
         const editRow = modalData.concat(selectedRow);
         this.$store

diff --git a/src/views/Settings/Network/TableIpv6StaticDefaultGateway.vue b/src/views/Settings/Network/TableIpv6StaticDefaultGateway.vue
@@ -2,45 +2,48 @@
   <div>
     <page-section :section-title="$t('pageNetwork.ipv6StaticDefaultGateway')">
       <b-row>
-        <b-col class="text-right">
-          <b-button
-            variant="primary"
-            :disabled="isTablesDisabled"
-            @click="initIpv6DefaultGatewayModal()"
+        <b-col lg="6">
+          <div class="text-right">
+            <b-button
+              variant="primary"
+              :disabled="isTablesDisabled"
+              @click="initIpv6DefaultGatewayModal()"
+            >
+              <icon-add />
+              {{ $t('pageNetwork.table.addIpv6StaticDefaultGateway') }}
+            </b-button>
+          </div>
+
+          <b-table
+            responsive="md"
+            hover
+            :fields="ipv6DefaultGatewayTableFields"
+            :items="form.ipv6DefaultGatewayTableItems"
+            :empty-text="$t('global.table.emptyMessage')"
+            :busy="isTablesDisabled"
+            class="mb-0"
+            show-empty
           >
-            <icon-add />
-            {{ $t('pageNetwork.table.addIpv6StaticDefaultGateway') }}
-          </b-button>
+            <template #cell(actions)="{ item }">
+              <table-row-action
+                v-for="(action, actionIndex) in item.actions"
+                :key="actionIndex"
+                :value="action.value"
+                :title="action.title"
+                :enabled="action.enabled"
+                @click-table-action="
+                  onIpv6DefaultGatewayTableAction(action, $event, item)
+                "
+              >
+                <template #icon>
+                  <icon-edit v-if="action.value === 'edit'" />
+                  <icon-trashcan v-if="action.value === 'delete'" />
+                </template>
+              </table-row-action>
+            </template>
+          </b-table>
         </b-col>
       </b-row>
-      <b-table
-        responsive="md"
-        hover
-        :fields="ipv6DefaultGatewayTableFields"
-        :items="form.ipv6DefaultGatewayTableItems"
-        :empty-text="$t('global.table.emptyMessage')"
-        :busy="isTablesDisabled"
-        class="mb-0"
-        show-empty
-      >
-        <template #cell(actions)="{ item }">
-          <table-row-action
-            v-for="(action, actionIndex) in item.actions"
-            :key="actionIndex"
-            :value="action.value"
-            :title="action.title"
-            :enabled="action.enabled"
-            @click-table-action="
-              onIpv6DefaultGatewayTableAction(action, $event, item)
-            "
-          >
-            <template #icon>
-              <icon-edit v-if="action.value === 'edit'" />
-              <icon-trashcan v-if="action.value === 'delete'" />
-            </template>
-          </table-row-action>
-        </template>
-      </b-table>
     </page-section>
   </div>
 </template>
@@ -90,10 +93,6 @@ export default {
           key: 'Address',
           label: this.$t('pageNetwork.table.ipAddress'),
         },
-        {
-          key: 'PrefixLength',
-          label: this.$t('pageNetwork.table.prefixLength'),
-        },
         { key: 'actions', label: '', tdClass: 'text-right' },
       ],
     };
@@ -128,7 +127,6 @@ export default {
       this.form.ipv6DefaultGatewayTableItems = addresses.map((ipv6) => {
         return {
           Address: ipv6.Address,
-          PrefixLength: ipv6.PrefixLength,
           actions: [
             {
               value: 'edit',
@@ -161,10 +159,9 @@ export default {
       const newIpv6Array = this.form.ipv6DefaultGatewayTableItems
         .filter((row) => row.Address !== item.Address)
         .map((ipv6) => {
-          const { Address, PrefixLength } = ipv6;
+          const { Address } = ipv6;
           return {
             Address,
-            PrefixLength,
           };
         });
       const addressIp = item.Address;