bfg-common 1.4.581 → 1.4.582

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/assets/scss/common/theme.scss

@@ -156,7 +156,6 @@
   --diagram-content-text: #4d5d69;
   --diagram-content-text-hover: #182531;
   --diagram-content-text-selected: #008fd6;
-  --diagram-content-text-selected-hover: #0081c1;
   --diagram-content-second-text: #182531;
   --diagram-content-second-disabled-text: #bdc3c7;
   --diagram-content-third-text: #9da6ad;
@@ -314,7 +313,6 @@
   --diagram-content-text: #e9eaec;
   --diagram-content-text-hover: #ffffff;
   --diagram-content-text-selected: #2ba2de;
-  --diagram-content-text-selected-hover: #008fd6;
   --diagram-content-second-text: #e9eaec;
   --diagram-content-second-disabled-text: #4d5d69;
   --diagram-content-third-text: #9da6ad;

package/components/common/browse/blocks/lib/models/types.ts

@@ -1 +1 @@
-export type UI_T_BlocksWidth = [number, number, number]
+export type UI_T_BlocksWidth = [number, number, number]

package/components/common/browse/lib/models/interfaces.ts

@@ -1,5 +1,5 @@
-export interface UI_I_FileInfo {
-  type: string
-  title: string
-  value: string | number
-}
+export interface UI_I_FileInfo {
+  type: string
+  title: string
+  value: string | number
+}

package/components/common/diagramMain/Diagram.vue

@@ -6,84 +6,82 @@
       'diagram-in-portlet': props.inPortlet,
     }"
   >
-    <div class="diagram-second-container">
-      <svg
-        v-if="props.diagramData && props.isShowDiagram"
-        xmlns="http://www.w3.org/2000/svg"
-        :height="diagramHeight"
-        :width="diagramWidth"
-        :viewBox="viewBox"
-        :preserveAspectRatio="preserveAspectRatio"
-        :class="svgClasses"
-        @click.capture="onClickDiagram"
-      >
-        <common-diagram-main-switch
-          :networks-count="props.networksCount"
-          :main-rect-height="props.mainRectHeight"
-          :main-switch-line="props.mainSwitchLine"
-          :selected-main-line="props.selectedMainLine"
-          :is-visible-line="hasActiveAdapter"
-          :is-selected-linked-with-adapter="isSelectedLinkedWithAdapter"
-          :adapter-line-y="props.adaptersWithPositions.adaptersConnectLineY"
-          :first-and-last-network-lines-y="firstAndLastNetworkLinesY"
-          :networks-with-positions="props.networksWithPositions"
-        />
-        <common-diagram-main-adapter
-          :networks-count="props.networksCount"
-          :adapters-with-positions="props.adaptersWithPositions"
-          :selected-main-line="props.selectedMainLine"
-          :selected-port="props.selectedPort"
-          :selected-adapter="props.selectedAdapter"
-          :selected-network="props.selectedNetwork"
-          :is-visible-line="hasActiveAdapter"
-          :is-dark-mode="props.isDarkMode"
-          :test-id="props.diagramData.testId"
-          :is-selected-linked-with-adapter="isSelectedLinkedWithAdapter"
-          :networks-with-positions="props.networksWithPositions"
-          :first-and-last-network-lines-y="firstAndLastNetworkLinesY"
-          :in-network-lines-y="inNetworkLinesY"
-          @toggle-adapters="onToggleAdapters"
-          @select-adapter="onSelectAdapter"
-          @show-modal="onShowModal"
-        />
-        <template v-if="!!props.networksWithPositions.length">
-          <template
-            v-for="network in props.networksWithPositions"
-            :key="network.id"
-          >
-            <common-diagram-main-network
-              :network="network"
-              :selected-port="props.selectedPort"
-              :selected-adapter="props.selectedAdapter"
-              :selected-network="props.selectedNetwork"
-              :selected-main-line="props.selectedMainLine"
-              :diagram-id="props.diagramData.id"
-              :in-portlet="props.inPortlet"
-              :is-visible-line="hasActiveAdapter"
-              :is-dark-mode="props.isDarkMode"
-              :first-and-last-network-lines-y="firstAndLastNetworkLinesY"
-              :adapter-line-y="props.adaptersWithPositions.adaptersConnectLineY"
-              :adapters-positions-y="adaptersPositionsY"
-              @toggle-ports="onTogglePorts"
-              @select-port="onSelectPort"
-              @select-network="onSelectNetwork"
-              @show-modal="onShowModal"
-            />
-          </template>
+    <svg
+      v-if="props.diagramData && props.isShowDiagram"
+      xmlns="http://www.w3.org/2000/svg"
+      :height="diagramHeight"
+      :width="diagramWidth"
+      :viewBox="viewBox"
+      :preserveAspectRatio="preserveAspectRatio"
+      :class="svgClasses"
+      @click.capture="onClickDiagram"
+    >
+      <common-diagram-main-switch
+        :networks-count="props.networksCount"
+        :main-rect-height="props.mainRectHeight"
+        :main-switch-line="props.mainSwitchLine"
+        :selected-main-line="props.selectedMainLine"
+        :is-visible-line="hasActiveAdapter"
+        :is-selected-linked-with-adapter="isSelectedLinkedWithAdapter"
+        :adapter-line-y="props.adaptersWithPositions.adaptersConnectLineY"
+        :first-and-last-network-lines-y="firstAndLastNetworkLinesY"
+        :networks-with-positions="props.networksWithPositions"
+      />
+      <common-diagram-main-adapter
+        :networks-count="props.networksCount"
+        :adapters-with-positions="props.adaptersWithPositions"
+        :selected-main-line="props.selectedMainLine"
+        :selected-port="props.selectedPort"
+        :selected-adapter="props.selectedAdapter"
+        :selected-network="props.selectedNetwork"
+        :is-visible-line="hasActiveAdapter"
+        :is-dark-mode="props.isDarkMode"
+        :test-id="props.diagramData.testId"
+        :is-selected-linked-with-adapter="isSelectedLinkedWithAdapter"
+        :networks-with-positions="props.networksWithPositions"
+        :first-and-last-network-lines-y="firstAndLastNetworkLinesY"
+        :in-network-lines-y="inNetworkLinesY"
+        @toggle-adapters="onToggleAdapters"
+        @select-adapter="onSelectAdapter"
+        @show-modal="onShowModal"
+      />
+      <template v-if="!!props.networksWithPositions.length">
+        <template
+          v-for="network in props.networksWithPositions"
+          :key="network.id"
+        >
+          <common-diagram-main-network
+            :network="network"
+            :selected-port="props.selectedPort"
+            :selected-adapter="props.selectedAdapter"
+            :selected-network="props.selectedNetwork"
+            :selected-main-line="props.selectedMainLine"
+            :diagram-id="props.diagramData.id"
+            :in-portlet="props.inPortlet"
+            :is-visible-line="hasActiveAdapter"
+            :is-dark-mode="props.isDarkMode"
+            :first-and-last-network-lines-y="firstAndLastNetworkLinesY"
+            :adapter-line-y="props.adaptersWithPositions.adaptersConnectLineY"
+            :adapters-positions-y="adaptersPositionsY"
+            @toggle-ports="onTogglePorts"
+            @select-port="onSelectPort"
+            @select-network="onSelectNetwork"
+            @show-modal="onShowModal"
+          />
         </template>
-        <template v-else>
-          <common-diagram-main-network-no-network />
-        </template>
-        <common-diagram-main-switch-selected
-          :selected-switch-line-y="props.selectedSwitchLineY"
-          :is-visible-line="hasActiveAdapter && isSelectedLinkedWithAdapter"
-          :adapters-positions-y="adaptersPositionsY"
-          :adapter-line-y="props.adaptersWithPositions.adaptersConnectLineY"
-          :is-highlighted-adapter-line="isHighlightedAdapterLine"
-          :in-network-lines-y="inNetworkLinesY"
-        />
-      </svg>
-    </div>
+      </template>
+      <template v-else>
+        <common-diagram-main-network-no-network />
+      </template>
+      <common-diagram-main-switch-selected
+        :selected-switch-line-y="props.selectedSwitchLineY"
+        :is-visible-line="hasActiveAdapter && isSelectedLinkedWithAdapter"
+        :adapters-positions-y="adaptersPositionsY"
+        :adapter-line-y="props.adaptersWithPositions.adaptersConnectLineY"
+        :is-highlighted-adapter-line="isHighlightedAdapterLine"
+        :in-network-lines-y="inNetworkLinesY"
+      />
+    </svg>
   </div>
 </template>
 
@@ -228,12 +226,9 @@ const adaptersPositionsY = computed(() =>
   }, [])
 )
 
-const svgClasses = computed(() => [
-  'diagram-svg',
-  {
-    'diagram-portlet': !props.inPortlet,
-  },
-])
+const svgClasses = computed(() => ({
+  'diagram-portlet': !props.inPortlet,
+}))
 
 const preserveAspectRatio = computed<string | undefined>(() =>
   props.inPortlet ? 'xMinYMin' : undefined
@@ -247,14 +242,14 @@ const svgHeight = computed<number>(
 )
 
 const viewBox = computed<string>(() =>
-  props.inPortlet ? '0 0 725 1' : `0 0 725 ${svgHeight.value}`
+  props.inPortlet ? '0 0 725 1' : `0 0 740 ${svgHeight.value}`
 )
 
 const diagramHeight = computed<number>(() =>
-  props.inPortlet ? svgHeight.value / 1.28 : svgHeight.value
+  props.inPortlet ? svgHeight.value / 1.35 : svgHeight.value
 )
 
-const diagramWidth = computed<number>(() => (props.inPortlet ? 560 : 725))
+const diagramWidth = computed<number>(() => (props.inPortlet ? 560 : 740))
 
 const hasActiveAdapter = computed<boolean>(() => {
   let flag = false
@@ -338,18 +333,10 @@ const onSelectNetwork = (networkId: string): void => {
     display: flex;
     justify-content: center;
     margin: 16px 16px 30px;
-    padding: 16px;
+    padding: 40px 0 8.5px;
     border-radius: 8px;
     background: var(--diagram-container-bg);
     box-shadow: 0 1px 4px 0 #00000014;
-
-    .diagram-second-container {
-      overflow-x: auto;
-
-      .diagram-svg {
-        margin: 22.5px 17.5px;
-      }
-    }
   }
   &-container-new.diagram-in-portlet {
     .diagram-portlet {

package/components/common/diagramMain/DiagramMain.vue

@@ -645,7 +645,6 @@ watch(
     }
 
     if (selectedNetwork.value !== '-1') {
-      cashedNetworkId.value = '-1'
       onSelectNetwork(selectedNetwork.value)
       return
     }
@@ -676,15 +675,7 @@ const onSelectPort = (networkId: string, portId: string): void => {
   selectedPort.value = selectPortData.selectedPort
 }
 
-const cashedNetworkId = ref<string>('-1')
-
 const onSelectNetwork = (networkId: string): void => {
-  if (cashedNetworkId.value === networkId) {
-    resetSelection()
-    cashedNetworkId.value = '-1'
-    return
-  }
-
   selectedNetwork.value = networkId
 
   const selectNetworkData = getSelectNetworkDataFunc(
@@ -693,8 +684,6 @@ const onSelectNetwork = (networkId: string): void => {
     adaptersWithPositions.value
   )
 
-  cashedNetworkId.value = networkId
-
   if (!selectNetworkData) return
 
   selectedSwitchLineY.value = selectNetworkData.selectedSwitchLineY
@@ -809,8 +798,6 @@ const onTogglePorts = (
 }
 
 const handlePortToggle = () => {
-  cashedNetworkId.value = '-1'
-
   selectedPort.value.portId !== '-1' &&
     onSelectPort(selectedPort.value.networkId, selectedPort.value.portId)
   selectedAdapter.value.adapterId !== '-1' &&
@@ -826,8 +813,6 @@ const handlePortToggle = () => {
 }
 
 const onToggleAdapters = (): void => {
-  cashedNetworkId.value = '-1'
-
   const newState = !adaptersWithPositions.value.toggle
   const payload: Omit<UI_I_ToggleDiagramAdaptersPayload, 'paths'> = {
     isToggle: newState,
@@ -845,11 +830,6 @@ const onToggleAdapters = (): void => {
 const onClickDiagram = (ev: MouseEvent): void => {
   const target = ev.target as HTMLElement
   const targetClassList = target.classList
-
-  if (!targetClassList.contains('network-title')) {
-    cashedNetworkId.value = '-1'
-  }
-
   if (targetClassList.contains('main-line__handler')) {
     resetSelection()
     selectedMainLine.value = true
@@ -866,8 +846,7 @@ const onClickDiagram = (ev: MouseEvent): void => {
 <style scoped lang="scss">
 .diagram {
   &-min-width {
-    //min-width: 745px;
-    //min-width: 764px;
+    min-width: 745px;
   }
   &-main-container {
     padding-top: 5px;