From 5207883ec9a3c544c2391f106a4ee3c8ec5e3481 Mon Sep 17 00:00:00 2001
From: Vedangi Mittal <vedangimittal3004@gmail.com>
Date: Thu, 16 Jan 2025 17:31:58 +0530
Subject: [PATCH] Implemented Capacity on Demand page

- Implemented Capacity on Demand page
- Jira story link: https://jsw.ibm.com/browse/PFEBMC-2385

Signed-off-by: Vedangi Mittal <vedangimittal3004@gmail.com>
---
 src/router/routes.js                          |   9 +
 .../CapacityOnDemand/CapacityOnDemand.vue     | 122 ++++++-----
 .../CapacityOnDemandActivation.vue            | 166 ++++++++-------
 .../CapacityOnDemandOrderInfo.vue             | 200 +++++++++---------
 .../CapacityOnDemandTable.vue                 |  60 +++---
 5 files changed, 287 insertions(+), 270 deletions(-)

diff --git a/src/router/routes.js b/src/router/routes.js
index c45a58d08a..9384562770 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -27,6 +27,7 @@ import Certificates from '@/views/SecurityAndAccess/Certificates';
 import Inventory from '../views/HardwareStatus/Inventory/Inventory.vue';
 import SystemParameters from '@/views/ResourceManagement/SystemParameters';
 import HardwareDeconfiguration from '../views/Settings/HardwareDeconfiguration/HardwareDeconfiguration.vue';
+import CapacityOnDemand from '../views/ResourceManagement/CapacityOnDemand/CapacityOnDemand.vue';
 
 const roles = {
   administrator: 'Administrator',
@@ -200,6 +201,14 @@ export const routes = [
           title: i18n.global.t('appPageTitle.systemParameters'),
         },
       },
+      {
+        path: '/resource-management/capacity-on-demand',
+        name: 'capacity-on-demand',
+        component: CapacityOnDemand,
+        meta: {
+          title: i18n.global.t('appPageTitle.capacityOnDemand'),
+        },
+      },
       {
         path: '/resource-management/memory',
         name: 'memory',
diff --git a/src/views/ResourceManagement/CapacityOnDemand/CapacityOnDemand.vue b/src/views/ResourceManagement/CapacityOnDemand/CapacityOnDemand.vue
index 9ed6801af2..67a668514b 100644
--- a/src/views/ResourceManagement/CapacityOnDemand/CapacityOnDemand.vue
+++ b/src/views/ResourceManagement/CapacityOnDemand/CapacityOnDemand.vue
@@ -1,29 +1,29 @@
 <template>
-  <b-container fluid="xl">
+  <BContainer fluid="xl">
     <page-title :title="$t('appPageTitle.capacityOnDemand')" />
-    <b-row v-if="serverStatus === 'off'">
-      <b-col md="8" xl="6">
+    <BRow v-if="serverStatus === 'off'">
+      <BCol md="8" xl="6">
         <alert variant="info" class="mb-5">
-          <p class="mb-0 font-weight-bold">
+          <p class="mb-0 fw-bold">
             {{ $t('pageCapacityOnDemand.alert.title') }}
           </p>
           <p>
             {{ $t('pageCapacityOnDemand.alert.description') }}
           </p>
         </alert>
-      </b-col>
-    </b-row>
+      </BCol>
+    </BRow>
 
     <!-- Quick links -->
     <page-section :section-title="$t('pageCapacityOnDemand.quickLinks')">
       <div v-for="item in quickLinks" :key="item.id">
-        <b-link
+        <BLink
           :href="item.href"
           :data-ref="item.dataRef"
-          @click.prevent="scrollToOffset"
+          @click.prevent="scrollToOffset(refs, $event)"
         >
           <icon-jump-link /> {{ item.linkText }}
-        </b-link>
+        </BLink>
       </div>
     </page-section>
 
@@ -35,75 +35,81 @@
 
     <!-- VET capabilities section -->
     <capacity-on-demand-table ref="vetCapabilities" />
-  </b-container>
+  </BContainer>
 </template>
 
-<script>
-import JumpLink16 from '@carbon/icons-vue/es/jump-link/16';
-
-import PageTitle from '@/components/Global/PageTitle';
-import PageSection from '@/components/Global/PageSection';
-import Alert from '@/components/Global/Alert';
-
-import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
-import JumpLinkMixin from '@/components/Mixins/JumpLinkMixin';
-
+<script setup>
+import { ref, computed, onMounted, reactive } from 'vue';
+import i18n from '@/i18n';
+import PageTitle from '@/components/Global/PageTitle.vue';
+import PageSection from '@/components/Global/PageSection.vue';
+import Alert from '@/components/Global/Alert.vue';
+import useLoadingBar, { loading } from '@/components/Composables/useLoadingBarComposable';
+import useJumpLinkComposable from '@/components/Composables/useJumpLinkComposable';
+import { default as IconJumpLink } from '@carbon/icons-vue/es/jump-link/16';
+import { onBeforeRouteLeave } from 'vue-router';
 import CapacityOnDemandOrderInfo from './CapacityOnDemandOrderInfo.vue';
 import CapacityOnDemandAcvitation from './CapacityOnDemandActivation.vue';
 import CapacityOnDemandTable from './CapacityOnDemandTable.vue';
+import { LicenseStore, GlobalStore, SystemStore } from '@/store';
+
+const { scrollToOffset } = useJumpLinkComposable();
+const { startLoader, endLoader, hideLoader } = useLoadingBar();
+const global = GlobalStore();
+const licenseStore = LicenseStore();
+const systemStore = SystemStore();
+
+const activation = ref(null);
+const orderInfo = ref(null);
+const vetCapabilities = ref(null);
+const refs = {
+  activation,
+  orderInfo,
+  vetCapabilities,
+};
+
+onBeforeRouteLeave(() => {
+  hideLoader();
+});
 
-export default {
-  name: 'CapacityOnDemand',
-  components: {
-    PageTitle,
-    Alert,
-    CapacityOnDemandOrderInfo,
-    CapacityOnDemandAcvitation,
-    CapacityOnDemandTable,
-    PageSection,
-    IconJumpLink: JumpLink16,
-  },
-  mixins: [LoadingBarMixin, JumpLinkMixin],
-  beforeRouteLeave(to, from, next) {
-    this.hideLoader();
-    next();
-  },
-  data() {
-    return {
-      loading,
-      quickLinks: [
+const quickLinks = reactive([
         {
           id: 'activation',
           dataRef: 'activation',
           href: '#activation',
-          linkText: this.$t('pageCapacityOnDemand.activation.sectionTitle'),
+          linkText:  i18n.global.t('pageCapacityOnDemand.activation.sectionTitle'),
         },
         {
           id: 'orderInfo',
           dataRef: 'orderInfo',
           href: '#orderInfo',
-          linkText: this.$t('pageCapacityOnDemand.orderInfo.title'),
+          linkText:  i18n.global.t('pageCapacityOnDemand.orderInfo.title'),
         },
         {
           id: 'vetCapabilities',
           dataRef: 'vetCapabilities',
           href: '#vetCapabilities',
-          linkText: this.$t('pageCapacityOnDemand.vetCapabilities'),
+          linkText:  i18n.global.t('pageCapacityOnDemand.vetCapabilities'),
         },
-      ],
-    };
-  },
-  computed: {
-    serverStatus() {
-      return this.$store.getters['global/serverStatus'];
-    },
-  },
-  created() {
-    this.startLoader();
+      ]);
+
+const serverStatus = computed(() => {
+      return global.serverStatusGetter;
+    });
+
+onMounted(() => {
+    startLoader();
     Promise.all([
-      this.$store.dispatch('licenses/getLicenses'),
-      this.$store.dispatch('system/getSystem'),
-    ]).finally(() => this.endLoader());
-  },
-};
+      licenseStore.getLicenses(),
+      systemStore.getSystem(),
+    ]).finally(() => endLoader());
+  });
 </script>
+<style lang="scss" scoped>
+a {
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+</style>
diff --git a/src/views/ResourceManagement/CapacityOnDemand/CapacityOnDemandActivation.vue b/src/views/ResourceManagement/CapacityOnDemand/CapacityOnDemandActivation.vue
index 320420fcf6..429aed30e0 100644
--- a/src/views/ResourceManagement/CapacityOnDemand/CapacityOnDemandActivation.vue
+++ b/src/views/ResourceManagement/CapacityOnDemand/CapacityOnDemandActivation.vue
@@ -1,138 +1,136 @@
 <template>
-  <b-row>
-    <b-col>
+  <BRow>
+    <BCol>
       <page-section
         :section-title="$t('pageCapacityOnDemand.activation.sectionTitle')"
       >
-        <b-row>
-          <b-col xl="5" md="6" lg="6" sm="7">
+        <BRow>
+          <BCol xl="5" md="6" lg="6" sm="7">
             <alert variant="info" class="mb-4">
               <span>
                 {{ $t('pageCapacityOnDemand.activation.alert') }}
               </span>
             </alert>
-          </b-col>
-        </b-row>
+          </BCol>
+        </BRow>
         <div>
           {{ $t('pageCapacityOnDemand.activation.helperText') }}
-          <b-link
+          <BLink
             target="_blank"
             href="https://www.ibm.com/servers/eserver/ess"
-            >{{ accessKeyLink }}</b-link
+            >{{ accessKeyLink }}</BLink
           >
         </div>
-        <b-row>
-          <b-col sm="12" md="9" lg="9" xl="8">
-            <b-form
+        <BRow>
+          <BCol sm="12" md="9" lg="9" xl="8">
+            <BForm
               class="d-flex align-items-center mt-3"
               @submit.prevent="submitForm"
             >
-              <b-form-group
+              <BFormGroup
                 :label="$t('pageCapacityOnDemand.activation.srLabel')"
                 label-for="input-license-key"
                 :label-sr-only="true"
                 class="mb-0 mr-0 form-group-activation"
               >
-                <b-input-group class="input-group-activation">
-                  <b-form-input
+                <BInputGroup class="input-group-activation">
+                  <BFormInput
                     id="input-license-key"
                     v-model="licenseKey"
                     class="input-form"
                     :maxlength="maxLength"
                     :disabled="isActivationDisabled"
-                    :state="getValidationState($v.licenseKey)"
+                    :state="getValidationState(v$.licenseKey)"
                     :placeholder="
                       $t('pageCapacityOnDemand.activation.placeholder')
                     "
-                    @input="$v.licenseKey.$touch()"
+                    @input="v$.licenseKey.$touch()"
                   />
-                  <b-form-invalid-feedback role="alert">
+                  <BFormInvalidFeedback role="alert">
                     {{ $t('global.form.invalidCharacterLength') }}
-                  </b-form-invalid-feedback>
-                </b-input-group>
-              </b-form-group>
-              <b-col align-self="baseline">
-                <b-button
+                  </BFormInvalidFeedback>
+                </BInputGroup>
+              </BFormGroup>
+              <BCol align-self="baseline" class="ms-3">
+                <BButton
                   variant="primary"
                   type="submit"
                   :disabled="isActivationDisabled"
                 >
                   {{ $t('global.action.activate') }}
-                </b-button>
-              </b-col>
-            </b-form>
-          </b-col>
-        </b-row>
+                </BButton>
+              </BCol>
+            </BForm>
+          </BCol>
+        </BRow>
       </page-section>
-    </b-col>
-  </b-row>
+    </BCol>
+  </BRow>
 </template>
 
-<script>
-import { maxLength, minLength, required } from 'vuelidate/lib/validators';
-import Alert from '@/components/Global/Alert';
-import PageSection from '@/components/Global/PageSection';
-import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
-import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { maxLength, minLength, required } from '@vuelidate/validators';
+import Alert from '@/components/Global/Alert.vue';
+import PageSection from '@/components/Global/PageSection.vue';
+import useVuelidateComposable from '@/components/Composables/useVuelidateComposable';
+import useToast from '@/components/Composables/useToastComposable';
+import useLoadingBar from '@/components/Composables/useLoadingBarComposable';
+import { useVuelidate } from '@vuelidate/core';
+import { LicenseStore, GlobalStore } from '@/store';
 
-export default {
-  name: 'CapacityOnDemandAcvitation',
-  components: { Alert, PageSection },
-  mixins: [VuelidateMixin, BVToastMixin, LoadingBarMixin],
-  data() {
-    return {
-      licenseKey: '',
-      maxLength: 34,
-      accessKeyLink: 'www.ibm.com/servers/eserver/ess',
-    };
-  },
-  validations() {
-    return {
+const { getValidationState } = useVuelidateComposable();
+const { successToast, errorToast } = useToast();
+const { startLoader, endLoader } = useLoadingBar();
+const global = GlobalStore();
+const licenseStore = LicenseStore();
+
+const licenseKey = ref('');
+const maxLengthVal = ref(34);
+const accessKeyLink = ref('www.ibm.com/servers/eserver/ess');
+
+const rules = computed(() => ({
       licenseKey: {
         required,
-        minLength: minLength(this.maxLength),
-        maxLength: maxLength(this.maxLength),
+        minLength: minLength(maxLengthVal.value),
+        maxLength: maxLength(maxLengthVal.value),
       },
-    };
-  },
-  computed: {
-    isInPhypStandby() {
-      return this.$store.getters['global/isInPhypStandby'];
-    },
-    isActivationDisabled() {
+    }));
+const v$ = useVuelidate(rules, { licenseKey });
+
+const isInPhypStandby = computed(() => {
+      return global.isInPhypStandby();
+    });
+const isActivationDisabled = computed(() => {
       if (
-        this.$store.getters['licenses/licenses']?.UAK?.Status?.State ===
+        licenseStore.licensesGetter?.UAK?.Status?.State ===
           'Enabled' &&
-        this.isInPhypStandby
+        isInPhypStandby
       ) {
         return false;
       } else {
         return true;
       }
-    },
-  },
-  created() {
+    });
+
+onMounted(() => {
     Promise.all([
-      this.$store.dispatch('global/getSystemInfo'),
-      this.$store.dispatch('global/getBootProgress'),
-      this.$store.dispatch('licenses/getLicenses'),
+      global.getSystemInfo(),
+      global.getBootProgress(),
+      licenseStore.getLicenses(),
     ]);
-  },
-  methods: {
-    submitForm() {
-      this.$v.$touch();
-      if (!this.$v.$invalid) {
-        this.startLoader();
-        this.$store
-          .dispatch('licenses/activateLicense', this.licenseKey)
-          .then((success) => this.successToast(success))
-          .catch(({ message }) => this.errorToast(message))
-          .finally(() => this.endLoader());
+  });
+
+const submitForm = () => {
+      v$.value.$touch();
+      if (!v$.value.$invalid) {
+        startLoader();
+        licenseStore.activateLicense(licenseKey.value)
+          .then((success) => successToast(success))
+          .catch(({ message }) => errorToast(message))
+          .finally(() => endLoader());
       }
-    },
-  },
-};
+    };
 </script>
 
 <style lang="scss" scoped>
@@ -145,6 +143,12 @@ export default {
   width: 100%;
 }
 .input-form {
-  height: 41px;
+  height: 42px;
+}
+a {
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
 }
 </style>
diff --git a/src/views/ResourceManagement/CapacityOnDemand/CapacityOnDemandOrderInfo.vue b/src/views/ResourceManagement/CapacityOnDemand/CapacityOnDemandOrderInfo.vue
index 20e911c02c..d907ea31db 100644
--- a/src/views/ResourceManagement/CapacityOnDemand/CapacityOnDemandOrderInfo.vue
+++ b/src/views/ResourceManagement/CapacityOnDemand/CapacityOnDemandOrderInfo.vue
@@ -1,68 +1,68 @@
 <template>
-  <b-row>
-    <b-col>
+  <BRow>
+    <BCol>
       <page-section :section-title="$t('pageCapacityOnDemand.orderInfo.title')">
         <p>
           {{ $t('pageCapacityOnDemand.orderInfo.description.message') }}
-          <b-link to="/logs/dumps">
+          <BLink to="/logs/dumps">
             {{ $t('pageCapacityOnDemand.orderInfo.description.link') }}
-          </b-link>
+          </BLink>
         </p>
         <b-card bg-variant="light" border-variant="light" class="mb-4">
           <!-- System information -->
-          <b-row class="mb-5">
-            <b-col>
+          <BRow class="mb-5">
+            <BCol>
               <h3 class="h4 mb-3">
                 {{ $t('pageCapacityOnDemand.orderInfo.systemInfo') }}
               </h3>
               <p>
                 {{ $t('pageCapacityOnDemand.orderInfo.systemType') }}
-                <span class="font-weight-bold">
+                <span class="fw-bold">
                   {{ systemInfo.model || '--' }}
                 </span>
               </p>
               <p>
                 {{ $t('pageCapacityOnDemand.orderInfo.systemSerialNumber') }}
-                <span class="font-weight-bold">
+                <span class="fw-bold">
                   {{ systemInfo.serialNumber || '--' }}
                 </span>
               </p>
               <p>
                 {{ $t('pageCapacityOnDemand.orderInfo.systemAnchor') }}
-                <span class="font-weight-bold">
+                <span class="fw-bold">
                   {{ systemAnchor || '--' }}
                 </span>
               </p>
               <p>
                 {{ $t('pageCapacityOnDemand.orderInfo.systemCodUniqueId') }}
-                <span class="font-weight-bold">
+                <span class="fw-bold">
                   {{ dataFormatter(apid) }}
                 </span>
               </p>
               <p>
                 {{ $t('pageCapacityOnDemand.orderInfo.systemCodPublicKey') }}:
-                <span class="font-weight-bold">
+                <span class="fw-bold">
                   {{ dataFormatter(systemCodPublicKey) }}
                 </span>
               </p>
-            </b-col>
-          </b-row>
+            </BCol>
+          </BRow>
 
           <!-- Processor information -->
-          <b-row class="mb-5">
-            <b-col>
+          <BRow class="mb-5">
+            <BCol>
               <h3 class="h4 mb-3">
                 {{ $t('pageCapacityOnDemand.orderInfo.processorInfo') }}
               </h3>
               <p>
                 {{ $t('pageCapacityOnDemand.orderInfo.previousActivated') }}
-                <span class="font-weight-bold">
+                <span class="fw-bold">
                   {{ processorPreviousActivated }}
                 </span>
               </p>
               <p>
                 {{ $t('pageCapacityOnDemand.orderInfo.processorResourceId') }}
-                <span class="font-weight-bold">
+                <span class="fw-bold">
                   {{ processorInfo.resourceId }}
                 </span>
               </p>
@@ -71,67 +71,67 @@
                   $t('pageCapacityOnDemand.orderInfo.processorSequenceNumber')
                 }}
 
-                <span class="font-weight-bold">
+                <span class="fw-bold">
                   {{ processorInfo.sequenceNumber }}
                 </span>
               </p>
               <p>
                 {{ $t('pageCapacityOnDemand.orderInfo.processorsLicensed') }}
-                <span class="font-weight-bold">
+                <span class="fw-bold">
                   {{ dataFormatter(processorLicensed) }}
                 </span>
               </p>
               <p>
                 {{ $t('pageCapacityOnDemand.orderInfo.entryCheck') }}:
-                <span class="font-weight-bold">
+                <span class="fw-bold">
                   {{ processorEntryCheck }}
                 </span>
               </p>
-            </b-col>
-          </b-row>
+            </BCol>
+          </BRow>
 
           <!-- Memory information -->
-          <b-row class="mb-5">
-            <b-col>
+          <BRow class="mb-5">
+            <BCol>
               <h3 class="h4 mb-3">
                 {{ $t('pageCapacityOnDemand.orderInfo.memoryInfo') }}
               </h3>
               <p>
                 {{ $t('pageCapacityOnDemand.orderInfo.previousActivated') }}
-                <span class="font-weight-bold">
+                <span class="fw-bold">
                   {{ memoryPreviousActivated }}
                 </span>
               </p>
               <p>
                 {{ $t('pageCapacityOnDemand.orderInfo.memoryResourceId') }}
-                <span class="font-weight-bold">
+                <span class="fw-bold">
                   {{ memoryInfo.resourceId }}
                 </span>
               </p>
               <p>
                 {{ $t('pageCapacityOnDemand.orderInfo.memorySequenceNumber') }}
 
-                <span class="font-weight-bold">
+                <span class="fw-bold">
                   {{ memoryInfo.sequenceNumber }}
                 </span>
               </p>
               <p>
                 {{ $t('pageCapacityOnDemand.orderInfo.memoryLicensed') }}
-                <span class="font-weight-bold">
+                <span class="fw-bold">
                   {{ dataFormatter(memoryLicensed) }}
                 </span>
               </p>
               <p>
                 {{ $t('pageCapacityOnDemand.orderInfo.entryCheck') }}:
-                <span class="font-weight-bold">
+                <span class="fw-bold">
                   {{ memoryEntryCheck }}
                 </span>
               </p>
-            </b-col>
-          </b-row>
+            </BCol>
+          </BRow>
 
-          <b-row class="mb-5">
-            <b-col>
+          <BRow class="mb-5">
+            <BCol>
               <h3 class="h4 mb-3">
                 {{ $t('pageCapacityOnDemand.orderInfo.accessKeyInfo') }}
               </h3>
@@ -141,11 +141,10 @@
                     'pageCapacityOnDemand.orderInfo.firmwareAccessKeyExpiration',
                   )
                 }}
-                <span v-if="hasLicenses" class="font-weight-bold">--</span>
-                <span v-else class="font-weight-bold">
+                <span v-if="hasLicenses" class="fw-bold">--</span>
+                <span v-else class="fw-bold">
                   {{
-                    dataFormatter(firmwareAccessKeyInfo.expirationDate)
-                      | formatDate
+                    $filters.formatDate(firmwareAccessKeyInfo.expirationDate)
                   }}
                 </span>
               </p>
@@ -153,81 +152,84 @@
                 {{
                   $t('pageCapacityOnDemand.orderInfo.aixAccessKeyExpiration')
                 }}
-                <span v-if="hasLicenses" class="font-weight-bold">--</span>
-                <span v-else class="font-weight-bold">
+                <span v-if="hasLicenses" class="fw-bold">--</span>
+                <span v-else class="fw-bold">
                   {{
-                    dataFormatter(aixAccessKeyInfo.expirationDate) | formatDate
+                    $filters.formatDate(aixAccessKeyInfo.expirationDate)
                   }}
                 </span>
               </p>
-            </b-col>
-          </b-row>
+            </BCol>
+          </BRow>
         </b-card>
       </page-section>
-    </b-col>
-  </b-row>
+    </BCol>
+  </BRow>
 </template>
 
-<script>
-import { mapGetters } from 'vuex';
-import PageSection from '@/components/Global/PageSection';
-import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+<script setup>
+import { computed } from 'vue';
+import PageSection from '@/components/Global/PageSection.vue';
+import useDataFormatterGlobal from '@/components/Composables/useDataFormatterGlobal';
+import { LicenseStore, SystemStore } from '@/store';
 
-export default {
-  name: 'CapacityOnDemandOrderInfo',
-  components: { PageSection },
-  mixins: [DataFormatterMixin],
-  computed: {
-    ...mapGetters('licenses', [
-      'licenses',
-      'processorInfo',
-      'memoryInfo',
-      'firmwareAccessKeyInfo',
-      'aixAccessKeyInfo',
-    ]),
-    hasLicenses() {
+const licenseStore = LicenseStore();
+const systemStore = SystemStore();
+const { dataFormatter } = useDataFormatterGlobal();
+
+const processorInfo = computed(() => {
+  return licenseStore.processorInfo;
+})
+const memoryInfo = computed(() => {
+  return licenseStore.memoryInfo;
+})
+const firmwareAccessKeyInfo = computed(() => {
+  return licenseStore.firmwareAccessKeyInfo;
+})
+const aixAccessKeyInfo = computed(() => {
+  return licenseStore.aixAccessKeyInfo;
+})
+const hasLicenses = computed(() => {
       // This logic checks to see if there are any licences in the store.
       // If there are none, the result is true, otherwise false.
-      return !Object.keys(this.$store.getters['licenses/licenses']).length;
-    },
-    memoryPreviousActivated() {
-      return this.licenses?.PermMem?.AuthDeviceNumber
-        ? this.licenses?.PermMem?.AuthDeviceNumber
+      return !Object.keys(licenseStore.licensesGetter).length;
+    });
+const memoryPreviousActivated = computed(() => {
+      return licenseStore.licensesGetter?.PermMem?.AuthDeviceNumber
+        ? licenseStore.licensesGetter?.PermMem?.AuthDeviceNumber
         : '0000';
-    },
-    processorPreviousActivated() {
-      return this.licenses?.PermProcs?.AuthDeviceNumber
-        ? this.licenses?.PermProcs?.AuthDeviceNumber
+    });
+const processorPreviousActivated = computed(() => {
+      return licenseStore.licensesGetter?.PermProcs?.AuthDeviceNumber
+        ? licenseStore.licensesGetter?.PermProcs?.AuthDeviceNumber
         : '0000';
-    },
-    processorEntryCheck() {
-      return this.licenses?.PermProcs?.EntryCheck
-        ? this.licenses?.PermProcs?.EntryCheck
+    });
+const processorEntryCheck = computed(() => {
+      return licenseStore.licensesGetter?.PermProcs?.EntryCheck
+        ? licenseStore.licensesGetter?.PermProcs?.EntryCheck
         : 'XX';
-    },
-    memoryEntryCheck() {
-      return this.licenses?.PermMem?.EntryCheck
-        ? this.licenses?.PermMem?.EntryCheck
+    });
+const memoryEntryCheck = computed(() => {
+      return licenseStore.licensesGetter?.PermMem?.EntryCheck
+        ? licenseStore.licensesGetter.PermMem?.EntryCheck
         : 'XX';
-    },
-    processorLicensed() {
-      return this.licenses?.PermProcs?.MaxAuthorizedDevices;
-    },
-    apid() {
-      return this.licenses?.APID?.SerialNumber;
-    },
-    systemCodPublicKey() {
-      return this.licenses?.APPublicKey?.SerialNumber;
-    },
-    memoryLicensed() {
-      return this.licenses?.PermMem?.MaxAuthorizedDevices;
-    },
-    systemInfo() {
-      return this.$store.getters['system/systems']?.[0] || {};
-    },
-    systemAnchor() {
-      return this.licenses?.SystemAnchor?.SerialNumber;
-    },
-  },
-};
+    });
+const processorLicensed = computed(() => {
+      return licenseStore.licensesGetter?.PermProcs?.MaxAuthorizedDevices;
+    });
+const apid = computed(() => {
+      return licenseStore.licensesGetter?.APID?.SerialNumber;
+    });
+const systemCodPublicKey = computed(() => {
+      return licenseStore.licensesGetter?.APPublicKey?.SerialNumber;
+    });
+const memoryLicensed = computed(() => {
+      return licenseStore.licensesGetter?.PermMem?.MaxAuthorizedDevices;
+    });
+const systemInfo = computed(() => {
+      return systemStore.getSystems?.[0] || {};
+    });
+const systemAnchor = computed(() => {
+      return licenseStore.licensesGetter?.SystemAnchor?.SerialNumber;
+    });
 </script>
diff --git a/src/views/ResourceManagement/CapacityOnDemand/CapacityOnDemandTable.vue b/src/views/ResourceManagement/CapacityOnDemand/CapacityOnDemandTable.vue
index 1d6db058a1..ce701f94de 100644
--- a/src/views/ResourceManagement/CapacityOnDemand/CapacityOnDemandTable.vue
+++ b/src/views/ResourceManagement/CapacityOnDemand/CapacityOnDemandTable.vue
@@ -1,10 +1,12 @@
 <template>
-  <b-row>
-    <b-col>
+  <BRow>
+    <BCol>
       <page-section :section-title="$t('pageCapacityOnDemand.vetCapabilities')">
-        <b-table
-          show-empty
+        <BTable
+          responsive="xl"
+          show-empty  
           hover
+          sticky-header="75vh"
           :no-border-collapse="true"
           :items="items"
           :fields="fields"
@@ -110,7 +112,7 @@
           </template>
           <!-- Status column -->
           <template #cell(status)="{ value }">
-            <status-icon v-if="value" :status="statusIcon(value)" /><span
+            <status-icon v-if="value" :status="statusIconValue(value)" /><span
               v-if="value == 'Enabled'"
               >{{ $t('pageCapacityOnDemand.enabled') }}</span
             >
@@ -148,37 +150,34 @@
               $t('pageCapacityOnDemand.qualified')
             }}</span>
           </template>
-        </b-table>
+        </BTable>
       </page-section>
-    </b-col>
-  </b-row>
+    </BCol>
+  </BRow>
 </template>
 
-<script>
+<script setup>
+import { ref, computed } from 'vue';
+import i18n from '@/i18n';
 import { forOwn } from 'lodash';
-import PageSection from '@/components/Global/PageSection';
-import StatusIcon from '@/components/Global/StatusIcon';
+import PageSection from '@/components/Global/PageSection.vue';
+import StatusIcon from '@/components/Global/StatusIcon.vue';
+import { LicenseStore } from '@/store';
+const licenseStore = LicenseStore();
 
-export default {
-  name: 'CapacityOnDemandTable',
-  components: { PageSection, StatusIcon },
-  data() {
-    return {
-      fields: [
+const fields = ref([
         {
           key: 'settings',
-          label: this.$t('pageCapacityOnDemand.table.setting'),
+          label: i18n.global.t('pageCapacityOnDemand.table.setting'),
         },
         {
           key: 'status',
-          label: this.$t('pageCapacityOnDemand.table.bitCapabilityStatus'),
+          label: i18n.global.t('pageCapacityOnDemand.table.bitCapabilityStatus'),
         },
-      ],
-    };
-  },
-  computed: {
-    items() {
-      const vetCapabilities = this.$store.getters['licenses/vetCapabilities'];
+      ]);
+
+const items = computed(() => {
+      const vetCapabilities = licenseStore.vetCapabilities;
 
       const items = [];
 
@@ -190,10 +189,9 @@ export default {
       });
 
       return items;
-    },
-  },
-  methods: {
-    statusIcon(value) {
+    });
+
+const statusIconValue = (value) => {
       if (value === 'Enabled') {
         return 'success';
       } else if (value === 'Disabled') {
@@ -201,7 +199,5 @@ export default {
       } else {
         return 'secondary';
       }
-    },
-  },
-};
+    };
 </script>