dashboard-shell-shell 1.0.118 → 1.0.120

package/components/ResourceDetail/Masthead.vue

@@ -378,6 +378,34 @@ export default {
       return this.shouldHifenize ? ` - ${ displayName }` : displayName;
     },
 
+    demoDisplay() {
+      const product = this.$store.getters['productId'];
+
+      const productId = this.$store.getters['type-map/groupForBasicType'](this.$store.getters['productId'], this.location.params.resource);
+
+      if (productId === undefined) {
+        return '';
+      }
+      const parts = productId.split('::');
+      const newString = 'root';
+
+      if (!parts?.includes(newString)) {
+        parts.unshift(newString); // 将字符串添加到数组第一位
+      }
+
+      const partsEn = parts.map((item) => {
+        return this.$store.getters['i18n/t'](`typeLabel."${ item.toLowerCase() }"`);
+      });
+
+      return partsEn;
+    },
+    menuIcon() {
+      const product = this.$store.getters['productId'];
+
+      return this.$store.getters['type-map/groupsForVirTypes'](product, this.location.params.resource);
+    },
+
+
     location() {
       const { parent } = this;
 
@@ -424,10 +452,80 @@ export default {
 
 <template>
   <div class="masthead">
+      <!-- 创建api密钥不需要面包屑 -->
+      <div
+        v-if="!(parentRouteOverride === 'account' && resource=== 'token')"
+        class="excram-list"
+      >
+        <span
+          v-for="(item,index) in demoDisplay"
+          :key="index"
+        >
+          <span>{{ item }}</span>
+          <span>/</span>
+        </span>
+        <span class="excram-last-name">
+          {{ (realMode === 'view'? '查看': realMode === 'edit' ? '编辑':'创建') + parent.displayName }}
+        </span>
+      </div>
     <header>
       <div class="title">
         <div class="primaryheader">
-          <h1>
+          <span class="primary-title">
+              <!-- <nuxt-link
+                v-if="location"
+                :to="location"
+              >
+                {{ parent.displayName }}:
+              </nuxt-link> -->
+              <span class="detailIcon-span">
+                <img
+                  v-if="parentRouteOverride === 'account' && resource=== 'token'"
+                  :src="Svg"
+                  style="margin-top: 4px; margin-left: 5px;"
+                >
+                <i
+                  v-else
+                  :class="'icon-'+ menuIcon + ' detailIcon'"
+                />
+              </span>
+              <span class="detailIcon-span-title">{{ realMode=== 'create'? '创建': '' }}{{ parent.displayName }}{{ realMode=== 'create'? '': '名称:' }}</span>
+              <span v-if="realMode !== 'create'">
+                <span v-if="value.detailPageHeaderActionOverride && value.detailPageHeaderActionOverride(realMode)">{{ value.detailPageHeaderActionOverride(realMode) }}</span>
+                <t
+                  v-else
+                  :k="'resourceDetail.header.' + realMode"
+                  :subtype="resourceSubtype"
+                  :name="displayName"
+                  :escapehtml="false"
+                />
+              </span>
+              <DotState
+                v-if="!isCreate && parent.showState"
+                class="masthead-state"
+                :value="value"
+              />
+              <span
+                v-if="!isCreate && value.injectionEnabled"
+                class="masthead-istio"
+              >
+                <i
+                  v-clean-tooltip="t('projectNamespaces.isIstioInjectionEnabled')"
+                  class="icon icon-sm icon-istio"
+                />
+              </span>
+            </span>
+            <span
+              v-if="location"
+              class="valid"
+            >|</span>
+            <router-link
+              v-if="location"
+              :to="location"
+            >
+              返回
+            </router-link>
+          <!-- <h1>
             <TabTitle
               v-if="isCreate"
               :showChild="false"
@@ -483,9 +581,9 @@ export default {
             >
               <i class="icon icon-external-link" />
             </a>
-          </h1>
+          </h1> -->
         </div>
-        <div
+        <!-- <div
           v-if="!isCreate"
           class="subheader"
         >
@@ -531,7 +629,7 @@ export default {
             </span>
           </span>
           <span v-if="value.showPodRestarts">{{ t("resourceDetail.masthead.restartCount") }}:<span class="live-data"> {{ value.restartCount }}</span></span>
-        </div>
+        </div> -->
       </div>
       <slot name="right">
         <div class="actions-container align-start">
@@ -604,36 +702,23 @@ export default {
 <style lang='scss' scoped>
   .masthead {
     padding-bottom: 10px;
-    border-bottom: 1px solid var(--border);
+    /* border-bottom: 1px solid var(--border); */
     margin-bottom: 10px;
   }
 
   HEADER {
     margin: 0;
-    grid-template-columns: minmax(0, 1fr) auto;
   }
 
   .primaryheader {
     display: flex;
     flex-direction: row;
     align-items: center;
+    font-size:14px;
+    height: 50px;
 
     h1 {
-      margin: 0 0 0 -5px;
-      overflow-x: hidden;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-
-      .masthead-resource-title {
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-      }
-
-      .masthead-resource-list-link {
-        margin: 5px;
-      }
+      margin: 0;
     }
   }
 
@@ -646,8 +731,7 @@ export default {
     }
 
     .live-data {
-      color: var(--body-text);
-      margin-left: 3px;
+      color: var(--body-text)
     }
   }
 
@@ -656,8 +740,12 @@ export default {
   }
 
   .masthead-state {
-    margin-left: 8px;
     font-size: initial;
+    display: inline-block;
+    position: relative;
+    /* top: -2px; */
+    font-size: 12px;
+    margin-left: 5px;
   }
 
   .masthead-istio {
@@ -680,13 +768,40 @@ export default {
     }
   }
 
-  div.actions-container > div.actions {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-  }
-
   .resource-external {
     font-size: 18px;
   }
+  .excram-list{
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+  .excram-last-name{
+    color: var(--link);
+  }
+  .valid{
+    color: #d7d7d7;
+    margin: 0px 10px;
+  }
+  .detailIcon-span{
+    width: 24px;
+    height: 24px;
+    display: inline-block;
+    position: relative;
+    background: var(--primary);
+    margin-right: 10px;
+  }
+  .detailIcon{
+    position: absolute;
+    color: #fff;
+    font-size: 38px;
+    left: 4px;
+    top: -2px;
+  }
+  .primary-title{
+    display: flex;
+    align-items: center;
+  }
+  .detailIcon-span-title{
+    font-weight: bold;
+  }
 </style>

package/components/ResourceList/Masthead.vue

@@ -125,6 +125,28 @@ export default {
 
       return this.$store.getters['type-map/labelFor'](this.schema, 99);
     },
+    _descriptionDisplay() {
+      const key = this.$route.path.split('/').pop();
+
+      return this.$store.getters['i18n/t'](`typeDescription."${ key.toLowerCase() }"`);
+    },
+    demoDisplay() {
+      const product = this.$store.getters['productId'];
+      const productId = this.$store.getters['type-map/groupForBasicType'](this.$store.getters['productId'], this._createLocation.params.resource);
+      const parts = productId?.split('::');
+      const newString = 'root';
+
+      if (!parts.includes(newString)) {
+        parts.unshift(newString); // 将字符串添加到数组第一位
+      }
+
+      const partsEn = parts.map((item) => {
+        return this.$store.getters['i18n/t'](`typeLabel."${ item.toLowerCase() }"`);
+      });
+
+      return partsEn;
+      // return this.$store.getters['i18n/t'](`typeLabel."${ productId.toLowerCase() }"`)
+    },
 
     _isYamlCreatable() {
       if ( this.isYamlCreatable !== null) {
@@ -165,16 +187,30 @@ export default {
 
 <template>
   <header class="with-subheader">
-    <slot name="typeDescription">
+    <!-- <slot name="typeDescription">
       <TypeDescription :resource="resource" />
-    </slot>
+    </slot> -->
     <div class="title">
+      <div class="excram-list">
+        <span
+          v-for="(item,index) in demoDisplay"
+          :key="index"
+        >
+          <span>{{ item }}</span>
+          <span>/</span>
+        </span>
+        <span class="excram-last-name">{{ _typeDisplay }}</span>
+      </div>
       <h1 class="m-0">
         <TabTitle>{{ _typeDisplay }}</TabTitle> <Favorite
           v-if="isExplorer"
           :resource="favoriteResource || resource"
         />
       </h1>
+      <!-- 描述 -->
+      <div class="masthod-title-description">
+        {{ _descriptionDisplay }}
+      </div>
       <ResourceLoadingIndicator
         v-if="showIncrementalLoadingIndicator"
         :resources="loadResources"
@@ -186,7 +222,15 @@ export default {
         <!--Slot content-->
       </slot>
     </div>
-    <div class="actions-container">
+    <div
+      v-if="!(tabList.includes(_typeDisplay))"
+      style="width: 110%;height: 1px;background-color: #D7D7D7;margin-top: 10px;margin-bottom: 20px;margin-left: -20px;margin-right: -20px;"
+    />
+    <div 
+     v-if="!(tabList.includes(_typeDisplay))"
+    class="actions-container"
+    style="width: 100%;min-height: 32px;text-align: left"
+    >
       <slot name="actions">
         <div class="actions">
           <slot name="extraActions" />
@@ -200,14 +244,14 @@ export default {
             >
               {{ _createButtonlabel }}
             </router-link>
-            <router-link
+            <!-- <router-link
               v-else-if="_isYamlCreatable"
               :to="_yamlCreateLocation"
               class="btn role-primary"
               :data-testid="componentTestid+'-create-yaml'"
             >
               {{ t("resourceList.head.createFromYaml") }}
-            </router-link>
+            </router-link> -->
           </slot>
         </div>
       </slot>
@@ -217,30 +261,46 @@ export default {
 
 <style lang="scss" scoped>
   .title {
-    align-items: center;
-    display: flex;
+    /* align-items: center;
+    display: flex; */
     h1 {
       margin: 0;
     }
   }
 
   header {
-    margin-bottom: 20px;
+    /* margin-bottom: 20px; */
   }
 
   header.with-subheader {
-    grid-template-areas:
+    /* grid-template-areas:
       'type-banner type-banner'
       'title actions'
       'sub-header sub-header'
-      'state-banner state-banner';
+      'state-banner state-banner'; */
+      position: relative;
+      display: unset;
   }
-
-  .sub-header {
-    grid-area: sub-header;
-
-    a {
-      display: inline-block;
-    }
+  .excram-list{
+    font-size: 14px;
+    line-height: 22px;
+    margin-bottom: 20px;
+    font-family: 'Microsoft YaHei';
+  }
+  .excram-last-name{
+    color: var(--primary);
+  }
+  .descrip-name{
+    font-size: 26px;
+    font-family: 'Microsoft YaHei';
+  }
+  .masthod-title-description{
+    font-family: 'Microsoft YaHei';
+    margin: 20px 0px;
+  }
+  .actions-container{
+    /* display: flex; */
+    /* margin-left: 0px; */
+    position: absolute;
   }
 </style>

package/components/SortableTable/index.vue

@@ -8,6 +8,7 @@ import { get, clone } from '@shell/utils/object';
 import { removeObject } from '@shell/utils/array';
 import { Checkbox } from '@components/Form/Checkbox';
 import AsyncButton, { ASYNC_BUTTON_STATES } from '@shell/components/AsyncButton';
+import Select from '@shell/components/form/Select';
 import ActionDropdown from '@shell/components/ActionDropdown';
 import throttle from 'lodash/throttle';
 import debounce from 'lodash/debounce';
@@ -55,6 +56,7 @@ export default {
   components: {
     THead,
     Checkbox,
+    Select,
     AsyncButton,
     ActionDropdown,
     LabeledSelect,
@@ -375,7 +377,25 @@ export default {
     manualRefreshButtonSize: {
       type:    String,
       default: ''
-    }
+    },
+    isBanner: {
+      // Show isBanner input to filter rows
+      type:    Boolean,
+      default: false
+    },
+    marginTopValue: {
+      type:    Number,
+      default: 0
+    },
+    isFilterLabel: {
+      type:    Boolean,
+      default: false
+    },
+    searchPlaceholder: {
+      // search框内的输入提示
+      type:    String,
+      default: ''
+    },
 
   },
 
@@ -391,11 +411,19 @@ export default {
 
     const isLoading = this.loading || false;
 
+    let isCreatable = false;
+    const lastPath = his.$route.path.split('/').pop();
+
+    if (lastPath.includes('.')) {
+      isCreatable = this.$store.getters['type-map/optionsFor'](lastPath).isCreatable;
+    }
+
     return {
       refreshButtonPhase:         isLoading ? ASYNC_BUTTON_STATES.WAITING : ASYNC_BUTTON_STATES.ACTION,
       expanded:                   {},
       searchQuery,
       eventualSearchQuery,
+      optionsFor,
       subMatches:                 null,
       actionOfInterest:           null,
       loadingDelay:               false,
@@ -1370,7 +1398,7 @@ export default {
             type="search"
             class="input-sm search-box"
             :aria-label="t('sortableTable.searchLabel')"
-            :placeholder="t('sortableTable.search')"
+            :placeholder="t('sortableTable.search')+searchPlaceholder"
           >
          
         </div>

package/package.json

@@ -5,7 +5,7 @@
   "license": "Apache-2.0",
   "author": "SUSE",
   "private": false,
-  "version": "1.0.00000000118",
+  "version": "1.0.00000000120",
   "engines": {
     "node": ">=20.0.0"
   },