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

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/Drawer/Chrome.vue

@@ -35,7 +35,7 @@ const ariaLabel = computed(() => i18n.t('component.drawer.chrome.ariaLabel.close
         </div>
       </slot>
     </div>
-    <div class="body pp-4">
+    <div class="body">
       <slot name="body" />
     </div>
     <div class="footer pp-4">
@@ -93,7 +93,7 @@ const ariaLabel = computed(() => i18n.t('component.drawer.chrome.ariaLabel.close
     }
 
     .body {
-      background-color: var(--drawer-body-bg);
+      background-color: var(--body-bg);
       flex: 1;
       overflow-y: scroll;
     }

package/components/Drawer/ResourceDetailDrawer/ConfigTab.vue

@@ -16,38 +16,41 @@ const store = useStore();
 const i18n = useI18n(store);
 </script>
 <template>
-  <Tab
-    class="config-tab"
-    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>
 </template>
 
 <style lang="scss" scoped>
-.config-tab {
-  .container {
-    background-color: var(--body-bg);
-    border-radius: var(--border-radius-md);
-    padding: 16px;
-    max-width: 100%;
-    width: 100%;
-    position: relative;
+.container {
+  background-color: var(--body-bg);
+  border-radius: var(--border-radius-md);
+  padding: 20px;
+  max-width: 100%;
+  width: 100%;
+  position: relative;
+  // Handle the loading indicator
+  :deep() .overlay-content-mode {
+    left: 0;
+    top: 0;
   }
 
+  :deep() .cru-resource-footer {
+    display: none;
+  }
+}
+.config-tab {
+
   // Handle the loading indicator
   :deep() .overlay-content-mode {
     left: 0;

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

@@ -3,7 +3,7 @@ import Drawer from '@shell/components/Drawer/Chrome.vue';
 import { useI18n } from '@shell/composables/useI18n';
 import { useStore } from 'vuex';
 import Tabbed from '@shell/components/Tabbed/index.vue';
-import YamlTab, { Props as YamlProps } from '@shell/components/Drawer/ResourceDetailDrawer/YamlTab.vue';
+// import YamlTab, { Props as YamlProps } from '@shell/components/Drawer/ResourceDetailDrawer/YamlTab.vue';
 import { useDefaultConfigTabProps, useDefaultYamlTabProps } from '@shell/components/Drawer/ResourceDetailDrawer/composables';
 import ConfigTab from '@shell/components/Drawer/ResourceDetailDrawer/ConfigTab.vue';
 import { computed, ref } from '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;
 });
@@ -85,10 +87,10 @@ const canEdit = computed(() => {
           v-if="configTabProps"
           v-bind="configTabProps"
         />
-        <YamlTab
+        <!-- <YamlTab
           v-if="yamlTabProps"
           v-bind="yamlTabProps"
-        />
+        /> -->
       </Tabbed>
     </template>
     <template #additional-actions>
@@ -116,7 +118,6 @@ const canEdit = computed(() => {
       border: none;
       border-top: 1px solid var(--border);
       padding: 0;
-      padding-top: 24px;
     }
   }
 }

package/components/ExplorerMembers.vue

@@ -115,6 +115,10 @@ export default {
           labelKey: 'tableHeaders.role',
           value:    'roleTemplate.nameDisplay'
         },
+        {
+          name:     '操作',
+          labelKey: 'tableHeaders.action',
+        },
       ],
       loadingProjectBindings: true,
       loadingClusterBindings: true
@@ -293,6 +297,7 @@ export default {
       :create-button-label="t('members.createActionLabel')"
       :is-creatable="false"
       :type-display="t('members.clusterAndProject')"
+      
     />
     <Banner
       v-if="isLocal"
@@ -304,7 +309,7 @@ export default {
         name="cluster-membership"
         :label="t('members.clusterMembership')"
       >
-        <div
+        <!-- <div
           v-if="canEditClusterMembers"
           class="row mb-10 cluster-add"
         >
@@ -314,7 +319,7 @@ export default {
           >
             {{ t('members.createActionLabel') }}
           </router-link>
-        </div>
+        </div> -->
         <ResourceTable
           :schema="schema"
           :headers="headers"
@@ -325,7 +330,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"
@@ -346,12 +365,13 @@ export default {
                 v-trim-whitespace
                 class="group-tab"
               >
+
                 <div
                   v-clean-html="getProjectLabel(group)"
                   class="project-name"
                 />
               </div>
-              <div class="right">
+              <div class="right" style="margin-right: 80px;">
                 <button
                   v-if="canEditProjectMembers"
                   type="button"
@@ -445,8 +465,12 @@ export default {
   & :deep() .group-bar{
     display: flex;
     justify-content: space-between;
+    align-items: center;
   }
 }
+.role-secondary.btn-sm:focus, .role-secondary.btn-sm.focused{
+  border: 1px solid #d7d7d7;
+}
 .cluster-add {
   justify-content: flex-end;
 }

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

@@ -103,18 +103,36 @@ export default {
         this.sortedRoles.global.push(...remainingGlobalRoles);
         // End sort of global roles
 
+        if (!(sessionStorage.getItem('TOPLEVELPERMISSIONS') && sessionStorage.getItem('TOPLEVELPERMISSIONS') === 'superadmin')) {
+          delete this.sortedRoles.builtin
+          delete this.sortedRoles.custom
+        }
+
         this.update();
       }
     } catch (e) { }
   },
   data() {
-    return {
-      // This not only identifies global roles but the order here is the order we want to display them in the UI
-      globalPermissions: [
+
+    let globalPermissions = [
+        'admin',
+        'safe-admin',
+        'tenant',
+      ]
+
+    if (sessionStorage.getItem('TOPLEVELPERMISSIONS') === 'superadmin') {
+      globalPermissions = [
         'admin',
+        'safe-admin',
         'user',
         'user-base',
-      ],
+        'tenant',
+      ]
+    }
+
+    return {
+      // This not only identifies global roles but the order here is the order we want to display them in the UI
+      globalPermissions,
       globalRoleBindings:    null,
       sortedRoles:           null,
       selectedRoles:         [],
@@ -426,4 +444,5 @@ export default {
       }
     }
   }
+
 </style>

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>