bfg-common 1.5.487 → 1.5.488

package/components/common/wizards/network/add/AddNew.vue

@@ -1,138 +1,265 @@
 <template>
-  <ui-wizard
-    :show="props.show"
-    :steps="props.wizard.steps"
-    :selected-scheme="props.selectedScheme"
-    :is-loading="props.wizard.wizardLoader.status"
-    :title="localization.common.addNetworking"
-    :sub-title="props.hostName"
-    :texts="texts"
-    test-id="add-networking-wizard"
-    @change-steps="onChangeSteps"
-    @hide="emits('hide')"
-    @submit="emits('submit')"
+  <div
+    :class="{
+      'is-manager-step':
+        props.wizard.selectedStepId === 2 || props.wizard.selectedStepId === 6,
+    }"
   >
-    <template #content="{ selectedStep }">
-      <ui-wizard-block
-        v-if="selectedStep.id === 0"
-        :sub-title-height="selectConnectionTypeHeight"
-      >
-        <template #subTitle>
-          <div ref="selectConnectionTypeBlock">
-            <div class="subtitle-block flex flex-col">
-              <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
-              <ui-line margin="12px 0 0" />
+    <ui-wizard
+      :show="props.show"
+      :steps="props.wizard.steps"
+      :selected-scheme="props.selectedScheme"
+      :is-loading="props.wizard.wizardLoader.status"
+      :title="localization.common.addNetworking"
+      :sub-title="props.hostName"
+      :texts="texts"
+      test-id="add-networking-wizard"
+      @change-steps="onChangeSteps"
+      @hide="emits('hide')"
+      @submit="emits('submit')"
+    >
+      <template #content="{ selectedStep }">
+        <ui-wizard-block
+          v-if="selectedStep.id === 0"
+          :sub-title-height="selectConnectionTypeHeight"
+        >
+          <template #subTitle>
+            <div ref="selectConnectionTypeBlock">
+              <div class="subtitle-block flex flex-col">
+                <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
+                <ui-line margin="12px 0 0" />
+              </div>
             </div>
-          </div>
-        </template>
-        <template #content>
-          <common-wizards-network-add-steps-select-connection-type
-            v-model="connectionTypeLocal"
-          />
-        </template>
-      </ui-wizard-block>
-
-      <ui-wizard-block
-        v-if="selectedStep.id === 1"
-        :sub-title-height="selectTargetDeviceHeight"
-      >
-        <template #subTitle>
-          <div ref="selectTargetDeviceBlock">
-            <div class="subtitle-block flex flex-col">
-              <ui-alert
-                :messages="props.alertMessages[selectedStep.id]"
-                test-id="alert-3"
-                class="mb-4"
-                @hide="emits('hide-alert', selectedStep.id)"
-              />
-              <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
-              <ui-line margin="12px 0 0" />
+          </template>
+          <template #content>
+            <common-wizards-network-add-steps-select-connection-type
+              v-model="connectionTypeLocal"
+            />
+          </template>
+        </ui-wizard-block>
+
+        <ui-wizard-block
+          v-if="selectedStep.id === 1"
+          :sub-title-height="selectTargetDeviceHeight"
+        >
+          <template #subTitle>
+            <div ref="selectTargetDeviceBlock">
+              <div class="subtitle-block flex flex-col">
+                <template
+                  v-for="(message, field) in selectedStep.fields"
+                  :key="field"
+                >
+                  <ui-alert
+                    :messages="[message.alert]"
+                    test-id="select-target-device-alert"
+                    class="mb-4"
+                    @hide="emits('hide-alert', selectedStep.id, field)"
+                  />
+                </template>
+                <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
+                <ui-line margin="12px 0 0" />
+              </div>
             </div>
-          </div>
-        </template>
-        <template #content>
-          <common-wizards-network-add-steps-select-target-device
-            :wizard="props.wizard"
-            :target-device="props.targetDevice"
-            :connection-type="connectionTypeLocal"
-            :standard-switches-initial="props.standardSwitchesInitial"
-            :messages-fields="selectedStep.fields"
-            :alert-messages="props.alertMessages[1]"
-            :selected-standard-switch-id="props.selectedStandardSwitchId"
-            :selected-switch-id="props.selectedSwitchId"
-            @hide-alert="onHideAlert"
-            @change-target-device="onChangeTargetDevice"
-          />
-        </template>
-      </ui-wizard-block>
-
-      <common-wizards-network-add-steps-create-standard-switch
-        v-if="selectedStep.id === 2 || selectedStep.id === 6"
-        :free-adapters="props.freeAdapters"
-        :added-adapters="props.addedAdapters"
-        :core-adapters="props.coreAdapters"
-        :adapter-status="props.adapterStatus"
-        :adapters="props.adapters"
-        :is-show-no-connected-active-adapters-modal="
-          props.isShowNoConnectedActiveAdaptersModal
-        "
-        :is-show-no-active-adapters-modal="props.isShowNoActiveAdaptersModal"
-        :is-dark-mode="props.isDarkMode"
-        @get-free-adapters="onGetFreeAdapters"
-        @change-added-adapters="onChangeAddedAdapters"
-        @change-adapter-status="onChangeAdapterStatus"
-        @confirm-no-active-adapters-modal="
-          emits('confirm-no-active-adapters-modal')
-        "
-        @hide-no-connected-active-adapters-modal="
-          emits('hide-no-connected-active-adapters-modal')
-        "
-        @hide-no-active-adapters-modal="emits('hide-no-active-adapters-modal')"
-      />
-      <common-wizards-network-add-steps-port-properties
-        v-if="selectedStep.id === 3"
-        :wizard="props.wizard"
-        :port-properties="props.portProperties"
-        :mtu-from-switch="props.mtuFromSwitch"
-        :project="props.project"
-        :messages-fields="selectedStep.fields"
-        :alert-messages="props.alertMessages[3]"
-        :tcp-stacks="props.tcpStacks"
-        @change-gateway-flag="onChangeGatewayFlag"
-        @change-port-properties="onChangePortProperties"
-        @hide-alert="onHideAlert"
-      />
-      <common-wizards-network-add-steps-ip-four-settings
-        v-if="selectedStep.id === 4"
-        :wizard="props.wizard"
-        :ip-four-settings="props.ipFourSettings"
-        :messages-fields="selectedStep.fields"
-        :alert-messages="props.alertMessages[4]"
-        :tcp-stacks="props.tcpStacks"
-        :tcp="props.portProperties.tcp"
-        :gateway-flag="props.gatewayFlag"
-        @change-gateway-flag="onChangeGatewayFlag"
-        @change-ip-four-settings="onChangeIpFourSettings"
-        @hide-alert="onHideAlert"
-      />
-      <common-wizards-network-add-steps-connection-settings
-        v-if="selectedStep.id === 5"
-        :wizard="props.wizard"
-        :connection-settings="props.connectionSettings"
-        :messages-fields="selectedStep.fields"
-        :alert-messages="props.alertMessages[5]"
-        @change-connection-settings="onChangeConnectionSettings"
-        @hide-alert="onHideAlert"
-      />
-      <!--      <common-wizards-network-add-steps-physical-adapter-->
-      <!--        v-if="selectedStep.id === 6"-->
-      <!--      />-->
-      <common-wizards-network-add-steps-ready-complete
-        v-if="selectedStep.id === 7"
-        :ready-complete-fields="props.readyCompleteFields"
-      />
-    </template>
-  </ui-wizard>
+          </template>
+          <template #content>
+            <common-wizards-network-add-steps-select-target-device
+              :wizard="props.wizard"
+              :target-device="props.targetDevice"
+              :connection-type="connectionTypeLocal"
+              :standard-switches-initial="props.standardSwitchesInitial"
+              :messages-fields="selectedStep.fields"
+              :alert-messages="props.alertMessages[selectedStep.id]"
+              :selected-standard-switch-id="props.selectedStandardSwitchId"
+              :selected-switch-id="props.selectedSwitchId"
+              @change-target-device="onChangeTargetDevice"
+            />
+          </template>
+        </ui-wizard-block>
+
+        <ui-wizard-block
+          v-if="selectedStep.id === 2 || selectedStep.id === 6"
+          :sub-title-height="createStandardSwitchHeight"
+        >
+          <template #subTitle>
+            <div ref="createStandardSwitchBlock">
+              <div class="subtitle-block flex flex-col">
+                <template
+                  v-for="(message, field) in selectedStep.fields"
+                  :key="field"
+                >
+                  <ui-alert
+                    :messages="[message.alert]"
+                    test-id="create-standard-switch-alert"
+                    class="mb-4"
+                    @hide="emits('hide-alert', selectedStep.id, field)"
+                  />
+                </template>
+                <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
+                <ui-line margin="12px 0 0" />
+              </div>
+            </div>
+          </template>
+          <template #content>
+            <common-wizards-network-add-steps-create-standard-switch
+              :free-adapters="props.freeAdapters"
+              :added-adapters="props.addedAdapters"
+              :core-adapters="props.coreAdapters"
+              :adapter-status="props.adapterStatus"
+              :adapters="props.adapters"
+              :is-show-no-connected-active-adapters-modal="
+                props.isShowNoConnectedActiveAdaptersModal
+              "
+              :is-show-no-active-adapters-modal="
+                props.isShowNoActiveAdaptersModal
+              "
+              :is-dark-mode="props.isDarkMode"
+              @get-free-adapters="onGetFreeAdapters"
+              @change-added-adapters="onChangeAddedAdapters"
+              @change-adapter-status="onChangeAdapterStatus"
+              @confirm-no-active-adapters-modal="
+                emits('confirm-no-active-adapters-modal')
+              "
+              @hide-no-connected-active-adapters-modal="
+                emits('hide-no-connected-active-adapters-modal')
+              "
+              @hide-no-active-adapters-modal="
+                emits('hide-no-active-adapters-modal')
+              "
+            />
+          </template>
+        </ui-wizard-block>
+
+        <ui-wizard-block
+          v-if="selectedStep.id === 3"
+          :sub-title-height="portPropertiesHeight"
+        >
+          <template #subTitle>
+            <div ref="portPropertiesBlock">
+              <div class="subtitle-block flex flex-col">
+                <template
+                  v-for="(message, field) in selectedStep.fields"
+                  :key="field"
+                >
+                  <ui-alert
+                    :messages="[message.alert]"
+                    test-id="port-properties-alert"
+                    class="mb-4"
+                    @hide="emits('hide-alert', selectedStep.id, field)"
+                  />
+                </template>
+                <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
+                <ui-line margin="12px 0 0" />
+              </div>
+            </div>
+          </template>
+          <template #content>
+            <common-wizards-network-add-steps-port-properties
+              :wizard="props.wizard"
+              :port-properties="props.portProperties"
+              :mtu-from-switch="props.mtuFromSwitch"
+              :project="props.project"
+              :messages-fields="selectedStep.fields"
+              :alert-messages="props.alertMessages[selectedStep.id]"
+              :tcp-stacks="props.tcpStacks"
+              @change-gateway-flag="onChangeGatewayFlag"
+              @change-port-properties="onChangePortProperties"
+            />
+          </template>
+        </ui-wizard-block>
+
+        <ui-wizard-block
+          v-if="selectedStep.id === 4"
+          :sub-title-height="ipFourSettingsHeight"
+        >
+          <template #subTitle>
+            <div ref="ipFourSettingsBlock">
+              <div class="subtitle-block flex flex-col">
+                <template
+                  v-for="(message, field) in selectedStep.fields"
+                  :key="field"
+                >
+                  <ui-alert
+                    :messages="[message.alert]"
+                    test-id="ip-four-settings-alert"
+                    class="mb-4"
+                    @hide="emits('hide-alert', selectedStep.id, field)"
+                  />
+                </template>
+                <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
+                <ui-line margin="12px 0 0" />
+              </div>
+            </div>
+          </template>
+          <template #content>
+            <common-wizards-network-add-steps-ip-four-settings
+              :wizard="props.wizard"
+              :ip-four-settings="props.ipFourSettings"
+              :messages-fields="selectedStep.fields"
+              :alert-messages="props.alertMessages[selectedStep.id]"
+              :tcp-stacks="props.tcpStacks"
+              :tcp="props.portProperties.tcp"
+              :gateway-flag="props.gatewayFlag"
+              @change-gateway-flag="onChangeGatewayFlag"
+              @change-ip-four-settings="onChangeIpFourSettings"
+            />
+          </template>
+        </ui-wizard-block>
+
+        <ui-wizard-block
+          v-if="selectedStep.id === 5"
+          :sub-title-height="connectionSettingsHeight"
+        >
+          <template #subTitle>
+            <div ref="connectionSettingsBlock">
+              <div class="subtitle-block flex flex-col">
+                <template
+                  v-for="(message, field) in selectedStep.fields"
+                  :key="field"
+                >
+                  <ui-alert
+                    :messages="[message.alert]"
+                    test-id="connection-settings-alert"
+                    class="mb-4"
+                    @hide="emits('hide-alert', selectedStep.id, field)"
+                  />
+                </template>
+                <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
+                <ui-line margin="12px 0 0" />
+              </div>
+            </div>
+          </template>
+          <template #content>
+            <common-wizards-network-add-steps-connection-settings
+              :wizard="props.wizard"
+              :connection-settings="props.connectionSettings"
+              :messages-fields="selectedStep.fields"
+              :alert-messages="props.alertMessages[selectedStep.id]"
+              @change-connection-settings="onChangeConnectionSettings"
+            />
+          </template>
+        </ui-wizard-block>
+
+        <ui-wizard-block
+          v-if="selectedStep.id === 7"
+          :sub-title-height="readyCompleteHeight"
+        >
+          <template #subTitle>
+            <div ref="readyCompleteBlock">
+              <div class="subtitle-block flex flex-col">
+                <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
+                <ui-line margin="12px 0 0" />
+              </div>
+            </div>
+          </template>
+          <template #content>
+            <common-wizards-network-add-steps-ready-complete
+              :ready-complete-fields="props.readyCompleteFields"
+            />
+          </template>
+        </ui-wizard-block>
+      </template>
+    </ui-wizard>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -191,7 +318,7 @@ const props = defineProps<{
 const emits = defineEmits<{
   (event: 'update:connection-type', value: string): void
   (event: 'change-connection-settings', value: UI_I_ConnectionSettings): void
-  (event: 'hide-alert', value: number): void
+  (event: 'hide-alert', value: number, field: string): void
   (event: 'change-gateway-flag', value: boolean): void
   (event: 'change-ip-four-settings', value: UI_I_IpFourSettings): void
   (event: 'change-port-properties', value: UI_I_PortProperties): void
@@ -236,11 +363,31 @@ const selectConnectionTypeBlock = ref<HTMLElement | null>(null)
 const { height: selectConnectionTypeHeight } = useElementSize(
   selectConnectionTypeBlock
 )
+
 const selectTargetDeviceBlock = ref<HTMLElement | null>(null)
 const { height: selectTargetDeviceHeight } = useElementSize(
   selectTargetDeviceBlock
 )
 
+const connectionSettingsBlock = ref<HTMLElement | null>(null)
+const { height: connectionSettingsHeight } = useElementSize(
+  connectionSettingsBlock
+)
+
+const createStandardSwitchBlock = ref<HTMLElement | null>(null)
+const { height: createStandardSwitchHeight } = useElementSize(
+  createStandardSwitchBlock
+)
+
+const portPropertiesBlock = ref<HTMLElement | null>(null)
+const { height: portPropertiesHeight } = useElementSize(portPropertiesBlock)
+
+const ipFourSettingsBlock = ref<HTMLElement | null>(null)
+const { height: ipFourSettingsHeight } = useElementSize(ipFourSettingsBlock)
+
+const readyCompleteBlock = ref<HTMLElement | null>(null)
+const { height: readyCompleteHeight } = useElementSize(readyCompleteBlock)
+
 const onChangeAddedAdapters = (addedAdaptersNew: string[]): void => {
   emits('change-added-adapters', addedAdaptersNew)
 }
@@ -271,10 +418,6 @@ const onChangeConnectionSettings = (
   emits('change-connection-settings', newFields)
 }
 
-const onHideAlert = (stepId: number): void => {
-  emits('hide-alert', stepId)
-}
-
 const onGetFreeAdapters = (showModal: () => void): void => {
   emits('get-free-adapters', showModal)
 }
@@ -285,230 +428,24 @@ const onChangeSteps = async (value: UI_I_WizardStep[]): Promise<void> => {
 </script>
 
 <style scoped lang="scss">
-:deep(.modal) {
-  & > .modal-dialog > .modal-content > .modal-body {
-    height: calc(100% - 110px);
-    .disabled-on-time {
-      opacity: 0.4;
-      pointer-events: none;
-    }
+.is-manager-step {
+  :deep(.ui-wizard-content-right-bottom) {
+    width: calc(100% - min(320px, 29%) - 284px);
   }
-}
-:deep(.disabled-on-time) {
-  opacity: 0.4;
-  pointer-events: none;
-}
-:deep(.wizard-content-container.add-networking-step) {
-  padding: 0px 15px 10px 10px;
-
-  .danger-not-valid {
-    border: 2px solid red;
-    border-bottom: 1px solid #db2100;
-  }
-  .tooltip-field {
-    margin-right: 12px;
-  }
-
-  .horizontal-flex-container {
-    margin-bottom: 5px;
-    min-height: 36px;
-    display: flex;
-    flex-direction: row;
-  }
-  .property-label-group {
-    width: 140px;
-  }
-  .disabled {
-    opacity: 0.4;
-    pointer-events: none;
-  }
-  .wizard-content-port {
-    .margin-left-property-value-group {
-      margin-left: 10px;
-    }
-
-    .property-value-group {
-      padding-left: 23px;
-    }
-    .horizontal-flex-container {
-      min-height: 24px;
-      margin-bottom: 0;
-    }
-    .radio {
-      min-height: 39px;
-      margin: 10px 0;
-    }
-    .form-block {
-      margin: 12px 0 24px 0;
-      padding-left: 23px;
-
-      &.form-block-ipv {
-        input[type='text'] {
-          width: 143px;
-        }
-        .horizontal-flex-container > label {
-          margin-right: 50px;
-        }
-      }
-    }
-    .edit-vmkernel-adapter-section {
-      padding-top: 12px;
-
-      label {
-        input[type='checkbox'] {
-          margin-right: 4px;
-          transform: translateY(1px);
-        }
-      }
-      .horizontal-flex-container {
-        margin-bottom: 5px;
-      }
-    }
-    .port-properties-network-label {
-      width: 280px;
-    }
-    .port-properties-padding {
-      padding-top: 8px;
-    }
-    .port-properties-mtu-selector {
-      margin-right: 12px;
-    }
-    .port-properties-mtu-container {
-      display: flex;
-    }
-    select {
-      height: 24px;
-    }
-  }
-  .nw-property-value-group {
-    display: inline;
-  }
-}
-
-:deep(.modal-body-content.modal-body-content__confirmation) {
-  display: flex;
-  .confirm-icon-container {
-    margin-right: 20px;
-  }
-  .preserve-newlines {
-    white-space: pre-line;
-    font-size: 15px;
+  :deep(.ui-wizard-content-with-subtitle) {
+    padding-right: 0;
   }
 }
 
-.add-networking-wizard.is-dark {
-  :deep(.wizard-content-container.add-networking-step) {
-    .ready-complete-container {
-      background-color: var(--pannel-bg-color);
-      margin-top: 12px;
-
-      span {
-        color: var(--description-color);
-      }
-    }
-
-    .add-networking-radio-button-description {
-      color: var(--description-color);
-    }
-
-    .property-label-group {
-      color: var(--main-color-mode2);
-    }
-    .flex-property-label-group {
-      color: var(--main-color-mode2);
-    }
-    .flex-property-value-group {
-      select {
-        color: #fff;
-      }
-    }
-    .failover-order-master {
-      .secondary-title label {
-        color: #fff;
-      }
-    }
-    .k-grid-content {
-      background-color: var(--modal-bg-color);
-    }
-    .vui-action-bar {
-      background-color: var(--pannel-bg-color);
-      color: var(--title-color);
-      padding: 8px 0 3px;
-
-      .action-link-container:not(.disabled) {
-        &:hover {
-          background-color: #29414e;
-          border: 1px solid #c7e9ff;
-        }
-      }
-
-      svg {
-        fill: #fff;
-      }
-    }
-
-    .k-grid.k-widget .k-grid-content {
-      border-left: 1px solid #485764;
-      border-right: 1px solid #485764;
-      border-top: 1px solid #ddd;
-      border-bottom: 1px solid #ddd;
-
-      tbody tr {
-        background-color: var(--modal-bg-color);
-
-        td {
-          border-bottom: 1px solid #666666;
-          border-color: #666666;
-        }
-
-        &:hover {
-          background-color: #324f61;
-          color: var(--title-color);
-
-          td {
-            border-bottom: 1px solid #ffffff;
-          }
-        }
-
-        &.k-state-selected {
-          background-color: #d8e3e9;
-          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
-
-          td span {
-            color: #000;
-          }
-        }
-      }
-    }
-
-    .failover-order-details {
-      &.relative-container .absolute-container {
-        background-color: var(--pannel-bg-color);
-        color: var(--main-color-mode2);
-
-        &:has(.no-items-selected-container) {
-          background-color: transparent;
-        }
-      }
-
-      td span {
-        color: var(--main-color-mode2);
-      }
-      button span {
-        color: var(--main-color-mode2);
-
-        &:hover:not(.disabled) {
-          background-color: transparent;
-        }
-      }
-      button.active span {
-        color: #fff;
-      }
+@media (max-width: 1084px) {
+  .is-manager-step {
+    :deep(.ui-wizard-content-right-bottom) {
+      width: calc(100% - min(320px, 29%) - 16px);
     }
   }
+}
 
-  .select-adapter-info span {
-    color: var(--main-color-mode2);
-  }
+:deep(.ui-alert-item) {
+  margin-bottom: 12px;
 }
 </style>