Added DHCP NTP Servers list

- Added DHCP NTP Servers list on GUI
- JIRA story- https://jsw.ibm.com/browse/PFEBMC-2786

Signed-off-by: Vedangi Mittal <vedangimittal3004@gmail.com>

Author: vedangimittal

Diff for: src/locales/en-US.json

@@ -409,6 +409,7 @@
       "mfaMessage": "Changing date and time will affect MFA users."
     },
     "configureSettings": "Configure settings",
+    "viewDhcpNtp": "View DHCP NTP servers",
     "form": {
       "date": "Date",
       "manual": "Manual",

Diff for: src/store/modules/Settings/DateTimeStore.js

@@ -6,15 +6,19 @@ const DateTimeStore = {
   state: {
     ntpServers: [],
     isNtpProtocolEnabled: null,
+    networkSuppliedServers: [],
   },
   getters: {
     ntpServers: (state) => state.ntpServers,
     isNtpProtocolEnabled: (state) => state.isNtpProtocolEnabled,
+    networkSuppliedServers: (state) => state.networkSuppliedServers,
   },
   mutations: {
     setNtpServers: (state, ntpServers) => (state.ntpServers = ntpServers),
     setIsNtpProtocolEnabled: (state, isNtpProtocolEnabled) =>
       (state.isNtpProtocolEnabled = isNtpProtocolEnabled),
+    setNetworkSuppliedServers: (state, networkSuppliedServers) =>
+      (state.networkSuppliedServers = networkSuppliedServers),
   },
   actions: {
     async getNtpData({ commit }) {
@@ -23,8 +27,11 @@ const DateTimeStore = {
         .then((response) => {
           const ntpServers = response.data.NTP.NTPServers;
           const isNtpProtocolEnabled = response.data.NTP.ProtocolEnabled;
+          const networkSuppliedServers =
+            response.data.NTP.NetworkSuppliedServers;
           commit('setNtpServers', ntpServers);
           commit('setIsNtpProtocolEnabled', isNtpProtocolEnabled);
+          commit('setNetworkSuppliedServers', networkSuppliedServers);
         })
         .catch((error) => {
           console.log(error);

Diff for: src/views/Settings/DateTime/DateTime.vue

@@ -31,6 +31,40 @@
         </b-col>
       </b-row>
     </page-section>
+    <page-section v-show="show">
+      <b-button v-b-toggle.collapse-dhcp-ntp variant="link" class="mt-3">
+        <icon-chevron />
+        {{ $t('pageDateTime.viewDhcpNtp') }}
+      </b-button>
+
+      <b-collapse id="collapse-dhcp-ntp">
+        <b-row
+          v-for="(group, rowIndex) in chunkedDhcpNtp"
+          :key="rowIndex"
+          class="mt-3 ml-3"
+        >
+          <b-col
+            v-for="(item, colIndex) in group"
+            :key="colIndex"
+            sm="6"
+            lg="4"
+            xl="3"
+          >
+            <b-form-group
+              :label="`Server ${rowIndex * 3 + colIndex + 1}`"
+              :label-for="`${colIndex + 1}`"
+            >
+              <b-form-input
+                :id="`${colIndex + 1}`"
+                class="custom-form-group"
+                :disabled="true"
+                :placeholder="item"
+              />
+            </b-form-group>
+          </b-col>
+        </b-row>
+      </b-collapse>
+    </page-section>
     <page-section :section-title="$t('pageDateTime.configureSettings')">
       <b-row>
         <b-col md="8" xl="6">
@@ -237,6 +271,7 @@
 <script>
 import Alert from '@/components/Global/Alert';
 import IconCalendar from '@carbon/icons-vue/es/calendar/20';
+import IconChevron from '@carbon/icons-vue/es/chevron--up/20';
 import PageTitle from '@/components/Global/PageTitle';
 import PageSection from '@/components/Global/PageSection';
 
@@ -253,7 +288,7 @@ const isoTimeRegex = /^(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/;
 
 export default {
   name: 'DateTime',
-  components: { Alert, IconCalendar, PageTitle, PageSection },
+  components: { Alert, IconCalendar, IconChevron, PageTitle, PageSection },
   mixins: [
     BVToastMixin,
     LoadingBarMixin,
@@ -276,6 +311,8 @@ export default {
         ntp: { firstAddress: '', secondAddress: '', thirdAddress: '' },
       },
       loading,
+      show: false,
+      dhcpNtp: [],
     };
   },
   validations() {
@@ -313,7 +350,11 @@ export default {
     };
   },
   computed: {
-    ...mapState('dateTime', ['ntpServers', 'isNtpProtocolEnabled']),
+    ...mapState('dateTime', [
+      'ntpServers',
+      'isNtpProtocolEnabled',
+      'networkSuppliedServers',
+    ]),
     bmcTime() {
       return this.$store.getters['global/bmcTime'];
     },
@@ -343,6 +384,20 @@ export default {
     serverStatus() {
       return this.$store.getters['global/serverStatus'];
     },
+    networkSuppliedServers() {
+      this.$store.getters['dateTime/networkSuppliedServers'].map((server) =>
+        this.dhcpNtp.push(server)
+      );
+      return this.dhcpNtp;
+    },
+    chunkedDhcpNtp() {
+      const chunkSize = 3;
+      const result = [];
+      for (let i = 0; i < this.dhcpNtp.length; i += chunkSize) {
+        result.push(this.dhcpNtp.slice(i, i + chunkSize));
+      }
+      return result;
+    },
   },
   watch: {
     ntpServers() {
@@ -367,6 +422,7 @@ export default {
       this.$store.dispatch('dateTime/getNtpData'),
       this.$store.dispatch('userManagement/getAccountSettings'),
     ]).finally(() => {
+      this.showCollapse();
       this.setInitialNtpValues();
       this.endLoader();
     });
@@ -486,6 +542,32 @@ export default {
       );
       return new Date(utcDate);
     },
+    showCollapse() {
+      this.dhcpNtp.push('1.2.3.4');
+      this.dhcpNtp.push('1.2.3.5');
+      this.dhcpNtp.push('1.2.3.6');
+      this.dhcpNtp.push('1.2.3.7');
+      this.dhcpNtp.push('1.2.3.8');
+      this.dhcpNtp.push('1.2.3.9');
+      if (this.networkSuppliedServers.length == 0) {
+        this.show = false;
+      } else {
+        this.show = true;
+      }
+    },
   },
 };
 </script>
+<style lang="scss" scoped>
+.btn.collapsed {
+  svg {
+    transform: rotate(180deg);
+  }
+}
+.custom-form-group::placeholder {
+  color: black !important;
+}
+li {
+  list-style-type: none;
+}
+</style>