dashboard-shell-shell 3.0.5-test.6 → 3.0.5-test.9

package/components/Drawer/ResourceDetailDrawer/ConfigTab.vue

@@ -21,32 +21,32 @@ const i18n = useI18n(store);
     name="config-tab"
     :label="i18n.t('component.drawer.resourceDetailDrawer.configTab.title')"
   >
-    <div class="container">
-      <component
-        :is="props.component"
-        :value="props.resource"
-        :liveValue="props.resource"
-        :resourceType="props.resourceType"
-        :mode="_VIEW"
-        :real-mode="_VIEW"
-        :initial-value="props.resource"
-        :use-tabbed-hash="false /* Have to disable hashing on child components or it modifies the url and closes the drawer */"
-        as="config"
-      />
-    </div>
-  </Tab>
+  <div class="container">
+    <component
+      :is="props.component"
+      :value="props.resource"
+      :liveValue="props.resource"
+      :resourceType="props.resourceType"
+      :mode="_VIEW"
+      :real-mode="_VIEW"
+      :initial-value="props.resource"
+      :use-tabbed-hash="false /* Have to disable hashing on child components or it modifies the url and closes the drawer */"
+      as="config"
+    />
+  </div>
+</Tab>
 </template>
 
 <style lang="scss" scoped>
+.container {
+  background-color: var(--body-bg);
+  border-radius: var(--border-radius-md);
+  padding: 20px;
+  max-width: 100%;
+  width: 100%;
+  position: relative;
+}
 .config-tab {
-  .container {
-    background-color: var(--body-bg);
-    border-radius: var(--border-radius-md);
-    padding: 16px;
-    max-width: 100%;
-    width: 100%;
-    position: relative;
-  }
 
   // Handle the loading indicator
   :deep() .overlay-content-mode {

package/components/Drawer/ResourceDetailDrawer/YamlTab.vue

@@ -38,7 +38,7 @@ const yamlComponent: any = useTemplateRef('yaml');
   :deep() .codemirror-container {
     background-color: var(--body-bg);
     border-radius: var(--border-radius-md);
-    padding: 16px;
+    padding: 20px;
 
     .CodeMirror, .CodeMirror-gutter {
       background-color: var(--body-bg);

package/components/Drawer/ResourceDetailDrawer/index.vue

@@ -27,6 +27,8 @@ const i18n = useI18n(store);
 const yamlTabProps = ref<YamlProps | null>(null);
 const configTabProps = useDefaultConfigTabProps(props.resource);
 
+console.log(configTabProps, ' configTabProps---------------------------------2');
+
 useDefaultYamlTabProps(props.resource).then((props) => {
   yamlTabProps.value = props;
 });
@@ -116,7 +118,6 @@ const canEdit = computed(() => {
       border: none;
       border-top: 1px solid var(--border);
       padding: 0;
-      padding-top: 24px;
     }
   }
 }

package/components/ExplorerMembers.vue

@@ -293,6 +293,7 @@ export default {
       :create-button-label="t('members.createActionLabel')"
       :is-creatable="false"
       :type-display="t('members.clusterAndProject')"
+      
     />
     <Banner
       v-if="isLocal"
@@ -304,7 +305,7 @@ export default {
         name="cluster-membership"
         :label="t('members.clusterMembership')"
       >
-        <div
+        <!-- <div
           v-if="canEditClusterMembers"
           class="row mb-10 cluster-add"
         >
@@ -314,7 +315,7 @@ export default {
           >
             {{ t('members.createActionLabel') }}
           </router-link>
-        </div>
+        </div> -->
         <ResourceTable
           :schema="schema"
           :headers="headers"
@@ -325,7 +326,21 @@ export default {
           :loading="$fetchState.pending || !currentCluster || loadingClusterBindings"
           sub-search="subSearch"
           :sub-fields="['nameDisplay']"
-        />
+        >
+          <template #header-right>
+            <div
+              v-if="canEditClusterMembers"
+              class="row mb-10 mr-10 cluster-add"
+            >
+              <router-link
+                :to="createLocation"
+                class="btn role-primary pull-right"
+              >
+                {{ t('members.createActionLabel') }}
+              </router-link>
+            </div>
+          </template>
+        </ResourceTable>
       </Tab>
       <Tab
         v-if="canManageProjectMembers && !isHarvester"

package/components/ExplorerProjectsNamespaces.vue

@@ -1,8 +1,8 @@
 <script>
 import { mapGetters, useStore } from 'vuex';
 import ResourceTable, { defaultTableSortGenerationFn } from '@shell/components/ResourceTable';
-import {
-  STATE, AGE, NAME, NS_SNAPSHOT_QUOTA, DESCRIPTION
+import {
+  STATE, AGE, NAME, NS_SNAPSHOT_QUOTA, DESCRIPTION
 } from '@shell/config/table-headers';
 import { uniq } from '@shell/utils/array';
 import { MANAGEMENT, NAMESPACE, VIRTUAL_TYPES, HCI } from '@shell/config/types';
@@ -494,19 +494,22 @@ export default {
               {{ projectDescription(group.group) }}
             </div>
           </div>
-          <div class="right mr-10">
+          <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>
+            <span v-if="showProjectActionButton(group.group)" style="margin-bottom: 3px;color: var(--link);margin-left: 20px;">|</span>
             <template v-if="featureDropdownMenu">
               <ActionMenu
                 v-if="showProjectActionButton(group.group)"
                 :resource="getProjectActions(group.group)"
                 data-testid="action-button"
+                :showIcon="true"
                 :button-aria-label="t('projectNamespaces.tableActionsLabel', { resource: projectResource(group.group) })"
               />
               <div
@@ -588,7 +591,7 @@ export default {
 <style lang="scss" scoped>
 .invisible {
   display: inline-block;
-  min-width: 28px;
+  min-width: 58px;
 }
 
 .project-namespaces {
@@ -602,9 +605,20 @@ export default {
     }
 
     .project-bar {
+      padding-right: 20px;
       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);
+      }
 
       .group-tab {
         max-width: calc(100% - 230px);

package/components/GlobalRoleBindings.vue

@@ -108,7 +108,12 @@ export default {
     } catch (e) { }
   },
   data() {
+
+    const topLevelPermissions = sessionStorage.getItem('TOPLEVELPERMISSIONS') || ''
+
     return {
+      topLevelPermissions,
+
       // This not only identifies global roles but the order here is the order we want to display them in the UI
       globalPermissions: [
         'admin',
@@ -328,60 +333,119 @@ export default {
 
   <div v-else>
     <form v-if="selectedRoles">
-      <div
-        v-for="(sortedRole, roleType) in sortedRoles"
-        :key="roleType"
-        class="role-group mb-10"
-      >
-        <Card
-          v-if="Object.keys(sortedRole).length"
-          :show-highlight-border="false"
-          :show-actions="false"
+      <template v-if="topLevelPermissions && topLevelPermissions !== 'superadmin'">
+        <div
+          v-for="(sortedRole, roleType) in sortedRoles"
+          :key="roleType"
+          class="role-group mb-10"
+        >
+          <Card
+            v-if="Object.keys(sortedRole).length"
+            :show-highlight-border="false"
+            :show-actions="false"
+          >
+            <template v-slot:title>
+              <div class="type-title">
+                <h3>{{ t(`rbac.globalRoles.types.${roleType}.label`) }}</h3>
+                <div class="type-description">
+                  {{ t(`rbac.globalRoles.types.${roleType}.description`, { isUser }) }}
+                </div>
+              </div>
+            </template>
+            <template v-slot:body>
+              <div
+                class="checkbox-section"
+                :class="'checkbox-section--' + roleType"
+              >
+                <div
+                  v-for="(role, i) in sortedRoles[roleType]"
+                  :key="i"
+                  class="checkbox mb-10 mr-10"
+                >
+                  <Checkbox
+                    v-model:value="selectedRoles"
+                    :value-when-true="role.id"
+                    :disabled="!!assignOnlyRoles[role.id]"
+                    :label="role.nameDisplay"
+                    :description="role.descriptionDisplay"
+                    :mode="mode"
+                    :data-testId="'grb-checkbox-' + role.id"
+                    @update:value="checkboxChanged"
+                  >
+                    <template #label>
+                      <div class="checkbox-label-slot">
+                        <span class="checkbox-label">{{ role.nameDisplay }}</span>
+                        <i
+                          v-if="!!assignOnlyRoles[role.id]"
+                          v-clean-tooltip="t('rbac.globalRoles.assignOnlyRole')"
+                          class="checkbox-info icon icon-info icon-lg"
+                        />
+                      </div>
+                    </template>
+                  </Checkbox>
+                </div>
+              </div>
+            </template>
+          </Card>
+        </div>
+      </template>
+
+      <template v-else>
+        <div
+          v-for="(sortedRole, roleType) in { global: sortedRoles['global'] }"
+          :key="roleType"
+          class="role-group mb-10"
         >
-          <template v-slot:title>
-            <div class="type-title">
-              <h3>{{ t(`rbac.globalRoles.types.${roleType}.label`) }}</h3>
-              <div class="type-description">
-                {{ t(`rbac.globalRoles.types.${roleType}.description`, { isUser }) }}
+          <Card
+            v-if="Object.keys(sortedRole).length"
+            :show-highlight-border="false"
+            :show-actions="false"
+          >
+            <template v-slot:title>
+              <div class="type-title">
+                <h3>{{ t(`rbac.globalRoles.types.${roleType}.label`) }}</h3>
+                <div class="type-description">
+                  {{ t(`rbac.globalRoles.types.${roleType}.description`, { isUser }) }}
+                </div>
               </div>
-            </div>
-          </template>
-          <template v-slot:body>
-            <div
-              class="checkbox-section"
-              :class="'checkbox-section--' + roleType"
-            >
+            </template>
+            <template v-slot:body>
               <div
-                v-for="(role, i) in sortedRoles[roleType]"
-                :key="i"
-                class="checkbox mb-10 mr-10"
+                class="checkbox-section"
+                :class="'checkbox-section--' + roleType"
               >
-                <Checkbox
-                  v-model:value="selectedRoles"
-                  :value-when-true="role.id"
-                  :disabled="!!assignOnlyRoles[role.id]"
-                  :label="role.nameDisplay"
-                  :description="role.descriptionDisplay"
-                  :mode="mode"
-                  :data-testId="'grb-checkbox-' + role.id"
-                  @update:value="checkboxChanged"
+                <div
+                  v-for="(role, i) in sortedRoles[roleType]"
+                  :key="i"
+                  class="checkbox mb-10 mr-10"
                 >
-                  <template #label>
-                    <div class="checkbox-label-slot">
-                      <span class="checkbox-label">{{ role.nameDisplay }}</span>
-                      <i
-                        v-if="!!assignOnlyRoles[role.id]"
-                        v-clean-tooltip="t('rbac.globalRoles.assignOnlyRole')"
-                        class="checkbox-info icon icon-info icon-lg"
-                      />
-                    </div>
-                  </template>
-                </Checkbox>
+                  <Checkbox
+                    v-model:value="selectedRoles"
+                    :value-when-true="role.id"
+                    :disabled="!!assignOnlyRoles[role.id]"
+                    :label="role.nameDisplay"
+                    :description="role.descriptionDisplay"
+                    :mode="mode"
+                    :data-testId="'grb-checkbox-' + role.id"
+                    @update:value="checkboxChanged"
+                  >
+                    <template #label>
+                      <div class="checkbox-label-slot">
+                        <span class="checkbox-label">{{ role.nameDisplay }}</span>
+                        <i
+                          v-if="!!assignOnlyRoles[role.id]"
+                          v-clean-tooltip="t('rbac.globalRoles.assignOnlyRole')"
+                          class="checkbox-info icon icon-info icon-lg"
+                        />
+                      </div>
+                    </template>
+                  </Checkbox>
+                </div>
               </div>
-            </div>
-          </template>
-        </Card>
-      </div>
+            </template>
+          </Card>
+        </div>
+      </template>
     </form>
   </div>
 </template>

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,
     remove(growl) {
       this.$store.dispatch('growl/remove', growl.id);
     },
@@ -131,7 +133,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/IndentedPanel.vue

@@ -4,23 +4,17 @@ export default {};
 
 <template>
   <div
-    class="indented-panel"
+    class="indented-panels"
   >
     <slot />
   </div>
 </template>
 
 <style lang="scss">
-  .indented-panel {
+  .indented-panels {
     height: 100%;
-    width: 90%;
-    margin-left: 5%;
+    width: 100%;
+    padding: 0 20px;
   }
 
-  @media only screen and (max-width: map-get($breakpoints, '--viewport-9')) {
-    .indented-panel {
-      margin: 0 20px;
-      width: initial;
-    }
-  }
 </style>

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/ModalWithCard.vue

@@ -21,7 +21,7 @@ export default {
 
     closeText: {
       type:    String,
-      default: 'Close'
+      default: '关闭'
     },
 
     saveText: {
@@ -66,8 +66,16 @@ export default {
     class="modal"
     data-testid="mvc__card"
     :trigger-focus-trap="true"
-    @close="$emit('finish', $event)"
+    @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"
@@ -118,7 +126,7 @@ export default {
 .footer {
   width: 100%;
   display: flex;
-  justify-content: center;
+  justify-content: flex-end;
 }
 
 .banner {
@@ -133,6 +141,7 @@ export default {
 
   &.card-container {
     box-shadow: none;
+    padding: 24px;
   }
 }
 </style>