summaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/AppNavigation/AppNavigation.vue2
-rw-r--r--src/components/AppNavigation/AppNavigationMixin.js173
-rw-r--r--src/components/Global/Popover.vue23
-rw-r--r--src/components/Global/SilaComponents/ApplySettingsPopover.vue163
-rw-r--r--src/components/Global/SilaComponents/DataTabs.vue136
-rw-r--r--src/components/Global/SilaComponents/DateSwitch.vue2
-rw-r--r--src/components/Global/SilaComponents/InventoryControlSystem.vue9
-rw-r--r--src/components/Global/SilaComponents/NtpPopover.vue4
-rw-r--r--src/components/Global/SilaComponents/TwoChiocePopover.vue117
9 files changed, 514 insertions, 115 deletions
diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index 84b81ac6..1cdb7120 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -268,7 +268,7 @@ svg {
top: $header-height;
bottom: 0;
left: 0;
- z-index: $zindex-fixed;
+ z-index: 10;
overflow-y: overlay;
background-color: theme-color('light');
transform: translateX(-$navigation-width);
diff --git a/src/components/AppNavigation/AppNavigationMixin.js b/src/components/AppNavigation/AppNavigationMixin.js
index 7c981ec6..c58553a2 100644
--- a/src/components/AppNavigation/AppNavigationMixin.js
+++ b/src/components/AppNavigation/AppNavigationMixin.js
@@ -56,50 +56,33 @@ export const AppNavigationMixin = {
},
],
},
- // {
- // id: 'analytical-panel',
- // label: this.$t('appNavigation.analyticalPanel'),
- // route: '/',
- // },
- // {
- // id: 'RAID',
- // label: this.$t('appNavigation.raidControllers'),
- // icon: 'iconChevronUp',
- // children: [
- // {
- // id: 'overview-info',
- // label: this.$t('appNavigation.specifications'),
- // route: '/logs/event-logs',
- // },
- // {
- // id: 'post-code-logs',
- // label: this.$t('appNavigation.settings'),
- // route: '/logs/post-code-logs',
- // },
- // {
- // id: 'post-code-logs',
- // label: this.$t('appNavigation.cachRaid'),
- // route: '/logs/post-code-logs',
- // },
- // ],
- // },
- // {
- // id: 'power-supplies',
- // label: this.$t('appNavigation.powerSupplies'),
- // icon: 'iconChevronUp',
- // children: [
- // {
- // id: 'overview-info',
- // label: this.$t('appNavigation.specifications'),
- // route: '/logs/event-logs',
- // },
- // {
- // id: 'post-code-logs',
- // label: this.$t('appNavigation.analyticalPanel'),
- // route: '/logs/post-code-logs',
- // },
- // ],
- // },
+ {
+ 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'),
@@ -169,6 +152,28 @@ export const AppNavigationMixin = {
],
},
{
+ 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',
@@ -185,59 +190,37 @@ export const AppNavigationMixin = {
},
],
},
- // {
- // id: 'physical-drives',
- // label: this.$t('appNavigation.physicalDrives'),
- // icon: 'iconChevronUp',
- // children: [
- // {
- // id: 'overview-info',
- // label: this.$t('appNavigation.specifications'),
- // route: '/logs/event-logs',
- // },
- // {
- // id: 'post-code-logs',
- // label: this.$t('appNavigation.analyticalPanel'),
- // route: '/logs/post-code-logs',
- // },
- // ],
- // },
- // {
- // id: 'virtual-drives',
- // label: this.$t('appNavigation.virtualDrives'),
- // route: '/',
- // },
- // {
- // id: 'network-adapters',
- // label: this.$t('appNavigation.networkAdapters'),
- // icon: 'iconChevronUp',
- // children: [
- // {
- // id: 'overview-info',
- // label: this.$t('appNavigation.ethernetAdapters'),
- // route: '/logs/event-logs',
- // },
- // {
- // id: 'post-code-logs',
- // label: this.$t('appNavigation.fcHbaAdapters'),
- // route: '/logs/post-code-logs',
- // },
- // {
- // id: 'post-code-logs',
- // label: this.$t('appNavigation.analyticalPanel'),
- // route: '/logs/post-code-logs',
- // },
- // ],
- // },
- // {
- // id: 'pci-devises',
- // label: this.$t('appNavigation.pciDevises'),
- // route: '/',
- // },
- //old tabs
+ {
+ 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: 'Страницы BMC webui-vue',
+ label: 'Обзор',
route: '/Info',
},
{
diff --git a/src/components/Global/Popover.vue b/src/components/Global/Popover.vue
index bae121c3..f0b4063f 100644
--- a/src/components/Global/Popover.vue
+++ b/src/components/Global/Popover.vue
@@ -1,7 +1,7 @@
<template>
<div id="my-container">
<div v-if="isclear" :id="id" ref="button" variant="primary" class="pointer">
- <img src="@/assets/images/clear-icon.svg" />
+ <img src="@/assets/images/icon-clear-red.svg" />
<span class="regular-12px red-font">{{ $t(description) }}</span>
</div>
<div
@@ -15,11 +15,22 @@
<span class="regular-12px red-font">{{ $t(description) }}</span>
</div>
+ <div
+ v-else-if="isMicrocodeDrivers"
+ :id="id"
+ ref="button"
+ variant="primary"
+ class="pointer"
+ >
+ <img src="@/assets/images/icon-reload-red.svg" />
+ <span class="semi-bold-16px red-font">{{ $t(description) }}</span>
+ </div>
+
<span
v-else
:id="id"
ref="button"
- class="regular-12px underline pointer"
+ class="regular-12px underline"
variant="primary"
>
{{ $t(description) }}
@@ -104,6 +115,10 @@ export default {
type: Boolean,
default: false,
},
+ isMicrocodeDrivers: {
+ type: Boolean,
+ default: false,
+ },
isclear: {
type: Boolean,
default: false,
@@ -245,10 +260,6 @@ export default {
margin: 0px 5px 0px 15px;
}
-.pointer {
- cursor: pointer;
-}
-
.popover-info {
background-color: $on-surface-primary;
// border: 1px solid $text-primary;
diff --git a/src/components/Global/SilaComponents/ApplySettingsPopover.vue b/src/components/Global/SilaComponents/ApplySettingsPopover.vue
new file mode 100644
index 00000000..57e0844c
--- /dev/null
+++ b/src/components/Global/SilaComponents/ApplySettingsPopover.vue
@@ -0,0 +1,163 @@
+<template>
+ <div class="popover-applay-container">
+ <span class="apply-label regular-12px tretiatry">
+ {{ $t('global.applySettings.apply') }}</span
+ >
+ <b-button :id="`popover-apply-ractive${id}`" variant="unstiled">
+ <span class="regular-12px apply-variant">
+ {{ $t(`global.applySettings.${applyType}`) }}</span
+ >
+ <img class="apply-chevron" src="@/assets/images/icon-chevron-red.svg" />
+ </b-button>
+ <b-popover
+ placement="bottom"
+ triggers="focus"
+ :show.sync="show"
+ custom-class="apply-reload-popover"
+ :target="`popover-apply-ractive${id}`"
+ @hidden="onHidden"
+ >
+ <b-button
+ id="popover-apply-button"
+ variant="popover"
+ :class="{ 'hovered-apply-button': scale === topPosition }"
+ @mouseover="scale = topPosition"
+ @click="
+ () => {
+ show = false;
+ appalyOnReload();
+ }
+ "
+ >
+ При перезагрузке
+ </b-button>
+ <b-button
+ id="popover-apply-button"
+ variant="popover"
+ :class="{ 'hovered-apply-button': scale === middlePosition }"
+ @mouseover="scale = middlePosition"
+ @click="
+ () => {
+ show = false;
+ appalyOption1();
+ }
+ "
+ >
+ Опция 1
+ </b-button>
+ <b-button
+ id="popover-apply-button"
+ variant="popover"
+ :class="{ 'hovered-apply-button': scale === bottomPosition }"
+ @mouseover="scale = bottomPosition"
+ @click="
+ () => {
+ show = false;
+ appalyOption2();
+ }
+ "
+ >
+ Опция 2
+ </b-button>
+ <div class="slider" :style="`left: 5px; top: ${scale}px;`"></div>
+ </b-popover>
+ </div>
+</template>
+
+<script>
+export default {
+ props: {
+ id: {
+ type: Number,
+ default: 1,
+ },
+ appalyOnReload: {
+ type: Function,
+ default: null,
+ },
+ appalyOption1: {
+ type: Function,
+ default: null,
+ },
+ appalyOption2: {
+ type: Function,
+ default: null,
+ },
+ applyType: {
+ type: String,
+ default: 'reload',
+ },
+ },
+ data() {
+ return {
+ topPosition: 5,
+ middlePosition: 33,
+ bottomPosition: 60,
+ show: false,
+ scale: 5,
+ };
+ },
+ methods: {
+ onHidden() {
+ if (this.applyType === 'reload') {
+ this.scale = this.topPosition;
+ } else if (this.applyType === 'option1') {
+ this.scale = this.middlePosition;
+ } else {
+ this.scale = this.bottomPosition;
+ }
+ },
+ },
+};
+</script>
+<style lang="scss">
+.popover-applay-container {
+ display: flex;
+ align-items: baseline;
+ justify-content: flex-end;
+ margin-left: auto;
+}
+
+#popover-apply-ractive {
+ padding-left: 5px;
+}
+
+.hovered-apply-button {
+ color: $white;
+}
+</style>
+<style lang="scss" scoped>
+.apply-label {
+ margin-left: auto;
+}
+
+.apply-chevron {
+ margin: 0 10px 0 5px;
+ cursor: pointer;
+}
+
+#popover-apply-ractive {
+ padding-left: 5px;
+}
+
+.apply-variant {
+ cursor: pointer;
+ color: $red-brand-primary;
+}
+
+#popover-apply-button {
+ justify-content: flex-start;
+ width: 240px;
+}
+
+.slider {
+ width: 240px;
+ height: 28px;
+ border-radius: 8px;
+ background-color: $red-brand-primary;
+ box-shadow: 1px 2px 4px -1px rgb(79 37 37 / 40%) inset;
+ position: absolute;
+ transition: ease-in 0.2s;
+ z-index: -1;
+}
+</style>
diff --git a/src/components/Global/SilaComponents/DataTabs.vue b/src/components/Global/SilaComponents/DataTabs.vue
new file mode 100644
index 00000000..49afbbfb
--- /dev/null
+++ b/src/components/Global/SilaComponents/DataTabs.vue
@@ -0,0 +1,136 @@
+<template>
+ <div>
+ <div
+ ref="content"
+ :class="'tabs-switch'"
+ :style="gridStyle"
+ @wheel.prevent="wheelItBetter($event)"
+ >
+ <span
+ v-for="item in slots"
+ :key="item.id"
+ class="medium-12px scale-item"
+ :class="{ 'tab-active': currentTab === item.id }"
+ :style="`width: ${slotWidth}px`"
+ @click="switchTab(item.id)"
+ >{{ $t(item.name) }}</span
+ >
+ <div class="slider" :style="sliderStyle" />
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ props: {
+ slots: {
+ type: Array,
+ default: null,
+ },
+ currentTab: {
+ type: Number,
+ default: 1,
+ },
+ switchTab: {
+ type: Function,
+ required: true,
+ },
+ slotWidth: {
+ type: Number,
+ default: null,
+ },
+ sliderWidth: {
+ type: Number,
+ default: null,
+ },
+ },
+ data() {
+ return {
+ upHere: false,
+ container: this.$refs.content,
+ };
+ },
+ computed: {
+ sliderStyle() {
+ return {
+ width: `${this.sliderWidth}px`,
+ left: `${
+ ((this.currentTab ? this.currentTab : 1) - 1) * this.slotWidth
+ }px`,
+ };
+ },
+ gridStyle() {
+ return {
+ gridTemplateColumns: `repeat(${this.slots.length}, ${this.slotWidth}px)`,
+ };
+ },
+ },
+ methods: {
+ wheelItBetter(event) {
+ if (event.deltaY < 0) {
+ this.$refs.content.scrollLeft -= 25;
+ } else {
+ this.$refs.content.scrollLeft += 25;
+ }
+ },
+ },
+};
+</script>
+<style lang="scss" scoped>
+.tabs-switch {
+ position: relative;
+ width: calc(95vw - 320px);
+ height: 45px;
+ margin-left: 32px;
+ display: grid;
+ grid-auto-flow: column;
+ grid-template-rows: 32px;
+ align-items: end;
+ border-bottom: 1px solid $faint-secondary-primary-10;
+ overflow-x: auto;
+ white-space: nowrap;
+ &::-webkit-scrollbar {
+ height: 2px;
+ }
+ &::-webkit-scrollbar-thumb {
+ background: rgba(26, 62, 91, 0.2);
+ border-radius: 16px;
+ background-clip: content-box;
+ height: 10px;
+ }
+}
+
+.tab-active {
+ color: $red-brand-primary;
+ transition: ease-in 0.15s;
+}
+
+.slider {
+ position: absolute;
+ height: 0px;
+ border-bottom: 4px solid $red-brand-primary;
+ transition: ease-in 0.2s;
+ bottom: 0px;
+}
+
+.scale-item {
+ display: inline-block;
+ margin-right: 6px;
+ cursor: pointer;
+ &:hover {
+ transition: ease-in 0.2s;
+ color: #e11717;
+ }
+}
+
+.date-picker {
+ display: flex;
+ align-items: center;
+ gap: 9px;
+}
+
+.date-clear {
+ margin-left: auto;
+ cursor: pointer;
+}
+</style>
diff --git a/src/components/Global/SilaComponents/DateSwitch.vue b/src/components/Global/SilaComponents/DateSwitch.vue
index 0769c734..4df70ba4 100644
--- a/src/components/Global/SilaComponents/DateSwitch.vue
+++ b/src/components/Global/SilaComponents/DateSwitch.vue
@@ -37,7 +37,7 @@
$t('global.date.selectDate')
}}</span>
</div>
- <img class="date-clear" src="@/assets/images/clear-icon.svg" />
+ <img class="date-clear" src="@/assets/images/icon-clear-red.svg" />
</div>
</template>
diff --git a/src/components/Global/SilaComponents/InventoryControlSystem.vue b/src/components/Global/SilaComponents/InventoryControlSystem.vue
index 9760f24f..de5432e1 100644
--- a/src/components/Global/SilaComponents/InventoryControlSystem.vue
+++ b/src/components/Global/SilaComponents/InventoryControlSystem.vue
@@ -19,10 +19,7 @@
popup="SystemDescription.ReloadServer_popup"
/>
<div>
- <span
- class="regular-12px underline pointer"
- @click="redirectConsole"
- >
+ <span class="regular-12px underline" @click="redirectConsole">
{{ $t('SystemDescription.ConnectToDesktop') }}
</span>
</div>
@@ -151,10 +148,6 @@ a {
list-style-type: none;
}
-.pointer {
- cursor: pointer;
-}
-
.system-control-section {
position: relative;
margin: 16px 2rem 2rem !important;
diff --git a/src/components/Global/SilaComponents/NtpPopover.vue b/src/components/Global/SilaComponents/NtpPopover.vue
index 918b1220..c94c1cc8 100644
--- a/src/components/Global/SilaComponents/NtpPopover.vue
+++ b/src/components/Global/SilaComponents/NtpPopover.vue
@@ -129,8 +129,4 @@ export default {
.tretiatry {
margin-left: 12px;
}
-
-.underline {
- cursor: pointer;
-}
</style>
diff --git a/src/components/Global/SilaComponents/TwoChiocePopover.vue b/src/components/Global/SilaComponents/TwoChiocePopover.vue
new file mode 100644
index 00000000..c89c5a81
--- /dev/null
+++ b/src/components/Global/SilaComponents/TwoChiocePopover.vue
@@ -0,0 +1,117 @@
+<template>
+ <b-popover
+ :placement="placement"
+ triggers="focus"
+ :show.sync="show"
+ custom-class="popover-heigth-100"
+ :target="`popover-choice-${id}`"
+ @hidden="onHidden"
+ >
+ <b-button
+ id="popover-choice-button"
+ variant="popover"
+ :class="{ 'selected-choice-button': scale === topPosition }"
+ @mouseover="scale = topPosition"
+ @click="
+ () => {
+ show = false;
+ firstAction();
+ }
+ "
+ >
+ {{ fitstOption }}
+ </b-button>
+ <b-button
+ id="popover-choice-button"
+ variant="popover"
+ :class="{ 'selected-choice-button': scale === bottomPosition }"
+ @mouseover="scale = bottomPosition"
+ @click="
+ () => {
+ show = false;
+ secondAction();
+ }
+ "
+ >
+ {{ secondOption }}
+ </b-button>
+ <div class="slider" :style="`left: 5px; top: ${scale}px;`"></div>
+ </b-popover>
+</template>
+
+<script>
+export default {
+ props: {
+ id: {
+ type: Number,
+ default: null,
+ },
+ fitstOption: {
+ type: String,
+ default: null,
+ },
+ secondOption: {
+ type: String,
+ default: null,
+ },
+ chosenOption: {
+ type: String,
+ default: null,
+ },
+ firstAction: {
+ type: Function,
+ default: null,
+ },
+ secondAction: {
+ type: Function,
+ default: null,
+ },
+ placement: {
+ type: String,
+ default: 'bottom',
+ },
+ },
+ data() {
+ return {
+ topPosition: 5,
+ bottomPosition: 33,
+ show: false,
+ scale: 5,
+ };
+ },
+ methods: {
+ onHidden() {
+ if (this.secondOption === this.chosenOption) {
+ this.scale = this.bottomPosition;
+ } else {
+ this.scale = this.topPosition;
+ }
+ },
+ },
+};
+</script>
+<style lang="scss">
+#popover-unit-ractive {
+ padding-left: 5px;
+}
+
+.hovered-unit-button {
+ color: $white;
+}
+</style>
+<style lang="scss" scoped>
+#popover-choice-button {
+ width: 89px;
+}
+
+.slider {
+ width: 89px;
+ height: 28px;
+ border-radius: 8px;
+ background-color: $red-brand-primary;
+ box-shadow: 1px 2px 4px -1px rgb(79 37 37 / 40%) inset;
+ position: absolute;
+ transition: ease-in 0.2s;
+ z-index: -1;
+}
+</style>
generated by cgit v1.2.3 (git 2.39.0) at 2024-06-29 13:44:58 +0300