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

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 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;

package/components/PromptRemove.vue

@@ -12,7 +12,6 @@ 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',
@@ -215,7 +214,6 @@ export default {
   },
 
   methods: {
-    translateError,
     resourceNames,
     escapeHtml,
     close() {
@@ -342,7 +340,7 @@ export default {
     v-if="showModal"
     custom-class="remove-modal"
     name="promptRemove"
-    :width="460"
+    :width="400"
     height="auto"
     styles="max-height: 100vh;"
     :trigger-focus-trap="true"
@@ -354,11 +352,6 @@ 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>
@@ -390,7 +383,7 @@ export default {
             class="mt-10"
           >
             <span
-              v-clean-html="t('promptRemove.confirmName', { nameToMatch: escapeHtml(nameToMatch) })"
+              v-clean-html="t('promptRemove.confirmName', { nameToMatch: escapeHtml(nameToMatch) }, true)"
             />
           </div>
         </div>
@@ -407,14 +400,14 @@ export default {
             {{ warning }}
           </div>
           <div class="text-error mb-10 mt-10">
-            {{ translateError(error) }}
+            {{ error }}
           </div>
-          <!-- <div
+          <div
             v-if="!needsConfirm"
             class="text-info mt-20"
           >
             {{ protip }}
-          </div> -->
+          </div>
         </LabeledInput>
         <div v-else-if="!hasCustomRemove">
           <div
@@ -427,7 +420,7 @@ export default {
             v-if="error"
             class="text-error mb-10 mt-10"
           >
-          {{ translateError(error) }}
+            {{ error }}
           </div>
         </div>
         <Checkbox
@@ -448,7 +441,7 @@ export default {
         <div class="spacer" />
         <AsyncButton
           mode="delete"
-          class="btn ml-10"
+          class="btn bg-error ml-10"
           :disabled="deleteDisabled"
           :data-testid="componentTestid + '-confirm-button'"
           @click="remove"
@@ -464,32 +457,20 @@ export default {
       box-shadow: none;
     }
     #confirm {
-      width: 100%;
-      // margin-left: 3px;
+      width: 90%;
+      margin-left: 3px;
     }
 
     .actions {
       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>