dashboard-shell-shell 1.0.111 → 1.0.113

package/components/DashboardOptions.vue

@@ -103,24 +103,26 @@ export default {
 <template>
   <div class="graph-options">
     <div v-if="hasSummaryAndDetail">
-      <ButtonGroup
-        v-model:value="value.type"
-        :options="detailSummaryOptions"
+      <ButtonGroup
+        v-model:value="value.type"
+        :options="detailSummaryOptions"
       />
     </div>
     <div v-else>
       <div />
     </div>
     <div class="range-refresh">
-      <LabeledSelect
-        v-model:value="value.range"
-        :options="rangeOptions"
-        :label="t('graphOptions.range')"
+      <LabeledSelect
+        v-model:value="value.range"
+        :options="rangeOptions"
+        class="gafanana-select"
+        :label="t('graphOptions.range')"
       />
-      <LabeledSelect
-        v-model:value="value.refreshRate"
-        :options="refreshOptions"
-        :label="t('graphOptions.refresh')"
+      <LabeledSelect
+        v-model:value="value.refreshRate"
+        :options="refreshOptions"
+        class="gafanana-select"
+        :label="t('graphOptions.refresh')"
       />
     </div>
   </div>
@@ -131,17 +133,21 @@ export default {
     &, .range-refresh {
       display: flex;
       flex-direction: row;
-      justify-content: flex-end;
+      /* justify-content: flex-end; */
     }
 
     & {
-      justify-content: space-between;
+      /* justify-content: space-between; */
       align-items: center;
     }
 
-    .labeled-select {
+    /* .labeled-select {
         width: 100px;
         margin-left: 10px;
-    }
+    } */
+}
+.gafanana-select{
+  width: 300px;
+  margin-left: 10px;
 }
 </style>

package/components/DetailText.vue

@@ -58,6 +58,10 @@ export default {
   },
 
   computed: {
+    itemLabel() {
+      return this.labelKey ? this.t(this.labelKey) : this.label ? this.label : this.t('labels.annotations.singular');
+    },
+
     isBinary() {
       if ( this.binary === null ) {
         return typeof this.value === 'string' && !asciiLike(this.value);
@@ -186,6 +190,7 @@ export default {
       :text="value"
       class="role-tertiary"
       action-color=""
+      :aria-label="t('detailText.copyAriaLabel', {item: itemLabel })"
     />
   </div>
 </template>

package/components/DisableAuthProviderModal.vue

@@ -44,6 +44,7 @@ export default {
     :width="400"
     height="auto"
     styles="max-height: 100vh;"
+    :trigger-focus-trap="true"
     @close="close"
   >
     <Card

package/components/DotState.vue

@@ -0,0 +1,84 @@
+<script lang="ts">
+import Vue, { PropType, defineComponent } from 'vue';
+import { mapGetters } from 'vuex';
+
+interface Dot {
+  stateBackground: string;
+  stateDisplay: string;
+}
+
+export default defineComponent({
+
+  name: 'DotState',
+
+  props:      {
+    value: {
+      type:    Object as PropType<Dot>,
+      default: null
+    },
+    color: {
+      type:    String,
+      default: null
+    },
+    label: {
+      type:    String,
+      default: null
+    }
+  },
+  
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+    bg(): string | null {
+      return this.value?.stateBackground || this.color;
+    },
+
+    msg(): string | null {
+      let text = this.value?.stateDisplay || this.label;
+      let zhText = this.t(`stateLabel.${ text }`)
+      return zhText ? zhText : text
+    }
+    
+  }
+});
+</script>
+
+<template>
+  <div style="display: flex;flex-direction: row;align-items: center;">
+    <div :class="{ [bg]: true }"></div>
+    <span style="margin-left: 5px;">{{ msg }}</span>
+    
+  </div>
+  
+</template>
+<style lang="scss" scoped>
+  .bg-error {
+    width: 10px; /* 圆点的宽度 */
+    height: 10px; /* 圆点的高度 */
+    background-color: #DD0C17; /* 圆点的颜色 */
+    border-radius: 50%; /* 设置为圆形 */
+  }
+  .bg-darker {
+    width: 10px; /* 圆点的宽度 */
+    height: 10px; /* 圆点的高度 */
+    background-color: #DD0C17; /* 圆点的颜色 */
+    border-radius: 50%; /* 设置为圆形 */
+  }
+  .bg-success {
+    width: 10px; /* 圆点的宽度 */
+    height: 10px; /* 圆点的高度 */
+    background-color: #95F204 !important; /* 圆点的颜色 */
+    border-radius: 50%; /* 设置为圆形 */
+  }
+  .bg-warning {
+    width: 10px; /* 圆点的宽度 */
+    height: 10px; /* 圆点的高度 */
+    background-color: #DAC342; /* 圆点的颜色 */
+    border-radius: 50%; /* 设置为圆形 */
+  }
+  .bg-info {
+    width: 10px; /* 圆点的宽度 */
+    height: 10px; /* 圆点的高度 */
+    background-color: #1890FF; /* 圆点的颜色 */
+    border-radius: 50%; /* 设置为圆形 */
+  }
+</style>

package/components/ExplorerMembers.vue

@@ -63,7 +63,7 @@ export default {
     }
 
     if (projectRoleTemplateBindingSchema) {
-      this.$store.dispatch('rancher/findAll', { type: NORMAN.PROJECT_ROLE_TEMPLATE_BINDING }, { root: true })
+      this.$store.dispatch('rancher/findAll', { type: NORMAN.PROJECT_ROLE_TEMPLATE_BINDING, opt: { force: true } }, { root: true })
         .then((bindings) => {
           this['projectRoleTemplateBindings'] = bindings;
           this.loadingProjectBindings = false;

package/components/ExplorerProjectsNamespaces.vue

@@ -1,5 +1,5 @@
 <script>
-import { mapGetters } from 'vuex';
+import { mapGetters, useStore } from 'vuex';
 import ResourceTable, { defaultTableSortGenerationFn } from '@shell/components/ResourceTable';
 import { STATE, AGE, NAME, NS_SNAPSHOT_QUOTA } from '@shell/config/table-headers';
 import { uniq } from '@shell/utils/array';
@@ -11,11 +11,13 @@ import Masthead from '@shell/components/ResourceList/Masthead';
 import { mapPref, GROUP_RESOURCES, ALL_NAMESPACES, DEV } from '@shell/store/prefs';
 import MoveModal from '@shell/components/MoveModal';
 import ButtonMultiAction from '@shell/components/ButtonMultiAction.vue';
-
+import { escapeHtml } from '@shell/utils/string';
 import { NAMESPACE_FILTER_ALL_ORPHANS } from '@shell/utils/namespace-filter';
 import ResourceFetch from '@shell/mixins/resource-fetch';
 import DOMPurify from 'dompurify';
 import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
+import ActionMenu from '@shell/components/ActionMenuShell.vue';
+import { useRuntimeFlag } from '@shell/composables/useRuntimeFlag';
 
 export default {
   name:       'ListProjectNamespace',
@@ -25,6 +27,7 @@ export default {
     MoveModal,
     ResourceTable,
     ButtonMultiAction,
+    ActionMenu,
   },
   mixins: [ResourceFetch],
 
@@ -58,6 +61,13 @@ export default {
     this.projects = await this.$store.dispatch('management/findAll', { type: MANAGEMENT.PROJECT, opt: { force: true } });
   },
 
+  setup() {
+    const store = useStore();
+    const { featureDropdownMenu } = useRuntimeFlag(store);
+
+    return { featureDropdownMenu };
+  },
+
   data() {
     return {
       loadResources:                [NAMESPACE],
@@ -155,7 +165,7 @@ export default {
     rowsWithFakeNamespaces() {
       const fakeRows = this.projectsWithoutNamespaces.map((project) => {
         return {
-          groupByLabel:     `${ ('resourceTable.groupLabel.notInAProject') }-${ project.id }`,
+          groupById:        `${ ('resourceTable.groupLabel.notInAProject') }-${ project.id }`,
           isFake:           true,
           mainRowKey:       project.id,
           nameDisplay:      project.spec?.displayName, // Enable filtering by the project name
@@ -166,8 +176,8 @@ export default {
 
       if (this.showMockNotInProjectGroup) {
         fakeRows.push( {
-          groupByLabel: this.t('resourceTable.groupLabel.notInAProject'), // Same as the groupByLabel for the namespace model
-          mainRowKey:   'fake-empty',
+          groupById:  this.t('resourceTable.groupLabel.notInAProject'),
+          mainRowKey: 'fake-empty',
         });
       }
 
@@ -273,6 +283,9 @@ export default {
     },
     showCreateNsButton() {
       return this.groupPreference !== 'namespace';
+    },
+    projectGroupBy() {
+      return this.groupPreference === 'none' ? null : 'groupById';
     }
   },
   methods: {
@@ -336,6 +349,10 @@ export default {
       return location;
     },
 
+    getProjectActions(group) {
+      return group.rows[0].project;
+    },
+
     showProjectAction(event, group) {
       const project = group.rows[0].project;
 
@@ -359,7 +376,13 @@ export default {
         );
       }
 
-      return row.groupByLabel;
+      if ( row.groupById === this.notInProjectKey) {
+        return this.t('resourceTable.groupLabel.notInAProject');
+      }
+
+      const project = row.project?.nameDisplay || row.project?.id || '';
+
+      return this.t('resourceTable.groupLabel.project', { name: escapeHtml(project) }, true);
     },
 
     projectDescription(group) {
@@ -431,6 +454,7 @@ export default {
       :schema="schema"
       :headers="headers"
       :rows="filteredRows"
+      :group-by="projectGroupBy"
       :groupable="true"
       :sort-generation-fn="sortGenerationFn"
       :loading="loading"
@@ -457,7 +481,7 @@ export default {
               {{ projectDescription(group.group) }}
             </div>
           </div>
-          <div class="right">
+          <div class="right mr-10">
             <router-link
               v-if="isNamespaceCreatable && (canSeeProjectlessNamespaces || group.group.key !== notInProjectKey)"
               class="create-namespace btn btn-sm role-secondary mr-5"
@@ -465,13 +489,26 @@ export default {
             >
               {{ t('projectNamespaces.createNamespace') }}
             </router-link>
-            <ButtonMultiAction
-              class="project-action mr-10"
-              :borderless="true"
-              :aria-label="t('projectNamespaces.tableActionsLabel', { resource: projectResource(group.group) })"
-              :invisible="!showProjectActionButton(group.group)"
-              @click="showProjectAction($event, group.group)"
-            />
+            <template v-if="featureDropdownMenu">
+              <ActionMenu
+                v-if="showProjectActionButton(group.group)"
+                :resource="getProjectActions(group.group)"
+                :button-aria-label="t('projectNamespaces.tableActionsLabel', { resource: projectResource(group.group) })"
+              />
+              <div
+                v-else
+                class="invisible"
+              />
+            </template>
+            <template v-else>
+              <ButtonMultiAction
+                class="project-action"
+                :borderless="true"
+                :aria-label="t('projectNamespaces.tableActionsLabel', { resource: projectResource(group.group) })"
+                :invisible="!showProjectActionButton(group.group)"
+                @click="showProjectAction($event, group.group)"
+              />
+            </template>
           </div>
         </div>
       </template>
@@ -536,6 +573,11 @@ export default {
   </div>
 </template>
 <style lang="scss" scoped>
+.invisible {
+  display: inline-block;
+  min-width: 28px;
+}
+
 .project-namespaces {
   & :deep() {
     .project-namespaces-table table {

package/components/FixedBanner.vue

@@ -37,7 +37,7 @@ export default {
     handleLineBreaksConsentText(banner) {
       if (banner.text?.length) {
         // split text by newline char
-        const textArray = banner.text.split(/\\n/).filter((element) => element);
+        const textArray = banner.text.split('\n').filter((element) => element);
 
         if (textArray.length > 1) {
           textArray.forEach((str, i) => {
@@ -130,11 +130,11 @@ export default {
 
             if (isEmpty(banner)) {
               if (showHeader && this.header) {
-                bannerContent = bannerHeader || {};
+                bannerContent = this.handleLineBreaksConsentText(bannerHeader) || {};
               } else if (showConsent && this.consent) {
                 bannerContent = this.handleLineBreaksConsentText(bannerConsent) || {};
               } else if (showFooter && this.footer) {
-                bannerContent = bannerFooter || {};
+                bannerContent = this.handleLineBreaksConsentText(bannerFooter) || {};
               } else {
                 bannerContent = {};
               }
@@ -168,16 +168,20 @@ export default {
     >
       <!-- text as array to support line breaks programmatically rather than just exposing HTML -->
       <div v-if="isTextAnArray">
-        <p
+        <div
           v-for="(text, index) in banner.text"
           :key="index"
+          class="array-row"
         >
           {{ text }}
-        </p>
+        </div>
       </div>
-      <p v-else>
+      <div
+        v-else
+        class="single-row"
+      >
         {{ banner.text }}
-      </p>
+      </div>
     </div>
     <div v-else-if="showDialog">
       <div class="banner-dialog-glass" />
@@ -192,16 +196,20 @@ export default {
           >
             <!-- text as array to support line breaks programmatically rather than just exposing HTML -->
             <div v-if="isTextAnArray">
-              <p
+              <div
                 v-for="(text, index) in banner.text"
                 :key="index"
+                class="array-row"
               >
                 {{ text }}
-              </p>
+              </div>
             </div>
-            <p v-else>
+            <div
+              v-else
+              class="single-row"
+            >
               {{ banner.text }}
-            </p>
+            </div>
           </div>
           <button
             class="btn role-primary"
@@ -223,7 +231,6 @@ export default {
     padding: 0 20px;
 
     &.banner-consent {
-      position: absolute;
       height: unset;
       min-height: 2em;
       overflow: hidden;

package/components/GlobalRoleBindings.vue

@@ -49,6 +49,10 @@ export default {
     userId: {
       type:    String,
       default: ''
+    },
+    watchOverride: {
+      type:    Boolean,
+      default: true,
     }
   },
   async fetch() {
@@ -138,7 +142,7 @@ export default {
       this.update();
     },
     userId(userId, oldUserId) {
-      if (userId === oldUserId) {
+      if (userId === oldUserId || this.watchOverride === true) {
         return;
       }
       this.update();

package/components/GrafanaDashboard.vue

@@ -262,22 +262,22 @@ export default {
     <div v-if="loading">
       <Loading />
     </div>
-    <div
+    <!-- <div
       v-if="!loading && !error"
       class="external-link"
-    >
+    > -->
       <!-- https://github.com/harvester/harvester-installer/pull/512/files -->
       <!-- It is necessary to include the parameter referer when accessing the Grafana page. -->
       <!-- This parameter is required by the backend to identify the origin of the request from which cluster -->
       <!-- The matching mechanism as follows: -->
       <!-- ~.*/k8s/clusters/(c-m-.+)/.* -->
       <!-- ~.*/dashboard/harvester/c/(c-m-.+)/.* -->
-      <a
+      <!-- <a
         :href="grafanaUrl"
         target="_blank"
         rel="noopener nofollow"
       >{{ t('grafanaDashboard.grafana') }} <i class="icon icon-external-link" /></a>
-    </div>
+    </div> -->
   </div>
 </template>
 

package/components/GrowlManager.vue

@@ -1,5 +1,6 @@
 <script>
 import { mapState } from 'vuex';
+import { translateError } from '@shell/utils/error'
 
 export default {
   data() {
@@ -25,6 +26,7 @@ export default {
   },
 
   methods: {
+    translateError,
     close(growl) {
       this.$store.dispatch('growl/remove', growl.id);
     },
@@ -107,6 +109,7 @@ export default {
               @click="close(growl)"
             />
             <div
+              v-if="growl.title"
               :id="`growl-title-${ growl.id }`"
               class="growl-text-title"
             >
@@ -117,7 +120,7 @@ export default {
               :id="`growl-message-${ growl.id }`"
               :class="{ 'has-title': !!growl.title }"
             >
-              {{ growl.message }}
+            {{ translateError(growl.message) }}
             </p>
           </div>
         </div>

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,20 @@ 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;
+  }
 }
 </style>