dashboard-shell-shell 1.0.122 → 1.0.1000000081

package/components/HardwareResourceGauge.vue

@@ -85,8 +85,9 @@ export default {
           :capacity="reserved.total"
           :used="reserved.useful"
           :color-stops="colorStops"
+          :reserveText="`已分配`"
         >
-          <template #title>
+          <!-- <template #title>
             <span>
               {{ reservedTitle ?? t('clusterIndexPage.hardwareResourceGauge.reserved') }}
               <span class="values text-muted">
@@ -108,6 +109,23 @@ export default {
             <span>
               {{ percentage(reserved) }}
             </span>
+          </template> -->
+          <template #content>
+            <span>
+              {{ percentage(reserved) }}(
+              共 <span v-if="reserved.formattedTotal">
+                {{ reserved.formattedTotal }}
+              </span>
+              <span v-else>
+                {{ maxDecimalPlaces(reserved.total) }} {{ reserved.units }}
+              </span>，{{ reservedTitle === '分配'? '已分配': '预留' }} <span v-if="reserved.formattedUseful">
+                {{ reserved.formattedUseful }} {{ reserved.units }}
+              </span>
+              <span v-else>
+                {{ maxDecimalPlaces(reserved.useful) }} {{ reserved.units }}
+              </span>
+              )
+            </span>
           </template>
         </ConsumptionGauge>
       </div>
@@ -119,8 +137,26 @@ export default {
           :capacity="used.total"
           :used="used.useful"
           :color-stops="colorStops"
+          :reserveText="`已使用`"
         >
-          <template #title>
+        <template #content>
+            <span>
+              {{ percentage(used) }}(
+              共 <span v-if="used.formattedTotal">
+                {{ used.formattedTotal }}
+              </span>
+              <span v-else>
+                {{ maxDecimalPlaces(used.total) }} {{ used.units }}
+              </span>，已使用 <span v-if="used.formattedUseful">
+                {{ used.formattedUseful }} {{ used.units }}
+              </span>
+              <span v-else>
+                {{ maxDecimalPlaces(used.useful) }} {{ used.units }}
+              </span>
+              )
+            </span>
+          </template>
+          <!-- <template #title>
             <span>
               {{ usedTitle ?? t('clusterIndexPage.hardwareResourceGauge.used') }}
               <span class="values text-muted">
@@ -142,7 +178,7 @@ export default {
             <span>
               {{ percentage(used) }}
             </span>
-          </template>
+          </template> -->
         </ConsumptionGauge>
       </div>
     </div>

package/components/InfoBox.vue

@@ -26,8 +26,8 @@ export default {
 
 <style lang="scss" scoped>
   .info-box {
-    border: 2px solid var(--tabbed-border);
-    padding: 10px;
+    border: 1px solid var(--tabbed-border);
+    padding: 20px;
     margin-bottom: 20px;
     border-radius: var(--border-radius);
     flex-grow: 1;
@@ -81,4 +81,4 @@ export default {
       }
     }
   }
-</style>
+</style>

package/components/InputOrDisplay.vue

@@ -45,7 +45,9 @@ export default {
     </div>
     <div class="value">
       <slot name="value">
-        {{ displayValue }}
+        <span v-clean-tooltip="displayValue">
+          {{ displayValue }}
+        </span>
       </slot>
     </div>
   </div>
@@ -53,7 +55,7 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-.label {
+/* .label {
   display: flex;
   flex-direction: column;
 
@@ -61,5 +63,29 @@ export default {
     font-size: 14px;
     line-height: $input-line-height;
   }
+} */
+.label {
+  display: flex;
+  /* align-items: center; */
+  /* flex-direction: column; */
+
+  .text-label{
+    width: 160px;
+    line-height: 32px;
+  }
+  .value {
+    /* font-size: 14px; */
+    /* line-height: $input-line-height; */
+    line-height: 32px;
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    
+    ul{
+      line-height: $input-line-height;
+      list-style:none;
+    }
+  }
 }
 </style>

package/components/LabelValue.vue

@@ -30,7 +30,7 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-.label {
+/* .label {
   display: flex;
   flex-direction: column;
 
@@ -38,5 +38,24 @@ export default {
     font-size: 14px;
     line-height: $input-line-height;
   }
+} */
+.label {
+  display: flex;
+  /* flex-direction: column; */
+  /* align-items: center; */
+  .text-label{
+    width: 160px;
+    line-height: 32px;
+  }
+  .value {
+    line-height: $input-line-height;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    line-height: 32px;
+  }
+}
+:deep() ul {
+  margin: 0px;
 }
 </style>

package/components/LandingPagePreference.vue

@@ -103,9 +103,6 @@ export default {
 
 <template>
   <div>
-    <p class="set-landing-leadin">
-      {{ t('landing.landingPrefs.body') }}
-    </p>
     <RadioGroup
       id="login-route"
       :value="afterLoginRoute"
@@ -113,6 +110,11 @@ export default {
       :options="routeRadioOptions"
       @update:value="updateLoginRoute"
     >
+      <template #label>
+        <p class="set-landing-leadin">
+          {{ t('landing.landingPrefs.body') }}
+        </p>
+      </template>
       <template #2="{option}">
         <div class="custom-page">
           <RadioButton

package/components/LocaleSelector.vue

@@ -1,11 +1,17 @@
 <script>
 import { mapGetters } from 'vuex';
 import Select from '@shell/components/form/Select.vue';
+import { RcDropdown, RcDropdownTrigger, RcDropdownItem } from '@components/RcDropdown';
 
 export default {
   name: 'LocalSelector',
 
-  components: { Select },
+  components: {
+    Select,
+    RcDropdown,
+    RcDropdownItem,
+    RcDropdownTrigger,
+  },
 
   props: {
     mode: {
@@ -65,111 +71,51 @@ export default {
 <template>
   <div>
     <div v-if="mode === 'login'">
-      <div
-        v-if="showLocale"
-        role="menu"
-        :aria-label="t('locale.menu')"
-        class="locale-login-container"
-        tabindex="0"
-        @click="openLocaleSelector"
-        @blur.capture="closeLocaleSelector"
-        @keyup.enter="openLocaleSelector"
-        @keyup.space="openLocaleSelector"
-      >
-        <v-dropdown
-          popperClass="localeSelector"
-          :shown="isLocaleSelectorOpen"
-          placement="top"
-          distance="8"
-          skidding="12"
-          :triggers="[]"
-          :autoHide="false"
-          :flip="false"
-          :container="false"
-          @focus.capture="openLocaleSelector"
+      <rc-dropdown v-if="showLocale">
+        <rc-dropdown-trigger
+          data-testid="locale-selector"
+          link
+          class="baseline"
+          :aria-label="t('locale.menu')"
         >
-          <a
-            data-testid="locale-selector"
-            class="locale-chooser"
+          {{ selectedLocaleLabel }}
+          <template
+            v-if="showIcon"
+            #after
           >
-            {{ selectedLocaleLabel }}
-            <i
-              v-if="showIcon"
-              class="icon icon-fw icon-sort-down"
-            />
-          </a>
-          <template #popper>
-            <ul
-              class="list-unstyled dropdown"
-              style="margin: -1px;"
-            >
-              <li
-                v-if="showNone"
-                v-t="'locale.none'"
-                class="hand"
-                tabindex="0"
-                role="menuitem"
-                @click.stop="switchLocale('none')"
-                @keyup.enter.stop="switchLocale('none')"
-                @keyup.space.stop="switchLocale('none')"
-              />
-              <li
-                v-for="(label, name) in availableLocales"
-                :key="name"
-                tabindex="0"
-                role="menuitem"
-                class="hand"
-                @click.stop="switchLocale(name)"
-                @keyup.enter.stop="switchLocale(name)"
-                @keyup.space.stop="switchLocale(name)"
-              >
-                {{ label }}
-              </li>
-            </ul>
+            <i class="icon icon-fw icon-sort-down" />
           </template>
-        </v-dropdown>
-      </div>
+        </rc-dropdown-trigger>
+        <template #dropdownCollection>
+          <rc-dropdown-item
+            v-if="showNone"
+            v-t="'locale.none'"
+            @click="switchLocale('none')"
+          />
+          <rc-dropdown-item
+            v-for="(label, name) in availableLocales"
+            :key="name"
+            :lang="name"
+            @click.stop="switchLocale(name)"
+          >
+            {{ label }}
+          </rc-dropdown-item>
+        </template>
+      </rc-dropdown>
     </div>
     <div v-else>
       <Select
         :value="selectedOption"
         :options="localesOptions"
+        :is-lang-select="true"
         @update:value="switchLocale($event)"
       />
     </div>
   </div>
 </template>
 
-<style lang="scss" scoped>
-.advanced {
-  user-select: none;
-  padding: 0 5px;
-  line-height: 40px;
-  font-size: 15px;
-  font-weight: 500;
-}
-.content {
-  background: var(--nav-active);
-  padding: 10px;
-  margin-top: 6px;
-  border-radius: 4px;
-}
-
-.hand:focus-visible {
-  @include focus-outline;
-  outline-offset: 4px;
-}
-
-.locale-chooser {
-  cursor: pointer;
-
-  &:hover {
-    text-decoration: none;
+<style lang="scss">
+  .baseline {
+    align-items: baseline;
   }
-}
-
-.locale-login-container:focus-visible {
-  @include focus-outline;
-  outline-offset: 2px;
-}
 </style>

package/components/ModalManager.vue

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import { useStore } from 'vuex';
+
+import AppModal from '@shell/components/AppModal.vue';
+
+const store = useStore();
+
+const isOpen = computed(() => store.getters['modal/isOpen']);
+const component = computed(() => store.getters['modal/component']);
+const componentProps = computed(() => store.getters['modal/componentProps']);
+const resources = computed(() => store.getters['modal/resources']);
+const closeOnClickOutside = computed(() => store.getters['modal/closeOnClickOutside']);
+const modalWidth = computed(() => store.getters['modal/modalWidth']);
+// const modalSticky = computed(() => store.getters['modal/modalSticky']); // TODO: Implement sticky modals
+
+const backgroundClosing = ref<Function | null>(null);
+
+function close() {
+  if (!isOpen.value) return;
+
+  if (backgroundClosing.value) {
+    backgroundClosing.value();
+  }
+
+  store.commit('modal/closeModal');
+}
+
+function registerBackgroundClosing(fn: Function) {
+  backgroundClosing.value = fn;
+}
+</script>
+
+<template>
+  <Teleport to="#modals">
+    <app-modal
+      v-if="isOpen && component"
+      :click-to-close="closeOnClickOutside"
+      :width="modalWidth"
+      :style="{ '--prompt-modal-width': modalWidth }"
+      :trigger-focus-trap="true"
+      tabindex="0"
+      @close="close"
+    >
+      <component
+        :is="component"
+        v-bind="componentProps || {}"
+        data-testid="modal-manager-component"
+        :resources="resources"
+        :register-background-closing="registerBackgroundClosing"
+        @close="close"
+      />
+    </app-modal>
+  </Teleport>
+</template>

package/components/ModalWithCard.vue

@@ -21,7 +21,7 @@ export default {
 
     closeText: {
       type:    String,
-      default: 'Close'
+      default: '关闭'
     },
 
     saveText: {
@@ -65,8 +65,17 @@ export default {
     v-bind="$attrs"
     class="modal"
     data-testid="mvc__card"
-    @close="$emit('finish', $event)"
+    :trigger-focus-trap="true"
+    @close="$emit('close', $event)"
   >
+    <!-- <slot name="closeicon">
+      <button
+        class="btn btn-sm role-link hide-icon-dialog-close"
+        @click.prevent="hide"
+      >
+        <i class="icon icon-x" />
+      </button>
+    </slot> -->
     <Card
       class="modal"
       :show-highlight-border="false"
@@ -117,7 +126,7 @@ export default {
 .footer {
   width: 100%;
   display: flex;
-  justify-content: center;
+  justify-content: flex-end;
 }
 
 .banner {
@@ -132,6 +141,7 @@ export default {
 
   &.card-container {
     box-shadow: none;
+    padding: 24px;
   }
 }
 </style>

package/components/MoveModal.vue

@@ -93,6 +93,7 @@ export default {
     :name="modalName"
     :width="440"
     height="auto"
+    :trigger-focus-trap="true"
     @close="close"
   >
     <Loading v-if="$fetchState.pending" />

package/components/PodSecurityAdmission.vue

@@ -218,7 +218,7 @@ export default defineComponent({
       :key="i"
       class="row row--y-center mb-20"
     >
-      <span class="col span-2">
+      <span class="col">
         <Checkbox
           v-if="!labelsAlwaysActive"
           v-model:value="psaControl.active"

package/components/PromptChangePassword.vue

@@ -42,7 +42,7 @@ export default {
     custom-class="change-password-modal"
     data-testid="change-password__modal"
     name="password-modal"
-    :width="500"
+    :width="700"
     :height="465"
     :trigger-focus-trap="true"
     @close="show(false)"

package/components/PromptModal.vue

@@ -13,7 +13,11 @@ export default {
   components: { AppModal },
 
   data() {
-    return { opened: false, backgroundClosing: null };
+    return {
+      opened:            false,
+      backgroundClosing: null,
+      componentRendered: false
+    };
   },
 
   computed: {
@@ -31,7 +35,7 @@ export default {
 
     modalWidth() {
       // property set from workload.js to overwrite modal default width of 600px, with fallback value as well
-      return this.modalData?.modalWidth || '600px';
+      return this.modalData?.modalWidth || '610px';
     },
     component() {
       // Looks for a dialog component by looking up in plugins and @shell/dialog/${name}.
@@ -54,10 +58,15 @@ export default {
   watch: {
     showModal(show) {
       this.opened = show;
-    },
+    }
   },
 
   methods: {
+    onSlotComponentMounted() {
+      // variable for the watcher based focus-trap
+      // so that we know when the component is rendered
+      this.componentRendered = true;
+    },
     close() {
       if (!this.opened) {
         return;
@@ -69,6 +78,7 @@ export default {
         this.backgroundClosing();
       }
 
+      this.componentRendered = false;
       this.opened = false;
     },
 
@@ -85,6 +95,8 @@ export default {
     v-if="opened && component"
     :click-to-close="closeOnClickOutside"
     :width="modalWidth"
+    :trigger-focus-trap-watcher-based="true"
+    :focus-trap-watcher-based-variable="componentRendered"
     @close="close()"
   >
     <component
@@ -92,6 +104,7 @@ export default {
       :is="component"
       :resources="resources"
       :register-background-closing="registerBackgroundClosing"
+      @vue:mounted="onSlotComponentMounted"
       @close="close()"
     />
   </app-modal>

package/components/PromptRemove.vue

@@ -12,6 +12,7 @@ import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations
 import { CATALOG } from '@shell/config/types';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import AppModal from '@shell/components/AppModal.vue';
+import { translateError } from '@shell/utils/error';
 
 export default {
   name: 'PromptRemove',
@@ -213,6 +214,7 @@ export default {
   },
 
   methods: {
+    translateError,
     resourceNames,
     escapeHtml,
     close() {
@@ -336,9 +338,10 @@ export default {
     v-if="showModal"
     custom-class="remove-modal"
     name="promptRemove"
-    :width="400"
+    :width="460"
     height="auto"
     styles="max-height: 100vh;"
+    :trigger-focus-trap="true"
     @close="close"
   >
     <Card
@@ -347,6 +350,11 @@ export default {
     >
       <template #title>
         <h4 class="text-default-text">
+          <img
+          src="@shell/assets/images/promp-yellow.svg"
+          class="img-span"
+          alt=""
+        >
           {{ t('promptRemove.title') }}
         </h4>
       </template>
@@ -354,7 +362,7 @@ export default {
         <div class="mb-10">
           <template v-if="!hasCustomRemove">
             {{ t('promptRemove.attemptingToRemove', { type }) }} <span
-              v-clean-html="resourceNames(names, t)"
+              v-clean-html="resourceNames(names, null, t)"
             />
           </template>
 
@@ -395,14 +403,14 @@ export default {
             {{ warning }}
           </div>
           <div class="text-error mb-10 mt-10">
-            {{ error }}
+            {{ translateError(error) }}
           </div>
-          <div
+          <!-- <div
             v-if="!needsConfirm"
             class="text-info mt-20"
           >
             {{ protip }}
-          </div>
+          </div> -->
         </LabeledInput>
         <div v-else-if="!hasCustomRemove">
           <div
@@ -415,7 +423,7 @@ export default {
             v-if="error"
             class="text-error mb-10 mt-10"
           >
-            {{ error }}
+          {{ translateError(error) }}
           </div>
         </div>
         <Checkbox
@@ -436,7 +444,7 @@ export default {
         <div class="spacer" />
         <AsyncButton
           mode="delete"
-          class="btn bg-error ml-10"
+          class="btn ml-10"
           :disabled="deleteDisabled"
           :data-testid="componentTestid + '-confirm-button'"
           @click="remove"
@@ -460,12 +468,24 @@ export default {
       text-align: right;
     }
 
-    .card-actions {
+    /* .card-actions {
       display: flex;
 
       .spacer {
         flex: 1;
       }
-    }
+    } */
   }
 </style>
+
+<style scoped>
+  .text-default-text{
+    line-height: 20px;
+    margin: 0px;
+    display: flex;
+    align-items: center;
+  }
+  .img-span{
+    margin-right: 8px;
+  }
+</style>

package/components/PromptRestore.vue

@@ -213,6 +213,7 @@ export default {
     styles="background-color: var(--nav-bg); border-radius: var(--border-radius); max-height: 100vh;"
     height="auto"
     :scrollable="true"
+    :trigger-focus-trap="true"
     @close="close"
   >
     <Card

package/components/ResourceCancelModal.vue

@@ -56,6 +56,7 @@ export default {
     name="cancel-modal"
     :width="440"
     height="auto"
+    :trigger-focus-trap="true"
     @close="cancelCancel"
   >
     <div class="header">