dashboard-shell-shell 1.0.10000011121 → 1.6.0-alpha.1

package/components/rancherResourceList/ResourceLoadingIndicator.vue

@@ -1,140 +0,0 @@
-<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>

package/components/rancherResourceList/index.vue

@@ -1,307 +0,0 @@
-<script>
-import ResourceTable from '@shell/components/ResourceTable';
-import Loading from '@shell/components/Loading';
-import Masthead from './Masthead';
-import ResourceLoadingIndicator from './ResourceLoadingIndicator';
-import ResourceFetch from '@shell/mixins/resource-fetch';
-import IconMessage from '@shell/components/IconMessage.vue';
-import { ResourceListComponentName } from './resource-list.config';
-import { PanelLocation, ExtensionPoint } from '@shell/core/types';
-import ExtensionPanel from '@shell/components/ExtensionPanel';
-import { sameContents } from '@shell/utils/array';
-import { cloud2harvesterhci } from '@shell/utils/router'
-
-export default {
-  name: ResourceListComponentName,
-
-  components: {
-    Loading,
-    ResourceTable,
-    Masthead,
-    ResourceLoadingIndicator,
-    IconMessage,
-    ExtensionPanel
-  },
-  mixins: [ResourceFetch],
-
-  props: {
-    hasAdvancedFiltering: {
-      type:    Boolean,
-      default: false
-    },
-    advFilterHideLabelsAsCols: {
-      type:    Boolean,
-      default: false
-    },
-    advFilterPreventFilteringLabels: {
-      type:    Boolean,
-      default: false
-    },
-  },
-
-  async fetch() {
-    const store = this.$store;
-    const resource = this.resource;
-
-    const schema = this.schema;
-
-    if ( this.hasListComponent ) {
-      // If you provide your own list then call its fetch
-      const importer = this.listComponent;
-
-      const component = await importer.__asyncLoader();
-
-      if ( component?.typeDisplay ) {
-        this.customTypeDisplay = component.typeDisplay.apply(this);
-      }
-
-      // Is the custom component responsible fetching the resources?
-      // - Component has a fetch method - legacy method. fetch will handle the requests
-      // - Component contains the PaginatedResourceTable component - go forward method. PaginatedResourceTable owns fetching the resources
-      if ( component?.fetch || component?.components?.['PaginatedResourceTable']) {
-        this.componentWillFetch = true;
-      }
-
-      // If the custom component supports it, ask it what resources it loads, so we can
-      // use the incremental loading indicator when enabled
-      if (component?.$loadingResources) {
-        const { loadResources, loadIndeterminate } = component?.$loadingResources(this.$route, this.$store);
-
-        this.loadResources = loadResources || [resource];
-        this.loadIndeterminate = loadIndeterminate || false;
-      }
-    }
-
-    if ( !this.componentWillFetch ) {
-      if ( !schema ) {
-        store.dispatch('loadingError', new Error(this.t('nav.failWhale.resourceListNotFound', { resource }, true)));
-
-        return;
-      }
-
-      // See comment for `namespaceFilter` and `pagination` watchers, skip fetch if we're not ready yet... and something is going to call fetch later on
-      if (!this.namespaceFilterRequired && (!this.canPaginate || this.refreshFlag)) {
-        await this.$fetchType(resource);
-      }
-    }
-  },
-
-  data() {
-    const getters = this.$store.getters;
-    const params = { ...this.$route.params };
-    const resource = params.resource;
-
-    const hasListComponent = getters['type-map/hasCustomList'](resource);
-
-    const inStore = getters['currentStore'](resource);
-    const schema = getters[`${ inStore }/schemaFor`](resource);
-
-    const showMasthead = getters[`type-map/optionsFor`](resource).showListMasthead;
-
-    return {
-      schema,
-      hasListComponent,
-      showMasthead:                     showMasthead === undefined ? true : showMasthead,
-      resource,
-      extensionType:                    ExtensionPoint.PANEL,
-      extensionLocation:                PanelLocation.RESOURCE_LIST,
-      loadResources:                    [resource], // List of resources that will be loaded, this could be many (`Workloads`)
-      /**
-       * Will the custom component handle the fetch of resources....
-       * or will this instance fetch resources
-       */
-      componentWillFetch:               false,
-      // manual refresh
-      manualRefreshInit:                false,
-      watch:                            false,
-      force:                            false,
-      // Provided by fetch later
-      customTypeDisplay:                null,
-      // incremental loading
-      loadIndeterminate:                false,
-      // query param for simple filtering
-      useQueryParamsForSimpleFiltering: true,
-    };
-  },
-
-  computed: {
-    headers() {
-      if ( this.hasListComponent || !this.schema ) {
-        // Custom lists figure out their own headers
-        return [];
-      }
-
-      return this.$store.getters['type-map/headersFor'](this.schema, this.canPaginate);
-    },
-
-    groupBy() {
-      return this.$store.getters['type-map/groupByFor'](this.schema);
-    },
-
-    showIncrementalLoadingIndicator() {
-      return this.perfConfig?.incrementalLoading?.enabled;
-    },
-
-  },
-
-  watch: {
-
-    /**
-     * When a NS filter is required and the user selects a different one, kick off a new set of API requests
-     *
-     * ResourceList has two modes
-     * 1) ResourceList component handles API request to fetch resources
-     * 2) Custom list component handles API request to fetch resources
-     *
-     * This covers case 1
-     */
-    namespaceFilter(neu, old) {
-      if (neu && !this.componentWillFetch) {
-        if (sameContents(neu, old)) {
-          return;
-        }
-
-        this.$fetchType(this.resource);
-      }
-    },
-
-    /**
-     * When a pagination is required and the user changes page / sort / filter, kick off a new set of API requests
-     *
-     * ResourceList has two modes
-     * 1) ResourceList component handles API request to fetch resources
-     * 2) Custom list component handles API request to fetch resources
-     *
-     * This covers case 1
-     */
-    pagination(neu, old) {
-      if (neu && !this.componentWillFetch && !this.paginationEqual(neu, old)) {
-        this.$fetchType(this.resource);
-      }
-    },
-
-    /**
-     * Monitor the rows to ensure deleting the last entry in a server-side paginated page doesn't
-     * result in an empty page
-     */
-    rows(neu) {
-      if (!this.pagination) {
-        return;
-      }
-
-      if (this.pagination.page > 1 && neu.length === 0) {
-        this.setPagination({
-          ...this.pagination,
-          page: this.pagination.page - 1
-        });
-      }
-    },
-  },
-
-  created() {
-    let listComponent = false;
-
-    const resource = this.$route.params.resource;
-    const hasListComponent = this.$store.getters['type-map/hasCustomList'](resource);
-
-    if ( hasListComponent ) {
-      listComponent = this.$store.getters['type-map/importList'](resource);
-    }
-
-    this.listComponent = listComponent;
-  },
-};
-</script>
-
-<template>
-  <IconMessage
-    v-if="namespaceFilterRequired"
-    :vertical="true"
-    :subtle="false"
-    icon="icon-filter_alt"
-  >
-    <template #message>
-      {{ t('resourceList.nsFiltering') }}
-    </template>
-  </IconMessage>
-  <IconMessage
-    v-else-if="paginationNsFilterRequired"
-    :vertical="true"
-    :subtle="false"
-    icon="icon-filter_alt"
-  >
-    <template #message>
-      {{ t('resourceList.nsFilteringGeneric') }}
-    </template>
-  </IconMessage>
-  <div
-    v-else
-    class="outlet"
-  >
-    <Masthead
-      v-if="showMasthead"
-      :type-display="customTypeDisplay"
-      :schema="schema"
-      :resource="resource"
-      :show-incremental-loading-indicator="showIncrementalLoadingIndicator"
-      :load-resources="loadResources"
-      :load-indeterminate="loadIndeterminate"
-    >
-      <template #extraActions>
-        <slot name="extraActions" />
-      </template>
-    </Masthead>
-    <!-- Extensions area -->
-    <ExtensionPanel
-      :resource="{}"
-      :type="extensionType"
-      :location="extensionLocation"
-    />
-
-    <div
-      v-if="hasListComponent"
-    >
-      <component
-        :is="listComponent"
-        :incremental-loading-indicator="showIncrementalLoadingIndicator"
-        :rows="rows"
-        v-bind="$data"
-      />
-    </div>
-    <ResourceTable
-      v-else
-      :schema="schema"
-      :rows="rows"
-      :alt-loading="canPaginate && !isFirstLoad"
-      :loading="loading"
-      :headers="headers"
-      :group-by="groupBy"
-      :has-advanced-filtering="hasAdvancedFiltering"
-      :adv-filter-hide-labels-as-cols="advFilterHideLabelsAsCols"
-      :adv-filter-prevent-filtering-labels="advFilterPreventFilteringLabels"
-      :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
-      :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
-      :external-pagination-enabled="canPaginate"
-      :external-pagination-result="paginationResult"
-      @pagination-changed="paginationChanged"
-    />
-  </div>
-</template>
-
-<style lang="scss" scoped>
-    .header {
-      position: relative;
-    }
-    H2 {
-      position: relative;
-      margin: 0 0 20px 0;
-    }
-    .filter{
-      line-height: 45px;
-    }
-    .right-action {
-      position: absolute;
-      top: 10px;
-      right: 10px;
-    }
-</style>

package/components/rancherResourceList/resource-list.config.js

@@ -1,7 +0,0 @@
-/**
- * Component name of the `ResourceList`
- *
- * This needs to be a in separate file to avoid circular dependency of
- * index.vue --> resource-fetch mixin --> resource-fetch-namespaced mixin --> index.vue
- */
-export const ResourceListComponentName = 'ResourceList';