dashboard-shell-shell 1.0.1000000117 → 1.0.1000000118

package/components/rancherResourceList/Masthead.vue

@@ -0,0 +1,375 @@
+<script>
+import { mapGetters } from 'vuex';
+import Favorite from '@shell/components/nav/Favorite';
+import TypeDescription from '@shell/components/TypeDescription';
+import { get } from '@shell/utils/object';
+import { AS, _YAML } from '@shell/config/query-params';
+import ResourceLoadingIndicator from './ResourceLoadingIndicator';
+import TabTitle from '@shell/components/TabTitle';
+import { harvesterhci2cloud, cloud2harvesterhci } from '@shell/utils/router'
+
+/**
+ * Resource List Masthead component.
+ */
+export default {
+
+  name: 'MastheadResourceList',
+
+  components: {
+    Favorite,
+    TypeDescription,
+    ResourceLoadingIndicator,
+    TabTitle
+  },
+  props: {
+    resource: {
+      type:     String,
+      required: true,
+    },
+    favoriteResource: {
+      type:    String,
+      default: null
+    },
+    schema: {
+      type:    Object,
+      default: null,
+    },
+    typeDisplay: {
+      type:    String,
+      default: null,
+    },
+    isCreatable: {
+      type:    Boolean,
+      default: null,
+    },
+    isYamlCreatable: {
+      type:    Boolean,
+      default: null,
+    },
+    createLocation: {
+      type:    Object,
+      default: null,
+    },
+    yamlCreateLocation: {
+      type:    Object,
+      default: null,
+    },
+    createButtonLabel: {
+      type:    String,
+      default: null
+    },
+    loadResources: {
+      type:    Array,
+      default: () => []
+    },
+
+    loadIndeterminate: {
+      type:    Boolean,
+      default: false
+    },
+
+    showIncrementalLoadingIndicator: {
+      type:    Boolean,
+      default: false
+    },
+
+    /**
+     * Inherited global identifier prefix for tests
+     * Define a term based on the parent component to avoid conflicts on multiple components
+     */
+    componentTestid: {
+      type:    String,
+      default: 'masthead'
+    },
+
+    mainButtonVisible: {
+      type:    Boolean,
+      default: true
+    },
+  },
+
+  data() {
+    const params = { ...this.$route.params };
+
+    params.resource = params.resource
+
+    const formRoute = { name: `${ this.$route.name }-create`, params };
+
+    const hasEditComponent = this.$store.getters['type-map/hasCustomEdit'](this.resource);
+
+    const yamlRoute = {
+      name:  `${ this.$route.name }-create`,
+      params,
+      query: { [AS]: _YAML },
+    };
+
+    const tabList = ['集群配置'];
+
+    const description = ''
+    return {
+      formRoute,
+      yamlRoute,
+      hasEditComponent,
+      tabList,
+      description
+    };
+  },
+
+  computed: {
+    get,
+    ...mapGetters(['isExplorer', 'currentCluster']),
+
+    resourceName() {
+      if (this.schema) {
+        return this.$store.getters['type-map/labelFor'](this.schema);
+      }
+
+      return this.resource;
+    },
+
+    _typeDisplay() {
+      if ( this.typeDisplay !== null) {
+        return this.typeDisplay;
+      }
+
+      if ( !this.schema ) {
+        return '?';
+      }
+
+      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;
+      
+      const breadcrumbList = {
+        'harvesterhci.io.management.cluster': {
+          origin: 'Harvester 集群',
+          bread: ['虚拟化管理'],
+          description: '还没有添加描述。。。。'
+        },
+        'management.cattle.io.user': {
+          origin: '用户',
+          bread: ['用户 & 认证'],
+          description: '还没有添加描述。。。。'
+        },
+        'management.cattle.io.setting':{
+          origin: '基础设置',
+          bread: ['全局设置'],
+          description: '还没有添加描述。。。。'
+        },
+        'management.cattle.io.feature':{
+          origin: '功能开关',
+          bread: ['全局设置'],
+          description: '还没有添加描述。。。。'
+        },
+      }
+      const resourcePath = this.$route.params.resource || ''
+      
+      const breadcrumb = []
+      if (breadcrumbList[resourcePath] && Object.keys(breadcrumbList[resourcePath]).length > 0) {
+        breadcrumb.push(...breadcrumbList[resourcePath].bread)
+        this.description = breadcrumbList[resourcePath].description
+      }
+
+      return breadcrumb
+    },
+
+    _isYamlCreatable() {
+      if ( this.isYamlCreatable !== null) {
+        return this.isYamlCreatable;
+      }
+
+      return this.schema && this._isCreatable && this.$store.getters['type-map/optionsFor'](this.resource).canYaml;
+    },
+
+    _isCreatable() {
+      // Does not take into account hasEditComponent, such that _isYamlCreatable works
+      if ( this.isCreatable !== null) {
+        return this.isCreatable;
+      }
+
+      // blocked-post means you can post through norman, but not through steve.
+      if ( this.schema && !this.schema?.collectionMethods.find((x) => ['blocked-post', 'post'].includes(x.toLowerCase())) ) {
+        return false;
+      }
+
+      return this.$store.getters['type-map/optionsFor'](this.resource).isCreatable;
+    },
+
+    _createLocation() {
+      return this.createLocation || this.formRoute;
+    },
+
+    _yamlCreateLocation() {
+      return this.yamlCreateLocation || this.yamlRoute;
+    },
+
+    _createButtonlabel() {
+      return this.createButtonLabel || this.t('resourceList.head.create');
+    },
+  }
+};
+</script>
+
+<template>
+  <!-- 顶部 header，带有子标题（subheader）样式类 -->
+  <header class="with-subheader">
+    <div style="display: flex;width: 100%;">
+      <div style="flex: 1;">
+        <!-- 标题区域 -->
+        <div class="title">
+          <div class="excram-list">
+            <span
+              v-for="(item,index) in demoDisplay"
+              :key="index"
+            >
+              <span v-if="item">{{ item }}</span>
+              <span v-if="item">/</span>
+            </span>
+            <span class="excram-last-name">{{ _typeDisplay }}</span>
+          </div>
+          <h1 style="display: flex;align-items: center;" class="m-0 descrip-name">
+            <TabTitle>{{ _typeDisplay }}</TabTitle>
+            <!-- 子标题区域 -->
+            <div class="sub-header">
+              <slot name="subHeader">
+                <!--Slot content-->
+              </slot>
+            </div>
+            
+            <!-- <Favorite
+              v-if="isExplorer"
+              :resource="favoriteResource || resource"
+            /> -->
+
+            <ResourceLoadingIndicator
+              style="margin-left: 10px;"
+              v-if="showIncrementalLoadingIndicator"
+              :resources="loadResources"
+              :indeterminate="loadIndeterminate"
+            />
+          </h1>
+          
+          <!-- 插槽：typeDescription，用于插入类型描述组件 -->
+          <div v-if="description" class="masthod-title-description">
+            {{ description }}
+          </div>
+  
+        </div>
+    
+
+      </div>
+  
+      <!-- 操作按钮区域 -->
+      <div 
+        v-if="!(tabList.includes(_typeDisplay)) && mainButtonVisible"
+        class="actions-container"
+        style="min-height: 32px;align-self: flex-end;"
+      >
+        <slot name="actions">
+          <div class="actions">
+            <slot name="extraActions" />
+  
+            <slot name="createButton">
+              <router-link
+                v-if="hasEditComponent && _isCreatable"
+                :to="_createLocation"
+                class="btn role-primary"
+                :data-testid="componentTestid+'-create'"
+              >
+                {{ _createButtonlabel }}
+              </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>
+            </slot>
+          </div>
+        </slot>
+      </div>
+    </div>
+    <div
+      v-if="!(tabList.includes(_typeDisplay))"
+      style="width: 110%;height: 1px;background-color: #D7D7D7;margin-top: 16px;margin-left: -20px;margin-right: -20px;"
+    />
+  </header>
+</template>
+
+<style lang="scss" scoped>
+
+  .title {
+    /* align-items: center;
+    display: flex; */
+    h1 {
+      margin: 0;
+    }
+  }
+
+  header {
+    /* margin-bottom: 20px; */
+  }
+
+  header.with-subheader {
+    /* grid-template-areas:
+      'type-banner type-banner'
+      'title actions'
+      'sub-header sub-header'
+      'state-banner state-banner'; */
+    position: relative;
+    display: flex;
+    margin-bottom: 16px;
+    flex-direction: column;
+  }
+  .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-top: 20px;
+  }
+  .actions-container{
+    /* display: flex; */
+    /* margin-left: 0px; */
+  }
+
+  .sub-header {
+    font-size: 16px;
+    margin-left: 5px;
+    .btn {
+      text-align: left !important;
+    }
+  }
+</style>

package/components/rancherResourceList/ResourceLoadingIndicator.vue

@@ -0,0 +1,140 @@
+<script>
+import { COUNT } from '@shell/config/types';
+
+/**
+ * Loading Indicator for resources - used when we are loading resources incrementally, by page
+ */
+export default {
+
+  name: 'ResourceLoadingIndicator',
+
+  props: {
+    resources: {
+      type:     Array,
+      required: true,
+    },
+    indeterminate: {
+      type:    Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    const inStore = this.$store.getters['currentStore'](this.resource);
+
+    return { inStore };
+  },
+
+  computed: {
+    // Count of rows - either from the data provided or from the rows for the first resource
+    rowsCount() {
+      if (this.resources.length > 0) {
+        const existingData = this.$store.getters[`${ this.inStore }/all`](this.resources[0]) || [];
+
+        return (existingData || []).length;
+      }
+
+      return 0;
+    },
+
+    // Have we loaded all resources for the types that are needed
+    haveAll() {
+      return this.resources.reduce((acc, r) => {
+        return acc && this.$store.getters[`${ this.inStore }/haveAll`](r);
+      }, true);
+    },
+
+    // Total of all counts of all resources for all of the resources being loaded
+    total() {
+      const clusterCounts = this.$store.getters[`${ this.inStore }/all`](COUNT);
+
+      return this.resources.reduce((acc, r) => {
+        const resourceCounts = clusterCounts?.[0]?.counts?.[r];
+        const resourceCount = resourceCounts?.summary?.count;
+        const count = resourceCount || 0;
+
+        return acc + count;
+      }, 0);
+    },
+
+    // Total count of all of the resources for all of the resources being loaded
+    count() {
+      return this.resources.reduce((acc, r) => {
+        return acc + (this.$store.getters[`${ this.inStore }/all`](r) || []).length;
+      }, 0);
+    },
+
+    // Width style to enable the progress bar style presentation
+    width() {
+      const progress = Math.ceil(100 * (this.count / this.total));
+
+      return `${ progress }%`;
+    }
+  },
+};
+</script>
+
+<template>
+  <div
+    v-if="count && !haveAll"
+    class="resource-loading-indicator"
+  >
+    <div class="inner">
+      <div class="resource-loader">
+        <div class="rl-bg">
+          <i class="icon icon-spinner icon-spin" /><span>{{ t( 'resourceLoadingIndicator.loading' ) }} <span v-if="!indeterminate">{{ count }} / {{ total }}</span></span>
+        </div>
+      </div>
+      <div
+        class="resource-loader"
+        :style="{width}"
+      >
+        <div class="rl-fg">
+          <i class="icon icon-spinner icon-spin" /><span>{{ t( 'resourceLoadingIndicator.loading' ) }} <span v-if="!indeterminate">{{ count }} / {{ total }}</span></span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .resource-loading-indicator {
+    border: 1px solid var(--link);
+    border-radius: 10px;
+    position: relative;
+    width: min-content;
+    overflow: hidden;
+
+    .resource-loader:last-child {
+      position: absolute;
+      top: 0;
+
+      background-color: var(--link);
+      color: var(--link-text);
+      overflow: hidden;
+      white-space: nowrap;
+    }
+
+    .resource-loader {
+      padding: 1px 10px;
+      width: max-content;
+      height: 20px;
+
+      .rl-fg, .rl-bg {
+        display: flex;
+        align-content: center;
+        font-size: 12px;
+
+        > i {
+          font-size: 18px;
+          line-height: 18px;
+        }
+
+        > span {
+          margin-top: 2px;
+          margin-left: 5px;
+        }
+      }
+    }
+  }
+</style>