bfg-common 1.4.579 → 1.4.581

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 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;
-}
+/* _____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;
+}

package/assets/scss/common/theme.scss

@@ -156,6 +156,7 @@
   --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;
@@ -313,6 +314,7 @@
   --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,82 +6,84 @@
       'diagram-in-portlet': props.inPortlet,
     }"
   >
-    <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"
-          />
+    <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>
         </template>
-      </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>
+        <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>
   </div>
 </template>
 
@@ -226,9 +228,12 @@ const adaptersPositionsY = computed(() =>
   }, [])
 )
 
-const svgClasses = computed(() => ({
-  'diagram-portlet': !props.inPortlet,
-}))
+const svgClasses = computed(() => [
+  'diagram-svg',
+  {
+    'diagram-portlet': !props.inPortlet,
+  },
+])
 
 const preserveAspectRatio = computed<string | undefined>(() =>
   props.inPortlet ? 'xMinYMin' : undefined
@@ -242,14 +247,14 @@ const svgHeight = computed<number>(
 )
 
 const viewBox = computed<string>(() =>
-  props.inPortlet ? '0 0 725 1' : `0 0 740 ${svgHeight.value}`
+  props.inPortlet ? '0 0 725 1' : `0 0 725 ${svgHeight.value}`
 )
 
 const diagramHeight = computed<number>(() =>
-  props.inPortlet ? svgHeight.value / 1.35 : svgHeight.value
+  props.inPortlet ? svgHeight.value / 1.28 : svgHeight.value
 )
 
-const diagramWidth = computed<number>(() => (props.inPortlet ? 560 : 740))
+const diagramWidth = computed<number>(() => (props.inPortlet ? 560 : 725))
 
 const hasActiveAdapter = computed<boolean>(() => {
   let flag = false
@@ -333,10 +338,18 @@ const onSelectNetwork = (networkId: string): void => {
     display: flex;
     justify-content: center;
     margin: 16px 16px 30px;
-    padding: 40px 0 8.5px;
+    padding: 16px;
     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,6 +645,7 @@ watch(
     }
 
     if (selectedNetwork.value !== '-1') {
+      cashedNetworkId.value = '-1'
       onSelectNetwork(selectedNetwork.value)
       return
     }
@@ -675,7 +676,15 @@ 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(
@@ -684,6 +693,8 @@ const onSelectNetwork = (networkId: string): void => {
     adaptersWithPositions.value
   )
 
+  cashedNetworkId.value = networkId
+
   if (!selectNetworkData) return
 
   selectedSwitchLineY.value = selectNetworkData.selectedSwitchLineY
@@ -798,6 +809,8 @@ const onTogglePorts = (
 }
 
 const handlePortToggle = () => {
+  cashedNetworkId.value = '-1'
+
   selectedPort.value.portId !== '-1' &&
     onSelectPort(selectedPort.value.networkId, selectedPort.value.portId)
   selectedAdapter.value.adapterId !== '-1' &&
@@ -813,6 +826,8 @@ const handlePortToggle = () => {
 }
 
 const onToggleAdapters = (): void => {
+  cashedNetworkId.value = '-1'
+
   const newState = !adaptersWithPositions.value.toggle
   const payload: Omit<UI_I_ToggleDiagramAdaptersPayload, 'paths'> = {
     isToggle: newState,
@@ -830,6 +845,11 @@ 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
@@ -846,7 +866,8 @@ const onClickDiagram = (ev: MouseEvent): void => {
 <style scoped lang="scss">
 .diagram {
   &-min-width {
-    min-width: 745px;
+    //min-width: 745px;
+    //min-width: 764px;
   }
   &-main-container {
     padding-top: 5px;