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

package/components/ExplorerMembers.vue

@@ -293,7 +293,6 @@ export default {
       :create-button-label="t('members.createActionLabel')"
       :is-creatable="false"
       :type-display="t('members.clusterAndProject')"
-      
     />
     <Banner
       v-if="isLocal"
@@ -305,7 +304,7 @@ export default {
         name="cluster-membership"
         :label="t('members.clusterMembership')"
       >
-        <!-- <div
+        <div
           v-if="canEditClusterMembers"
           class="row mb-10 cluster-add"
         >
@@ -315,7 +314,7 @@ export default {
           >
             {{ t('members.createActionLabel') }}
           </router-link>
-        </div> -->
+        </div>
         <ResourceTable
           :schema="schema"
           :headers="headers"
@@ -326,21 +325,7 @@ 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,22 +494,19 @@ 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"
-              style="margin-bottom: 3px;"
+              class="create-namespace btn btn-sm role-secondary mr-5"
               :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
@@ -591,7 +588,7 @@ export default {
 <style lang="scss" scoped>
 .invisible {
   display: inline-block;
-  min-width: 58px;
+  min-width: 28px;
 }
 
 .project-namespaces {
@@ -605,20 +602,9 @@ 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,12 +108,7 @@ 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',
@@ -333,119 +328,60 @@ export default {
 
   <div v-else>
     <form v-if="selectedRoles">
-      <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"
+      <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"
         >
-          <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>
+          <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>
-            </template>
-            <template v-slot:body>
+            </div>
+          </template>
+          <template v-slot:body>
+            <div
+              class="checkbox-section"
+              :class="'checkbox-section--' + roleType"
+            >
               <div
-                class="checkbox-section"
-                :class="'checkbox-section--' + roleType"
+                v-for="(role, i) in sortedRoles[roleType]"
+                :key="i"
+                class="checkbox mb-10 mr-10"
               >
-                <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"
                 >
-                  <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>
+                  <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>
-            </template>
-          </Card>
-        </div>
-      </template>
+            </div>
+          </template>
+        </Card>
+      </div>
     </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,6 +1,5 @@
 <script>
 import { mapState } from 'vuex';
-import { translateError } from '@shell/utils/error'
 
 export default {
   data() {
@@ -26,7 +25,6 @@ export default {
   },
 
   methods: {
-    translateError,
     remove(growl) {
       this.$store.dispatch('growl/remove', growl.id);
     },
@@ -133,7 +131,7 @@ export default {
               :id="`growl-message-${ growl.id }`"
               :class="{ 'has-title': !!growl.title }"
             >
-            {{ translateError(growl.message) }}
+              {{ growl.message }}
             </p>
           </div>
         </div>

package/components/HardwareResourceGauge.vue

@@ -85,9 +85,8 @@ 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">
@@ -109,23 +108,6 @@ 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>
@@ -137,26 +119,8 @@ export default {
           :capacity="used.total"
           :used="used.useful"
           :color-stops="colorStops"
-          :reserveText="`已使用`"
         >
-        <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>
+          <template #title>
             <span>
               {{ usedTitle ?? t('clusterIndexPage.hardwareResourceGauge.used') }}
               <span class="values text-muted">
@@ -178,7 +142,7 @@ export default {
             <span>
               {{ percentage(used) }}
             </span>
-          </template> -->
+          </template>
         </ConsumptionGauge>
       </div>
     </div>

package/components/IndentedPanel.vue

@@ -4,17 +4,23 @@ export default {};
 
 <template>
   <div
-    class="indented-panels"
+    class="indented-panel"
   >
     <slot />
   </div>
 </template>
 
 <style lang="scss">
-  .indented-panels {
+  .indented-panel {
     height: 100%;
-    width: 100%;
-    padding: 0 20px;
+    width: 90%;
+    margin-left: 5%;
   }
 
+  @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: 1px solid var(--tabbed-border);
-    padding: 20px;
+    border: 2px solid var(--tabbed-border);
+    padding: 10px;
     margin-bottom: 20px;
     border-radius: var(--border-radius);
     flex-grow: 1;
@@ -81,4 +81,4 @@ export default {
       }
     }
   }
-</style>
+</style>

package/components/InputOrDisplay.vue

@@ -45,9 +45,7 @@ export default {
     </div>
     <div class="value">
       <slot name="value">
-        <span v-clean-tooltip="displayValue">
-          {{ displayValue }}
-        </span>
+        {{ displayValue }}
       </slot>
     </div>
   </div>
@@ -55,7 +53,7 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-/* .label {
+.label {
   display: flex;
   flex-direction: column;
 
@@ -63,29 +61,5 @@ 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,24 +38,5 @@ 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: '关闭'
+      default: 'Close'
     },
 
     saveText: {
@@ -66,16 +66,8 @@ export default {
     class="modal"
     data-testid="mvc__card"
     :trigger-focus-trap="true"
-    @close="$emit('close', $event)"
+    @close="$emit('finish', $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"
@@ -126,7 +118,7 @@ export default {
 .footer {
   width: 100%;
   display: flex;
-  justify-content: flex-end;
+  justify-content: center;
 }
 
 .banner {
@@ -141,7 +133,6 @@ export default {
 
   &.card-container {
     box-shadow: none;
-    padding: 24px;
   }
 }
 </style>

package/components/PodSecurityAdmission.vue

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

package/components/PromptModal.vue

@@ -42,7 +42,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 || '610px';
+      return this.modalData?.modalWidth || '600px';
     },
     customClass() {
       return this.modalData?.customClass || undefined;