bfg-common 1.6.63 → 1.6.64

package/components/common/diagramMain/modals/editSettings/tabs/SwitchProperties.vue

@@ -1,164 +0,0 @@
-<template>
-  <div class="wizard-content__container">
-    <div class="wizard-content">
-      <atoms-alert
-        v-if="isShowErrorMessage"
-        :items="validationMessagesArray"
-        status="alert-danger"
-        test-id="switch-properties-alert"
-        @remove="onHideErrorMessageAlert"
-      />
-      <form id="switch-properties-form">
-        <div class="horizontal-flex-container">
-          <label class="property-label-group" for="network-label">
-            {{ localization.common.numberOfPorts }}
-          </label>
-          <div class="margin-left-property-value-group">
-            <div class="property-value-group">
-              <fieldset>
-                {{ props.initialData.num_ports }}
-              </fieldset>
-            </div>
-          </div>
-        </div>
-        <div class="horizontal-flex-container">
-          <label class="property-label-group">
-            {{ localization.common.mtuBytes }}
-          </label>
-          <div class="margin-left-property-value-group">
-            <div class="property-value-group tooltip-field-container">
-              <fieldset>
-                <atoms-tooltip-error :has-error="!!props.errorMessages.mtu">
-                  <template #elem>
-                    <input
-                      id="mtu"
-                      v-model="fieldsValues.mtu"
-                      :class="[
-                        'tooltip-field',
-                        {
-                          'danger-not-valid': props.errorMessages.mtu,
-                        },
-                      ]"
-                      data-id="mtu-input"
-                      type="number"
-                      name="mtu"
-                      @click.stop
-                    />
-                  </template>
-                  <template #content>
-                    {{ props.errorMessages.mtu }}
-                  </template>
-                </atoms-tooltip-error>
-              </fieldset>
-            </div>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type {
-  UI_I_SwitchPropertiesFields,
-  UI_I_EditSettingsErrorMessage,
-  UI_I_ModalsInitialData,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-import type { UI_T_PortPropertiesFieldName } from '~/components/common/diagramMain/lib/models/types'
-import { validationMessagesArrayFunc } from '~/components/common/diagramMain/modals/lib/utils'
-
-// Props from up
-const props = withDefaults(
-  defineProps<{
-    isShowErrorMessageAlert: boolean
-    errorMessages: UI_I_EditSettingsErrorMessage
-    initialData?: UI_I_ModalsInitialData
-    hasErrorMessages?: boolean
-  }>(),
-  {
-    initialData: () => ({}),
-    hasErrorMessages: undefined,
-  }
-)
-
-// Validation
-const emits = defineEmits<{
-  (
-    event: 'change-error-messages',
-    errorMessage: string,
-    fieldName: keyof UI_I_EditSettingsErrorMessage
-  ): void
-  (event: 'hide-error-message-alert'): void
-  (
-    event: 'change-edit-properties-data',
-    switchPropertiesData: UI_I_SwitchPropertiesFields
-  ): void
-}>()
-
-const validationMessagesArray = computed(() =>
-  validationMessagesArrayFunc(['mtu'], props.errorMessages)
-)
-
-// UI_I_Localization
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-// For showing component validation errors on the top of modal
-const isShowErrorMessage = computed<boolean>(
-  () => props.isShowErrorMessageAlert && props.hasErrorMessages
-)
-
-const fieldsValues = ref<UI_I_SwitchPropertiesFields>({
-  mtu: props.initialData.mtu || 0,
-  num_ports: props.initialData.num_ports || '',
-})
-
-const onHideErrorMessageAlert = () => emits('hide-error-message-alert')
-const onChangeData = (data: UI_I_SwitchPropertiesFields) =>
-  emits('change-edit-properties-data', data)
-
-const changeErrorMessage = (
-  errorMessage: string,
-  fieldName: keyof UI_I_EditSettingsErrorMessage
-) => emits('change-error-messages', errorMessage, fieldName)
-
-const messageTexts = (local: UI_I_Localization) => ({
-  mtu: local.common.mtuInvalidMessage,
-})
-
-const setMessageOnChangedField = (
-  values: number,
-  name: UI_T_PortPropertiesFieldName,
-  text: string
-) => {
-  if (values < 1280 || values > 65535) {
-    changeErrorMessage(text, name)
-    return
-  }
-  changeErrorMessage('', name)
-}
-
-watch(
-  fieldsValues,
-  (newValues: UI_I_SwitchPropertiesFields) => {
-    setMessageOnChangedField(
-      newValues.mtu,
-      'mtu',
-      messageTexts(localization.value).mtu
-    )
-    onChangeData(newValues)
-    !props.hasErrorMessages && onHideErrorMessageAlert()
-  },
-  {
-    deep: true,
-  }
-)
-
-onMounted(() => {
-  onChangeData(fieldsValues.value)
-})
-
-onUnmounted(() => {
-  onHideErrorMessageAlert()
-})
-</script>

package/components/common/monitor/utilization/infoBlock/progressBar/New.vue

@@ -1,64 +0,0 @@
-<template>
-  <div class="progress-line">
-    <div class="bg w-full">
-      <div
-        v-if="props.percent !== 0"
-        :style="props.innerFillContainerStyles"
-        class="inner-fill-container"
-      ></div>
-      <div class="cutted-container-block">
-        <div
-          v-for="(item, key) in props.itemsForPrint"
-          :key="key"
-          :style="`width: ${item.width}%;background-color: ${item.color}; left: ${item.left}%`"
-          :class="[
-            'inner-fill-container',
-            { one: props.itemsForPrint.length === 1 },
-          ]"
-        ></div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type {
-  UI_I_UtilizationProgressInnerFillStyles,
-  UI_I_UtilizationProgressItemForPrint,
-} from '~/components/common/monitor/utilization/infoBlock/progressBar/lib/models/interfaces'
-
-const props = defineProps<{
-  percent: number | string
-  innerFillContainerStyles: UI_I_UtilizationProgressInnerFillStyles
-  itemsForPrint: UI_I_UtilizationProgressItemForPrint[]
-}>()
-</script>
-
-<style scoped lang="scss">
-.progress-line {
-  .bg {
-    background: var(--progress-bar-bg);
-    height: 20px;
-    border-radius: 20px;
-
-    .inner-fill-container {
-      position: absolute;
-      height: 20px;
-      border-radius: 16px;
-    }
-
-    .cutted-container-block {
-      .inner-fill-container:not(.one) {
-        border-radius: 0;
-
-        &:first-child {
-          border-radius: 16px 0 0 16px;
-        }
-        &:last-child {
-          border-radius: 0 16px 16px 0;
-        }
-      }
-    }
-  }
-}
-</style>

package/components/common/monitor/utilization/infoBlock/progressBar/Old.vue

@@ -1,65 +0,0 @@
-<template>
-  <div class="bg w-full">
-    <div
-      v-if="props.percent !== 0"
-      :style="props.innerFillContainerStyles"
-      class="inner-fill-container"
-    ></div>
-    <div class="cutted-container-block">
-      <div
-        v-for="(item, key) in props.itemsForPrint"
-        :key="key"
-        :style="`width: ${item.width}%;background-color: ${item.color}; left: ${item.left}%`"
-        :class="[
-          'inner-fill-container',
-          { one: props.itemsForPrint.length === 1 },
-        ]"
-      ></div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type {
-  UI_I_UtilizationProgressInnerFillStyles,
-  UI_I_UtilizationProgressItemForPrint,
-} from '~/components/common/monitor/utilization/infoBlock/progressBar/lib/models/interfaces'
-
-const props = defineProps<{
-  percent: number | string
-  innerFillContainerStyles: UI_I_UtilizationProgressInnerFillStyles
-  itemsForPrint: UI_I_UtilizationProgressItemForPrint[]
-}>()
-</script>
-
-<style scoped lang="scss">
-.bg {
-  background: #ffffff;
-  border: 1px solid #666666;
-  height: 20px;
-  border-radius: 5px;
-
-  .inner-fill-container {
-    position: absolute;
-    height: 20px;
-    border-radius: 5px;
-  }
-
-  .cutted-container-block {
-    .inner-fill-container:not(.one) {
-      border-radius: 0;
-
-      &:first-child {
-        border-radius: 5px 0 0 5px;
-      }
-      &:not(:first-child):not(:last-child) {
-        border-left: 1px solid #ffffff;
-        border-right: 1px solid #ffffff;
-      }
-      &:last-child {
-        border-radius: 0 5px 5px 0;
-      }
-    }
-  }
-}
-</style>

package/components/common/monitor/utilization/infoBlock/progressBar/ProgressBar.vue

@@ -1,84 +0,0 @@
-<template>
-  <component
-    :is="currentComponent"
-    :percent="percent"
-    :inner-fill-container-styles="innerFillContainerStyles"
-    :items-for-print="itemsForPrint"
-  />
-</template>
-
-<script setup lang="ts">
-import type { UI_I_UtilizationDataItem } from '~/components/common/monitor/utilization/lib/models/interfaces'
-import type {
-  UI_I_UtilizationProgressInnerFillStyles,
-  UI_I_UtilizationProgressItemForPrint,
-} from '~/components/common/monitor/utilization/infoBlock/progressBar/lib/models/interfaces'
-
-const props = defineProps<{
-  infoData: UI_I_UtilizationDataItem | null
-  maxItem: UI_I_UtilizationDataItem['data'][0] | null
-  percent: number | string
-  color: string
-}>()
-
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-const currentComponent = computed(() =>
-  isNewView.value
-    ? defineAsyncComponent(() => import('./New.vue'))
-    : defineAsyncComponent(() => import('./Old.vue'))
-)
-
-const percent = computed<number>(() => Number(props.percent))
-
-const itemsForPrint = ref<UI_I_UtilizationProgressItemForPrint[]>([])
-
-const innerFillContainerStyles =
-  computed<UI_I_UtilizationProgressInnerFillStyles>(() => ({
-    width: `${percent.value}%`,
-    backgroundColor: `${props.color}`,
-  }))
-
-watch(
-  () => props.infoData,
-  (newValue) => {
-    if (!newValue) return
-
-    newValue.data.forEach((item) => {
-      if (
-        item.color &&
-        !['consumed'].find((item2) =>
-          item.labelKey.toLowerCase().includes(item2)
-        ) &&
-        parseFloat(item.value.replace(/[^\d.-]/g, '')) !== 0
-      )
-        itemsForPrint.value.push(item)
-    })
-    itemsForPrint.value = itemsForPrint.value.filter((item) =>
-      item.value ? parseFloat(item.value.replace(/[^\d.-]/g, '')) !== 0 : false
-    )
-
-    let currentLeft = 0
-
-    const total = parseFloat(props.maxItem.value.replace(/[^\d.-]/g, ''))
-
-    itemsForPrint.value = itemsForPrint.value.map((item) => {
-      const width = item.value
-        ? (parseFloat(item.value.replace(/[^\d.-]/g, '')) / total) * 100
-        : 0
-
-      const segment = {
-        left: currentLeft,
-        width: width,
-        color: item.colorKey ? `var(${item.colorKey})` : item.color,
-      }
-      currentLeft += width
-      return segment
-    })
-  },
-  { immediate: true, deep: true }
-)
-</script>
-
-<style scoped lang="scss"></style>

package/components/common/monitor/utilization/infoBlock/progressBar/lib/models/interfaces.ts

@@ -1,10 +0,0 @@
-export interface UI_I_UtilizationProgressInnerFillStyles {
-  width: string
-  backgroundColor: string
-}
-
-export interface UI_I_UtilizationProgressItemForPrint {
-  left: number
-  width: number
-  color: string
-}

package/components/common/monitor/utilization/lib/models/types.ts

@@ -1 +0,0 @@
-export type UI_T_UtilizationDataItemType = 'cpu' | 'memory'

package/components/common/monitor/utilization/new/New.vue

@@ -1,167 +0,0 @@
-<template>
-  <div class="utilization flex flex-col h-full overflow-hidden">
-    <common-monitor-utilization-new-skeleton v-if="props.isLoading" />
-    <template v-else>
-      <div class="flex flex-wrap justify-between gap-4 mb-4 px-[6px]">
-        <h3 class="utilization-title text-[18px] font-[500]">
-          {{ localization.common.utilization }}
-        </h3>
-
-        <ui-button
-          id="utilization-settings-edit-button"
-          test-id="utilization-settings-edit-button"
-          variant="text"
-          class="utilization-settings-edit-button"
-          is-without-sizes
-          is-without-height
-          @click="isShowShowSettings = !isShowShowSettings"
-        >
-          <ui-icon name="settings" width="18px" height="18px" />
-        </ui-button>
-        <ui-popup-window
-          v-model="isShowShowSettings"
-          test-id="utilization-settings-select"
-          elem-id="utilization-settings-edit-button"
-          :margin-between-trigger="4"
-          width="144px"
-          left
-        >
-          <ul class="utilization-settings-items grid gap-2 p-2">
-            <li v-for="item in allDataLocal" :key="item.id" class="list-item">
-              <ui-checkbox
-                v-model="item.isShow"
-                :test-id="`utilization-settings-${item.id}`"
-                :label-text="item.title"
-                size="md"
-              />
-            </li>
-          </ul>
-        </ui-popup-window>
-      </div>
-
-      <div class="utilization-info-block-flex-container overflow-auto">
-        <ui-portlet-sortable-view
-          :portlets="portlets"
-          :name="portletsPageName"
-          @change-container-size="onChangeContainerSize"
-        >
-          <template
-            #default="{ portletId, dragged, isOpen, draggedAny, isLast }"
-          >
-            <common-monitor-utilization-new-portlet
-              :all-data="allDataLocal"
-              :portlet-id="portletId"
-              :dragged="dragged"
-              :dragged-any="draggedAny"
-              :is-open="isOpen"
-              :is-last="isLast"
-              :not-single-column-block="notSingleColumnBlock"
-              @toggle-portlet="onTogglePortlet"
-            />
-          </template>
-        </ui-portlet-sortable-view>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Portlet } from '~/node_modules/bfg-uikit/components/ui/portlet/lib/models/interfaces'
-import { togglePortletFunc } from '~/node_modules/bfg-uikit/components/ui/portlet/lib/utils/utils'
-import type { UI_I_UtilizationDataItem } from '~/components/common/monitor/utilization/lib/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import { getPortletsLocal } from '~/components/common/monitor/utilization/new/lib/utils/newPortlet'
-
-const allDataLocal = defineModel<UI_I_UtilizationDataItem[]>('all-data', {
-  required: true,
-})
-const props = defineProps<{
-  isLoading: boolean
-}>()
-const emits = defineEmits<{
-  (event: 'set-items-show-settings'): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const isShowShowSettings = ref<boolean>(false)
-
-const portletsPageName = 'utilization'
-
-const portlets = ref<UI_I_Portlet[]>([])
-
-const initialPortlets: UI_I_Portlet[] = []
-
-const containerWidth = ref<number>(0)
-
-const notSingleColumnBlock = computed<boolean>(
-  () =>
-    containerWidth.value > 1150 ||
-    (containerWidth.value < 720 && containerWidth.value > 500)
-)
-
-const onChangeContainerSize = (width: number): void => {
-  containerWidth.value = width
-}
-
-const getPortletData = (): void => {
-  portlets.value = getPortletsLocal(portletsPageName, initialPortlets)
-}
-
-const onTogglePortlet = (id: string): void => {
-  togglePortletFunc(id, portletsPageName, initialPortlets, getPortletData)
-}
-
-watch(
-  allDataLocal,
-  (newValue) => {
-    if (newValue.length) {
-      newValue.forEach((item) => {
-        initialPortlets.push({
-          id: item.id,
-          list: 1,
-          isOpen: true,
-        })
-      })
-      getPortletData()
-      emits('set-items-show-settings')
-    }
-  },
-  { immediate: true, deep: true }
-)
-</script>
-
-<style>
-:root {
-  --utilization-settings-trigger-btn-bg-color: #f6f7f8;
-}
-:root.dark-theme {
-  --utilization-settings-trigger-btn-bg-color: #283948;
-}
-</style>
-
-<style scoped lang="scss">
-.utilization {
-  padding-top: 16px;
-
-  &-title {
-    color: var(--title-form-first-color);
-  }
-
-  .utilization-settings-edit-button {
-    width: 34px;
-    height: 34px;
-    border: 1px solid var(--line-color);
-    color: var(--modal-icon);
-    background-color: var(--btn-default-outline-bg-color);
-    &:hover {
-      background-color: var(--utilization-settings-trigger-btn-bg-color);
-    }
-  }
-  .utilization-settings-items {
-    .list-item {
-      padding: 7px 9px;
-    }
-  }
-}
-</style>

package/components/common/monitor/utilization/new/Portlet.vue

@@ -1,42 +0,0 @@
-<template>
-  <ui-portlet
-    v-if="selectedItem?.isShow"
-    :title="selectedItem.title"
-    :dragged="props.dragged"
-    :dragged-any="props.draggedAny"
-    :is-open="props.isOpen"
-    :portlet-id="props.portletId"
-    :is-last="props.isLast"
-    :not-single="!props.notSingleColumnBlock"
-    :test-id="`utilization-portlet-${props.portletId}`"
-    @toggle="emits('toggle-portlet', $event)"
-  >
-    <template #portletBody>
-      <common-monitor-utilization-info-block :info-data="selectedItem" />
-    </template>
-  </ui-portlet>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_UtilizationDataItem } from '~/components/common/monitor/utilization/lib/models/interfaces'
-
-const props = defineProps<{
-  allData: UI_I_UtilizationDataItem[]
-  portletId: string
-  dragged: boolean
-  isOpen: boolean
-  isLast: boolean
-  draggedAny: boolean
-  notSingleColumnBlock: boolean
-}>()
-
-const emits = defineEmits<{
-  (event: 'toggle-portlet', id: string): void
-}>()
-
-const selectedItem = computed<UI_I_UtilizationDataItem | null>(
-  () => props.allData.find((item) => item.id === props.portletId) || null
-)
-</script>
-
-<style scoped lang="scss"></style>