dashboard-shell-shell 1.0.122 → 1.0.1000000081

package/components/CruResource.vue

@@ -544,7 +544,10 @@ export default {
                       class="flex-right"
                     >{{ t('generic.moreInfo') }} <i class="icon icon-external-link" /></a>
                   </div>
-                  <hr v-if="subtype.description">
+                  <hr
+                    v-if="subtype.description"
+                    role="none"
+                  >
                   <div
                     v-if="subtype.description"
                     class="description"
@@ -621,14 +624,14 @@ export default {
                   </template>
                 </template>
                 <div class="controls-steps">
-                  <button
+                  <!-- <button
                     v-if="showYaml"
                     type="button"
                     class="btn role-secondary"
                     @click="showPreviewYaml"
                   >
                     <t k="cruResource.previewYaml" />
-                  </button>
+                  </button> -->
                   <template
                     v-if="showPrevious"
                     name="back"
@@ -708,7 +711,7 @@ export default {
               #default
             >
               <div>
-                <button
+                <!-- <button
                   v-if="showYaml"
                   :data-testid="componentTestid + '-yaml'"
                   type="button"
@@ -716,7 +719,7 @@ export default {
                   @click="showPreviewYaml"
                 >
                   <t k="cruResource.previewYaml" />
-                </button>
+                </button> -->
                 <AsyncButton
                   v-if="!showSubtypeSelection"
                   ref="save"
@@ -732,7 +735,7 @@ export default {
       </template>
       <!------ YAML ------>
       <!-- Hide this section until it's needed. This means we don't need to upfront create initialYaml -->
-      <section
+      <!-- <section
         v-else-if="showYaml && !showAsForm"
         class="cru-resource-yaml-container resource-container cru__content"
       >
@@ -806,7 +809,7 @@ export default {
             </slot>
           </template>
         </ResourceYaml>
-      </section>
+      </section> -->
     </component>
   </section>
 </template>
@@ -892,6 +895,7 @@ form.create-resource-container .cru {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
+    height: 100%;
   }
 
   &__content {
@@ -906,6 +910,8 @@ form.create-resource-container .cru {
     position: sticky;
     bottom: 0;
     background-color: var(--header-bg);
+    height: $footer-height;
+    box-sizing: border-box;
 
     // Overrides outlet padding
     margin-left: -$space-m;

package/components/CruResourceFooter.vue

@@ -115,12 +115,12 @@ export default {
 <style lang="scss">
 .cru-resource-footer {
   display: flex;
-  justify-content: flex-end;
+  justify-content: flex-start;
   margin-top: 20px;
   z-index: z-index('cruFooter');
 
   .btn {
-    margin-left: 20px;
+    margin-right: 10px;
   }
 }
 

package/components/DashboardOptions.vue

@@ -102,26 +102,35 @@ export default {
 
 <template>
   <div class="graph-options">
-    <div v-if="hasSummaryAndDetail">
-      <ButtonGroup
-        v-model:value="value.type"
-        :options="detailSummaryOptions"
+    <div v-if="hasSummaryAndDetail" class="mr-10">
+      <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.refreshRate"
-        :options="refreshOptions"
-        :label="t('graphOptions.refresh')"
+      <div class="mr-10">
+        <LabeledSelect
+          v-model:value="value.range"
+          :options="rangeOptions"
+          class="gafanana-select"
+          :selectWidth="'60px'"
+          :label="t('graphOptions.range')"
+        />
+      </div>
+      <div class="mr-10">
+        <LabeledSelect
+        v-model:value="value.refreshRate"
+        :options="refreshOptions"
+        class="gafanana-select"
+         :selectWidth="'60px'"
+        :label="t('graphOptions.refresh')"
       />
+      </div>
+      
     </div>
   </div>
 </template>
@@ -131,17 +140,20 @@ 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;
 }
 </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,21 +1,23 @@
 <script>
-import { mapGetters } from 'vuex';
-import ResourceTable, { defaultTableSortGenerationFn } from '@shell/components/ResourceTable';
+import { mapGetters, useStore } from 'vuex';
+import ResourceTable, { defaultTableSortGenerationFn } from '@shell/components/rancherResourceTable';
 import { STATE, AGE, NAME, NS_SNAPSHOT_QUOTA } from '@shell/config/table-headers';
 import { uniq } from '@shell/utils/array';
 import { MANAGEMENT, NAMESPACE, VIRTUAL_TYPES, HCI } from '@shell/config/types';
 import { PROJECT_ID, FLAT_VIEW } from '@shell/config/query-params';
 import { PanelLocation, ExtensionPoint } from '@shell/core/types';
 import ExtensionPanel from '@shell/components/ExtensionPanel';
-import Masthead from '@shell/components/ResourceList/Masthead';
+import Masthead from '@shell/components/rancherResourceList/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) {
@@ -393,6 +416,7 @@ export default {
 </script>
 
 <template>
+  测试111111111111111111111111
   <div class="project-namespaces outlet">
     <Masthead
       :schema="projectSchema"
@@ -404,6 +428,8 @@ export default {
       :show-incremental-loading-indicator="showIncrementalLoadingIndicator"
       :load-resources="loadResources"
       :load-indeterminate="loadIndeterminate"
+
+      :main-button-visible="false"
     >
       <template
         v-if="showCreateNsButton"
@@ -431,12 +457,32 @@ export default {
       :schema="schema"
       :headers="headers"
       :rows="filteredRows"
+      :group-by="projectGroupBy"
       :groupable="true"
       :sort-generation-fn="sortGenerationFn"
       :loading="loading"
       group-tooltip="resourceTable.groupBy.project"
       key-field="_key"
+
+      :create-location="createProjectLocation"
+      :schemaBtn="projectSchema"
+      :create-button-label="t('projectNamespaces.createProject')"
+      :type-display="t('projectNamespaces.label')"
+      :resource="MANAGEMENT.PROJECT"
+      :main-button-visible="true"
     >
+      <template
+        v-if="showCreateNsButton"
+        #extraActions
+      >
+        <router-link
+          :to="createNamespaceLocationFlatList()"
+          class="btn role-primary mr-10"
+          data-testid="create_project_namespaces"
+        >
+          {{ t('projectNamespaces.createNamespace') }}
+        </router-link>
+      </template>
       <template #group-by="group">
         <div
           class="project-bar"
@@ -460,18 +506,29 @@ export default {
           <div class="right">
             <router-link
               v-if="isNamespaceCreatable && (canSeeProjectlessNamespaces || group.group.key !== notInProjectKey)"
-              class="create-namespace btn btn-sm role-secondary mr-5"
+              class="create-namespace"
+              style="margin-bottom: 3px;"
               :to="createNamespaceLocation(group.group)"
             >
               {{ 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)"
-            />
+            <span style="color: var(--link);margin-bottom: 3px;">|</span>
+            <template v-if="featureDropdownMenu">
+              <ActionMenu
+                :showIcon="true"
+                :resource="getProjectActions(group.group)"
+                :button-aria-label="t('projectNamespaces.tableActionsLabel', { resource: projectResource(group.group) })"
+              />
+            </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 +593,11 @@ export default {
   </div>
 </template>
 <style lang="scss" scoped>
+.invisible {
+  width: 42px;
+  display: inline-block;
+}
+
 .project-namespaces {
   & :deep() {
     .project-namespaces-table table {
@@ -550,6 +612,17 @@ export default {
       display: flex;
       flex-direction: row;
       justify-content: space-between;
+      background-color: var(--sortable-table-bg) !important;
+      
+      .right {
+        display: flex;
+        align-items: center;
+      }
+
+      .create-namespace {
+        color: var(--link);
+        padding: 0 18px;
+      }
 
       .group-tab {
         max-width: calc(100% - 230px);

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>