bfg-common 1.2.115 → 1.2.117

package/components/common/adapterManager/NoActiveAdaptersModal.vue

@@ -1,62 +1,62 @@
-<template>
-  <div>
-    <atoms-modal
-      test-id="no-active-adapters"
-      width="576px"
-      height="257px"
-      :show="props.show"
-      :title="localization.physicalNetworkAdaptersWarning"
-      @hide="onHide"
-      @submit="onSubmit"
-    >
-      <template #modalBody>
-        <div class="modal-body-content modal-body-content__confirmation">
-          <div class="confirm-icon-container">
-            <atoms-diagram-icon name="is-warning" />
-          </div>
-          <p class="preserve-newlines">
-            {{
-              `${localization.thereAreNoActivePhysicalNetworkAdaptersForSwitch}
-
-                   ${localization.okOrCancelToReviewYourChanges}`
-            }}
-          </p>
-        </div>
-      </template>
-    </atoms-modal>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_Localization } from '~/models/interfaces'
-
-const props = defineProps<{
-  show: boolean
-  title: string
-}>()
-
-const emits = defineEmits<{
-  (event: 'hide'): void
-  (event: 'submit'): void
-}>()
-
-const onHide = () => emits('hide')
-const onSubmit = () => emits('submit')
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-</script>
-
-<style scoped lang="scss">
-: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;
-  }
-}
-</style>
+<template>
+  <div>
+    <atoms-modal
+      test-id="no-active-adapters"
+      width="576px"
+      height="257px"
+      :show="props.show"
+      :title="localization.physicalNetworkAdaptersWarning"
+      @hide="onHide"
+      @submit="onSubmit"
+    >
+      <template #modalBody>
+        <div class="modal-body-content modal-body-content__confirmation">
+          <div class="confirm-icon-container">
+            <atoms-diagram-icon name="is-warning" />
+          </div>
+          <p class="preserve-newlines">
+            {{
+              `${localization.thereAreNoActivePhysicalNetworkAdaptersForSwitch}
+
+                   ${localization.okOrCancelToReviewYourChanges}`
+            }}
+          </p>
+        </div>
+      </template>
+    </atoms-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+
+const props = defineProps<{
+  show: boolean
+  title: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'submit'): void
+}>()
+
+const onHide = () => emits('hide')
+const onSubmit = () => emits('submit')
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped lang="scss">
+: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;
+  }
+}
+</style>

package/components/common/adapterManager/NoConnectedActiveAdaptersModal.vue

@@ -1,62 +1,62 @@
-<template>
-  <div>
-    <atoms-modal
-      test-id="no-connected-active-adapter"
-      width="576px"
-      height="257px"
-      :show="props.show"
-      :title="localization.physicalNetworkAdaptersWarning"
-      @hide="onHide"
-      @submit="onSubmit"
-    >
-      <template #modalBody>
-        <div class="modal-body-content modal-body-content__confirmation">
-          <div class="confirm-icon-container">
-            <atoms-diagram-icon name="is-warning" />
-          </div>
-          <p class="preserve-newlines">
-            {{
-              `${localization.allActiveAdaptersAreDisconnected}
-
-                   ${localization.okOrCancelToReviewYourChanges}`
-            }}
-          </p>
-        </div>
-      </template>
-    </atoms-modal>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_Localization } from '~/models/interfaces'
-
-const props = defineProps<{
-  show: boolean
-  title: string
-}>()
-
-const emits = defineEmits<{
-  (event: 'hide'): void
-  (event: 'submit'): void
-}>()
-
-const onHide = () => emits('hide')
-const onSubmit = () => emits('submit')
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-</script>
-
-<style scoped lang="scss">
-: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;
-  }
-}
-</style>
+<template>
+  <div>
+    <atoms-modal
+      test-id="no-connected-active-adapter"
+      width="576px"
+      height="257px"
+      :show="props.show"
+      :title="localization.physicalNetworkAdaptersWarning"
+      @hide="onHide"
+      @submit="onSubmit"
+    >
+      <template #modalBody>
+        <div class="modal-body-content modal-body-content__confirmation">
+          <div class="confirm-icon-container">
+            <atoms-diagram-icon name="is-warning" />
+          </div>
+          <p class="preserve-newlines">
+            {{
+              `${localization.allActiveAdaptersAreDisconnected}
+
+                   ${localization.okOrCancelToReviewYourChanges}`
+            }}
+          </p>
+        </div>
+      </template>
+    </atoms-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+
+const props = defineProps<{
+  show: boolean
+  title: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'submit'): void
+}>()
+
+const onHide = () => emits('hide')
+const onSubmit = () => emits('submit')
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped lang="scss">
+: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;
+  }
+}
+</style>

package/components/common/browse/blocks/Title.vue

@@ -1,66 +1,66 @@
-<template>
-  <div class="title-block" :style="blockWidth">
-    <div class="title-block__container" :style="blockWidth">
-      <div class="title-block__title" :style="blockTitleWidth">
-        <b>{{ props.title }}</b>
-      </div>
-      <div class="title-block__body">
-        <slot name="content"></slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{
-  title: string
-  width: number
-}>()
-
-const blockWidth = computed(() => ({ width: `${props.width}px` }))
-const blockTitleWidth = computed(() => ({ width: `${props.width - 2}px` }))
-</script>
-
-<style scoped lang="scss">
-.title-block {
-  width: 100%;
-  min-height: 400px;
-  position: relative;
-
-  &__container {
-    position: absolute;
-    top: 0;
-    height: 400px;
-    left: 0;
-    display: flex;
-    flex-direction: column;
-    border-width: 1px;
-    border-style: solid;
-    border-color: rgb(204, 204, 204);
-    border-image: initial;
-    background: rgb(255, 255, 255);
-  }
-  &__title {
-    background-color: rgb(231, 235, 239);
-    flex: 0 0 auto;
-    padding: 8px;
-    border-bottom: 1px solid rgb(204, 204, 204);
-    display: inline-block;
-    white-space: nowrap;
-    overflow: hidden !important;
-    text-overflow: ellipsis;
-
-    b {
-      font-weight: bolder;
-      font-size: 13px;
-      letter-spacing: normal;
-      font-family: Metropolis, Avenir Next, Helvetica Neue, Arial, sans-serif;
-      color: #666;
-    }
-  }
-  &__body {
-    flex: 1 1 auto;
-    overflow-y: auto;
-  }
-}
-</style>
+<template>
+  <div class="title-block" :style="blockWidth">
+    <div class="title-block__container" :style="blockWidth">
+      <div class="title-block__title" :style="blockTitleWidth">
+        <b>{{ props.title }}</b>
+      </div>
+      <div class="title-block__body">
+        <slot name="content"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  title: string
+  width: number
+}>()
+
+const blockWidth = computed(() => ({ width: `${props.width}px` }))
+const blockTitleWidth = computed(() => ({ width: `${props.width - 2}px` }))
+</script>
+
+<style scoped lang="scss">
+.title-block {
+  width: 100%;
+  min-height: 400px;
+  position: relative;
+
+  &__container {
+    position: absolute;
+    top: 0;
+    height: 400px;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgb(204, 204, 204);
+    border-image: initial;
+    background: rgb(255, 255, 255);
+  }
+  &__title {
+    background-color: rgb(231, 235, 239);
+    flex: 0 0 auto;
+    padding: 8px;
+    border-bottom: 1px solid rgb(204, 204, 204);
+    display: inline-block;
+    white-space: nowrap;
+    overflow: hidden !important;
+    text-overflow: ellipsis;
+
+    b {
+      font-weight: bolder;
+      font-size: 13px;
+      letter-spacing: normal;
+      font-family: Metropolis, Avenir Next, Helvetica Neue, Arial, sans-serif;
+      color: #666;
+    }
+  }
+  &__body {
+    flex: 1 1 auto;
+    overflow-y: auto;
+  }
+}
+</style>

package/components/common/config/states.ts

@@ -65,3 +65,17 @@ export const datastoreIconByState = [
   'datastore-inaccessible',
   'datastore-unmount', // 'datastore-disconnected',
 ]
+
+export const networkLocalizationByState = [
+  'unknown',
+  'connected',
+  'warning',
+  'error',
+]
+
+export const networkIconByState = [
+  'network-error',
+  'network',
+  'network-warning',
+  'network-error',
+]