Upgrade vue3 and all dependencies
Start the process of porting everything to Vue 3. I have most things
working. npm run-scripts build works, npm install works. prettier
passes. Styles load, login works, webui loads.
This was primarily done using the linked documents below. It makes the
following design decisions:
1. Vue is put in compat 2 mode, which allows most of the components to
work as-is.
2. Bootstrap v4 is used along with bootstrap-vue to keep our components
working.
3. Minor changes are made to load the latest versions of vue-router,
vuex, and vue-i18n.
I suspect this patchset is good enough to start with, and we can clean
up the broken things one patchset at a time. The things that need to
happen are:
1. Get remaining features working again. This primiarily is vue-i18n
for mixins, and non vue components. This likely needs to be done by
not pulling in i18n into the non vue components, then using the .Vue
files to do the internationalization in the component context, NOT in
the mixin context. Alternatively, we could drop MixIns alltogether.
2. Get custom styles working again. Previously, we used some path
hackery in vue.config.js to optionally pre-load styles. This stops
working now that we're required to @import our modules. Likely we
need some rearangement of the paths such that custom styles are a
complete replacement (possibly importing the original) rather than
additive with overrides. That's a guess, but I don't really see
anyone else doing customization the way we've defined it here.
3. Bootstrap 5 no longer requires ANY custom vue modules, as it has
dropped the jquery dependency. We won't be able to pull in bootstrap
5 all at once, so pull in bootstrap 5 under an alias, like
"bootstrap5" that we can optionally import 5 or 4.
4. One at a time, start porting components over to Vue3 syntax and
bootstrap 5. This will be the bulk of the manual work and review.
The only thing I think left is getting unit tests passing, which I
commented out the pre-commit hook to make this PR.
Tested: Code builds. Needs better testing.
[1] https://router.vuejs.org/guide/migration/
[2] https://vue-i18n.intlify.dev/guide/migration/vue3
[3] https://vuelidate-next.netlify.app/migration_guide.html#package-name-and-imports
Change-Id: I5bb3187b9efbf2e4ff63e57994bc528756e2a981
Signed-off-by: Ed Tanous <ed@tanous.net>
diff --git a/src/App.vue b/src/App.vue
index fc04b70..35a743c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,7 +9,8 @@
name: 'App',
computed: {
assetTag() {
- return this.$store.getters['global/assetTag'];
+ return '';
+ //return this.$store.getters['global/assetTag'];
},
},
watch: {
@@ -25,12 +26,15 @@
}
},
},
+ getters: {},
created() {
- document.title = this.$route.meta.title || 'Page is missing title';
+ document.title = '';
+ //document.title = this.$route.meta.title || 'Page is missing title';
},
};
</script>
<style lang="scss">
-@import '@/assets/styles/_obmc-custom';
+//@import '@/assets/styles/_obmc-custom';
+//@import './assets/styles/bootstrap/_helpers.scss';
</style>
diff --git a/src/assets/styles/bmc/custom/_buttons.scss b/src/assets/styles/bmc/custom/_buttons.scss
index 2a7b816..597766c 100644
--- a/src/assets/styles/bmc/custom/_buttons.scss
+++ b/src/assets/styles/bmc/custom/_buttons.scss
@@ -1,3 +1,5 @@
+@import 'bootstrap/dist/css/bootstrap.css';
+
.btn {
padding-top: $spacer / 2;
padding-right: $spacer;
@@ -71,7 +73,7 @@
position: absolute;
right: 0;
top: 0;
- z-index: $zindex-dropdown + 1;
+ //z-index: $zindex-dropdown + 1;
}
// Contain input buttons within input
diff --git a/src/assets/styles/bmc/custom/_dropdown.scss b/src/assets/styles/bmc/custom/_dropdown.scss
index 969c4c6..56d2ace 100644
--- a/src/assets/styles/bmc/custom/_dropdown.scss
+++ b/src/assets/styles/bmc/custom/_dropdown.scss
@@ -1,6 +1,8 @@
+@import 'bootstrap/dist/css/bootstrap.css';
+
// Make calendar visible over the table
.dropdown-menu {
- z-index: $zindex-dropdown + 1;
+ //z-index: $zindex-dropdown + 1;
padding: 0;
}
.dropdown-item {
diff --git a/src/assets/styles/bmc/custom/_tables.scss b/src/assets/styles/bmc/custom/_tables.scss
index e8b5a83..deeddc3 100644
--- a/src/assets/styles/bmc/custom/_tables.scss
+++ b/src/assets/styles/bmc/custom/_tables.scss
@@ -1,6 +1,8 @@
+@import 'bootstrap/dist/css/bootstrap.css'
+
.table {
position: relative;
- z-index: $zindex-dropdown;
+ //z-index: $zindex-dropdown;
td {
border-top: 1px solid gray("300");
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index 76c96c0..9d06680 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -246,6 +246,9 @@
</script>
<style lang="scss">
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
@mixin focus-box-shadow($padding-color: $navbar-color, $outline-color: $white) {
box-shadow:
inset 0 0 0 3px $padding-color,
@@ -256,11 +259,11 @@
position: absolute;
top: -60px;
left: 0.5rem;
- z-index: $zindex-popover;
- transition: $duration--moderate-01 $exit-easing--expressive;
+ //z-index: $zindex-popover;
+ //transition: $duration--moderate-01 $exit-easing--expressive;
&:focus {
top: 0.5rem;
- transition-timing-function: $entrance-easing--expressive;
+ //transition-timing-function: $entrance-easing--expressive;
}
}
.navbar-text,
@@ -289,6 +292,7 @@
.navbar {
padding: 0;
background-color: $navbar-color;
+
@include media-breakpoint-up($responsive-layout-bp) {
height: $header-height;
}
diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index a5f8105..4c93be5 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -3,11 +3,11 @@
<div class="nav-container" :class="{ open: isNavigationOpen }">
<nav ref="nav" :aria-label="$t('appNavigation.primaryNavigation')">
<b-nav vertical class="mb-4">
- <template v-for="(navItem, index) in navigationItems">
+ <template v-for="navItem in navigationItems">
<!-- Navigation items with no children -->
<b-nav-item
v-if="!navItem.children"
- :key="index"
+ :key="navItem.index"
:to="navItem.route"
:data-test-id="`nav-item-${navItem.id}`"
>
@@ -16,7 +16,7 @@
</b-nav-item>
<!-- Navigation items with children -->
- <li v-else :key="index" class="nav-item">
+ <li v-else :key="navItem.index" class="nav-item">
<b-button
v-b-toggle="`${navItem.id}`"
variant="link"
@@ -101,7 +101,10 @@
};
</script>
-<style scoped lang="scss">
+<style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
svg {
fill: currentColor;
height: 1.2rem;
diff --git a/src/components/Global/ButtonBackToTop.vue b/src/components/Global/ButtonBackToTop.vue
index 9160c7b..3ceb691 100644
--- a/src/components/Global/ButtonBackToTop.vue
+++ b/src/components/Global/ButtonBackToTop.vue
@@ -45,6 +45,9 @@
</script>
<style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
.btn-top {
position: fixed;
bottom: 24px;
diff --git a/src/components/Global/FormFile.vue b/src/components/Global/FormFile.vue
index 50ac961..1eafa25 100644
--- a/src/components/Global/FormFile.vue
+++ b/src/components/Global/FormFile.vue
@@ -82,6 +82,9 @@
</script>
<style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
.form-control-file {
opacity: 0;
height: 0;
diff --git a/src/components/Global/InfoTooltip.vue b/src/components/Global/InfoTooltip.vue
index c91109d..0e5c3b5 100644
--- a/src/components/Global/InfoTooltip.vue
+++ b/src/components/Global/InfoTooltip.vue
@@ -25,6 +25,9 @@
</script>
<style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
.btn-tooltip {
padding: 0;
line-height: 1em;
diff --git a/src/components/Global/InputPasswordToggle.vue b/src/components/Global/InputPasswordToggle.vue
index d2c0d4a..cd86920 100644
--- a/src/components/Global/InputPasswordToggle.vue
+++ b/src/components/Global/InputPasswordToggle.vue
@@ -48,6 +48,9 @@
</script>
<style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
.input-password-toggle-container {
position: relative;
}
diff --git a/src/components/Global/LoadingBar.vue b/src/components/Global/LoadingBar.vue
index 0e9551b..337aaf0 100644
--- a/src/components/Global/LoadingBar.vue
+++ b/src/components/Global/LoadingBar.vue
@@ -72,6 +72,9 @@
</script>
<style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
.progress {
position: absolute;
left: 0;
diff --git a/src/components/Global/PageContainer.vue b/src/components/Global/PageContainer.vue
index ab4adb6..0de5fe7 100644
--- a/src/components/Global/PageContainer.vue
+++ b/src/components/Global/PageContainer.vue
@@ -17,6 +17,10 @@
};
</script>
<style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
+@import 'bootstrap/dist/css/bootstrap.css';
main {
width: 100%;
height: 100%;
diff --git a/src/components/Global/PageSection.vue b/src/components/Global/PageSection.vue
index dd39ddd..15aa383 100644
--- a/src/components/Global/PageSection.vue
+++ b/src/components/Global/PageSection.vue
@@ -18,6 +18,9 @@
</script>
<style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
.page-section {
margin-bottom: $spacer * 4;
}
diff --git a/src/components/Global/PageTitle.vue b/src/components/Global/PageTitle.vue
index c3b49d8..ca7f608 100644
--- a/src/components/Global/PageTitle.vue
+++ b/src/components/Global/PageTitle.vue
@@ -6,7 +6,7 @@
</template>
<script>
-import i18n from '@/i18n';
+//import i18n from '@/i18n';
export default {
name: 'PageTitle',
props: {
@@ -32,14 +32,17 @@
);
i++;
}
- this.title = i18n.t('appPageTitle.' + title);
- document.title = this.title;
+ //this.title = i18n.t('appPageTitle.' + title);
+ //document.title = this.title;
}
},
};
</script>
<style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
.page-title {
margin-bottom: $spacer * 2;
}
diff --git a/src/components/Global/Search.vue b/src/components/Global/Search.vue
index ac8f9bf..d53315b 100644
--- a/src/components/Global/Search.vue
+++ b/src/components/Global/Search.vue
@@ -70,6 +70,9 @@
</script>
<style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
.search-input {
padding-left: ($spacer * 2);
}
diff --git a/src/components/Global/StatusIcon.vue b/src/components/Global/StatusIcon.vue
index 4552633..6c1505e 100644
--- a/src/components/Global/StatusIcon.vue
+++ b/src/components/Global/StatusIcon.vue
@@ -34,6 +34,9 @@
</script>
<style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
.status-icon {
vertical-align: text-bottom;
diff --git a/src/components/Global/TableDateFilter.vue b/src/components/Global/TableDateFilter.vue
index aa10cb5..4e8c5b9 100644
--- a/src/components/Global/TableDateFilter.vue
+++ b/src/components/Global/TableDateFilter.vue
@@ -99,15 +99,20 @@
<script>
import IconCalendar from '@carbon/icons-vue/es/calendar/20';
-import { helpers } from 'vuelidate/lib/validators';
-
+import { helpers } from '@vuelidate/validators';
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
const isoDateRegex = /([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]))/;
export default {
components: { IconCalendar },
mixins: [VuelidateMixin],
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
fromDate: '',
diff --git a/src/components/Global/TableFilter.vue b/src/components/Global/TableFilter.vue
index f26777b..8c4f509 100644
--- a/src/components/Global/TableFilter.vue
+++ b/src/components/Global/TableFilter.vue
@@ -109,6 +109,11 @@
</script>
<style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
+@import 'bootstrap/dist/css/bootstrap.css';
+
.badge {
margin-right: $spacer / 2;
}
diff --git a/src/components/Global/TableToolbar.vue b/src/components/Global/TableToolbar.vue
index 5235fea..7c0f490 100644
--- a/src/components/Global/TableToolbar.vue
+++ b/src/components/Global/TableToolbar.vue
@@ -69,12 +69,17 @@
</script>
<style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
+@import 'bootstrap/dist/css/bootstrap.css';
+
$toolbar-height: 46px;
.toolbar-container {
width: 100%;
position: relative;
- z-index: $zindex-dropdown + 1;
+ //z-index: $zindex-dropdown + 1;
}
.toolbar-content {
diff --git a/src/components/Mixins/BVPaginationMixin.js b/src/components/Mixins/BVPaginationMixin.js
index 4ccf6f2..0bdf368 100644
--- a/src/components/Mixins/BVPaginationMixin.js
+++ b/src/components/Mixins/BVPaginationMixin.js
@@ -1,4 +1,4 @@
-import i18n from '@/i18n';
+//import i18n from '@/i18n';
export const currentPage = 1;
export const perPage = 20;
export const itemsPerPageOptions = [
@@ -20,7 +20,8 @@
},
{
value: 0,
- text: i18n.t('global.table.viewAll'),
+ //text: i18n.$t('global.table.viewAll'),
+ text: 'global.table.viewAll',
},
];
const BVPaginationMixin = {
diff --git a/src/components/Mixins/TableRowExpandMixin.js b/src/components/Mixins/TableRowExpandMixin.js
index 7f815a4..92b2448 100644
--- a/src/components/Mixins/TableRowExpandMixin.js
+++ b/src/components/Mixins/TableRowExpandMixin.js
@@ -1,5 +1,7 @@
-import i18n from '@/i18n';
-export const expandRowLabel = i18n.t('global.table.expandTableRow');
+//import i18n from '@/i18n';
+//export const expandRowLabel = i18n.$t('global.table.expandTableRow');
+
+export const expandRowLabel = 'expand row label TODO';
const TableRowExpandMixin = {
methods: {
diff --git a/src/env/assets/styles/_default.scss b/src/env/assets/styles/_default.scss
new file mode 100644
index 0000000..8d78728
--- /dev/null
+++ b/src/env/assets/styles/_default.scss
@@ -0,0 +1 @@
+// This file shall remain empty.
\ No newline at end of file
diff --git a/src/eventBus.js b/src/eventBus.js
index c31c98a..68c120f 100644
--- a/src/eventBus.js
+++ b/src/eventBus.js
@@ -1,5 +1,5 @@
-import Vue from 'vue';
+import { createApp } from 'vue';
-const eventBus = new Vue();
+const eventBus = createApp();
export default eventBus;
diff --git a/src/i18n.js b/src/i18n.js
index c60573c..8135a40 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -1,26 +1,17 @@
-import Vue from 'vue';
-import VueI18n from 'vue-i18n';
+import { createI18n } from 'vue-i18n';
-Vue.use(VueI18n);
+import en_us from './locales/en-US.json';
+import ru_ru from './locales/ru-RU.json';
function loadLocaleMessages() {
- const locales = require.context(
- './locales',
- true,
- /[A-Za-z0-9-_,\s]+\.json$/i,
- );
- const messages = {};
- locales.keys().forEach((key) => {
- const matched = key.match(/([A-Za-z0-9-_]+)\./i);
- if (matched && matched.length > 1) {
- const locale = matched[1];
- messages[locale] = locales(key);
- }
- });
+ const messages = {
+ 'en-US': en_us,
+ 'ru-RU': ru_ru,
+ };
return messages;
}
-export default new VueI18n({
+const i18n = createI18n({
// Get default locale from local storage
locale: window.localStorage.getItem('storedLanguage'),
// Locales that don't exist will fallback to English
@@ -29,4 +20,8 @@
// Silent fallback suppresses console warnings when using fallback
silentFallbackWarn: true,
messages: loadLocaleMessages(),
+ globalInjection: false,
+ legacy: true,
});
+
+export default i18n;
diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue
index 25ba3f6..fa9c212 100644
--- a/src/layouts/AppLayout.vue
+++ b/src/layouts/AppLayout.vue
@@ -63,6 +63,9 @@
</script>
<style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
.app-container {
display: grid;
grid-template-columns: 100%;
diff --git a/src/layouts/LoginLayout.vue b/src/layouts/LoginLayout.vue
index dba1980..a79228f 100644
--- a/src/layouts/LoginLayout.vue
+++ b/src/layouts/LoginLayout.vue
@@ -44,9 +44,16 @@
};
},
};
+('');
</script>
<style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
+@import '@/assets/styles/bmc/helpers';
+@import '@/assets/styles/bootstrap/_helpers';
+
.login-container {
background: gray('100');
display: flex;
diff --git a/src/main.js b/src/main.js
index 43d09b8..23bfb69 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,14 +1,26 @@
-import Vue from 'vue';
+import { createApp } from 'vue';
+
import App from './App.vue';
+import i18n from './i18n';
+
import router from './router';
+//import { format } from 'date-fns-tz';
+
//Do not change store import.
//Exact match alias set to support
//dotenv customizations.
import store from './store';
import eventBus from './eventBus';
+import './assets/styles/bmc/helpers/_index.scss';
+import './assets/styles/bootstrap/_helpers.scss';
+
+import 'bootstrap/dist/css/bootstrap.css';
+import 'bootstrap-vue/dist/bootstrap-vue.css';
+
import {
+ BootstrapVue,
AlertPlugin,
BadgePlugin,
ButtonPlugin,
@@ -39,11 +51,9 @@
ToastPlugin,
TooltipPlugin,
} from 'bootstrap-vue';
-import Vuelidate from 'vuelidate';
-import i18n from './i18n';
-import { format } from 'date-fns-tz';
// Filters
+/*
Vue.filter('shortTimeZone', function (value) {
const longTZ = value
.toString()
@@ -83,12 +93,24 @@
return format(value, pattern, { timezone }).replace('GMT', 'UTC');
}
});
+*/
+
+const app = createApp({
+ router,
+ store,
+ render: (h) => h(App),
+});
+app.use(i18n);
+
+app.use(router);
+app.use(store);
// Plugins
-Vue.use(AlertPlugin);
-Vue.use(BadgePlugin);
-Vue.use(ButtonPlugin);
-Vue.use(BVConfigPlugin, {
+app.use(BootstrapVue);
+app.use(AlertPlugin);
+app.use(BadgePlugin);
+app.use(ButtonPlugin);
+app.use(BVConfigPlugin, {
BFormText: { textVariant: 'secondary' },
BTable: {
headVariant: 'light',
@@ -102,38 +124,33 @@
variant: 'primary',
},
});
-Vue.use(CardPlugin);
-Vue.use(CollapsePlugin);
-Vue.use(DropdownPlugin);
-Vue.use(FormPlugin);
-Vue.use(FormCheckboxPlugin);
-Vue.use(FormDatepickerPlugin);
-Vue.use(FormFilePlugin);
-Vue.use(FormGroupPlugin);
-Vue.use(FormInputPlugin);
-Vue.use(FormRadioPlugin);
-Vue.use(FormSelectPlugin);
-Vue.use(FormTagsPlugin);
-Vue.use(InputGroupPlugin);
-Vue.use(LayoutPlugin);
-Vue.use(LayoutPlugin);
-Vue.use(LinkPlugin);
-Vue.use(ListGroupPlugin);
-Vue.use(ModalPlugin);
-Vue.use(NavbarPlugin);
-Vue.use(NavPlugin);
-Vue.use(PaginationPlugin);
-Vue.use(ProgressPlugin);
-Vue.use(TablePlugin);
-Vue.use(TabsPlugin);
-Vue.use(ToastPlugin);
-Vue.use(TooltipPlugin);
-Vue.use(Vuelidate);
-new Vue({
- router,
- store,
- i18n,
- render: (h) => h(App),
-}).$mount('#app');
-Vue.prototype.$eventBus = eventBus;
+app.use(CardPlugin);
+app.use(CollapsePlugin);
+app.use(DropdownPlugin);
+app.use(FormPlugin);
+app.use(FormCheckboxPlugin);
+app.use(FormDatepickerPlugin);
+app.use(FormFilePlugin);
+app.use(FormGroupPlugin);
+app.use(FormInputPlugin);
+app.use(FormRadioPlugin);
+app.use(FormSelectPlugin);
+app.use(FormTagsPlugin);
+app.use(InputGroupPlugin);
+app.use(LayoutPlugin);
+app.use(LayoutPlugin);
+app.use(LinkPlugin);
+app.use(ListGroupPlugin);
+app.use(ModalPlugin);
+app.use(NavbarPlugin);
+app.use(NavPlugin);
+app.use(PaginationPlugin);
+app.use(ProgressPlugin);
+app.use(TablePlugin);
+app.use(TabsPlugin);
+app.use(ToastPlugin);
+app.use(TooltipPlugin);
+
+app.mount('#app');
+app.prototype.$eventBus = eventBus;
diff --git a/src/router/routes.js b/src/router/routes.js
index 5424cab..8b3ff17 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -30,7 +30,7 @@
import VirtualMedia from '@/views/Operations/VirtualMedia';
import Power from '@/views/ResourceManagement/Power';
import SnmpAlerts from '@/views/Settings/SnmpAlerts';
-import i18n from '@/i18n';
+//import { i18n } from '@/i18n';
const roles = {
administrator: 'Administrator',
@@ -49,7 +49,7 @@
name: 'login',
component: Login,
meta: {
- title: i18n.t('appPageTitle.login'),
+ //title: i18n.$t('appPageTitle.login'),
},
},
{
@@ -57,7 +57,7 @@
name: 'change-password',
component: ChangePassword,
meta: {
- title: i18n.t('appPageTitle.changePassword'),
+ //title: i18n.$t('appPageTitle.changePassword'),
requiresAuth: true,
},
},
@@ -75,7 +75,7 @@
name: 'serial-over-lan-console',
component: SerialOverLanConsole,
meta: {
- title: i18n.t('appPageTitle.serialOverLan'),
+ //title: i18n.t('appPageTitle.serialOverLan'),
},
},
{
@@ -83,7 +83,7 @@
name: 'kvm-console',
component: KvmConsole,
meta: {
- title: i18n.t('appPageTitle.kvm'),
+ //title: i18n.t('appPageTitle.kvm'),
},
},
],
@@ -100,7 +100,7 @@
name: 'overview',
component: Overview,
meta: {
- title: i18n.t('appPageTitle.overview'),
+ //title: i18n.t('appPageTitle.overview'),
},
},
{
@@ -108,7 +108,7 @@
name: 'profile-settings',
component: ProfileSettings,
meta: {
- title: i18n.t('appPageTitle.profileSettings'),
+ //title: i18n.t('appPageTitle.profileSettings'),
},
},
{
@@ -116,7 +116,7 @@
name: 'event-logs',
component: EventLogs,
meta: {
- title: i18n.t('appPageTitle.eventLogs'),
+ //title: i18n.t('appPageTitle.eventLogs'),
},
},
{
@@ -124,7 +124,7 @@
name: 'post-code-logs',
component: PostCodeLogs,
meta: {
- title: i18n.t('appPageTitle.postCodeLogs'),
+ //title: i18n.t('appPageTitle.postCodeLogs'),
},
},
{
@@ -132,7 +132,7 @@
name: 'inventory',
component: Inventory,
meta: {
- title: i18n.t('appPageTitle.inventory'),
+ //title: i18n.t('appPageTitle.inventory'),
},
},
{
@@ -140,7 +140,7 @@
name: 'sensors',
component: Sensors,
meta: {
- title: i18n.t('appPageTitle.sensors'),
+ //title: i18n.t('appPageTitle.sensors'),
},
},
{
@@ -148,7 +148,7 @@
name: 'sessions',
component: Sessions,
meta: {
- title: i18n.t('appPageTitle.sessions'),
+ //title: i18n.t('appPageTitle.sessions'),
},
},
{
@@ -156,7 +156,7 @@
name: 'ldap',
component: Ldap,
meta: {
- title: i18n.t('appPageTitle.ldap'),
+ //title: i18n.t('appPageTitle.ldap'),
},
},
{
@@ -164,7 +164,7 @@
name: 'user-management',
component: UserManagement,
meta: {
- title: i18n.t('appPageTitle.userManagement'),
+ //title: i18n.t('appPageTitle.userManagement'),
},
},
{
@@ -172,7 +172,7 @@
name: 'policies',
component: Policies,
meta: {
- title: i18n.t('appPageTitle.policies'),
+ //title: i18n.t('appPageTitle.policies'),
},
},
{
@@ -180,7 +180,7 @@
name: 'certificates',
component: Certificates,
meta: {
- title: i18n.t('appPageTitle.certificates'),
+ //title: i18n.t('appPageTitle.certificates'),
},
},
{
@@ -188,7 +188,7 @@
name: 'date-time',
component: DateTime,
meta: {
- title: i18n.t('appPageTitle.dateTime'),
+ //title: i18n.t('appPageTitle.dateTime'),
},
},
{
@@ -196,7 +196,7 @@
name: 'snmp-alerts',
component: SnmpAlerts,
meta: {
- title: i18n.t('appPageTitle.snmpAlerts'),
+ //title: i18n.t('appPageTitle.snmpAlerts'),
},
},
{
@@ -204,7 +204,7 @@
name: 'factory-reset',
component: FactoryReset,
meta: {
- title: i18n.t('appPageTitle.factoryReset'),
+ //title: i18n.t('appPageTitle.factoryReset'),
},
},
{
@@ -212,7 +212,7 @@
name: 'key-clear',
component: KeyClear,
meta: {
- title: i18n.t('appPageTitle.keyClear'),
+ //title: i18n.t('appPageTitle.keyClear'),
},
},
{
@@ -220,7 +220,7 @@
name: 'kvm',
component: Kvm,
meta: {
- title: i18n.t('appPageTitle.kvm'),
+ //title: i18n.t('appPageTitle.kvm'),
},
},
{
@@ -228,7 +228,7 @@
name: 'firmware',
component: Firmware,
meta: {
- title: i18n.t('appPageTitle.firmware'),
+ //title: i18n.t('appPageTitle.firmware'),
},
},
{
@@ -236,7 +236,7 @@
name: 'network',
component: Network,
meta: {
- title: i18n.t('appPageTitle.network'),
+ //title: i18n.t('appPageTitle.network'),
},
},
{
@@ -244,7 +244,7 @@
name: 'power-restore-policy',
component: PowerRestorePolicy,
meta: {
- title: i18n.t('appPageTitle.powerRestorePolicy'),
+ //title: i18n.t('appPageTitle.powerRestorePolicy'),
},
},
{
@@ -252,7 +252,7 @@
name: 'power',
component: Power,
meta: {
- title: i18n.t('appPageTitle.power'),
+ //title: i18n.t('appPageTitle.power'),
},
},
{
@@ -260,7 +260,7 @@
name: 'reboot-bmc',
component: RebootBmc,
meta: {
- title: i18n.t('appPageTitle.rebootBmc'),
+ //title: i18n.t('appPageTitle.rebootBmc'),
},
},
{
@@ -268,7 +268,7 @@
name: 'serial-over-lan',
component: SerialOverLan,
meta: {
- title: i18n.t('appPageTitle.serialOverLan'),
+ //title: i18n.t('appPageTitle.serialOverLan'),
exclusiveToRoles: [roles.administrator],
},
},
@@ -277,7 +277,7 @@
name: 'server-power-operations',
component: ServerPowerOperations,
meta: {
- title: i18n.t('appPageTitle.serverPowerOperations'),
+ //title: i18n.t('appPageTitle.serverPowerOperations'),
},
},
{
@@ -285,7 +285,7 @@
name: 'virtual-media',
component: VirtualMedia,
meta: {
- title: i18n.t('appPageTitle.virtualMedia'),
+ //title: i18n.t('appPageTitle.virtualMedia'),
exclusiveToRoles: [roles.administrator],
},
},
@@ -294,7 +294,7 @@
name: 'page-not-found',
component: PageNotFound,
meta: {
- title: i18n.t('appPageTitle.pageNotFound'),
+ //title: i18n.t('appPageTitle.pageNotFound'),
},
},
],
diff --git a/src/store/api.js b/src/store/api.js
index 0bd84e6..45ffc3c 100644
--- a/src/store/api.js
+++ b/src/store/api.js
@@ -4,7 +4,7 @@
//Do not change store import.
//Exact match alias set to support
//dotenv customizations.
-import store from '../store';
+import store from '.';
Axios.defaults.headers.common['Accept'] = 'application/json';
Axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
diff --git a/src/store/index.js b/src/store/index.js
index 453e0f6..029df7a 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -36,7 +36,7 @@
Vue.use(Vuex);
-export default new Vuex.Store({
+const store = new Vuex.Store({
state: {},
mutations: {},
actions: {},
@@ -74,3 +74,5 @@
keyClear: KeyClearStore,
},
});
+
+export default store;
diff --git a/src/views/ChangePassword/ChangePassword.vue b/src/views/ChangePassword/ChangePassword.vue
index 2440ace..002362a 100644
--- a/src/views/ChangePassword/ChangePassword.vue
+++ b/src/views/ChangePassword/ChangePassword.vue
@@ -72,16 +72,22 @@
</template>
<script>
-import { required, sameAs } from 'vuelidate/lib/validators';
+import { required, sameAs } from '@vuelidate/validators';
import Alert from '@/components/Global/Alert';
import VuelidateMixin from '@/components/Mixins/VuelidateMixin';
import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import { useVuelidate } from '@vuelidate/core';
export default {
name: 'ChangePassword',
components: { Alert, InputPasswordToggle },
mixins: [VuelidateMixin, BVToastMixin],
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
form: {
@@ -126,6 +132,11 @@
</script>
<style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
.change-password__form-container {
@include media-breakpoint-up('md') {
max-width: 360px;
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue b/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue
index cf3ee2b..8c1e50d 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue
@@ -88,14 +88,14 @@
<!-- BMC date and time -->
<dt>{{ $t('pageInventory.table.bmcDateTime') }}:</dt>
<dd>
- {{ item.dateTime | formatDate }}
- {{ item.dateTime | formatTime }}
+ {{ item.dateTime }}
+ {{ item.dateTime }}
</dd>
<!-- Reset date and time -->
<dt>{{ $t('pageInventory.table.lastResetTime') }}:</dt>
<dd>
- {{ item.lastResetTime | formatDate }}
- {{ item.lastResetTime | formatTime }}
+ {{ item.lastResetTime }}
+ {{ item.lastResetTime }}
</dd>
</dl>
</b-col>
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index db475c5..aaf1128 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -18,15 +18,15 @@
id="username"
v-model="userInfo.username"
aria-describedby="login-error-alert username-required"
- :state="getValidationState($v.userInfo.username)"
+ :state="getValidationState(v$.userInfo.username)"
type="text"
autofocus="autofocus"
data-test-id="login-input-username"
- @input="$v.userInfo.username.$touch()"
+ @input="v$.userInfo.username.$touch()"
>
</b-form-input>
<b-form-invalid-feedback id="username-required" role="alert">
- <template v-if="!$v.userInfo.username.required">
+ <template v-if="!v$.userInfo.username.required">
{{ $t('global.form.fieldRequired') }}
</template>
</b-form-invalid-feedback>
@@ -38,16 +38,16 @@
id="password"
v-model="userInfo.password"
aria-describedby="login-error-alert password-required"
- :state="getValidationState($v.userInfo.password)"
+ :state="getValidationState(v$.userInfo.password)"
type="password"
data-test-id="login-input-password"
class="form-control-with-button"
- @input="$v.userInfo.password.$touch()"
+ @input="v$.userInfo.password.$touch()"
>
</b-form-input>
</input-password-toggle>
<b-form-invalid-feedback id="password-required" role="alert">
- <template v-if="!$v.userInfo.password.required">
+ <template v-if="!v$.userInfo.password.required">
{{ $t('global.form.fieldRequired') }}
</template>
</b-form-invalid-feedback>
@@ -64,8 +64,10 @@
</template>
<script>
-import { required } from 'vuelidate/lib/validators';
+import { required } from '@vuelidate/validators';
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
+
import i18n from '@/i18n';
import Alert from '@/components/Global/Alert';
import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
@@ -74,6 +76,11 @@
name: 'Login',
components: { Alert, InputPasswordToggle },
mixins: [VuelidateMixin],
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
userInfo: {
@@ -110,8 +117,8 @@
},
methods: {
login: function () {
- this.$v.$touch();
- if (this.$v.$invalid) return;
+ this.v$.$touch();
+ if (this.v$.$invalid) return;
this.disableSubmitButton = true;
const username = this.userInfo.username;
const password = this.userInfo.password;
diff --git a/src/views/Logs/Dumps/Dumps.vue b/src/views/Logs/Dumps/Dumps.vue
index e89acd9..5a9869a 100644
--- a/src/views/Logs/Dumps/Dumps.vue
+++ b/src/views/Logs/Dumps/Dumps.vue
@@ -84,8 +84,8 @@
<!-- Date and Time column -->
<template #cell(dateTime)="{ value }">
- <p class="mb-0">{{ value | formatDate }}</p>
- <p class="mb-0">{{ value | formatTime }}</p>
+ <p class="mb-0">{{ value }}</p>
+ <p class="mb-0">{{ value }}</p>
</template>
<!-- Size column -->
diff --git a/src/views/Logs/Dumps/DumpsForm.vue b/src/views/Logs/Dumps/DumpsForm.vue
index 0a9b058..40cea7e 100644
--- a/src/views/Logs/Dumps/DumpsForm.vue
+++ b/src/views/Logs/Dumps/DumpsForm.vue
@@ -33,7 +33,8 @@
</template>
<script>
-import { required } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
import ModalConfirmation from './DumpsModalConfirmation';
import Alert from '@/components/Global/Alert';
import BVToastMixin from '@/components/Mixins/BVToastMixin';
@@ -42,6 +43,11 @@
export default {
components: { Alert, ModalConfirmation },
mixins: [BVToastMixin, VuelidateMixin],
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
selectedDumpType: null,
diff --git a/src/views/Logs/Dumps/DumpsModalConfirmation.vue b/src/views/Logs/Dumps/DumpsModalConfirmation.vue
index f8e20cf..2a1e552 100644
--- a/src/views/Logs/Dumps/DumpsModalConfirmation.vue
+++ b/src/views/Logs/Dumps/DumpsModalConfirmation.vue
@@ -40,10 +40,16 @@
<script>
import StatusIcon from '@/components/Global/StatusIcon';
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
export default {
components: { StatusIcon },
mixins: [VuelidateMixin],
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
confirmed: false,
diff --git a/src/views/Logs/EventLogs/EventLogs.vue b/src/views/Logs/EventLogs/EventLogs.vue
index 0e7c494..f52e211 100644
--- a/src/views/Logs/EventLogs/EventLogs.vue
+++ b/src/views/Logs/EventLogs/EventLogs.vue
@@ -144,8 +144,8 @@
<!-- Modified date -->
<dt>{{ $t('pageEventLogs.table.modifiedDate') }}:</dt>
<dd v-if="item.modifiedDate">
- {{ item.modifiedDate | formatDate }}
- {{ item.modifiedDate | formatTime }}
+ {{ item.modifiedDate }}
+ {{ item.modifiedDate }}
</dd>
<dd v-else>--</dd>
</dl>
@@ -170,8 +170,8 @@
</template>
<!-- Date column -->
<template #cell(date)="{ value }">
- <p class="mb-0">{{ value | formatDate }}</p>
- <p class="mb-0">{{ value | formatTime }}</p>
+ <p class="mb-0">{{ value }}</p>
+ <p class="mb-0">{{ value }}</p>
</template>
<!-- Status column -->
diff --git a/src/views/Logs/PostCodeLogs/PostCodeLogs.vue b/src/views/Logs/PostCodeLogs/PostCodeLogs.vue
index 6b3030b..ad62afc 100644
--- a/src/views/Logs/PostCodeLogs/PostCodeLogs.vue
+++ b/src/views/Logs/PostCodeLogs/PostCodeLogs.vue
@@ -97,8 +97,8 @@
</template>
<!-- Date column -->
<template #cell(date)="{ value }">
- <p class="mb-0">{{ value | formatDate }}</p>
- <p class="mb-0">{{ value | formatTime }}</p>
+ <p class="mb-0">{{ value }}</p>
+ <p class="mb-0">{{ value }}</p>
</template>
<!-- Actions column -->
diff --git a/src/views/Operations/FactoryReset/FactoryReset.vue b/src/views/Operations/FactoryReset/FactoryReset.vue
index 897348f..40330b1 100644
--- a/src/views/Operations/FactoryReset/FactoryReset.vue
+++ b/src/views/Operations/FactoryReset/FactoryReset.vue
@@ -51,7 +51,7 @@
</b-form>
<!-- Modals -->
- <modal-reset :reset-type="resetOption" @okConfirm="onOkConfirm" />
+ <modal-reset :reset-type="resetOption" @ok-confirm="onOkConfirm" />
</b-container>
</template>
diff --git a/src/views/Operations/Firmware/FirmwareCardsHost.vue b/src/views/Operations/Firmware/FirmwareCardsHost.vue
index b4a8e90..8fd0cac 100644
--- a/src/views/Operations/Firmware/FirmwareCardsHost.vue
+++ b/src/views/Operations/Firmware/FirmwareCardsHost.vue
@@ -67,6 +67,11 @@
</script>
<style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
.page-section {
margin-top: -$spacer * 1.5;
}
diff --git a/src/views/Operations/Firmware/FirmwareFormUpdate.vue b/src/views/Operations/Firmware/FirmwareFormUpdate.vue
index ac4b23f..554d1d4 100644
--- a/src/views/Operations/Firmware/FirmwareFormUpdate.vue
+++ b/src/views/Operations/Firmware/FirmwareFormUpdate.vue
@@ -73,11 +73,12 @@
</template>
<script>
-import { requiredIf } from 'vuelidate/lib/validators';
+import { requiredIf } from '@vuelidate/validators';
import BVToastMixin from '@/components/Mixins/BVToastMixin';
import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
import FormFile from '@/components/Global/FormFile';
import ModalUpdateFirmware from './FirmwareModalUpdateFirmware';
@@ -96,6 +97,11 @@
type: Boolean,
},
},
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
loading,
diff --git a/src/views/Operations/Kvm/KvmConsole.vue b/src/views/Operations/Kvm/KvmConsole.vue
index 62dd47a..cc623e4 100644
--- a/src/views/Operations/Kvm/KvmConsole.vue
+++ b/src/views/Operations/Kvm/KvmConsole.vue
@@ -95,7 +95,7 @@
mounted() {
this.openTerminal();
},
- beforeDestroy() {
+ beforeUnmount() {
window.removeEventListener('resize', this.resizeKvmWindow);
this.closeTerminal();
},
@@ -173,7 +173,10 @@
};
</script>
-<style scoped lang="scss">
+<style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
.button-ctrl-alt-delete {
float: right;
}
diff --git a/src/views/Operations/RebootBmc/RebootBmc.vue b/src/views/Operations/RebootBmc/RebootBmc.vue
index fe57548..e56e968 100644
--- a/src/views/Operations/RebootBmc/RebootBmc.vue
+++ b/src/views/Operations/RebootBmc/RebootBmc.vue
@@ -11,8 +11,8 @@
{{ $t('pageRebootBmc.lastReboot') }}
</dt>
<dd v-if="lastBmcRebootTime">
- {{ lastBmcRebootTime | formatDate }}
- {{ lastBmcRebootTime | formatTime }}
+ {{ lastBmcRebootTime }}
+ {{ lastBmcRebootTime }}
</dd>
<dd v-else>--</dd>
</dl>
@@ -81,4 +81,7 @@
};
</script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+</style>
diff --git a/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue b/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue
index ca81385..8b4cd22 100644
--- a/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue
+++ b/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue
@@ -86,7 +86,7 @@
mounted() {
this.openTerminal();
},
- beforeDestroy() {
+ beforeUnmount() {
window.removeEventListener('resize', this.resizeConsoleWindow);
this.closeTerminal();
},
@@ -161,6 +161,9 @@
</script>
<style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
@import '~xterm/css/xterm.css';
#terminal {
diff --git a/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue b/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue
index 281bbef..4e26ee1 100644
--- a/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue
+++ b/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue
@@ -44,8 +44,8 @@
v-if="lastPowerOperationTime"
data-test-id="powerServerOps-text-lastPowerOp"
>
- {{ lastPowerOperationTime | formatDate }}
- {{ lastPowerOperationTime | formatTime }}
+ {{ lastPowerOperationTime }}
+ {{ lastPowerOperationTime }}
</dd>
<dd v-else>--</dd>
</dl>
diff --git a/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue b/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue
index b0bcfb2..61e2050 100644
--- a/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue
+++ b/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue
@@ -70,8 +70,9 @@
</template>
<script>
-import { required } from 'vuelidate/lib/validators';
+import { required } from '@vuelidate/validators';
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
export default {
mixins: [VuelidateMixin],
@@ -85,6 +86,11 @@
},
},
},
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
form: {
diff --git a/src/views/Overview/OverviewCard.vue b/src/views/Overview/OverviewCard.vue
index 4fc0a03..aa5697d 100644
--- a/src/views/Overview/OverviewCard.vue
+++ b/src/views/Overview/OverviewCard.vue
@@ -71,6 +71,9 @@
</script>
<style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
a {
vertical-align: middle;
font-size: 14px;
diff --git a/src/views/Overview/OverviewEvents.vue b/src/views/Overview/OverviewEvents.vue
index 73853bb..4d85dbd 100644
--- a/src/views/Overview/OverviewEvents.vue
+++ b/src/views/Overview/OverviewEvents.vue
@@ -85,6 +85,9 @@
</script>
<style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
.status-icon {
vertical-align: text-top;
}
diff --git a/src/views/Overview/OverviewQuickLinks.vue b/src/views/Overview/OverviewQuickLinks.vue
index bc579b0..2ab7654 100644
--- a/src/views/Overview/OverviewQuickLinks.vue
+++ b/src/views/Overview/OverviewQuickLinks.vue
@@ -5,7 +5,7 @@
<dl>
<dt>{{ $t('pageOverview.bmcTime') }}</dt>
<dd v-if="bmcTime" data-test-id="overviewQuickLinks-text-bmcTime">
- {{ bmcTime | formatDate }} {{ bmcTime | formatTime }}
+ {{ bmcTime }} {{ bmcTime }}
</dd>
<dd v-else>--</dd>
</dl>
@@ -49,6 +49,9 @@
</script>
<style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
dd,
dl {
margin: 0;
diff --git a/src/views/ProfileSettings/ProfileSettings.vue b/src/views/ProfileSettings/ProfileSettings.vue
index 5d84cce..aa32574 100644
--- a/src/views/ProfileSettings/ProfileSettings.vue
+++ b/src/views/ProfileSettings/ProfileSettings.vue
@@ -145,12 +145,13 @@
<script>
import BVToastMixin from '@/components/Mixins/BVToastMixin';
import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
-import { maxLength, minLength, sameAs } from 'vuelidate/lib/validators';
+import { maxLength, minLength, sameAs } from '@vuelidate/validators';
import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
import LocalTimezoneLabelMixin from '@/components/Mixins/LocalTimezoneLabelMixin';
import PageTitle from '@/components/Global/PageTitle';
import PageSection from '@/components/Global/PageSection';
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
export default {
name: 'ProfileSettings',
@@ -161,6 +162,11 @@
LoadingBarMixin,
VuelidateMixin,
],
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
form: {
diff --git a/src/views/ResourceManagement/Power.vue b/src/views/ResourceManagement/Power.vue
index cc0cc99..8a9503f 100644
--- a/src/views/ResourceManagement/Power.vue
+++ b/src/views/ResourceManagement/Power.vue
@@ -87,8 +87,10 @@
import PageTitle from '@/components/Global/PageTitle';
import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
+
import BVToastMixin from '@/components/Mixins/BVToastMixin';
-import { requiredIf, between } from 'vuelidate/lib/validators';
+import { requiredIf, between } from '@vuelidate/validators';
import { mapGetters } from 'vuex';
export default {
@@ -99,6 +101,11 @@
this.hideLoader();
next();
},
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
loading,
diff --git a/src/views/SecurityAndAccess/Certificates/Certificates.vue b/src/views/SecurityAndAccess/Certificates/Certificates.vue
index 35e4b81..bceab5d 100644
--- a/src/views/SecurityAndAccess/Certificates/Certificates.vue
+++ b/src/views/SecurityAndAccess/Certificates/Certificates.vue
@@ -63,7 +63,7 @@
:empty-text="$t('global.table.emptyMessage')"
>
<template #cell(validFrom)="{ value }">
- {{ value | formatDate }}
+ {{ value }}
</template>
<template #cell(validUntil)="{ value }">
@@ -71,7 +71,7 @@
v-if="getDaysUntilExpired(value) < 31"
:status="getIconStatus(value)"
/>
- {{ value | formatDate }}
+ {{ value }}
</template>
<template #cell(actions)="{ value, item }">
diff --git a/src/views/SecurityAndAccess/Certificates/CsrCountryCodes.js b/src/views/SecurityAndAccess/Certificates/CsrCountryCodes.js
index a2d7000..8e8b213 100644
--- a/src/views/SecurityAndAccess/Certificates/CsrCountryCodes.js
+++ b/src/views/SecurityAndAccess/Certificates/CsrCountryCodes.js
@@ -1,5 +1,7 @@
-import i18n from '@/i18n';
+//import i18n from '@/i18n';
+export const COUNTRY_LIST = [];
+/*
export const COUNTRY_LIST = [
{ name: 'Afghanistan', code: 'AF', label: i18n.t('countries.AF') },
{ name: 'Albania', code: 'AL', label: i18n.t('countries.AL') },
@@ -342,4 +344,4 @@
{ name: 'Zambia', code: 'ZM', label: i18n.t('countries.ZM') },
{ name: 'Zimbabwe', code: 'ZW', label: i18n.t('countries.ZW') },
{ name: 'Åland Islands', code: 'AX', label: i18n.t('countries.AX') },
-];
+];*/
diff --git a/src/views/SecurityAndAccess/Certificates/ModalGenerateCsr.vue b/src/views/SecurityAndAccess/Certificates/ModalGenerateCsr.vue
index 9f60d2b..03ab8f4 100644
--- a/src/views/SecurityAndAccess/Certificates/ModalGenerateCsr.vue
+++ b/src/views/SecurityAndAccess/Certificates/ModalGenerateCsr.vue
@@ -363,16 +363,22 @@
import IconAdd from '@carbon/icons-vue/es/add--alt/20';
import IconCheckmark from '@carbon/icons-vue/es/checkmark/20';
-import { required, requiredIf } from 'vuelidate/lib/validators';
+import { required, requiredIf } from '@vuelidate/validators';
import { COUNTRY_LIST } from './CsrCountryCodes';
import BVToastMixin from '@/components/Mixins/BVToastMixin';
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
export default {
name: 'ModalGenerateCsr',
components: { IconAdd, IconCheckmark },
mixins: [BVToastMixin, VuelidateMixin],
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
form: {
diff --git a/src/views/SecurityAndAccess/Certificates/ModalUploadCertificate.vue b/src/views/SecurityAndAccess/Certificates/ModalUploadCertificate.vue
index f4db7a2..60170f1 100644
--- a/src/views/SecurityAndAccess/Certificates/ModalUploadCertificate.vue
+++ b/src/views/SecurityAndAccess/Certificates/ModalUploadCertificate.vue
@@ -69,8 +69,9 @@
</template>
<script>
-import { required, requiredIf } from 'vuelidate/lib/validators';
+import { required, requiredIf } from '@vuelidate/validators';
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
import FormFile from '@/components/Global/FormFile';
@@ -90,6 +91,11 @@
},
},
},
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
form: {
diff --git a/src/views/SecurityAndAccess/Ldap/Ldap.vue b/src/views/SecurityAndAccess/Ldap/Ldap.vue
index a5ee475..28d2b1c 100644
--- a/src/views/SecurityAndAccess/Ldap/Ldap.vue
+++ b/src/views/SecurityAndAccess/Ldap/Ldap.vue
@@ -52,12 +52,12 @@
<dl>
<dt>{{ $t('pageLdap.form.caCertificateValidUntil') }}</dt>
<dd v-if="caCertificateExpiration">
- {{ caCertificateExpiration | formatDate }}
+ {{ caCertificateExpiration }}
</dd>
<dd v-else>--</dd>
<dt>{{ $t('pageLdap.form.ldapCertificateValidUntil') }}</dt>
<dd v-if="ldapCertificateExpiration">
- {{ ldapCertificateExpiration | formatDate }}
+ {{ ldapCertificateExpiration }}
</dd>
<dd v-else>--</dd>
</dl>
@@ -232,7 +232,8 @@
<script>
import { mapGetters } from 'vuex';
import { find } from 'lodash';
-import { requiredIf } from 'vuelidate/lib/validators';
+import { requiredIf } from '@vuelidate/validators';
+import { useVuelidate } from '@vuelidate/core';
import BVToastMixin from '@/components/Mixins/BVToastMixin';
import VuelidateMixin from '@/components/Mixins/VuelidateMixin';
@@ -257,6 +258,11 @@
this.hideLoader();
next();
},
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
form: {
diff --git a/src/views/SecurityAndAccess/Ldap/ModalAddRoleGroup.vue b/src/views/SecurityAndAccess/Ldap/ModalAddRoleGroup.vue
index beacf57..9b50abd 100644
--- a/src/views/SecurityAndAccess/Ldap/ModalAddRoleGroup.vue
+++ b/src/views/SecurityAndAccess/Ldap/ModalAddRoleGroup.vue
@@ -80,8 +80,9 @@
</template>
<script>
-import { required, requiredIf } from 'vuelidate/lib/validators';
+import { required, requiredIf } from '@vuelidate/validators';
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
export default {
mixins: [VuelidateMixin],
@@ -98,6 +99,11 @@
},
},
},
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
form: {
diff --git a/src/views/SecurityAndAccess/Policies/Policies.vue b/src/views/SecurityAndAccess/Policies/Policies.vue
index 3ebfee4..fb52175 100644
--- a/src/views/SecurityAndAccess/Policies/Policies.vue
+++ b/src/views/SecurityAndAccess/Policies/Policies.vue
@@ -254,6 +254,9 @@
</script>
<style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
.setting-section {
border-bottom: 1px solid gray('300');
}
diff --git a/src/views/SecurityAndAccess/UserManagement/ModalSettings.vue b/src/views/SecurityAndAccess/UserManagement/ModalSettings.vue
index 0f05123..8932eb5 100644
--- a/src/views/SecurityAndAccess/UserManagement/ModalSettings.vue
+++ b/src/views/SecurityAndAccess/UserManagement/ModalSettings.vue
@@ -123,12 +123,14 @@
<script>
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
+
import {
required,
requiredIf,
minValue,
maxValue,
-} from 'vuelidate/lib/validators';
+} from '@vuelidate/validators';
export default {
mixins: [VuelidateMixin],
@@ -138,6 +140,11 @@
required: true,
},
},
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
form: {
diff --git a/src/views/SecurityAndAccess/UserManagement/ModalUser.vue b/src/views/SecurityAndAccess/UserManagement/ModalUser.vue
index 5ffb297..dca9736 100644
--- a/src/views/SecurityAndAccess/UserManagement/ModalUser.vue
+++ b/src/views/SecurityAndAccess/UserManagement/ModalUser.vue
@@ -27,7 +27,6 @@
v-model="form.manualUnlock"
data-test-id="userManagement-input-manualUnlock"
type="hidden"
- value="false"
/>
<b-button
variant="primary"
@@ -232,8 +231,10 @@
sameAs,
helpers,
requiredIf,
-} from 'vuelidate/lib/validators';
+} from '@vuelidate/validators';
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
+
import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
import Alert from '@/components/Global/Alert';
@@ -250,6 +251,11 @@
required: true,
},
},
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
originalUsername: '',
diff --git a/src/views/SecurityAndAccess/UserManagement/UserManagement.vue b/src/views/SecurityAndAccess/UserManagement/UserManagement.vue
index ab31668..9e33a63 100644
--- a/src/views/SecurityAndAccess/UserManagement/UserManagement.vue
+++ b/src/views/SecurityAndAccess/UserManagement/UserManagement.vue
@@ -399,6 +399,9 @@
</script>
<style lang="scss" scoped>
+@import '@/assets/styles/bmc/helpers/_index.scss';
+@import '@/assets/styles/bootstrap/_helpers.scss';
+
.btn.collapsed {
svg {
transform: rotate(180deg);
diff --git a/src/views/Settings/DateTime/DateTime.vue b/src/views/Settings/DateTime/DateTime.vue
index a3fec36..00d7b45 100644
--- a/src/views/Settings/DateTime/DateTime.vue
+++ b/src/views/Settings/DateTime/DateTime.vue
@@ -18,14 +18,14 @@
<b-col lg="3">
<dl>
<dt>{{ $t('pageDateTime.form.date') }}</dt>
- <dd v-if="bmcTime">{{ bmcTime | formatDate }}</dd>
+ <dd v-if="bmcTime">{{ bmcTime }}</dd>
<dd v-else>--</dd>
</dl>
</b-col>
<b-col lg="3">
<dl>
<dt>{{ $t('pageDateTime.form.time.label') }}</dt>
- <dd v-if="bmcTime">{{ bmcTime | formatTime }}</dd>
+ <dd v-if="bmcTime">{{ bmcTime }}</dd>
<dd v-else>--</dd>
</dl>
</b-col>
@@ -206,9 +206,10 @@
import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
import LocalTimezoneLabelMixin from '@/components/Mixins/LocalTimezoneLabelMixin';
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
import { mapState } from 'vuex';
-import { requiredIf, helpers } from 'vuelidate/lib/validators';
+import { requiredIf, helpers } from '@vuelidate/validators';
const isoDateRegex = /([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]))/;
const isoTimeRegex = /^(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/;
@@ -226,6 +227,11 @@
this.hideLoader();
next();
},
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
locale: this.$store.getters['global/languagePreference'],
diff --git a/src/views/Settings/Network/ModalDns.vue b/src/views/Settings/Network/ModalDns.vue
index 7f12717..8fe371e 100644
--- a/src/views/Settings/Network/ModalDns.vue
+++ b/src/views/Settings/Network/ModalDns.vue
@@ -44,10 +44,17 @@
<script>
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
-import { ipAddress, required } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+
+import { ipAddress, required } from '@vuelidate/validators';
export default {
mixins: [VuelidateMixin],
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
form: {
diff --git a/src/views/Settings/Network/ModalHostname.vue b/src/views/Settings/Network/ModalHostname.vue
index f3221ec..1b3bab1 100644
--- a/src/views/Settings/Network/ModalHostname.vue
+++ b/src/views/Settings/Network/ModalHostname.vue
@@ -49,7 +49,9 @@
<script>
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
-import { required, helpers } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+
+import { required, helpers } from '@vuelidate/validators';
const validateHostname = helpers.regex('validateHostname', /^\S{0,64}$/);
@@ -61,6 +63,11 @@
default: '',
},
},
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
form: {
diff --git a/src/views/Settings/Network/ModalIpv4.vue b/src/views/Settings/Network/ModalIpv4.vue
index dcf4a57..2c3d9e8 100644
--- a/src/views/Settings/Network/ModalIpv4.vue
+++ b/src/views/Settings/Network/ModalIpv4.vue
@@ -90,7 +90,9 @@
<script>
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
-import { ipAddress, required } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+
+import { ipAddress, required } from '@vuelidate/validators';
export default {
mixins: [VuelidateMixin],
@@ -100,6 +102,11 @@
default: '',
},
},
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
form: {
diff --git a/src/views/Settings/Network/ModalMacAddress.vue b/src/views/Settings/Network/ModalMacAddress.vue
index d563f4c..307eb8d 100644
--- a/src/views/Settings/Network/ModalMacAddress.vue
+++ b/src/views/Settings/Network/ModalMacAddress.vue
@@ -50,7 +50,9 @@
<script>
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
-import { macAddress, required } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+
+import { macAddress, required } from '@vuelidate/validators';
export default {
mixins: [VuelidateMixin],
@@ -60,6 +62,11 @@
default: '',
},
},
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
form: {
diff --git a/src/views/Settings/PowerRestorePolicy/PowerRestorePolicy.vue b/src/views/Settings/PowerRestorePolicy/PowerRestorePolicy.vue
index 11870a8..dfa4865 100644
--- a/src/views/Settings/PowerRestorePolicy/PowerRestorePolicy.vue
+++ b/src/views/Settings/PowerRestorePolicy/PowerRestorePolicy.vue
@@ -25,6 +25,8 @@
import PageTitle from '@/components/Global/PageTitle';
import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
+
import BVToastMixin from '@/components/Mixins/BVToastMixin';
export default {
@@ -35,6 +37,11 @@
this.hideLoader();
next();
},
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
policyValue: null,
diff --git a/src/views/Settings/SnmpAlerts/ModalAddDestination.vue b/src/views/Settings/SnmpAlerts/ModalAddDestination.vue
index 9637652..f52acd7 100644
--- a/src/views/Settings/SnmpAlerts/ModalAddDestination.vue
+++ b/src/views/Settings/SnmpAlerts/ModalAddDestination.vue
@@ -82,16 +82,17 @@
</template>
<script>
-import {
- required,
- ipAddress,
- minValue,
- maxValue,
-} from 'vuelidate/lib/validators';
+import { required, ipAddress, minValue, maxValue } from '@vuelidate/validators';
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { useVuelidate } from '@vuelidate/core';
export default {
mixins: [VuelidateMixin],
+ setup() {
+ return {
+ v$: useVuelidate(),
+ };
+ },
data() {
return {
form: {