bfg-common 1.4.577 → 1.4.579

package/assets/scss/common/icons/icons-6.scss

@@ -1,156 +1,156 @@
-/* _____BACKGROUND POSITION_____ */
-.icon-workload-management {
-  background-position: 0 0;
-}
-.icon-guest-os {
-  background-position: 0 5%;
-}
-.icon-guest-os-reset {
-  background-position: 0 9.5%;
-}
-.icon-guest-os-install {
-  background-position: 0 14%;
-}
-.icon-guest-os-shut-down {
-  background-position: 0 18.8%;
-}
-.icon-guest-os-mount {
-  background-position: 0 23.5%;
-}
-.icon-guest-os-unmount {
-  background-position: 0 28.3%;
-}
-.icon-consolidate {
-  background-position: 0 33.3%;
-}
-.icon-clone {
-  background-position: 0 38%;
-}
-.icon-edit-note {
-  background-position: 0 42.8%;
-}
-.icon-delete-from-disk {
-  background-position: 0 47.3%;
-}
-.icon-vm-power-off {
-  background-position: 0 58.1%;
-}
-.icon-vm-reset {
-  background-position: 0 63.1%;
-}
-.icon-vm-hard-stop {
-  background-position: 0 61.7%;
-}
-.icon-backups {
-  background-position: 0 66.7%;
-}
-.icon-backup-new {
-  background-position: 0 71.3%;
-}
-.icon-rules {
-  background-position: 0 76.2%;
-}
-.icon-rules-new {
-  background-position: 0 85.6%;
-}
-.icon-rules-apply {
-  background-position: 0 85.5%;
-}
-.icon-backup-restore {
-  background-position: 0 90.5%;
-}
-.icon-sensors {
-  background-position: 0 95.2%;
-}
-.icon-sessions {
-  background-position: 0 100%;
-}
-
-/* _____BACKGROUND IMAGE_____ */
-.icon-guest-os,
-.icon-guest-os-reset,
-.icon-guest-os-install,
-.icon-guest-os-shut-down,
-.icon-guest-os-mount,
-.icon-guest-os-unmount,
-.icon-consolidate,
-.icon-clone,
-.icon-edit-note,
-.icon-delete-from-disk,
-.icon-vm-power-off,
-.icon-vm-reset,
-.icon-vm-hard-stop,
-.icon-backups,
-.icon-backup-new,
-.icon-rules,
-.icon-rules-new,
-.icon-rules-apply,
-.icon-backup-restore,
-.icon-sensors,
-.icon-sessions,
-.icon-workload-management {
-  background-image: url('../img/icons/icons-sprite-light-6.svg');
-
-  html.dark-theme & {
-    background-image: url('../img/icons/icons-sprite-dark-6.svg');
-  }
-}
-.active .icon-guest-os,
-.active .icon-guest-os-reset,
-.active .icon-guest-os-install,
-.active .icon-guest-os-shut-down,
-.active .icon-guest-os-mount,
-.active .icon-guest-os-unmount,
-.active .icon-consolidate,
-.active .icon-clone,
-.active .icon-edit-note,
-.active .icon-delete-from-disk,
-.active .icon-vm-power-off,
-.active .icon-vm-reset,
-.active .icon-vm-hard-stop,
-.active .icon-backups,
-.active .icon-backup-new,
-.active .icon-rules,
-.active .icon-rules-new,
-.active .icon-rules-apply,
-.active .icon-backup-restore,
-.active .icon-sensors,
-.active .icon-sessions,
-.active .icon-workload-management {
-  background-image: url('../img/icons/icons-sprite-dark-6.svg');
-
-  html.dark-theme & {
-    background-image: url('../img/icons/icons-sprite-light-6.svg');
-  }
-}
-
-/* _____ICONS COMMON STYLES_____ */
-.icon-guest-os,
-.icon-guest-os-reset,
-.icon-guest-os-install,
-.icon-guest-os-shut-down,
-.icon-guest-os-mount,
-.icon-guest-os-unmount,
-.icon-consolidate,
-.icon-clone,
-.icon-edit-note,
-.icon-delete-from-disk,
-.icon-vm-power-off,
-.icon-vm-reset,
-.icon-vm-hard-stop,
-.icon-backups,
-.icon-backup-new,
-.icon-rules,
-.icon-rules-new,
-.icon-rules-apply,
-.icon-backup-restore,
-.icon-sensors,
-.icon-sessions,
-.icon-workload-management {
-  display: inline-block;
-  width: 18px;
-  min-width: 18px;
-  height: 18px;
-  min-height: 18px;
-  background-size: 100% auto;
-}
+/* _____BACKGROUND POSITION_____ */
+.icon-workload-management {
+  background-position: 0 0;
+}
+.icon-guest-os {
+  background-position: 0 5%;
+}
+.icon-guest-os-reset {
+  background-position: 0 9.5%;
+}
+.icon-guest-os-install {
+  background-position: 0 14%;
+}
+.icon-guest-os-shut-down {
+  background-position: 0 18.8%;
+}
+.icon-guest-os-mount {
+  background-position: 0 23.5%;
+}
+.icon-guest-os-unmount {
+  background-position: 0 28.3%;
+}
+.icon-consolidate {
+  background-position: 0 33.3%;
+}
+.icon-clone {
+  background-position: 0 38%;
+}
+.icon-edit-note {
+  background-position: 0 42.8%;
+}
+.icon-delete-from-disk {
+  background-position: 0 47.3%;
+}
+.icon-vm-power-off {
+  background-position: 0 52.3%;
+}
+.icon-vm-reset {
+  background-position: 0 63.1%;
+}
+.icon-vm-hard-stop {
+  background-position: 0 61.7%;
+}
+.icon-backups {
+  background-position: 0 66.7%;
+}
+.icon-backup-new {
+  background-position: 0 71.3%;
+}
+.icon-rules {
+  background-position: 0 76.2%;
+}
+.icon-rules-new {
+  background-position: 0 85.6%;
+}
+.icon-rules-apply {
+  background-position: 0 85.5%;
+}
+.icon-backup-restore {
+  background-position: 0 90.5%;
+}
+.icon-sensors {
+  background-position: 0 95.2%;
+}
+.icon-sessions {
+  background-position: 0 100%;
+}
+
+/* _____BACKGROUND IMAGE_____ */
+.icon-guest-os,
+.icon-guest-os-reset,
+.icon-guest-os-install,
+.icon-guest-os-shut-down,
+.icon-guest-os-mount,
+.icon-guest-os-unmount,
+.icon-consolidate,
+.icon-clone,
+.icon-edit-note,
+.icon-delete-from-disk,
+.icon-vm-power-off,
+.icon-vm-reset,
+.icon-vm-hard-stop,
+.icon-backups,
+.icon-backup-new,
+.icon-rules,
+.icon-rules-new,
+.icon-rules-apply,
+.icon-backup-restore,
+.icon-sensors,
+.icon-sessions,
+.icon-workload-management {
+  background-image: url('../img/icons/icons-sprite-light-6.svg');
+
+  html.dark-theme & {
+    background-image: url('../img/icons/icons-sprite-dark-6.svg');
+  }
+}
+.active .icon-guest-os,
+.active .icon-guest-os-reset,
+.active .icon-guest-os-install,
+.active .icon-guest-os-shut-down,
+.active .icon-guest-os-mount,
+.active .icon-guest-os-unmount,
+.active .icon-consolidate,
+.active .icon-clone,
+.active .icon-edit-note,
+.active .icon-delete-from-disk,
+.active .icon-vm-power-off,
+.active .icon-vm-reset,
+.active .icon-vm-hard-stop,
+.active .icon-backups,
+.active .icon-backup-new,
+.active .icon-rules,
+.active .icon-rules-new,
+.active .icon-rules-apply,
+.active .icon-backup-restore,
+.active .icon-sensors,
+.active .icon-sessions,
+.active .icon-workload-management {
+  background-image: url('../img/icons/icons-sprite-dark-6.svg');
+
+  html.dark-theme & {
+    background-image: url('../img/icons/icons-sprite-light-6.svg');
+  }
+}
+
+/* _____ICONS COMMON STYLES_____ */
+.icon-guest-os,
+.icon-guest-os-reset,
+.icon-guest-os-install,
+.icon-guest-os-shut-down,
+.icon-guest-os-mount,
+.icon-guest-os-unmount,
+.icon-consolidate,
+.icon-clone,
+.icon-edit-note,
+.icon-delete-from-disk,
+.icon-vm-power-off,
+.icon-vm-reset,
+.icon-vm-hard-stop,
+.icon-backups,
+.icon-backup-new,
+.icon-rules,
+.icon-rules-new,
+.icon-rules-apply,
+.icon-backup-restore,
+.icon-sensors,
+.icon-sessions,
+.icon-workload-management {
+  display: inline-block;
+  width: 18px;
+  min-width: 18px;
+  height: 18px;
+  min-height: 18px;
+  background-size: 100% auto;
+}

package/components/common/pages/home/headline/HeadlineNew.vue

@@ -1,48 +1,71 @@
-<template>
-  <div class="container-flex">
-    <h1>{{ localization.mainNavigation.home }}</h1>
-
-    <ui-select
-      v-if="isProjectSphere"
-      v-model="selectedZoneModel"
-      :items="selectItems"
-      width="165px"
-      select-width="100%"
-      size="sm"
-      test-id="home-zone-select"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_T_Project } from '~/lib/models/types'
-
-const props = defineProps<{
-  project: UI_T_Project
-}>()
-const selectedZoneModel = defineModel<number>({ required: true })
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const isProjectSphere = computed<boolean>(() => props.project === 'sphere')
-
-const selectItems = computed<UI_I_Dropdown[]>(() => {
-  return []
-})
-</script>
-
-<style lang="scss" scoped>
-@import '/assets/scss/common/mixins';
-.container-flex {
-  @include flex($align: center, $just: space-between);
-  & > h1 {
-    color: var(--home-title-color);
-    font-size: 22px;
-    font-weight: 400;
-    line-height: 26.63px;
-    margin-bottom: 19px;
-  }
-}
-</style>
+<template>
+  <div class="container-flex">
+    <h1>{{ localization.mainNavigation.home }}</h1>
+
+    <ui-select
+      v-if="isProjectSphere"
+      v-model="selectedZoneModel"
+      :items="selectItems"
+      :disabled="!selectItems.length"
+      width="165px"
+      select-width="100%"
+      size="sm"
+      test-id="home-zone-select"
+    >
+      <template v-if="!selectItems.length" #toggleContent>
+        <div class="default-toggle-content">
+          <span class="default-icon vsphere-icon-vcenter"></span>
+          <span class="text">{{ localization.common.default }}</span>
+        </div>
+      </template>
+    </ui-select>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
+
+const props = defineProps<{
+  project: UI_T_Project
+}>()
+const selectedZoneModel = defineModel<number>({ required: true })
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isProjectSphere = computed<boolean>(() => props.project === 'sphere')
+
+const selectItems = computed<UI_I_Dropdown[]>(() => {
+  return []
+})
+</script>
+
+<style lang="scss" scoped>
+@import '/assets/scss/common/mixins';
+.container-flex {
+  @include flex($align: center, $just: space-between);
+  & > h1 {
+    color: var(--home-title-color);
+    font-size: 22px;
+    font-weight: 400;
+    line-height: 26.63px;
+    margin-bottom: 19px;
+  }
+
+  .default-toggle-content {
+    display: flex;
+    align-items: center;
+    grid-gap: 8px;
+
+    .default-icon {
+      width: 20px;
+      height: 20px;
+    }
+    .text {
+      font-size: 13px;
+      font-weight: 400;
+    }
+  }
+}
+</style>

package/components/common/pages/home/resource/ResourceNew.vue

@@ -1,58 +1,63 @@
-<template>
-  <div class="total-usages">
-    <h1>{{ localization.home.totalUsages }}</h1>
-    <div class="total-usages__container">
-      <ui-widget v-for="(item, key) in resourceMeter" :key="key">
-        <template v-if="props.loading">
-          <ui-widget-items-skeleton-line-bar />
-        </template>
-        <ui-widget-items-progress-bar-linear
-          v-else
-          id="host-summary-memory"
-          container-id="host"
-          :icon="item.icon"
-          :title="item.title"
-          :data="item.data"
-          :used-title="item.usedTitle"
-          :capacity-title="item.capacityTitle"
-          :status="item.status"
-        />
-      </ui-widget>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_Resources } from '~/components/common/resource/lib/models/interfaces'
-import type { UI_I_ResourceBlock } from '~/components/common/pages/home/resource/lib/models/interfaces'
-import { constructResourceMeter } from '~/components/common/pages/home/resource/lib/utils/resourceMeter'
-
-const props = defineProps<{
-  items: UI_I_Resources[]
-  loading: boolean
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const resourceMeter = computed<UI_I_ResourceBlock[]>(() =>
-  constructResourceMeter(props.items, localization.value)
-)
-</script>
-
-<style lang="scss" scoped>
-.total-usages {
-  & > h1 {
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 16.94px;
-    color: #9da6ad;
-    margin-bottom: 12px;
-  }
-  &__container {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-column-gap: 12px;
-  }
-}
-</style>
+<template>
+  <div class="total-usages">
+    <h1>{{ localization.home.totalUsages }}</h1>
+    <div class="total-usages__container">
+      <ui-widget v-for="(item, key) in resourceMeter" :key="key">
+        <template v-if="props.loading">
+          <ui-widget-items-skeleton-line-bar />
+        </template>
+        <ui-widget-items-progress-bar-linear
+          v-else
+          id="host-summary-memory"
+          container-id="host"
+          :icon="item.icon"
+          :title="item.title"
+          :data="item.data"
+          :used-title="item.usedTitle"
+          :capacity-title="item.capacityTitle"
+          :status="item.status"
+        />
+      </ui-widget>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_Resources } from '~/components/common/resource/lib/models/interfaces'
+import type { UI_I_ResourceBlock } from '~/components/common/pages/home/resource/lib/models/interfaces'
+import { constructResourceMeter } from '~/components/common/pages/home/resource/lib/utils/resourceMeter'
+
+const props = defineProps<{
+  items: UI_I_Resources[]
+  loading: boolean
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const resourceMeter = computed<UI_I_ResourceBlock[]>(() =>
+  constructResourceMeter(props.items, localization.value)
+)
+</script>
+
+<style lang="scss" scoped>
+.total-usages {
+  & > h1 {
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 16.94px;
+    color: #9da6ad;
+    margin-bottom: 12px;
+  }
+  &__container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-column-gap: 12px;
+
+    @media (max-width: 1440px) {
+      grid-template-columns: 1fr;
+      grid-row-gap: 12px;
+    }
+  }
+}
+</style>