bfg-common 1.2.186 → 1.2.187

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

@@ -0,0 +1,874 @@
+<template>
+  <atoms-wizard
+    v-model:show="props.show"
+    :steps="wizard.steps"
+    :selected-scheme="selectedScheme"
+    :is-loading="wizard.wizardLoader.status"
+    :loader-messages="wizard.wizardLoader.messages"
+    :title="title"
+    :was-completed="wasCompleted"
+    :localization="localization"
+    :class="[
+      'add-networking-wizard',
+      {
+        'is-dark': props.isDarkMode,
+      },
+    ]"
+    @change-steps="onChangeSteps"
+    @hide="onHideAddNetworkingModal"
+    @submit="onSubmit"
+  >
+    <template #modalBody="{ selectedStep }">
+      <common-add-networking-steps-select-connection-type
+        v-if="selectedStep.id === 0"
+        :connection-type="connectionType"
+        @change-connection-type="onChangeConnectionType"
+      />
+      <common-add-networking-steps-selected-target-device
+        v-if="selectedStep.id === 1"
+        :wizard="wizard"
+        :target-device="targetDevice"
+        :connection-type="connectionType"
+        :standard-switches-initial="props.standardSwitchesInitial"
+        :messages-fields="selectedStep.fields"
+        :alert-messages="alertMessages[1]"
+        @hide-alert="onHideAlert"
+        @change-target-device="onChangeTargetDevice"
+      />
+      <common-add-networking-steps-create-standard-switch
+        v-if="selectedStep.id === 2"
+        :free-adapters="props.freeAdapters"
+        :added-adapters="addedAdapters"
+        :adapter-status="adapterStatus"
+        :adapters="props.adapters"
+        :is-show-no-connected-active-adapters-modal="
+          isShowNoConnectedActiveAdaptersModal
+        "
+        :is-show-no-active-adapters-modal="isShowNoActiveAdaptersModal"
+        @get-free-adapters="onGetFreeAdapters"
+        @change-added-adapters="onChangeAddedAdapters"
+        @change-adapter-status="onChangeAdapterStatus"
+        @confirm-no-active-adapters-modal="onConfirmNoActiveAdaptersModal"
+        @hide-no-connected-active-adapters-modal="
+          onHideNoConnectedActiveAdaptersModal
+        "
+        @hide-no-active-adapters-modal="onHideNoActiveAdaptersModal"
+      />
+      <common-add-networking-steps-port-properties
+        v-if="selectedStep.id === 3"
+        :wizard="wizard"
+        :port-properties="portProperties"
+        :mtu-from-switch="mtuFromSwitch"
+        :project="props.project"
+        :messages-fields="selectedStep.fields"
+        :alert-messages="alertMessages[3]"
+        @change-port-properties="onChangePortProperties"
+        @hide-alert="onHideAlert"
+      />
+      <common-add-networking-steps-ip-four-settings
+        v-if="selectedStep.id === 4"
+        :wizard="wizard"
+        :ip-four-settings="ipFourSettings"
+        :messages-fields="selectedStep.fields"
+        :alert-messages="alertMessages[4]"
+        @change-ip-four-settings="onChangeIpFourSettings"
+        @hide-alert="onHideAlert"
+      />
+      <common-add-networking-steps-connection-settings
+        v-if="selectedStep.id === 5"
+        :wizard="wizard"
+        :connection-settings="connectionSettings"
+        :messages-fields="selectedStep.fields"
+        :alert-messages="alertMessages[5]"
+        @change-connection-settings="onChangeConnectionSettings"
+        @hide-alert="onHideAlert"
+      />
+      <common-add-networking-steps-physical-adapter
+        v-if="selectedStep.id === 6"
+      />
+      <common-add-networking-steps-ready-complete
+        v-if="selectedStep.id === 7"
+        :ready-complete-fields="readyCompleteFields"
+      />
+    </template>
+  </atoms-wizard>
+</template>
+
+<script setup lang="ts">
+import { UI_I_ArbitraryObject, UI_I_Localization } from '~/models/interfaces'
+import { UI_T_Project } from '~/models/types'
+import {
+  UI_I_PortProperties,
+  UI_I_IpFourSettings,
+  UI_I_ConnectionSettings,
+  UI_I_TargetDevice,
+  UI_I_Switch,
+  UI_I_ReadyCompleteFields,
+  UI_I_AddNetworkingSecondOrThirdSchemeDataSend,
+  UI_I_AddNetworkingZeroOrFirstSchemeDataSend,
+  UI_I_AddNetworkingEmits,
+} from '~/components/common/wizards/network/add/models/interfaces'
+import {
+  UI_I_Adapter,
+  UI_I_AdapterStatus,
+  UI_I_SwitchAdapters,
+} from '~/components/common/diagramMain/models/interfaces'
+import {
+  UI_I_ValidationReturn,
+  UI_I_WizardStep,
+} from '~/components/atoms/wizard/models/interfaces'
+import { UI_E_ValidationFields } from '~/components/common/wizards/network/add/models/enums'
+import { getVlanId } from '~/components/common/wizards/network/add/utils'
+import Wizard from '~/components/atoms/wizard/utils/utils'
+import {
+  createZeroSchemeReadyCompleteFunc,
+  createFirstSchemeReadyCompleteFunc,
+  createSecondSchemeReadyCompleteFunc,
+  createThirdSchemeReadyCompleteFunc,
+  stepsSchemeInitial,
+  stepsFunc,
+  connectionSettingsInitial,
+  portPropertiesInitial,
+  ipFourSettingsInitial,
+  targetDeviceInitial,
+  addNetworkingZeroOrFirstSchemeDataFunc,
+  addNetworkingSecondOrThirdSchemeDataFunc,
+} from '~/components/common/wizards/network/add/config'
+
+import {
+  checkTargetDeviceSync,
+  checkAdaptersSync,
+  checkPortPropertiesSync,
+  checkIpFourSettingsSync,
+  checkConnectionSettingsSync,
+  checkNetworkAsync,
+} from '~/components/common/wizards/network/add/validations/validations'
+
+const props = withDefaults(
+  defineProps<{
+    show: boolean
+    adapters: UI_I_SwitchAdapters
+    standardSwitchesInitial: UI_I_Switch[]
+    freeAdapters: UI_I_Adapter[]
+    project?: UI_T_Project
+    isDarkMode: boolean
+  }>(),
+  {
+    standardSwitchesInitial: () => [],
+    freeAdapters: () => [],
+    project: 'procurator',
+  }
+)
+
+const emits = defineEmits<UI_I_AddNetworkingEmits>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const hostname = ref<string>('')
+const title = computed<string>(
+  () => `${hostname.value} - ${localization.value.addNetworking}`
+)
+
+const wizard: Wizard = new Wizard(
+  stepsFunc(localization.value),
+  stepsSchemeInitial
+)
+const wasCompleted = computed<boolean>(() => wizard.wasCompleted())
+const selectedScheme = computed<number[]>(() => wizard.selectedScheme.value)
+const alertMessages = computed<string[][]>(() => wizard.alertMessages.value)
+
+const readyCompleteFields = ref<UI_I_ReadyCompleteFields[]>([])
+
+// Step's content data (connectionType)
+const connectionType = ref<string>('0')
+
+const onChangeConnectionType = (newConnectionType: string): void => {
+  wizard.resetAfterSelected()
+  connectionType.value = newConnectionType
+  targetDevice.value.standardSwitch =
+    props.standardSwitchesInitial?.[0]?.name || ''
+}
+
+// Step's content data (createStandardSwitch)
+const addedAdapters = ref<string[]>([])
+
+const onChangeAddedAdapters = (addedAdaptersNew: string[]): void => {
+  addedAdapters.value = addedAdaptersNew
+}
+
+const adapterStatus = ref<UI_I_AdapterStatus>({
+  active: [],
+  standby: [],
+  unused: [],
+})
+const onChangeAdapterStatus = (adapterStatusNew: UI_I_AdapterStatus): void => {
+  adapterStatus.value = adapterStatusNew
+}
+
+// Step's content data and changers (targetDevice)
+const targetDevice = ref<UI_I_TargetDevice>(useDeepCopy(targetDeviceInitial))
+const mtuFromSwitch = ref<number>(1500)
+
+const onChangeTargetDevice = (newTargetDevice: UI_I_TargetDevice): void => {
+  const oldTargetDeviceSelected = useDeepCopy(targetDevice.value).selected
+  const newTargetDeviceSelected = newTargetDevice.selected
+
+  if (oldTargetDeviceSelected !== newTargetDeviceSelected) {
+    wizard.resetAfterSelected()
+  }
+
+  const selectedSwitch = props.standardSwitchesInitial.find(
+    (sw) => newTargetDevice.standardSwitch === sw.name
+  )
+
+  if (newTargetDeviceSelected === '1' && selectedSwitch) {
+    mtuFromSwitch.value = selectedSwitch?.mtu || 1500
+  }
+  if (newTargetDeviceSelected === '3') {
+    mtuFromSwitch.value = newTargetDevice.mtu || 1500
+  }
+
+  targetDevice.value = useDeepCopy(newTargetDevice)
+}
+
+// Step's content data and changers (portProperties)
+const portProperties = ref<UI_I_PortProperties>(
+  useDeepCopy(portPropertiesInitial)
+)
+const onChangePortProperties = (newFields: UI_I_PortProperties): void => {
+  portProperties.value = newFields
+}
+
+// Step's content data and changers (ipFourSettings)
+const ipFourSettings = ref<UI_I_IpFourSettings>(ipFourSettingsInitial)
+const onChangeIpFourSettings = (newFields: UI_I_IpFourSettings): void => {
+  ipFourSettings.value = newFields
+}
+
+// Step's content data and changers (connectionSettings)
+const connectionSettings = ref<UI_I_ConnectionSettings>(
+  connectionSettingsInitial
+)
+const onChangeConnectionSettings = (
+  newFields: UI_I_ConnectionSettings
+): void => {
+  connectionSettings.value = newFields
+}
+
+const onHideAlert = (stepId: number): void => {
+  wizard.hideAlertMessagesByStepId(stepId)
+}
+
+// Choosing Scheme
+watch(
+  [connectionType, targetDevice],
+  (newValues, oldValue) => {
+    const newCT = newValues[0] // -> newConnectionType
+    const oldCT = oldValue[0] // -> oldConnectionType
+    const newTD = newValues[1] // -> newTargetDevice
+
+    if (newCT !== oldCT) {
+      newCT === '0' && (targetDevice.value.selected = '1')
+      newCT === '1' && (targetDevice.value.selected = '1')
+      newCT === '2' && (targetDevice.value.selected = '2')
+    }
+    if (newCT === '0') {
+      ;(newTD.selected === '0' || newTD.selected === '1') &&
+        wizard.changeScheme(0)
+      newTD.selected === '3' && wizard.changeScheme(1)
+    }
+    if (newCT === '1') {
+      newTD.selected === '1' && wizard.changeScheme(2)
+      newTD.selected === '3' && wizard.changeScheme(3)
+    }
+    if (newCT === '2') {
+      newTD.selected === '2' && wizard.changeScheme(4)
+      newTD.selected === '3' && wizard.changeScheme(5)
+    }
+  },
+  { deep: true, immediate: true }
+)
+
+const onGetExistingStandardSwitches = (): void => {
+  wizard.setLoader(true)
+  emits('get-existing-standard-switches', () => wizard.setLoader(false))
+}
+
+watch(
+  () => wizard.selectedStepId,
+  (newSelectedStep: number) => {
+    if (
+      newSelectedStep === 1 &&
+      targetDevice.value.selected === '1' &&
+      !targetDevice.value.standardSwitch
+    )
+      onGetExistingStandardSwitches()
+
+    if (newSelectedStep !== 7) return // If last step
+    if (wizard.isSelectedScheme(0)) {
+      readyCompleteFields.value = createZeroSchemeReadyCompleteFunc(
+        targetDevice.value,
+        portProperties.value,
+        ipFourSettings.value,
+        localization.value
+      )
+      return
+    }
+
+    if (wizard.isSelectedScheme(1)) {
+      readyCompleteFields.value = createFirstSchemeReadyCompleteFunc(
+        targetDevice.value,
+        portProperties.value,
+        ipFourSettings.value,
+        addedAdapters.value,
+        localization.value
+      )
+      return
+    }
+    if (wizard.isSelectedScheme(2)) {
+      readyCompleteFields.value = createSecondSchemeReadyCompleteFunc(
+        connectionSettings.value,
+        targetDevice.value,
+        localization.value
+      )
+      return
+    }
+    if (wizard.isSelectedScheme(3)) {
+      readyCompleteFields.value = createThirdSchemeReadyCompleteFunc(
+        connectionSettings.value,
+        targetDevice.value,
+        addedAdapters.value,
+        localization.value
+      )
+    }
+  }
+)
+
+// Reset data
+const reset = (): void => {
+  wizard.reset()
+  connectionType.value = '0'
+  targetDevice.value = useDeepCopy(targetDeviceInitial)
+  connectionSettings.value = useDeepCopy(connectionSettingsInitial)
+  portProperties.value = useDeepCopy(portPropertiesInitial)
+  ipFourSettings.value = useDeepCopy(ipFourSettingsInitial)
+  addedAdapters.value = []
+  adapterStatus.value = {
+    active: [],
+    standby: [],
+    unused: [],
+  }
+}
+
+const isShowNoConnectedActiveAdaptersModal = ref(false)
+const isShowNoActiveAdaptersModal = ref(false)
+
+const showNoConnectedActiveAdaptersModal = (): void => {
+  isShowNoConnectedActiveAdaptersModal.value = true
+}
+const onHideNoConnectedActiveAdaptersModal = (): void => {
+  isShowNoConnectedActiveAdaptersModal.value = false
+}
+const showNoActiveAdaptersModal = (): void => {
+  isShowNoActiveAdaptersModal.value = true
+}
+const onHideNoActiveAdaptersModal = (): void => {
+  isShowNoActiveAdaptersModal.value = false
+}
+
+const onConfirmNoActiveAdaptersModal = (): void => {
+  onHideNoConnectedActiveAdaptersModal()
+  onHideNoActiveAdaptersModal()
+  wizard.selectStepHard(wizard.waitingStepId)
+}
+
+const onGetFreeAdapters = (showAddAdapterModal: () => void): void => {
+  wizard.setLoader(true)
+  emits('get-free-adapters', () => {
+    wizard.setLoader(false)
+    showAddAdapterModal()
+  })
+}
+
+const checkFinal = async (): Promise<UI_I_ArbitraryObject<string>> => {
+  let sendData:
+    | UI_I_AddNetworkingZeroOrFirstSchemeDataSend
+    | UI_I_AddNetworkingSecondOrThirdSchemeDataSend
+
+  let type: 'network' | 'vmkernel'
+
+  if (wizard.isSelectedScheme(0) || wizard.isSelectedScheme(1)) {
+    const vlan = getVlanId(portProperties.value.vlanId)
+
+    sendData = addNetworkingZeroOrFirstSchemeDataFunc(
+      targetDevice.value,
+      Number(vlan),
+      portProperties.value,
+      ipFourSettings.value,
+      wizard.isSelectedScheme(1),
+      adapterStatus.value
+    )
+
+    type = 'vmkernel'
+  }
+
+  if (wizard.isSelectedScheme(2) || wizard.isSelectedScheme(3)) {
+    const vlan = getVlanId(connectionSettings.value.vlanId)
+
+    sendData = addNetworkingSecondOrThirdSchemeDataFunc(
+      connectionSettings.value,
+      targetDevice.value,
+      Number(vlan),
+      wizard.isSelectedScheme(2),
+      adapterStatus.value
+    )
+
+    type = 'network'
+  }
+
+  return new Promise((resolve, _reject) =>
+    emits(
+      'add-networking-data-validate',
+      sendData,
+      type,
+      (err_arg: UI_I_ArbitraryObject<string>): void => {
+        resolve(err_arg)
+      }
+    )
+  )
+}
+
+const finalValidationFunc = async (
+  value: UI_I_WizardStep[]
+): Promise<UI_I_ValidationReturn> => {
+  let stepHasError = false
+
+  wizard.setLoader(true)
+
+  const validationFields: {
+    [key: string]: string
+  } = await checkFinal()
+
+  wizard.setLoader(false)
+
+  for (const fieldName in validationFields) {
+    const stepId = wizard.getStepIdByFieldName(fieldName)
+
+    if (stepId !== -1) {
+      stepHasError = wizard.setValidation(stepId, fieldName, {
+        fieldMessage: validationFields[fieldName],
+        alertMessage: validationFields[fieldName],
+      })
+    }
+  }
+
+  return {
+    stepHasError,
+    newValue: value,
+  }
+}
+
+const validationFunc = async (
+  value: UI_I_WizardStep[],
+  currentStep: UI_I_WizardStep,
+  nextStep: UI_I_WizardStep
+): Promise<UI_I_ValidationReturn> => {
+  let stepHasError = false
+  let stepShouldStop = {
+    ifOnCurrentStep: false,
+    ifFromAnyStep: false,
+    stoppageStepId: -1,
+  }
+
+  if (wizard.isValidateForStep(1, currentStep.id, nextStep.id)) {
+    const targetDeviceValidation = checkTargetDeviceSync(
+      localization.value,
+      targetDevice.value,
+      wizard,
+      value
+    )
+
+    value = targetDeviceValidation.newValue
+
+    stepHasError = stepHasError || targetDeviceValidation.stepHasError
+  }
+
+  if (wizard.isValidateForStep(2, currentStep.id, nextStep.id)) {
+    wizard.waitingStepId = nextStep.id
+
+    const adapterValidation = checkAdaptersSync(
+      localization.value,
+      adapterStatus.value,
+      value,
+      currentStep.id,
+      nextStep.id,
+      props.freeAdapters,
+      showNoActiveAdaptersModal,
+      showNoConnectedActiveAdaptersModal
+    )
+
+    value = adapterValidation.newValue
+
+    stepShouldStop = adapterValidation.stepShouldStop || stepShouldStop
+
+    stepHasError = stepHasError || adapterValidation.stepHasError
+  }
+
+  if (wizard.isValidateForStep(3, currentStep.id, nextStep.id)) {
+    const labelValidation = await checkNetworkAsync(
+      value,
+      portProperties.value.networkLabel,
+      3,
+      UI_E_ValidationFields.PORT_PROPERTIES_NETWORK,
+      emits,
+      localization.value,
+      wizard
+    )
+
+    value = labelValidation.newValue
+
+    const portPropertiesValidation = checkPortPropertiesSync(
+      localization.value,
+      portProperties.value,
+      wizard,
+      value
+    )
+
+    value = portPropertiesValidation.newValue
+
+    stepHasError =
+      stepHasError ||
+      labelValidation.stepHasError ||
+      portPropertiesValidation.stepHasError
+  }
+
+  if (wizard.isValidateForStep(4, currentStep.id, nextStep.id)) {
+    const ipValidation = checkIpFourSettingsSync(
+      localization.value,
+      ipFourSettings.value,
+      wizard,
+      value
+    )
+
+    value = ipValidation.newValue
+
+    stepHasError = stepHasError || ipValidation.stepHasError
+  }
+
+  if (wizard.isValidateForStep(5, currentStep.id, nextStep.id)) {
+    const labelValidation = await checkNetworkAsync(
+      value,
+      connectionSettings.value.networkLabel,
+      5,
+      UI_E_ValidationFields.CONNECTION_SETTINGS_NETWORK,
+      emits,
+      localization.value,
+      wizard
+    )
+
+    value = labelValidation.newValue
+
+    const connectionSettingsValidation = checkConnectionSettingsSync(
+      localization.value,
+      connectionSettings.value,
+      wizard,
+      value
+    )
+
+    value = connectionSettingsValidation.newValue
+
+    stepHasError =
+      stepHasError ||
+      labelValidation.stepHasError ||
+      connectionSettingsValidation.stepHasError
+  }
+
+  return {
+    newValue: value,
+    stepHasError,
+    stepShouldStop,
+  }
+}
+
+const onChangeSteps = async (value: UI_I_WizardStep[]): Promise<void> =>
+  wizard.changeSteps(value, validationFunc, finalValidationFunc)
+
+const onHideAddNetworkingModal = (): void => {
+  emits('hide')
+  reset()
+}
+
+const onSubmit = async (): Promise<void> => {
+  wizard.setLoader(true)
+  let sendData:
+    | UI_I_AddNetworkingZeroOrFirstSchemeDataSend
+    | UI_I_AddNetworkingSecondOrThirdSchemeDataSend
+  let type: 'network' | 'vmkernel' = 'network'
+
+  if (wizard.isSelectedScheme(0) || wizard.isSelectedScheme(1)) {
+    const vlan = getVlanId(portProperties.value.vlanId)
+    type = 'vmkernel'
+    sendData = addNetworkingZeroOrFirstSchemeDataFunc(
+      targetDevice.value,
+      Number(vlan),
+      portProperties.value,
+      ipFourSettings.value,
+      wizard.isSelectedScheme(1),
+      adapterStatus.value
+    )
+  }
+
+  if (wizard.isSelectedScheme(2) || wizard.isSelectedScheme(3)) {
+    const vlan = getVlanId(connectionSettings.value.vlanId)
+    type = 'network'
+    sendData = addNetworkingSecondOrThirdSchemeDataFunc(
+      connectionSettings.value,
+      targetDevice.value,
+      Number(vlan),
+      wizard.isSelectedScheme(2),
+      adapterStatus.value
+    )
+  }
+
+  emits(
+    'send-add-networking-data',
+    sendData,
+    type,
+    () => wizard.setLoader(false),
+    onHideAddNetworkingModal
+  )
+}
+
+onMounted(() => {
+  hostname.value = location.hostname
+})
+</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;
+    }
+  }
+}
+: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;
+  }
+}
+
+.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;
+      }
+    }
+  }
+
+  .select-adapter-info span {
+    color: var(--main-color-mode2);
+  }
+}
+</style>