Resolved Loading bar spinner and removed warnings

.env.ibm

@@ -1,4 +1,3 @@
-# NODE_ENV=production
 VITE_CUSTOM_ENV=production
 VITE_APP_ENV_NAME=ibm
 VITE_APP_COMPANY_NAME="IBM"

.env.intel

@@ -1,4 +1,3 @@
-# NODE_ENV=production
 VITE_CUSTOM_ENV=production
 VITE_APP_ENV_NAME="intel"
 VITE_APP_COMPANY_NAME="intel"
@@ -10,7 +9,7 @@ VITE_APP_VIRTUAL_MEDIA_LIST_ENABLED="true"
 VITE_APP_EVENT_LOGS_DELETE_BUTTON_DISABLED="true"
 VITE_APP_EVENT_LOGS_TOGGLE_BUTTON_DISABLED="true"
 VITE_APP_FAN_DATA_FROM_THERMAL_SUBSYSTEM="true"
-CUSTOM_STYLES="true"
-CUSTOM_APP_NAV="true"
-CUSTOM_STORE="true"
-CUSTOM_ROUTER="true"
+VITE_CUSTOM_STYLES="true"
+VITE_CUSTOM_APP_NAV="true"
+VITE_CUSTOM_STORE="true"
+VITE_CUSTOM_ROUTER="true"

README.md

@@ -1,4 +1,3 @@
-<!-- Work Requird -->
 # webui-vue
 
 webui-vue is a web-based user interface for the OpenBMC firmware stack built on
@@ -49,7 +48,7 @@ roadmap
 
 
 ## Documentation
-The documentation for coding standards and components is located in the `docs` directory. It is created using the [VuePress](https://vuepress.vuejs.org/) static site generator. Information about how to write documentation can be found on the [VuePress website](https://vuepress.vuejs.org/).
+The documentation for coding standards and components is located in the `docs` directory. It is created using the [VitePress](https://vitepress.dev/guide/using-vue) static site generator. Information about how to write documentation can be found on the [VitePress website](https://vitepress.dev/guide/using-vue).
 
 ## Recommended IDE Setup
 

docs/.vitepress/styles/palette.styl

@@ -1,13 +1,13 @@
-// VuePress Theme overrides
+// VitePress Theme overrides
 // Change content to be left aligned
 .theme-default-content:not(.custom),
 .page-nav
   max-width 72ch
   margin 0
   padding 2rem
 
-// Overide default margins for p tags
-// VuePress is nesting li content in p tags
+// Override default margins for p tags
+// VitePress is nesting li content in p tags
 // unless they are nested li elements creating
 // inconsistent margins between different lists
 li p

docs/customization/build.md

@@ -14,46 +14,47 @@ modifications to the Web UI.
 ## Setup
 
 1. Create a `.env.<ENV_NAME>` file in the project root
-2. Add `NODE_ENV=production` key value pair in the file
-3. Add `VUE_APP_ENV_NAME` key with the value set to the new environment name
+2. Add `VITE_CUSTOM_ENV=production` key value pair in the file
+3. Add `VITE_APP_ENV_NAME` key with the value set to the new environment name
 
 Example `.env.ibm`:
 
 ```
-NODE_ENV=production
-VUE_APP_ENV_NAME=ibm
+VITE_CUSTOM_ENV=production
+VITE_APP_ENV_NAME=ibm
 ```
 
 ## Store
 
 :::tip
-[Vuex store modules](https://vuex.vuejs.org/guide/modules.html) contain the
+[Pinia store core concepts](https://pinia.vuejs.org/core-concepts/) contain the
 application's API calls.
 :::
 
-1. If making customizations to the default store, add `CUSTOM_STORE=true` key
+1. If making customizations to the default store, add `VITE_CUSTOM_STORE=true` key
    value pair to the new .env file.
 2. Create a `<ENV_NAME>.js` file in `src/env/store`
    :::danger
-   The filename needs to match the `VUE_APP_ENV_NAME` value defined in the
+   The filename needs to match the `VITE_APP_ENV_NAME` value defined in the
    .env file. The store import in `src/main.js` will resolve to this new
    file.
    :::
 3. Import the base store
 4. Import environment specific store modules
-5. Use the [Vuex](https://vuex.vuejs.org/api/#registermodule) `registerModule`
-   and `unregisterModule` instance methods to add/remove store modules
+5. Assign the Objects required to the base store.
 6. Add default export
 
 Example `src/env/store/ibm.js`:
 
 ```
-import store from '@/store; //@ aliases to src directory
-import HmcStore from './Hmc/HmcStore';
+import stores from '@/store; //@ aliases to src directory
+import DumpsStore from '../../store/modules/Logs/DumpsStore.js';
 
-store.registerModule('hmc', HmcStore);
+Object.assign(stores, {
+  DumpsStore: DumpsStore,
+});
 
-export default store;
+export default stores;
 ```
 
 ## Router
@@ -63,11 +64,11 @@ export default store;
 accessible in the UI.
 :::
 
-1. If making customizations to the default router, add `CUSTOM_ROUTER=true` key
+1. If making customizations to the default router, add `VITE_CUSTOM_ROUTER=true` key
    value pair to the new .env file.
 2. Create a `<ENV_NAME>.js` file in `src/env/router`
    :::danger
-   The filename needs to match the `VUE_APP_ENV_NAME` value defined in the
+   The filename needs to match the `VITE_APP_ENV_NAME` value defined in the
    .env file. The routes import in `src/router/index.js` will resolve to this
    new file.
    :::
@@ -86,17 +87,17 @@ application routes which is not always the same as what is visible in the app
 navigation. This configuration will make customizations to the rendered markup
 in src/components/AppNavigation/AppNavigation.vue.
 
-1. If making customizations to the app navigation, add `CUSTOM_APP_NAV=true` key
+1. If making customizations to the app navigation, add `VITE_CUSTOM_APP_NAV=true` key
    value pair to the new .env file.
 2. Create a `<ENV_NAME>.js` file in `src/env/components/AppNavigation`
    :::danger
-   The filename needs to match the `VUE_APP_ENV_NAME` value defined in the
-   .env file. The AppNavigationMixin import in
+   The filename needs to match the `VITE_APP_ENV_NAME` value defined in the
+   .env file. The AppNavigationData import in
    `src/components/AppNavigation/AppNavigation.vue` will resolve to this new
    file.
    :::
 3. Your custom mixin should follow a very similar structure to the default
-   AppNavigationMixin.js file. It should include a data property named
+   AppNavigationData.js file. It should include a data property named
    `navigationItems` that should be an array of of navigation objects. Each
    navigation object should have an `id` and `label` property defined.
    Optionally it can include `icon`, `route`, or `children` properties.
@@ -109,11 +110,11 @@ in src/components/AppNavigation/AppNavigation.vue.
 allows for easy visual customizations.
 :::
 
-1. If making customizations to the default styles, add `CUSTOM_STYLES=true` key
+1. If making customizations to the default styles, add `VITE_CUSTOM_STYLES=true` key
    value pair to the new .env file.
 2. Create a `_<ENV_NAME>.scss` partial in `src/env/assets/styles`
    :::danger
-   The filename needs to match the `VUE_APP_ENV_NAME` value defined in the
+   The filename needs to match the `VITE_APP_ENV_NAME` value defined in the
    .env file. The webpack sass loader will attempt to import a file with this
    name.
    :::
@@ -136,8 +137,8 @@ $success: lime;
 
 ## Local development
 
-1. Add the same `VUE_APP_ENV_NAME` key value pair to your
-   `env.development.local` file.
+1. Add the same `VITE_APP_ENV_NAME` key value pair to your
+   `env.local` file.
 2. Use serve script
    ```
    npm run serve
@@ -158,5 +159,5 @@ npm run build -- --mode ibm
 pass env variable directly to script
 
 ```
-VUE_APP_ENV_NAME=ibm npm run build
+VITE_APP_ENV_NAME=ibm npm run build
 ```

docs/customization/index.md

@@ -182,33 +182,33 @@ set color highlights for some pseudo-elements like `: hover`.
 // This function is usually used to get a lighter
 // theme variant color to use as a background color
 @function theme-color-light($variant) {
-  @return theme-color-level($variant, -11.3);
+  @return color-level($variant, -11.3);
 }
 
 @function theme-color-dark($variant) {
-  @return theme-color-level($variant, 2);
+  @return color-level($variant, 2);
 }
 ```
 
 ##### Examples
 
 ```scss{8-10,16}
 .b-table-sort-icon-left {
-    background-position: left calc(1.5rem / 2) center !important;
-    padding-left: calc(1.2rem + 0.65em) !important;
-    &:focus {
-      outline: none;
-      box-shadow: inset 0 0 0 2px theme-color('primary') !important;
-    }
-    &:hover {
-      background-color: theme-color-dark('light');
-    }
+  background-position: left calc(1.5rem / 2) center !important;
+  padding-left: calc(1.2rem + 0.65em) !important;
+  &:focus {
+    outline: none;
+    box-shadow: inset 0 0 0 2px $primary !important;
+  }
+  &:hover {
+    background-color: theme-color-dark($light);
+  }
 }
 
 &.alert-info {
-border-left-color: theme-color("info");
-background-color: theme-color-light("info");
-fill: theme-color("info");
+  border-left-color: $info;
+  background-color: theme-color-light($info);
+  fill: $info;
 }
 ```
 

docs/customization/theme.md

@@ -1,6 +1,6 @@
 # Theme customization
 Customization of the application requires knowledge of Sass and CSS. It also
-will require becoming familiar with the Bootstrap and Bootstrap-Vue component
+will require becoming familiar with the Bootstrap and Bootstrap-vue-next component
 libraries. This section outlines the global options and variables that can be
 removed or updated to meet organizational brand guidelines.
 
@@ -11,11 +11,6 @@ application navigation, and theming.
 
 [Read more in the Build Customization section](/customization/build)
 
-<!-- ### Configuring environment specific builds
-The complete instructions can be found in the `env` directory in a file called
-env.md or by viewing the [Configuring environment specific builds
-page](./env.md) -->
-
 ## Bootstrap Sass Options
 The Bootstrap Sass options are global styling toggles. The naming convention for
 these built-in variables is `enabled-*`.
@@ -37,7 +32,7 @@ some custom forms for validation states.
 
 ## Bootstrap Sass Variables
 These are global variables that Bootstrap defines in the
-`/node_modules/bootstrap/scss/variables.scss` helper file. Adding a variable
+`/node_modules/bootstrap/scss/_variables.scss` helper file. Adding a variable
 listed in this file to the `/src/assets/styles/bmc/helpers/_variables.scss` file
 will override the Bootstrap defined value.
 
@@ -163,18 +158,18 @@ gray variable values.
 [Learn more about Bootstrap
 colors](https://getbootstrap.com/docs/4.0/getting-started/theming/#color)
 
-### Bootstrap Color Functions
+<!-- ### Bootstrap Color Functions
 - `color('<color map key>)`
 - `theme-color('<theme color map key>)`
-- `gray('<gray color palette key'>)`
+- `gray('<gray color palette key'>)` -->
 
 
 #### Example
 ```SCSS
 .some-selector {
   color: color("blue");
   background: theme-color("light");
-  border: 1px solid gray("900")
+  border: 1px solid $gray-900;
 }
 ```
 

src/assets/styles/_obmc-custom.scss

@@ -2,5 +2,4 @@
 @import './bootstrap';
 
 // Custom BMC styles
-// @import "./bmc/helpers";
 @import './bmc/custom';

src/assets/styles/bmc/custom/_bootstrap-grid.scss

@@ -1,9 +1,4 @@
 .container-xl {
-  // Fluid layout container class sets 100%
-  // width until xl breakpoint. Once a max-width
-  // is set, setting the left margin to 0 is needed
-  // so the content doesn't center align
-  // https://bootstrap-vue.org/docs/components/layout#fluid-width-container
   margin-left: 0;
 }
 

src/assets/styles/bmc/custom/_tables.scss

@@ -1,5 +1,4 @@
 @use 'sass:math';
-// @import "/node_modules/bootstrap/scss/variables";
 .b-table-sticky-header {
   max-height: 75vh;
   min-height: 100px;
@@ -14,17 +13,6 @@
             left: -3px !important;
             top: 38% !important;
           }
-          // svg {
-          //   background-position: left calc(1.5rem / 2) center !important;
-          //   padding-left: calc(1.2rem + 0.65em) !important;
-          //   &:focus {
-          //     outline: none;
-          //     box-shadow: inset 0 0 0 2px $primary !important;
-          //   }
-          //   &:hover {
-          //     background-color: $light;
-          //   }
-          // }
           vertical-align: middle;
           border-top: 1px solid $gray-300;
           border-bottom: 1px solid $gray-300;
@@ -132,17 +120,6 @@
       padding-left: calc(50px + (#{$table-cell-padding-y} * 2));
       padding-right: calc(50px + (#{$table-cell-padding-y} * 2));
     }
-    // dl {
-    //   margin: 0;
-    // }
-    // dt {
-    //   float: left;
-    //   clear: left;
-    //   margin-right: math.div($spacer, 2);
-    // }
-    // dd {
-    //   line-height: 1.2;
-    // }
   }
 
   .table-row-expand {

src/assets/styles/bootstrap/_index.scss

@@ -13,15 +13,11 @@
 @import "/node_modules/bootstrap/scss/buttons";
 @import "/node_modules/bootstrap/scss/card";
 @import "/node_modules/bootstrap/scss/close";
-// @import "/node_modules/bootstrap/scss/code";
-// @import "/node_modules/bootstrap/scss/custom-forms";
 @import "/node_modules/bootstrap/scss/dropdown";
 @import "/node_modules/bootstrap/scss/forms";
 @import "/node_modules/bootstrap/scss/grid";
 @import "/node_modules/bootstrap/scss/images";
-// @import "/node_modules/bootstrap/scss/input-group";
 @import "/node_modules/bootstrap/scss/list-group";
-// @import "/node_modules/bootstrap/scss/media";
 @import "/node_modules/bootstrap/scss/modal";
 @import "/node_modules/bootstrap/scss/nav";
 @import "/node_modules/bootstrap/scss/navbar";
@@ -35,4 +31,3 @@
 
 // Utils
 @import "/node_modules/bootstrap/scss/utilities";
-// @import "/node_modules/bootstrap/scss/print";

src/components/AppNavigation/AppNavigation.vue

@@ -190,7 +190,7 @@ svg {
   }
 }
 .nav-nochild {
-  ::v-deep a.router-link-exact-active {
+  :deep(a.router-link-exact-active) {
     position: relative;
     background-color: $secondary;
     color: $light;
@@ -209,7 +209,7 @@ svg {
     background-color: #dadada;
     color: $light;
   }
-  ::v-deep a {
+  :deep(a) {
     color: $secondary;
   }
 }

src/components/Global/Alert.vue

@@ -23,7 +23,6 @@
 </template>
 
 <script setup>
-import { defineProps } from 'vue';
 import StatusIcon from '../Global/StatusIcon.vue';
 
 defineProps({

src/components/Global/FormFile.vue

@@ -41,7 +41,7 @@
 </template>
 
 <script setup>
-import { ref, computed, defineEmits } from 'vue';
+import { ref, computed } from 'vue';
 import IconClose from '@carbon/icons-vue/es/close/20';
 import eventBus from '@/eventBus';