bfg-common 1.0.21 → 1.0.22

package/components/common/diagramMain/models/types.ts

@@ -1,9 +1,9 @@
-import { UI_I_Adapter } from '~/components/common/diagramMain/models/interfaces'
-
-export type UI_T_AdapterStatusNames = 'active' | 'standby' | 'unused'
-export type UI_T_PropertiesFieldName = 'vlanId' | 'networkLabel'
-export type UI_T_TrafficShapingFieldName = 'average' | 'peak' | 'burstSize'
-export type UI_T_PortPropertiesFieldName = 'mtu'
-export type UI_T_VmKernelAdapterFieldName = 'vm'
-
-export type UI_T_Adapters = UI_I_Adapter & { adapterPosition: number }
+import { UI_I_Adapter } from '~/components/common/diagramMain/models/interfaces'
+
+export type UI_T_AdapterStatusNames = 'active' | 'standby' | 'unused'
+export type UI_T_PropertiesFieldName = 'vlanId' | 'networkLabel'
+export type UI_T_TrafficShapingFieldName = 'average' | 'peak' | 'burstSize'
+export type UI_T_PortPropertiesFieldName = 'mtu'
+export type UI_T_VmKernelAdapterFieldName = 'vm'
+
+export type UI_T_Adapters = UI_I_Adapter & { adapterPosition: number }

package/components/common/diagramMain/network/Block.vue

@@ -1,55 +1,55 @@
-<template>
-  <g data-title="network-main-block-group">
-    <rect
-      data-title="network-main-block"
-      width="280"
-      :height="props.network.networkHeight"
-      x="16.5"
-      :y="props.network.rectPosition"
-      shape-rendering="geometricprecision"
-      class="panel"
-    />
-
-    <common-diagram-main-highlights
-      data-title="network-main"
-      type="main-blue"
-      :height="props.network.networkHeight"
-      :y="props.network.rectPosition"
-      :hide="!(props.selectedNetwork === props.network.id)"
-    />
-
-    <common-diagram-main-highlights
-      data-title="network-main"
-      type="main-orange"
-      :height="props.network.networkHeight"
-      :y="props.network.rectPosition"
-      :hide="
-        !props.selectedMainLine && !props.isNetworkConnectedSelectedAdapter
-      "
-    />
-  </g>
-</template>
-
-<script setup lang="ts">
-import { UI_I_NetworkFullWithPositions } from '~/components/common/diagramMain/models/interfaces'
-
-const props = defineProps<{
-  network: UI_I_NetworkFullWithPositions
-  selectedNetwork: string
-  selectedMainLine: boolean
-  isNetworkConnectedSelectedAdapter: boolean
-}>()
-</script>
-
-<style scoped lang="scss">
-.panel {
-  fill: #fff;
-  stroke: #888;
-
-  margin-bottom: 20px;
-  background-color: #fff;
-  border: 1px solid transparent;
-  border-radius: 0;
-  box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
-}
-</style>
+<template>
+  <g data-title="network-main-block-group">
+    <rect
+      data-title="network-main-block"
+      width="280"
+      :height="props.network.networkHeight"
+      x="16.5"
+      :y="props.network.rectPosition"
+      shape-rendering="geometricprecision"
+      class="panel"
+    />
+
+    <common-diagram-main-highlights
+      data-title="network-main"
+      type="main-blue"
+      :height="props.network.networkHeight"
+      :y="props.network.rectPosition"
+      :hide="!(props.selectedNetwork === props.network.id)"
+    />
+
+    <common-diagram-main-highlights
+      data-title="network-main"
+      type="main-orange"
+      :height="props.network.networkHeight"
+      :y="props.network.rectPosition"
+      :hide="
+        !props.selectedMainLine && !props.isNetworkConnectedSelectedAdapter
+      "
+    />
+  </g>
+</template>
+
+<script setup lang="ts">
+import { UI_I_NetworkFullWithPositions } from '~/components/common/diagramMain/models/interfaces'
+
+const props = defineProps<{
+  network: UI_I_NetworkFullWithPositions
+  selectedNetwork: string
+  selectedMainLine: boolean
+  isNetworkConnectedSelectedAdapter: boolean
+}>()
+</script>
+
+<style scoped lang="scss">
+.panel {
+  fill: #fff;
+  stroke: #888;
+
+  margin-bottom: 20px;
+  background-color: #fff;
+  border: 1px solid transparent;
+  border-radius: 0;
+  box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
+}
+</style>

package/components/common/diagramMain/network/Lines.vue

@@ -1,65 +1,65 @@
-<template>
-  <g data-title="network-lines-group">
-    <line
-      data-title="network-line"
-      x1="332.5"
-      :y1="props.network.connectLineY"
-      x2="362.5"
-      :y2="props.network.connectLineY"
-      shape-rendering="geometricprecision"
-      class="connection-line"
-    />
-
-    <common-diagram-main-highlights
-      data-title="network-selected-main-line"
-      type="line-orange"
-      x="332.5"
-      :y="props.network.connectLineY"
-      x2="362.5"
-      :y2="props.network.connectLineY"
-      :hide="!props.selectedMainLine"
-    />
-
-    <common-diagram-main-highlights
-      data-title="network-selected-line"
-      type="line-orange"
-      x="332.5"
-      :y="props.network.connectLineY"
-      x2="362.5"
-      :y2="props.network.connectLineY"
-      :hide="!props.isNetworkSelectedWithoutPorts"
-    />
-
-    <line
-      data-title="network-invisible-line"
-      x1="332.5"
-      :y1="props.network.connectLineY"
-      x2="362.5"
-      :y2="props.network.connectLineY"
-      shape-rendering="geometricprecision"
-      class="invisible-line main-line__handler"
-    />
-  </g>
-</template>
-
-<script setup lang="ts">
-import { UI_I_NetworkFullWithPositions } from '~/components/common/diagramMain/models/interfaces'
-
-const props = defineProps<{
-  network: UI_I_NetworkFullWithPositions
-  selectedMainLine: boolean
-  isNetworkSelectedWithoutPorts: boolean
-}>()
-</script>
-
-<style scoped lang="scss">
-.connection-line {
-  stroke: #888;
-}
-.invisible-line {
-  cursor: pointer;
-  stroke: #000;
-  stroke-opacity: 0;
-  stroke-width: 10px;
-}
-</style>
+<template>
+  <g data-title="network-lines-group">
+    <line
+      data-title="network-line"
+      x1="332.5"
+      :y1="props.network.connectLineY"
+      x2="362.5"
+      :y2="props.network.connectLineY"
+      shape-rendering="geometricprecision"
+      class="connection-line"
+    />
+
+    <common-diagram-main-highlights
+      data-title="network-selected-main-line"
+      type="line-orange"
+      x="332.5"
+      :y="props.network.connectLineY"
+      x2="362.5"
+      :y2="props.network.connectLineY"
+      :hide="!props.selectedMainLine"
+    />
+
+    <common-diagram-main-highlights
+      data-title="network-selected-line"
+      type="line-orange"
+      x="332.5"
+      :y="props.network.connectLineY"
+      x2="362.5"
+      :y2="props.network.connectLineY"
+      :hide="!props.isNetworkSelectedWithoutPorts"
+    />
+
+    <line
+      data-title="network-invisible-line"
+      x1="332.5"
+      :y1="props.network.connectLineY"
+      x2="362.5"
+      :y2="props.network.connectLineY"
+      shape-rendering="geometricprecision"
+      class="invisible-line main-line__handler"
+    />
+  </g>
+</template>
+
+<script setup lang="ts">
+import { UI_I_NetworkFullWithPositions } from '~/components/common/diagramMain/models/interfaces'
+
+const props = defineProps<{
+  network: UI_I_NetworkFullWithPositions
+  selectedMainLine: boolean
+  isNetworkSelectedWithoutPorts: boolean
+}>()
+</script>
+
+<style scoped lang="scss">
+.connection-line {
+  stroke: #888;
+}
+.invisible-line {
+  cursor: pointer;
+  stroke: #000;
+  stroke-opacity: 0;
+  stroke-width: 10px;
+}
+</style>

package/components/common/diagramMain/network/Network.vue

@@ -1,117 +1,117 @@
-<template>
-  <g>
-    <common-diagram-main-network-block
-      :network="props.network"
-      :selected-network="props.selectedNetwork"
-      :selected-main-line="props.selectedMainLine"
-      :is-network-connected-selected-adapter="isNetworkConnectedSelectedAdapter"
-    />
-
-    <common-diagram-main-network-lines
-      v-if="props.isVisibleLine"
-      :network="props.network"
-      :selected-main-line="props.selectedMainLine"
-      :is-network-selected-without-ports="isNetworkSelectedWithoutPorts"
-    />
-
-    <common-diagram-main-network-second-block
-      :network="props.network"
-      :selected-network="props.selectedNetwork"
-      :selected-main-line="props.selectedMainLine"
-      :network-rect-bottom-position="networkRectBottomPosition"
-      :is-network-connected-selected-adapter="isNetworkConnectedSelectedAdapter"
-    />
-
-    <common-diagram-main-network-contents
-      :network="props.network"
-      :in-portlet="props.inPortlet"
-      :is-network-selected-with-closed-ports="isNetworkSelectedWithClosedPorts"
-      :diagram-id="props.diagramId"
-      @select-network="onSelectNetwork"
-      @show-modal="onShowModal"
-      @toggle-ports="onTogglePorts"
-    />
-
-    <common-diagram-main-port-ports
-      :network="props.network"
-      :selected-port="props.selectedPort"
-      :selected-adapter="props.selectedAdapter"
-      @select-port="onSelectPort"
-      @show-modal="onShowModal"
-    />
-  </g>
-</template>
-
-<script setup lang="ts">
-import {
-  UI_I_SelectedAdapter,
-  UI_I_SelectedPort,
-  UI_I_ModalsInitialData,
-  UI_I_NetworkFullWithPositions,
-} from '~/components/common/diagramMain/models/interfaces'
-
-const props = defineProps<{
-  diagramId: string
-  network: UI_I_NetworkFullWithPositions
-  selectedPort: UI_I_SelectedPort
-  selectedAdapter: UI_I_SelectedAdapter
-  selectedMainLine: boolean
-  selectedNetwork: string
-  inPortlet: boolean
-  isVisibleLine: boolean
-}>()
-
-const isNetworkConnectedSelectedAdapter = computed<boolean>(
-  () =>
-    props.selectedAdapter.connectedPorts?.find(
-      (net) => net.networkId === props.network.id
-    )?.ports.length === 0
-)
-
-const isNetworkSelectedWithoutPorts = computed<boolean>(
-  () =>
-    !!props.selectedAdapter.connectedPorts.find(
-      (net) => net.networkId === props.network.id && net.ports.length === 0
-    ) || props.selectedNetwork === props.network.id
-)
-
-const isNetworkSelectedWithClosedPorts = computed<boolean>(
-  () =>
-    !!props.selectedAdapter.connectedPorts.find(
-      (net) => net.networkId === props.network.id && net.ports.length !== 0
-    ) && !props.network.toggle
-)
-
-const networkRectBottomPosition = computed<number>(
-  () => props.network.rectPosition + props.network.networkHeight
-)
-
-const emits = defineEmits<{
-  (event: 'select-port', networkId: string, portId: string): void
-  (event: 'select-network', networkId: string): void
-  (event: 'show-modal', value: string, properties?: UI_I_ModalsInitialData): void
-  (
-    event: 'toggle-ports',
-    id: string,
-    newState: boolean,
-    diagramId: string
-  ): void
-}>()
-
-const onShowModal = (value: string, properties?: UI_I_ModalsInitialData): void => {
-  emits('show-modal', value, properties)
-}
-const onSelectPort = (networkId: string, portId: string): void => {
-  emits('select-port', networkId, portId)
-}
-const onSelectNetwork = (networkId: string): void => {
-  emits('select-network', networkId)
-}
-const onTogglePorts = (
-  id: string,
-  isToggle: boolean,
-  diagramId: string
-): void => {
-  emits('toggle-ports', id, isToggle, diagramId)
-}
-</script>
+<template>
+  <g>
+    <common-diagram-main-network-block
+      :network="props.network"
+      :selected-network="props.selectedNetwork"
+      :selected-main-line="props.selectedMainLine"
+      :is-network-connected-selected-adapter="isNetworkConnectedSelectedAdapter"
+    />
+
+    <common-diagram-main-network-lines
+      v-if="props.isVisibleLine"
+      :network="props.network"
+      :selected-main-line="props.selectedMainLine"
+      :is-network-selected-without-ports="isNetworkSelectedWithoutPorts"
+    />
+
+    <common-diagram-main-network-second-block
+      :network="props.network"
+      :selected-network="props.selectedNetwork"
+      :selected-main-line="props.selectedMainLine"
+      :network-rect-bottom-position="networkRectBottomPosition"
+      :is-network-connected-selected-adapter="isNetworkConnectedSelectedAdapter"
+    />
+
+    <common-diagram-main-network-contents
+      :network="props.network"
+      :in-portlet="props.inPortlet"
+      :is-network-selected-with-closed-ports="isNetworkSelectedWithClosedPorts"
+      :diagram-id="props.diagramId"
+      @select-network="onSelectNetwork"
+      @show-modal="onShowModal"
+      @toggle-ports="onTogglePorts"
+    />
+
+    <common-diagram-main-port-ports
+      :network="props.network"
+      :selected-port="props.selectedPort"
+      :selected-adapter="props.selectedAdapter"
+      @select-port="onSelectPort"
+      @show-modal="onShowModal"
+    />
+  </g>
+</template>
+
+<script setup lang="ts">
+import {
+  UI_I_SelectedAdapter,
+  UI_I_SelectedPort,
+  UI_I_ModalsInitialData,
+  UI_I_NetworkFullWithPositions,
+} from '~/components/common/diagramMain/models/interfaces'
+
+const props = defineProps<{
+  diagramId: string
+  network: UI_I_NetworkFullWithPositions
+  selectedPort: UI_I_SelectedPort
+  selectedAdapter: UI_I_SelectedAdapter
+  selectedMainLine: boolean
+  selectedNetwork: string
+  inPortlet: boolean
+  isVisibleLine: boolean
+}>()
+
+const isNetworkConnectedSelectedAdapter = computed<boolean>(
+  () =>
+    props.selectedAdapter.connectedPorts?.find(
+      (net) => net.networkId === props.network.id
+    )?.ports.length === 0
+)
+
+const isNetworkSelectedWithoutPorts = computed<boolean>(
+  () =>
+    !!props.selectedAdapter.connectedPorts.find(
+      (net) => net.networkId === props.network.id && net.ports.length === 0
+    ) || props.selectedNetwork === props.network.id
+)
+
+const isNetworkSelectedWithClosedPorts = computed<boolean>(
+  () =>
+    !!props.selectedAdapter.connectedPorts.find(
+      (net) => net.networkId === props.network.id && net.ports.length !== 0
+    ) && !props.network.toggle
+)
+
+const networkRectBottomPosition = computed<number>(
+  () => props.network.rectPosition + props.network.networkHeight
+)
+
+const emits = defineEmits<{
+  (event: 'select-port', networkId: string, portId: string): void
+  (event: 'select-network', networkId: string): void
+  (event: 'show-modal', value: string, properties?: UI_I_ModalsInitialData): void
+  (
+    event: 'toggle-ports',
+    id: string,
+    newState: boolean,
+    diagramId: string
+  ): void
+}>()
+
+const onShowModal = (value: string, properties?: UI_I_ModalsInitialData): void => {
+  emits('show-modal', value, properties)
+}
+const onSelectPort = (networkId: string, portId: string): void => {
+  emits('select-port', networkId, portId)
+}
+const onSelectNetwork = (networkId: string): void => {
+  emits('select-network', networkId)
+}
+const onTogglePorts = (
+  id: string,
+  isToggle: boolean,
+  diagramId: string
+): void => {
+  emits('toggle-ports', id, isToggle, diagramId)
+}
+</script>

package/components/common/diagramMain/network/NoNetwork.vue

@@ -1,47 +1,47 @@
-<template>
-  <g>
-    <rect
-      width="280"
-      height="38"
-      shape-rendering="geometricprecision"
-      x="16.5"
-      y="17.5"
-      fill="#fff"
-      stroke="#888"
-    ></rect>
-    <path
-      d="M 313.5 17.5 H 333.5 V 55.5 H 313.5 "
-      shape-rendering="geometricprecision"
-      fill="#fff"
-      stroke="#888"
-    ></path>
-    <text
-      dy="14px"
-      font-size="14"
-      font-weight="500"
-      x="50"
-      y="27"
-      class="diagram__heading"
-    >
-      {{ localization.noAssociatedPortGroups }}
-    </text>
-  </g>
-</template>
-
-<script setup lang="ts">
-import { UI_I_Localization } from '~/models/interfaces'
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-</script>
-
-<style scoped lang="scss">
-@import '~/assets/scss/common/mixins.scss';
-.diagram {
-  &__heading {
-    @include text($fs: 14px, $fw: 500);
-    fill: #565656;
-    letter-spacing: normal;
-    line-height: 1.2rem;
-  }
-}
-</style>
+<template>
+  <g>
+    <rect
+      width="280"
+      height="38"
+      shape-rendering="geometricprecision"
+      x="16.5"
+      y="17.5"
+      fill="#fff"
+      stroke="#888"
+    ></rect>
+    <path
+      d="M 313.5 17.5 H 333.5 V 55.5 H 313.5 "
+      shape-rendering="geometricprecision"
+      fill="#fff"
+      stroke="#888"
+    ></path>
+    <text
+      dy="14px"
+      font-size="14"
+      font-weight="500"
+      x="50"
+      y="27"
+      class="diagram__heading"
+    >
+      {{ localization.noAssociatedPortGroups }}
+    </text>
+  </g>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped lang="scss">
+@import '~/assets/scss/common/mixins.scss';
+.diagram {
+  &__heading {
+    @include text($fs: 14px, $fw: 500);
+    fill: #565656;
+    letter-spacing: normal;
+    line-height: 1.2rem;
+  }
+}
+</style>