summaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/AppHeader/AppHeader.vue190
-rw-r--r--src/components/AppNavigation/AppNavigation.vue33
-rw-r--r--src/components/AppNavigation/AppNavigationMixin.js479
-rw-r--r--src/components/Global/Alert.vue2
-rw-r--r--src/components/Global/FormFile.vue56
-rw-r--r--src/components/Global/Search.vue9
-rw-r--r--src/components/Global/SilaComponents/PopoverWithSlot.vue2
-rw-r--r--src/components/Global/StatusIcon.vue22
-rw-r--r--src/components/Global/TableDateFilter.vue6
-rw-r--r--src/components/Global/TableToolbar.vue2
-rw-r--r--src/components/SubHeader/SubHeader.vue17
11 files changed, 398 insertions, 420 deletions
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index 81287163..a577b452 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -32,7 +32,7 @@
<b-navbar-nav>
<b-navbar-brand
class="mr-0 app-logo"
- to="/"
+ to="/hardware-status/inventory"
data-test-id="appHeader-container-overview"
>
<img
@@ -41,16 +41,18 @@
/>
</b-navbar-brand>
<div v-if="isNavTagPresent" :key="routerKey" class="pl-2 nav-tags">
- <span>|</span>
- <span class="pl-3 asset-tag">{{ assetTag }}</span>
- <span class="pl-3">{{ modelType }}</span>
- <span class="pl-3">{{ serialNumber }}</span>
+ <span style="color: white">|</span>
+ <span style="color: white" class="pl-2 asset-tag">{{
+ assetTag
+ }}</span>
+ <span style="color: white" class="pl-2">{{ modelType }}</span>
+ <span style="color: white" class="pl-2">{{ serialNumber }}</span>
</div>
</b-navbar-nav>
- <!-- Right aligned nav items -->
- <b-navbar-nav class="helper-menu">
+ <!-- Left nav items-->
+ <!-- <b-navbar-nav class="helper-menu">
<b-nav-item
- to="/"
+ to="/hardware-status/inventory"
data-test-id="appHeader-container-health"
class="nav-top-button"
:class="{
@@ -77,7 +79,7 @@
{{ $t('appHeader.informationAndFAQ') }}
</b-nav-item>
- <b-nav-item
+ <b-nav-item
to="/support"
data-test-id="appHeader-container-power"
class="nav-top-button"
@@ -88,87 +90,67 @@
}"
>
{{ $t('appHeader.support') }}
- </b-nav-item>
- </b-navbar-nav>
- <!-- Left nav items-->
- <img
- class="header-clock__icon"
- src="@/assets/images/header/header-clock.svg"
- />
- <span style="color: white">15:54:00</span>
- <b-nav-item
- to="/logs/event-logs"
- data-test-id="appHeader-container-health"
- style="display: block"
- >
- <status-icon :status="healthStatusIcon" />
- {{ $t('appHeader.health') }}
- </b-nav-item>
- <b-nav-item
- to="/operations/server-power-operations"
- data-test-id="appHeader-container-power"
- style="display: block"
- >
- <status-icon :status="serverStatusIcon" />
- {{ $t('appHeader.power') }}
- </b-nav-item>
- <div class="nav-item">
- <b-button
- id="app-header-refresh"
- variant="link"
- data-test-id="appHeader-button-refresh"
- @click="refresh"
- >
- <icon-renew :title="$t('appHeader.titleRefresh')" />
- <span class="responsive-text">{{ $t('appHeader.refresh') }}</span>
- </b-button>
- </div>
- <div class="nav-item">
- <b-dropdown
- id="app-header-user"
- variant="link"
- right
- data-test-id="appHeader-container-user"
- >
- <template #button-content>
- <icon-avatar :title="$t('appHeader.titleProfile')" />
- <span class="responsive-text">{{ username }}</span>
- </template>
- <b-dropdown-item
- to="/profile-settings"
- data-test-id="appHeader-link-profile"
- >{{ $t('appHeader.profileSettings') }}
- </b-dropdown-item>
- <b-dropdown-item
- data-test-id="appHeader-link-logout"
- @click="logout"
+ </b-nav-item>
+ </b-navbar-nav> -->
+ <!-- Right aligned nav items -->
+ <b-navbar-nav class="ml-auto helper-menu">
+ <li class="nav-item">
+ <b-button
+ variant="link"
+ data-test-id="appHeader-container-health"
+ @click="toLogs"
>
- {{ $t('appHeader.logOut') }}
- </b-dropdown-item>
- </b-dropdown>
- </div>
- <!-- <img
- style="margin-left: 20px"
- class="header-avatar__icon"
- src="@/assets/images/header/header-avatar.svg"
- />
- <span style="color: white">Маргарита тутова</span> -->
- <b-button id="app-header-notification" class="app-header-notification">
- <img
- class="header-notification__icon"
- src="@/assets/images/header/icon-notification.svg"
- />
- </b-button>
- <b-button
- id="app-header-logout"
- class="app-header-logout"
- @click="logout"
- >
- <img
- class="header-logout__icon"
- src="@/assets/images/header/logout-icon.svg"
- />
- </b-button>
+ <status-icon :status="healthStatusIcon" />
+ <span>{{ $t('appHeader.health') }}</span>
+ </b-button>
+ </li>
+ <li class="nav-item">
+ <b-button
+ variant="link"
+ data-test-id="appHeader-container-power"
+ @click="toOperations"
+ >
+ <status-icon :status="serverStatusIcon" />
+ <span>{{ $t('appHeader.power') }}</span>
+ </b-button>
+ </li>
+ <!-- Using LI elements instead of b-nav-item to support semantic button elements -->
+ <li class="nav-item">
+ <b-button
+ id="app-header-refresh"
+ variant="link"
+ data-test-id="appHeader-button-refresh"
+ @click="refresh"
+ >
+ <icon-renew :title="$t('appHeader.titleRefresh')" />
+ <span class="responsive-text">{{ $t('appHeader.refresh') }}</span>
+ </b-button>
+ </li>
+ <li class="nav-item">
+ <b-dropdown
+ id="app-header-user"
+ variant="link"
+ right
+ data-test-id="appHeader-container-user"
+ >
+ <template #button-content>
+ <icon-avatar :title="$t('appHeader.titleProfile')" />
+ <span class="responsive-text">{{ username }}</span>
+ </template>
+ <b-dropdown-item
+ to="/profile-settings"
+ data-test-id="appHeader-link-profile"
+ >{{ $t('appHeader.profileSettings') }}
+ </b-dropdown-item>
+ <b-dropdown-item
+ data-test-id="appHeader-link-logout"
+ @click="logout"
+ >
+ {{ $t('appHeader.logOut') }}
+ </b-dropdown-item>
+ </b-dropdown>
+ </li>
+ </b-navbar-nav>
</b-navbar>
</header>
</div>
@@ -180,7 +162,7 @@ import IconClose from '@carbon/icons-vue/es/close/20';
import IconMenu from '@carbon/icons-vue/es/menu/20';
import IconAvatar from '@carbon/icons-vue/es/user--avatar/20';
import IconRenew from '@carbon/icons-vue/es/renew/20';
-// import StatusIcon from '@/components/Global/StatusIcon';
+import StatusIcon from '@/components/Global/StatusIcon';
export default {
name: 'AppHeader',
components: {
@@ -188,7 +170,7 @@ export default {
IconMenu,
IconAvatar,
IconRenew,
- // StatusIcon,
+ StatusIcon,
},
mixins: [BVToastMixin],
props: {
@@ -295,6 +277,12 @@ export default {
event.preventDefault();
this.$root.$emit('skip-navigation');
},
+ toLogs() {
+ this.$router.push('/logs/event-logs').catch(() => {});
+ },
+ toOperations() {
+ this.$router.push('/operations/server-power-operations').catch(() => {});
+ },
},
};
</script>
@@ -348,8 +336,16 @@ export default {
.navbar {
padding: 0;
background-color: $navbar-color;
+ svg {
+ margin-right: 2px;
+ }
+ .status-icon {
+ svg {
+ vertical-align: text-bottom;
+ }
+ }
@include media-breakpoint-up($responsive-layout-bp) {
- height: $top-header-height;
+ height: $first-header-height;
}
.helper-menu {
@@ -395,8 +391,8 @@ export default {
.nav-trigger {
fill: theme-color('light');
- width: $top-header-height;
- height: $top-header-height;
+ width: $first-header-height;
+ height: $first-header-height;
transition: none;
display: inline-flex;
flex: 0 0 20px;
@@ -437,7 +433,7 @@ export default {
.navbar-brand {
padding: $spacer/2;
- height: $top-header-height;
+ height: $first-header-height;
line-height: 1;
&:focus {
box-shadow: inset 0 0 0 3px $navbar-color, inset 0 0 0 5px color('white');
@@ -445,10 +441,6 @@ export default {
}
}
-.header-clock__icon {
- margin-left: auto;
-}
-
.app-header-logout,
.app-header-notification {
margin: 0 5px;
diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index 1cdb7120..481818c3 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -1,33 +1,6 @@
<template>
<div>
<div class="nav-container" :class="{ open: isNavigationOpen }">
- <div class="navbar__search_select_container">
- <div class="server-form">
- <img
- class="server__icon"
- src="@/assets/images/sila-server-navbar-icon.svg"
- />
- <b-form-group class="server-pagination-select">
- <b-form-select
- v-model="server"
- class="server-select"
- :options="servers"
- />
- </b-form-group>
- </div>
- <div class="nav-line"></div>
- <div class="form-control server-search">
- <button class="search-button">
- <img class="server__icon" src="@/assets/images/search-icon.svg" />
- </button>
- <b-form-input
- type="text"
- class="nav-search__input"
- placeholder="Поиск по серверу"
- >
- </b-form-input>
- </div>
- </div>
<nav ref="nav" :aria-label="$t('appNavigation.primaryNavigation')">
<b-nav vertical>
<template v-for="(navItem, index) in sideBar">
@@ -110,9 +83,9 @@ export default {
computed: {
sideBar() {
if (
- this.$route.path === '/console-settings' ||
- this.$route.path === '/console/serial-over-lan' ||
- this.$route.path === '/console/kvm'
+ this.$route.path === '/console/settings' ||
+ this.$route.path === '/operations/serial-over-lan' ||
+ this.$route.path === '/operations/kvm'
) {
return this.kvmNavigationItems;
} else {
diff --git a/src/components/AppNavigation/AppNavigationMixin.js b/src/components/AppNavigation/AppNavigationMixin.js
index 241a8f3b..c51636d5 100644
--- a/src/components/AppNavigation/AppNavigationMixin.js
+++ b/src/components/AppNavigation/AppNavigationMixin.js
@@ -15,33 +15,18 @@ export const AppNavigationMixin = {
{
id: 'info',
label: this.$t('appNavigation.overviewInfo'),
- route: '/',
+ route: '/hardware-status/inventory',
},
{
id: 'network',
label: this.$t('appNavigation.networkParametrs'),
- route: '/network-parametrs',
- },
- {
- id: 'event-logs',
- label: this.$t('appNavigation.eventLogs'),
- route: '/event-logs',
- },
- {
- id: 'server-parametrs',
- label: this.$t('appNavigation.serverParam'),
- route: '/server-parametrs',
+ route: '/settings/network',
},
{
id: 'date-time',
label: this.$t('appNavigation.dateTime'),
route: '/settings/date-time',
},
- {
- id: 'server-power-operations',
- label: this.$t('appNavigation.serverPowerOperations'),
- route: '/operations/server-power-operations',
- },
],
},
{
@@ -54,185 +39,185 @@ export const AppNavigationMixin = {
label: this.$t('appNavigation.config'),
route: '/bmc-configuration',
},
- {
- id: 'bmc-firmware',
- label: this.$t('appNavigation.deviceFirmware'),
- route: '/bmc-firmware',
- },
- {
- id: 'bmc-settings',
- label: this.$t('appNavigation.broadcast'),
- route: '/bmc-settings',
- },
- ],
- },
- {
- id: 'analytical-panel',
- label: this.$t('appNavigation.analyticalPanel'),
- route: '/analytical-panel',
- },
- {
- id: 'RAID',
- label: this.$t('appNavigation.raidControllers'),
- icon: 'iconChevronUp',
- children: [
- {
- id: 'raid-specification',
- label: this.$t('appNavigation.specification'),
- route: '/raid-specification',
- },
- {
- id: 'raid-settings',
- label: this.$t('appNavigation.settings'),
- route: '/raid-settings',
- },
- {
- id: 'raid-cache',
- label: this.$t('RAID.cache'),
- route: '/raid-cache',
- },
- ],
- },
- {
- id: 'processors',
- label: this.$t('appNavigation.processors'),
- icon: 'iconChevronUp',
- children: [
- {
- id: 'processors-specification',
- label: this.$t('appNavigation.specification'),
- route: '/processors-specification',
- },
- {
- id: 'processors-dynamic-info',
- label: this.$t('appNavigation.analyticalPanel'),
- route: '/processors-dynamic-info',
- },
- ],
- },
- {
- id: 'power',
- label: this.$t('appNavigation.powerSupplies'),
- icon: 'iconChevronUp',
- children: [
- {
- id: 'power-specification',
- label: this.$t('appNavigation.specification'),
- route: '/power-specification',
- },
- {
- id: 'power-dynamic-info',
- label: this.$t('appNavigation.analyticalPanel'),
- route: '/power-dynamic-info',
- },
- ],
- },
- {
- id: 'memory',
- label: this.$t('appNavigation.memoryModules'),
- icon: 'iconChevronUp',
- children: [
- {
- id: 'memory-specification',
- label: this.$t('appNavigation.specification'),
- route: '/memory-specification',
- },
- {
- id: 'memory-dynamic-info',
- label: this.$t('appNavigation.analyticalPanel'),
- route: '/memory-dynamic-info',
- },
- ],
- },
- {
- id: 'fans',
- label: this.$t('appNavigation.fans'),
- icon: 'iconChevronUp',
- children: [
- {
- id: 'fans-static',
- label: this.$t('appNavigation.statisticInformation'),
- route: '/fans-static',
- },
- {
- id: 'fans',
- label: this.$t('appNavigation.dynamicInformation'),
- route: '/fans',
- },
+ // {
+ // id: 'bmc-firmware',
+ // label: this.$t('appNavigation.deviceFirmware'),
+ // route: '/bmc-firmware',
+ // },
+ // {
+ // id: 'bmc-settings',
+ // label: this.$t('appNavigation.broadcast'),
+ // route: '/bmc-settings',
+ // },
],
},
- {
- id: 'physical-drives',
- label: this.$t('appNavigation.physicalDrives'),
- icon: 'iconChevronUp',
- children: [
- {
- id: 'drivers-static',
- label: this.$t('appNavigation.statisticInformation'),
- route: '/drivers-static',
- },
- {
- id: 'drivers',
- label: this.$t('appNavigation.analyticalPanel'),
- route: '/drivers',
- },
- ],
- },
- {
- id: 'virtual-drivers',
- label: this.$t('appNavigation.virtualDrivers'),
- route: '/virtual-drivers',
- },
- {
- id: 'motherboard',
- label: this.$t('appNavigation.motherboard'),
- icon: 'iconChevronUp',
- children: [
- {
- id: 'motherboard-specification',
- label: this.$t('appNavigation.specification'),
- route: '/motherboard-specification',
- },
- {
- id: 'motherboard-dynamic-info',
- label: this.$t('appNavigation.analyticalPanel'),
- route: '/motherboard-dynamic-info',
- },
- ],
- },
- {
- id: 'network-adapters',
- label: this.$t('appNavigation.networkAdapters'),
- icon: 'iconChevronUp',
- children: [
- {
- id: 'network-adapters-ethernet',
- label: this.$t('appNavigation.ethernetAdapters'),
- route: '/network-adapters-ethernet',
- },
- {
- id: 'network-adapters-fc-hba',
- label: this.$t('appNavigation.fcHbaAdapters'),
- route: '/network-adapters-fc-hba',
- },
- {
- id: 'network-adapters-pannel',
- label: this.$t('appNavigation.analyticalPanel'),
- route: '/network-adapters-pannel',
- },
- ],
- },
- {
- id: 'pci-devices',
- label: this.$t('appNavigation.pciDevices'),
- route: '/pci-devices',
- },
+ // {
+ // id: 'analytical-panel',
+ // label: this.$t('appNavigation.analyticalPanel'),
+ // route: '/analytical-panel',
+ // },
+ // {
+ // id: 'RAID',
+ // label: this.$t('appNavigation.raidControllers'),
+ // icon: 'iconChevronUp',
+ // children: [
+ // {
+ // id: 'raid-specification',
+ // label: this.$t('appNavigation.specification'),
+ // route: '/raid-specification',
+ // },
+ // {
+ // id: 'raid-settings',
+ // label: this.$t('appNavigation.settings'),
+ // route: '/raid-settings',
+ // },
+ // {
+ // id: 'raid-cache',
+ // label: this.$t('RAID.cache'),
+ // route: '/raid-cache',
+ // },
+ // ],
+ // },
+ // {
+ // id: 'processors',
+ // label: this.$t('appNavigation.processors'),
+ // icon: 'iconChevronUp',
+ // children: [
+ // {
+ // id: 'processors-specification',
+ // label: this.$t('appNavigation.specification'),
+ // route: '/processors-specification',
+ // },
+ // {
+ // id: 'processors-dynamic-info',
+ // label: this.$t('appNavigation.analyticalPanel'),
+ // route: '/processors-dynamic-info',
+ // },
+ // ],
+ // },
+ // {
+ // id: 'power',
+ // label: this.$t('appNavigation.powerSupplies'),
+ // icon: 'iconChevronUp',
+ // children: [
+ // {
+ // id: 'power-specification',
+ // label: this.$t('appNavigation.specification'),
+ // route: '/power-specification',
+ // },
+ // {
+ // id: 'power-dynamic-info',
+ // label: this.$t('appNavigation.analyticalPanel'),
+ // route: '/power-dynamic-info',
+ // },
+ // ],
+ // },
+ // {
+ // id: 'memory',
+ // label: this.$t('appNavigation.memoryModules'),
+ // icon: 'iconChevronUp',
+ // children: [
+ // {
+ // id: 'memory-specification',
+ // label: this.$t('appNavigation.specification'),
+ // route: '/memory-specification',
+ // },
+ // {
+ // id: 'memory-dynamic-info',
+ // label: this.$t('appNavigation.analyticalPanel'),
+ // route: '/memory-dynamic-info',
+ // },
+ // ],
+ // },
+ // {
+ // id: 'fans',
+ // label: this.$t('appNavigation.fans'),
+ // icon: 'iconChevronUp',
+ // children: [
+ // {
+ // id: 'fans-static',
+ // label: this.$t('appNavigation.statisticInformation'),
+ // route: '/fans-static',
+ // },
+ // {
+ // id: 'fans',
+ // label: this.$t('appNavigation.dynamicInformation'),
+ // route: '/fans',
+ // },
+ // ],
+ // },
+ // {
+ // id: 'physical-drives',
+ // label: this.$t('appNavigation.physicalDrives'),
+ // icon: 'iconChevronUp',
+ // children: [
+ // {
+ // id: 'drivers-static',
+ // label: this.$t('appNavigation.statisticInformation'),
+ // route: '/drivers-static',
+ // },
+ // {
+ // id: 'drivers',
+ // label: this.$t('appNavigation.analyticalPanel'),
+ // route: '/drivers',
+ // },
+ // ],
+ // },
+ // {
+ // id: 'virtual-drivers',
+ // label: this.$t('appNavigation.virtualDrivers'),
+ // route: '/virtual-drivers',
+ // },
+ // {
+ // id: 'motherboard',
+ // label: this.$t('appNavigation.motherboard'),
+ // icon: 'iconChevronUp',
+ // children: [
+ // {
+ // id: 'motherboard-specification',
+ // label: this.$t('appNavigation.specification'),
+ // route: '/motherboard-specification',
+ // },
+ // {
+ // id: 'motherboard-dynamic-info',
+ // label: this.$t('appNavigation.analyticalPanel'),
+ // route: '/motherboard-dynamic-info',
+ // },
+ // ],
+ // },
+ // {
+ // id: 'network-adapters',
+ // label: this.$t('appNavigation.networkAdapters'),
+ // icon: 'iconChevronUp',
+ // children: [
+ // {
+ // id: 'network-adapters-ethernet',
+ // label: this.$t('appNavigation.ethernetAdapters'),
+ // route: '/network-adapters-ethernet',
+ // },
+ // {
+ // id: 'network-adapters-fc-hba',
+ // label: this.$t('appNavigation.fcHbaAdapters'),
+ // route: '/network-adapters-fc-hba',
+ // },
+ // {
+ // id: 'network-adapters-pannel',
+ // label: this.$t('appNavigation.analyticalPanel'),
+ // route: '/network-adapters-pannel',
+ // },
+ // ],
+ // },
+ // {
+ // id: 'pci-devices',
+ // label: this.$t('appNavigation.pciDevices'),
+ // route: '/pci-devices',
+ // },
///////////////////////////old tabs
- {
- id: 'overview',
- label: 'Обзор',
- route: '/Info',
- },
+ // {
+ // id: 'overview',
+ // label: 'Обзор',
+ // route: '/Info',
+ // },
{
id: 'logs',
label: this.$t('appNavigation.logs'),
@@ -241,7 +226,7 @@ export const AppNavigationMixin = {
{
id: 'event-logs',
label: this.$t('appNavigation.eventLogs'),
- route: '/logs/event-logs-old',
+ route: '/logs/event-logs',
},
{
id: 'post-code-logs',
@@ -250,23 +235,18 @@ export const AppNavigationMixin = {
},
],
},
- {
- id: 'hardware-status',
- label: this.$t('appNavigation.hardwareStatus'),
- icon: 'iconChevronUp',
- children: [
- {
- id: 'inventory',
- label: this.$t('appNavigation.inventory'),
- route: '/hardware-status/inventory',
- },
- {
- id: 'sensors',
- label: this.$t('appNavigation.sensors'),
- route: '/hardware-status/sensors',
- },
- ],
- },
+ // {
+ // id: 'hardware-status',
+ // label: this.$t('appNavigation.hardwareStatus'),
+ // icon: 'iconChevronUp',
+ // children: [
+ // {
+ // id: 'sensors',
+ // label: this.$t('appNavigation.sensors'),
+ // route: '/hardware-status/sensors',
+ // },
+ // ],
+ // },
{
id: 'operations',
label: this.$t('appNavigation.operations'),
@@ -304,25 +284,27 @@ export const AppNavigationMixin = {
},
],
},
- {
- id: 'settings',
- label: this.$t('appNavigation.settings'),
- children: [
- {
- id: 'network',
- label: this.$t('appNavigation.network'),
- route: '/settings/network',
- },
- {
- id: 'power-restore-policy',
- label: this.$t('appNavigation.powerRestorePolicy'),
- route: '/settings/power-restore-policy',
- },
- ],
- },
+ // {
+ // id: 'settings',
+ // label: this.$t('appNavigation.settings'),
+ // icon: 'iconChevronUp',
+ // children: [
+ // {
+ // id: 'network',
+ // label: this.$t('appNavigation.network'),
+ // route: '/settings/network',
+ // },
+ // {
+ // id: 'power-restore-policy',
+ // label: this.$t('appNavigation.powerRestorePolicy'),
+ // route: '/settings/power-restore-policy',
+ // },
+ // ],
+ // },
{
id: 'security-and-access',
label: this.$t('appNavigation.securityAndAccess'),
+ icon: 'iconChevronUp',
children: [
{
id: 'sessions',
@@ -351,17 +333,18 @@ export const AppNavigationMixin = {
},
],
},
- {
- id: 'resource-management',
- label: this.$t('appNavigation.resourceManagement'),
- children: [
- {
- id: 'power',
- label: this.$t('appNavigation.power'),
- route: '/resource-management/power',
- },
- ],
- },
+ // {
+ // id: 'resource-management',
+ // label: this.$t('appNavigation.resourceManagement'),
+ // icon: 'iconChevronUp',
+ // children: [
+ // {
+ // id: 'power',
+ // label: this.$t('appNavigation.power'),
+ // route: '/resource-management/power',
+ // },
+ // ],
+ // },
],
};
},
@@ -371,20 +354,20 @@ export const KvmNavigationMixin = {
data() {
return {
kvmNavigationItems: [
+ // {
+ // id: 'console-settings',
+ // label: this.$t('appPageTitle.consoleSettings'),
+ // route: '/console/settings',
+ // },
{
- id: 'console-settings',
- label: this.$t('kvmNavigation.ConsoleSettings'),
- route: '/console-settings',
+ id: 'kvm',
+ label: this.$t('appNavigation.kvm'),
+ route: '/operations/kvm',
},
{
id: 'serial-over-lan',
- label: this.$t('kvmNavigation.serialOverLan'),
- route: '/console/serial-over-lan',
- },
- {
- id: 'kvm',
- label: this.$t('kvmNavigation.kvm'),
- route: '/console/kvm',
+ label: this.$t('appPageTitle.serialOverLan'),
+ route: '/operations/serial-over-lan',
},
],
};
diff --git a/src/components/Global/Alert.vue b/src/components/Global/Alert.vue
index e8de9e27..0109e7d2 100644
--- a/src/components/Global/Alert.vue
+++ b/src/components/Global/Alert.vue
@@ -12,7 +12,7 @@
<status-icon :status="variant" />
</div>
<div class="alert-content">
- <div class="alert-msg">
+ <div class="alert-msg regular-14px">
<slot />
</div>
</div>
diff --git a/src/components/Global/FormFile.vue b/src/components/Global/FormFile.vue
index cf713acf..18c542c3 100644
--- a/src/components/Global/FormFile.vue
+++ b/src/components/Global/FormFile.vue
@@ -1,26 +1,38 @@
<template>
<div class="custom-form-file-container">
<label>
- <b-form-file
- :id="id"
- v-model="file"
- :accept="accept"
- :disabled="disabled"
- :state="state"
- plain
- @input="$emit('input', file)"
+ <b-modal
+ :id="`modal-${id}`"
+ body-class="modal-file-body"
+ :title="$t('pageKvm.addImage_modal')"
+ hide-footer
>
- </b-form-file>
- <span
- class="add-file-btn btn"
+ <div class="file-input_container">
+ <b-form-file
+ :id="id"
+ v-model="file"
+ :accept="accept"
+ :disabled="disabled"
+ :state="state"
+ placeholder="Нажмите на область или перетащите в нее файл"
+ drop-placeholder="Отпустите, чтобы добавить файл"
+ @input="$emit('input', file)"
+ >
+ </b-form-file>
+ </div>
+ </b-modal>
+ <b-button
+ size="lg"
+ class="add-file-btn"
:class="{
disabled,
'btn-secondary': isSecondary,
'btn-primary': !isSecondary,
}"
+ @click="$bvModal.show(`modal-${id}`)"
>
{{ $t('global.fileUpload.browseText') }}
- </span>
+ </b-button>
<slot name="invalid"></slot>
</label>
<div v-if="file" class="clear-selected-file px-3 py-2 mt-2">
@@ -78,9 +90,15 @@ export default {
return this.variant === 'secondary';
},
},
+ watch: {
+ file() {
+ if (this.file) {
+ this.$bvModal.hide(`modal-${this.id}`);
+ }
+ },
+ },
};
</script>
-
<style lang="scss" scoped>
.form-control-file {
opacity: 0;
@@ -116,4 +134,16 @@ export default {
}
}
}
+
+.file-input_container {
+ width: 100%;
+ height: 400px;
+ background-color: $surface-secondary;
+ border-top: 1px solid #f3f4f5;
+ border-radius: 0 0 16px 16px;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
</style>
diff --git a/src/components/Global/Search.vue b/src/components/Global/Search.vue
index ac8f9bfb..ce097fcb 100644
--- a/src/components/Global/Search.vue
+++ b/src/components/Global/Search.vue
@@ -1,11 +1,12 @@
<template>
<div class="search-global">
- <b-form-group
- :label="$t('global.form.search')"
+ <!--<b-form-group
+ :label="$t('global.form.search')"
:label-for="`searchInput-${_uid}`"
label-class="invisible"
- class="mb-2"
- >
+ class="mb-2"
+ >-->
+ <b-form-group>
<b-input-group size="md" class="align-items-center">
<b-input-group-prepend>
<icon-search class="search-icon" />
diff --git a/src/components/Global/SilaComponents/PopoverWithSlot.vue b/src/components/Global/SilaComponents/PopoverWithSlot.vue
index a9ec649b..44fb9640 100644
--- a/src/components/Global/SilaComponents/PopoverWithSlot.vue
+++ b/src/components/Global/SilaComponents/PopoverWithSlot.vue
@@ -135,7 +135,6 @@ export default {
// updated & popover positioned first
this.$nextTick(() => {
this.$nextTick(() => {
- console.log(ref);
(ref.$el || ref).focus();
});
});
@@ -158,6 +157,7 @@ export default {
margin: 0 28px 0 auto;
background: none;
border: none;
+ height: 25px;
&:active {
background-color: $faint-secondary-primary-5-hover !important;
box-shadow: none !important;
diff --git a/src/components/Global/StatusIcon.vue b/src/components/Global/StatusIcon.vue
index fb818451..8f9e3d53 100644
--- a/src/components/Global/StatusIcon.vue
+++ b/src/components/Global/StatusIcon.vue
@@ -1,32 +1,28 @@
<template>
<span :class="['status-icon', status]">
<icon-info v-if="status === 'info'" />
- <img
- v-else-if="status === 'success'"
- class="status__img"
- src="@/assets/images/status/on.svg"
- />
+ <icon-success v-else-if="status === 'success'" />
<icon-warning v-else-if="status === 'warning'" />
- <img
- v-else-if="status === 'danger'"
- class="status__img"
- src="@/assets/images/status/off.svg"
- />
+ <icon-danger v-else-if="status === 'danger'" />
<icon-secondary v-else />
</span>
</template>
<script>
-import IconInfo from '@carbon/icons-vue/es/information--filled/20';
-import IconWarning from '@carbon/icons-vue/es/warning--filled/20';
-import IconError from '@carbon/icons-vue/es/error--filled/20';
+import IconInfo from '@carbon/icons-vue/es/information/20';
+import IconCheckmark from '@carbon/icons-vue/es/checkmark--outline/20';
+import IconWarning from '@carbon/icons-vue/es/warning/20';
+import IconError from '@carbon/icons-vue/es/error--outline/20';
+import IconMisuse from '@carbon/icons-vue/es/misuse--outline/20';
export default {
name: 'StatusIcon',
components: {
IconInfo: IconInfo,
+ iconSuccess: IconCheckmark,
iconSecondary: IconError,
iconWarning: IconWarning,
+ iconDanger: IconMisuse,
},
props: {
status: {
diff --git a/src/components/Global/TableDateFilter.vue b/src/components/Global/TableDateFilter.vue
index aa10cb5c..3094b6ea 100644
--- a/src/components/Global/TableDateFilter.vue
+++ b/src/components/Global/TableDateFilter.vue
@@ -1,9 +1,10 @@
<template>
- <b-row class="mb-2">
+ <b-row class="mb-2 mt-2">
<b-col class="d-sm-flex">
<b-form-group
:label="$t('global.table.fromDate')"
label-for="input-from-date"
+ label-class="caption-12px mb-0"
class="mr-3 my-0 w-100"
>
<b-input-group>
@@ -12,7 +13,7 @@
v-model="fromDate"
placeholder="YYYY-MM-DD"
:state="getValidationState($v.fromDate)"
- class="form-control-with-button mb-3 mb-md-0"
+ class="form-control-with-button mb-md-0"
@blur="$v.fromDate.$touch()"
/>
<b-form-invalid-feedback role="alert">
@@ -50,6 +51,7 @@
<b-form-group
:label="$t('global.table.toDate')"
label-for="input-to-date"
+ label-class="caption-12px mb-0"
class="my-0 w-100"
>
<b-input-group>
diff --git a/src/components/Global/TableToolbar.vue b/src/components/Global/TableToolbar.vue
index eabe0c98..4137d98c 100644
--- a/src/components/Global/TableToolbar.vue
+++ b/src/components/Global/TableToolbar.vue
@@ -68,8 +68,6 @@ export default {
};
</script>
<style lang="scss" scoped>
-$toolbar-height: 64px;
-
.toolbar-container {
width: calc(100vw - 320px);
height: $toolbar-height;
diff --git a/src/components/SubHeader/SubHeader.vue b/src/components/SubHeader/SubHeader.vue
index 9d8a1b88..72bc955e 100644
--- a/src/components/SubHeader/SubHeader.vue
+++ b/src/components/SubHeader/SubHeader.vue
@@ -5,7 +5,7 @@
<!-- top navigation menu -->
<b-navbar-nav>
<b-nav-item
- to="/"
+ to="/hardware-status/inventory"
data-test-id="appHeader-container-health"
class="subheader-button"
:class="{
@@ -15,6 +15,7 @@
'support',
'console-settings',
'console',
+ 'operations',
'security-and-access',
].includes($route.path.split('/')[1]),
}"
@@ -23,14 +24,16 @@
</b-nav-item>
<b-nav-item
- to="/console-settings"
+ to="/operations/kvm"
data-test-id="appHeader-container-health"
class="subheader-button"
:class="{
'active-route-top':
- ''.includes($route.path.split('/console-settings')[1]) ||
- ''.includes($route.path.split('/console/serial-over-lan')[1]) ||
- ''.includes($route.path.split('/console/kvm')[1]),
+ ''.includes($route.path.split('/console/settings')[1]) ||
+ ''.includes(
+ $route.path.split('/operations/serial-over-lan')[1]
+ ) ||
+ ''.includes($route.path.split('/operations/kvm')[1]),
}"
>
{{ $t('subHeader.console') }}
@@ -105,7 +108,7 @@ export default {
box-shadow: inset 0 0 0 3px $padding-color, inset 0 0 0 5px $outline-color;
}
.sub-header {
- height: 39px;
+ height: $second-header-height;
.subheader-button {
margin-left: 10px;
@@ -133,7 +136,7 @@ export default {
padding: 0;
background-color: $navbar-color;
@include media-breakpoint-up($responsive-layout-bp) {
- height: 39px;
+ height: $second-header-height;
}
.helper-menu {
generated by cgit v1.2.3 (git 2.39.0) at 2024-10-03 05:50:28 +0300