bfg-common 1.4.799 → 1.4.800

package/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/ChartOptionsModal.vue

@@ -82,6 +82,7 @@ import { getCurrentOptionsStorageFunc } from '~/components/common/pages/hardware
 const props = defineProps<{
   selectedChartOptionName: string
   selectedMetric: UI_T_Chart
+  selectedChartType: string
   selectedPowerCountersKeys: number[]
   powerSelectedRowsLocal: UI_I_HardwareHealthSensorsGraph[]
   selectedTemperatureCountersKeys: number[]
@@ -172,6 +173,13 @@ watch(
 )
 
 const localSelectedChartType = ref<string>('')
+watch(
+  () => props.selectedChartType,
+  (newValue) => {
+    localSelectedChartType.value = newValue
+  },
+  { immediate: true }
+)
 
 const localSelectedTimespanType = ref<string>('')
 watch(

package/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/counters/Counters.vue

@@ -1,94 +1,94 @@
-<template>
-  <div class="vertical-flex-container chart-option-counters-container">
-    <common-pages-hardware-health-history-testimony-tools-chart-options-modal-counters-table
-      :chart="props.chart"
-      :selected-power-keys="props.selectedPowerKeys"
-      :selected-temperature-keys="props.selectedTemperatureKeys"
-      :power-counters-table-data="props.powerCountersTableData"
-      :temperature-counters-table-data="props.temperatureCountersTableData"
-      @select-power-row="emits('select-power-row', $event)"
-      @select-temperature-row="emits('select-temperature-row', $event)"
-      @total-items="totalMetricItems = $event"
-    />
-    <common-pages-hardware-health-history-testimony-tools-chart-options-modal-counters-timespan
-      :language="props.language"
-      :selected-chart-type="props.selectedChartType"
-      :selected-timespan-type="props.selectedTimespanType"
-      :units-count="props.unitsCount"
-      :period-type="props.periodType"
-      :selected-custom-time="props.selectedCustomTime"
-      :custom-date-from="props.customDateFrom"
-      :custom-date-to="props.customDateTo"
-      :custom-time-from="props.customTimeFrom"
-      :custom-time-to="props.customTimeTo"
-      :valid-date-end="props.validDateEnd"
-      @update-chart-type="emits('update-chart-type', $event)"
-      @update-custom-time="emits('update-custom-time', $event)"
-      @update-timespan-type="emits('update-timespan-type', $event)"
-      @update-unit-count="emits('update-unit-count', $event)"
-      @update-period-type="emits('update-period-type', $event)"
-      @update-custom-date-from="emits('update-custom-date-from', $event)"
-      @update-custom-date-to="emits('update-custom-date-to', $event)"
-      @update-custom-time-from="emits('update-custom-time-from', $event)"
-      @update-custom-time-to="emits('update-custom-time-to', $event)"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_HardwareHealthSensorsGraph } from '~/components/common/pages/hardwareHealth/historyTestimony/lib/models/interfaces'
-import type { UI_T_Chart } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/lib/models/types'
-
-const props = defineProps<{
-  chart: UI_T_Chart
-  selectedPowerKeys: number[]
-  selectedTemperatureKeys: number[]
-  powerCountersTableData: UI_I_HardwareHealthSensorsGraph[]
-  temperatureCountersTableData: UI_I_HardwareHealthSensorsGraph[]
-  language: string
-  selectedChartType: string
-  selectedTimespanType: string
-  unitsCount: number
-  periodType: string
-  selectedCustomTime: string
-  customDateFrom: string
-  customDateTo: string
-  customTimeFrom: string
-  customTimeTo: string
-  validDateEnd: number
-}>()
-
-const emits = defineEmits<{
-  (event: 'select-power-row', value: UI_I_HardwareHealthSensorsGraph[]): void
-  (
-    event: 'select-temperature-row',
-    value: UI_I_HardwareHealthSensorsGraph[]
-  ): void
-  (event: 'update-chart-type', value: string): void
-  (event: 'update-custom-time', value: string): void
-  (event: 'update-timespan-type', value: string): void
-  (event: 'update-unit-count', value: number): void
-  (event: 'update-period-type', value: string): void
-  (event: 'update-custom-date-from', value: string): void
-  (event: 'update-custom-date-to', value: string): void
-  (event: 'update-custom-time-from', value: string): void
-  (event: 'update-custom-time-to', value: string): void
-}>()
-
-const totalMetricItems = ref<number>(0)
-</script>
-
-<style scoped lang="scss">
-.chart-option-counters-container {
-  margin-top: 20px;
-  flex-basis: 80%;
-  padding-left: 15px;
-  max-width: 80%;
-}
-@media (max-width: 1024px) {
-  .chart-option-counters-container {
-    max-width: unset;
-    padding-left: 0;
-  }
-}
-</style>
+<template>
+  <div class="vertical-flex-container chart-option-counters-container">
+    <common-pages-hardware-health-history-testimony-tools-chart-options-modal-counters-table
+      :chart="props.chart"
+      :selected-power-keys="props.selectedPowerKeys"
+      :selected-temperature-keys="props.selectedTemperatureKeys"
+      :power-counters-table-data="props.powerCountersTableData"
+      :temperature-counters-table-data="props.temperatureCountersTableData"
+      @select-power-row="emits('select-power-row', $event)"
+      @select-temperature-row="emits('select-temperature-row', $event)"
+      @total-items="totalMetricItems = $event"
+    />
+    <common-pages-hardware-health-history-testimony-tools-chart-options-modal-counters-timespan
+      :language="props.language"
+      :selected-chart-type="props.selectedChartType"
+      :selected-timespan-type="props.selectedTimespanType"
+      :units-count="props.unitsCount"
+      :period-type="props.periodType"
+      :selected-custom-time="props.selectedCustomTime"
+      :custom-date-from="props.customDateFrom"
+      :custom-date-to="props.customDateTo"
+      :custom-time-from="props.customTimeFrom"
+      :custom-time-to="props.customTimeTo"
+      :valid-date-end="props.validDateEnd"
+      @update-chart-type="emits('update-chart-type', $event)"
+      @update-custom-time="emits('update-custom-time', $event)"
+      @update-timespan-type="emits('update-timespan-type', $event)"
+      @update-unit-count="emits('update-unit-count', $event)"
+      @update-period-type="emits('update-period-type', $event)"
+      @update-custom-date-from="emits('update-custom-date-from', $event)"
+      @update-custom-date-to="emits('update-custom-date-to', $event)"
+      @update-custom-time-from="emits('update-custom-time-from', $event)"
+      @update-custom-time-to="emits('update-custom-time-to', $event)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_HardwareHealthSensorsGraph } from '~/components/common/pages/hardwareHealth/historyTestimony/lib/models/interfaces'
+import type { UI_T_Chart } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/lib/models/types'
+
+const props = defineProps<{
+  chart: UI_T_Chart
+  selectedPowerKeys: number[]
+  selectedTemperatureKeys: number[]
+  powerCountersTableData: UI_I_HardwareHealthSensorsGraph[]
+  temperatureCountersTableData: UI_I_HardwareHealthSensorsGraph[]
+  language: string
+  selectedChartType: string
+  selectedTimespanType: string
+  unitsCount: number
+  periodType: string
+  selectedCustomTime: string
+  customDateFrom: string
+  customDateTo: string
+  customTimeFrom: string
+  customTimeTo: string
+  validDateEnd: number
+}>()
+
+const emits = defineEmits<{
+  (event: 'select-power-row', value: UI_I_HardwareHealthSensorsGraph[]): void
+  (
+    event: 'select-temperature-row',
+    value: UI_I_HardwareHealthSensorsGraph[]
+  ): void
+  (event: 'update-chart-type', value: string): void
+  (event: 'update-custom-time', value: string): void
+  (event: 'update-timespan-type', value: string): void
+  (event: 'update-unit-count', value: number): void
+  (event: 'update-period-type', value: string): void
+  (event: 'update-custom-date-from', value: string): void
+  (event: 'update-custom-date-to', value: string): void
+  (event: 'update-custom-time-from', value: string): void
+  (event: 'update-custom-time-to', value: string): void
+}>()
+
+const totalMetricItems = ref<number>(0)
+</script>
+
+<style scoped lang="scss">
+.chart-option-counters-container {
+  margin-top: 20px;
+  flex-basis: 80%;
+  padding-left: 15px;
+  max-width: 80%;
+}
+@media (max-width: 1024px) {
+  .chart-option-counters-container {
+    max-width: unset;
+    padding-left: 0;
+  }
+}
+</style>

package/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/counters/timespan/Timespan.vue

@@ -1,66 +1,66 @@
-<template>
-  <div class="timespan-objects-section-direction">
-    <common-chart-options-modal-counters-timespan-form
-      :language="props.language"
-      :selected-chart-type="props.selectedChartType"
-      :selected-timespan-type="props.selectedTimespanType"
-      :units-count="props.unitsCount"
-      :period-type="props.periodType"
-      :selected-custom-time="props.selectedCustomTime"
-      :custom-date-from="props.customDateFrom"
-      :custom-date-to="props.customDateTo"
-      :custom-time-from="props.customTimeFrom"
-      :custom-time-to="props.customTimeTo"
-      :valid-date-end="props.validDateEnd"
-      @update-chart-type="emits('update-chart-type', $event)"
-      @update-custom-time="emits('update-custom-time', $event)"
-      @update-timespan-type="emits('update-timespan-type', $event)"
-      @update-unit-count="emits('update-unit-count', $event)"
-      @update-period-type="emits('update-period-type', $event)"
-      @update-custom-date-from="emits('update-custom-date-from', $event)"
-      @update-custom-date-to="emits('update-custom-date-to', $event)"
-      @update-custom-time-from="emits('update-custom-time-from', $event)"
-      @update-custom-time-to="emits('update-custom-time-to', $event)"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{
-  language: string
-  selectedChartType: string
-  selectedTimespanType: string
-  unitsCount: number
-  periodType: string
-  selectedCustomTime: string
-  customDateFrom: string
-  customDateTo: string
-  customTimeFrom: string
-  customTimeTo: string
-  validDateEnd: number
-}>()
-
-const emits = defineEmits<{
-  (event: 'update-chart-type', value: string): void
-  (event: 'update-custom-time', value: string): void
-  (event: 'update-timespan-type', value: string): void
-  (event: 'update-unit-count', value: number): void
-  (event: 'update-period-type', value: string): void
-  (event: 'update-custom-date-from', value: string): void
-  (event: 'update-custom-date-to', value: string): void
-  (event: 'update-custom-time-from', value: string): void
-  (event: 'update-custom-time-to', value: string): void
-}>()
-</script>
-
-<style scoped lang="scss">
-.timespan-objects-section-direction {
-  display: flex;
-  flex-direction: row;
-}
-@media (max-width: 1024px) {
-  .timespan-objects-section-direction {
-    flex-direction: column;
-  }
-}
-</style>
+<template>
+  <div class="timespan-objects-section-direction">
+    <common-chart-options-modal-counters-timespan-form
+      :language="props.language"
+      :selected-chart-type="props.selectedChartType"
+      :selected-timespan-type="props.selectedTimespanType"
+      :units-count="props.unitsCount"
+      :period-type="props.periodType"
+      :selected-custom-time="props.selectedCustomTime"
+      :custom-date-from="props.customDateFrom"
+      :custom-date-to="props.customDateTo"
+      :custom-time-from="props.customTimeFrom"
+      :custom-time-to="props.customTimeTo"
+      :valid-date-end="props.validDateEnd"
+      @update-chart-type="emits('update-chart-type', $event)"
+      @update-custom-time="emits('update-custom-time', $event)"
+      @update-timespan-type="emits('update-timespan-type', $event)"
+      @update-unit-count="emits('update-unit-count', $event)"
+      @update-period-type="emits('update-period-type', $event)"
+      @update-custom-date-from="emits('update-custom-date-from', $event)"
+      @update-custom-date-to="emits('update-custom-date-to', $event)"
+      @update-custom-time-from="emits('update-custom-time-from', $event)"
+      @update-custom-time-to="emits('update-custom-time-to', $event)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  language: string
+  selectedChartType: string
+  selectedTimespanType: string
+  unitsCount: number
+  periodType: string
+  selectedCustomTime: string
+  customDateFrom: string
+  customDateTo: string
+  customTimeFrom: string
+  customTimeTo: string
+  validDateEnd: number
+}>()
+
+const emits = defineEmits<{
+  (event: 'update-chart-type', value: string): void
+  (event: 'update-custom-time', value: string): void
+  (event: 'update-timespan-type', value: string): void
+  (event: 'update-unit-count', value: number): void
+  (event: 'update-period-type', value: string): void
+  (event: 'update-custom-date-from', value: string): void
+  (event: 'update-custom-date-to', value: string): void
+  (event: 'update-custom-time-from', value: string): void
+  (event: 'update-custom-time-to', value: string): void
+}>()
+</script>
+
+<style scoped lang="scss">
+.timespan-objects-section-direction {
+  display: flex;
+  flex-direction: row;
+}
+@media (max-width: 1024px) {
+  .timespan-objects-section-direction {
+    flex-direction: column;
+  }
+}
+</style>

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

@@ -5,13 +5,14 @@
       v-model="selectedZone"
       :data="zoneOptionList"
       :project="props.project"
-    ></common-pages-home-headline-new>
+    />
 
     <common-pages-home-headline-old
       v-else
       v-model="selectedZone"
       :data="zoneOptionList"
-    ></common-pages-home-headline-old>
+      :project="props.project"
+    />
   </div>
 </template>
 

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

@@ -36,7 +36,7 @@ const props = defineProps<{
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const isProjectSphere = computed<boolean>(() => props.project === 'sphere')
+const isProjectSphere = ref<boolean>(props.project === 'sphere')
 
 const selectItems = computed<UI_I_Dropdown[]>(() => props.data)
 </script>

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

@@ -4,6 +4,7 @@
   </h2>
 
   <atoms-select-the-select
+    v-if="isProjectSphere"
     v-model="selectedZoneModel"
     :options="props.data"
     test-id="home-zone-select"
@@ -14,11 +15,13 @@
 </template>
 
 <script lang="ts" setup>
+import type { UI_T_Project } from '~/lib/models/types'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_Option } from '~/components/atoms/select/lib/models/interfaces'
 
 const selectedZoneModel = defineModel<string>({ required: true })
 const props = defineProps<{
+  project: UI_T_Project
   data: UI_I_Option[]
 }>()
 const emits = defineEmits<{
@@ -26,6 +29,8 @@ const emits = defineEmits<{
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isProjectSphere = ref<boolean>(props.project === 'sphere')
 </script>
 
 <style lang="scss" scoped>

package/components/common/pages/home/widgets/vms/VmsNew.vue

@@ -85,7 +85,7 @@ const itemsLocal = computed<UI_I_Card[]>(() => itemsFunc(props.vms))
     .label {
       color: #9da6ad;
       font-size: 14px;
-      font-weight: 500;
+      font-weight: 400;
       line-height: 16.94px;
       margin-bottom: 12px;
     }

package/components/common/pages/packages/Packages.vue

@@ -0,0 +1,208 @@
+<template>
+  <div class="packages-page">
+    <common-headline :headline="localization.common.softwarePackages" />
+
+    <div class="grid-toolbar">
+      <common-tools-actions
+        test-id="packages-tools-panel"
+        :actions="actions"
+        @click="onClickAction"
+      >
+        <template #icon="{ data }">
+          <span
+            v-if="data.type === 'updates'"
+            class="vx-icon-import icon"
+          ></span>
+          <span
+            v-if="data.type === 'refresh'"
+            class="vsphere-icon-reset icon"
+          ></span>
+        </template>
+      </common-tools-actions>
+    </div>
+
+    <common-pages-packages-table-view
+      v-model="selectedRow"
+      :data-table="props.packagesData?.items || []"
+      :total-items="props.packagesData?.total_items || 0"
+      :total-pages="props.packagesData?.total_pages || 1"
+      :pagination="pagination"
+      :loading="props.loading"
+      @pagination="onPagination"
+      @sort="onSort"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_Pagination,
+} from '~/lib/models/table/interfaces'
+import type { UI_T_SelectedRow } from '~/components/atoms/table/dataGrid/lib/models/types'
+import type { UI_I_Button } from '~/components/common/tools/lib/models/interfaces'
+import type { UI_T_Action } from '~/components/common/pages/packages/lib/models/types'
+import { actionsFunc } from '~/components/common/pages/packages/lib/config/actions'
+
+
+const selectedRow = defineModel<UI_T_SelectedRow>('selectedRow')
+const pagination = defineModel<UI_I_Pagination>('pagination')
+
+const props = defineProps<{
+  packagesData: any | null
+  loading: boolean
+}>()
+const emits = defineEmits<{
+  (event: 'sort', value: string): void
+  (event: 'pagination', value: UI_I_Pagination): void
+  (event: 'action', value: [UI_T_Action, FormData | null]): void
+  (event: 'refresh'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const disabledActions = ref<string[]>([
+  'enable',
+  'disable',
+  'on',
+  'off',
+  'remove',
+])
+
+const actions = computed<UI_I_Button[]>(() =>
+  actionsFunc(localization.value, disabledActions.value)
+)
+
+const onPagination = (value: UI_I_Pagination): void => {
+  emits('pagination', value)
+}
+const onSort = (value: string): void => {
+  emits('sort', value)
+}
+
+const checkAllActions = (): void => {
+  if (typeof selectedRow.value !== 'number') return
+
+  const selectedPackage = props.packagesData?.items[selectedRow.value]
+  if (!selectedPackage) return
+
+  disabledActions.value = []
+  if (window.location.hostname === 'dev-pn.aobfg.ru') return
+
+  if (selectedPackage.not_runnable || selectedPackage.required) {
+    disabledActions.value = ['enable', 'disable', 'on', 'off']
+  }
+
+  if (selectedPackage.required) {
+    disabledActions.value = ['remove']
+  }
+}
+watch(
+  selectedRow,
+  () => {
+    checkAllActions()
+  },
+  { immediate: true }
+)
+
+const onAction = async (
+  action: UI_T_Action,
+  file: FormData | null = null
+): Promise<void> => {
+  emits('action', [action, file])
+}
+const onRefresh = (): void => {
+  emits('refresh')
+}
+const onChangeFiles = (event: Event | undefined): void => {
+  if (!event) return
+
+  const target = event.target as HTMLInputElement
+  if (!target.files) return
+
+  const file = target.files[0]
+
+  const formData = new FormData()
+  formData.append('package', file)
+  onAction('update', formData)
+}
+
+const onClickAction = (type: string, file?: Event): void => {
+  switch (type) {
+    case 'updates':
+      onChangeFiles(file)
+      break
+    case 'refresh':
+      onRefresh()
+      break
+    case 'enable':
+      onAction('enable')
+      break
+    case 'disable':
+      onAction('disable')
+      break
+    case 'on':
+      onAction('on')
+      break
+    case 'off':
+      onAction('off')
+      break
+    case 'remove':
+      onAction('remove')
+      break
+  }
+}
+</script>
+
+<style>
+:root {
+  --action-link-container-bg-color: #e9f6fd;
+  --vui-action-label-color: #333;
+}
+:root.dark-theme {
+  --action-link-container-bg-color: #29414e;
+  --vui-action-label-color: #adbbc4;
+}
+</style>
+
+<style lang="scss" scoped>
+@import '~/assets/scss/common/mixins.scss';
+
+.packages-page {
+  @include flex($dir: column);
+  height: 100%;
+
+  .grid-toolbar {
+    .icon {
+      display: block;
+      width: 16px;
+      height: 16px;
+      min-width: 16px;
+      min-height: 16px;
+      background-size: 100% auto;
+      margin-right: 5px;
+    }
+
+    :deep(.btn) {
+      text-transform: none;
+      font-size: 13px;
+      font-weight: normal;
+      color: var(--vui-action-label-color);
+      min-width: unset;
+      padding: 4px;
+      line-height: normal;
+      margin-right: 4px;
+      display: flex;
+      align-items: center;
+      letter-spacing: normal;
+
+      &:not(:disabled):hover {
+        color: var(--vui-action-label-color);
+        text-decoration: none;
+        background-color: var(--action-link-container-bg-color);
+        border: 1px solid #c7e9ff;
+      }
+    }
+  }
+}
+</style>

package/components/common/pages/packages/lib/config/actions.ts

@@ -0,0 +1,59 @@
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_Button } from '~/components/common/tools/lib/models/interfaces'
+
+export const actionsFunc = (
+  localization: UI_I_Localization,
+  disabledActions: string[]
+): UI_I_Button[] => {
+  const actions = [
+    {
+      text: localization.common.updates,
+      type: 'updates',
+      disabled: false,
+      uploaded: true,
+      testId: 'packages-updates',
+    },
+    {
+      text: localization.common.refresh2,
+      type: 'refresh',
+      disabled: false,
+      testId: 'packages-refresh',
+    },
+    {
+      text: localization.common.enable2,
+      type: 'enable',
+      disabled: false,
+      testId: 'packages-enable',
+    },
+    {
+      text: localization.common.disable2,
+      type: 'disable',
+      disabled: false,
+      testId: 'packages-disable',
+    },
+    {
+      text: localization.common.on,
+      type: 'on',
+      disabled: false,
+      testId: 'packages-on',
+    },
+    {
+      text: localization.common.off2,
+      type: 'off',
+      disabled: false,
+      testId: 'packages-off',
+    },
+    {
+      text: localization.common.remove,
+      type: 'remove',
+      disabled: false,
+      testId: 'packages-remove',
+    },
+  ]
+
+  return actions.map((action) => {
+    action.disabled = disabledActions.includes(action.type)
+
+    return action
+  })
+}