@rancher/shell 0.1.0 → 0.1.1

package/components/ResourceDetail/index.vue

@@ -4,14 +4,15 @@ import Loading from '@shell/components/Loading';
 import ResourceYaml from '@shell/components/ResourceYaml';
 import {
   _VIEW, _EDIT, _CLONE, _IMPORT, _STAGE, _CREATE,
-  AS, _YAML, _DETAIL, _CONFIG, PREVIEW, MODE,
+  AS, _YAML, _DETAIL, _CONFIG, _GRAPH, PREVIEW, MODE,
 } from '@shell/config/query-params';
-import { SCHEMA } from '@shell/config/types';
+import { FLEET, SCHEMA } from '@shell/config/types';
 import { createYaml } from '@shell/utils/create-yaml';
 import Masthead from '@shell/components/ResourceDetail/Masthead';
 import DetailTop from '@shell/components/DetailTop';
 import { clone, diff } from '@shell/utils/object';
 import IconMessage from '@shell/components/IconMessage';
+import ForceDirectedTreeChart from '@shell/components/fleet/ForceDirectedTreeChart';
 
 function modeFor(route) {
   if ( route.query?.mode === _IMPORT ) {
@@ -40,6 +41,7 @@ export default {
   components: {
     Loading,
     DetailTop,
+    ForceDirectedTreeChart,
     ResourceYaml,
     Masthead,
     IconMessage,
@@ -66,6 +68,15 @@ export default {
     flexContent: {
       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: 'resource-details'
     }
   },
   async fetch() {
@@ -84,8 +95,11 @@ export default {
     // know about:  view, edit, create (stage, import and clone become "create")
     const mode = ([_CLONE, _IMPORT, _STAGE].includes(realMode) ? _CREATE : realMode);
 
+    const getGraphConfig = store.getters['type-map/hasGraph'](resource);
+    const hasGraph = !!getGraphConfig;
     const hasCustomDetail = store.getters['type-map/hasCustomDetail'](resource, id);
     const hasCustomEdit = store.getters['type-map/hasCustomEdit'](resource, id);
+
     const schemas = store.getters[`${ inStore }/all`](SCHEMA);
 
     // As determines what component will be rendered
@@ -95,6 +109,8 @@ export default {
 
     if ( mode === _VIEW && hasCustomDetail && (!requested || requested === _DETAIL) ) {
       as = _DETAIL;
+    } else if ( mode === _VIEW && hasGraph && requested === _GRAPH) {
+      as = _GRAPH;
     } else if ( hasCustomEdit && (!requested || requested === _CONFIG) ) {
       as = _CONFIG;
     } else {
@@ -134,6 +150,12 @@ export default {
         yaml = createYaml(schemas, resource, data);
       }
     } else {
+      if ( as === _GRAPH ) {
+        await store.dispatch('management/findAll', { type: FLEET.CLUSTER });
+        await store.dispatch('management/findAll', { type: FLEET.BUNDLE });
+        await store.dispatch('management/findAll', { type: FLEET.BUNDLE_DEPLOYMENT });
+      }
+
       let fqid = id;
 
       if ( schema.attributes?.namespaced && namespace ) {
@@ -163,6 +185,10 @@ export default {
         yaml = await getYaml(liveModel);
       }
 
+      if ( as === _GRAPH ) {
+        this.chartData = liveModel;
+      }
+
       if ( [_CLONE, _IMPORT, _STAGE].includes(realMode) ) {
         model.cleanForNew();
         yaml = model.cleanYaml(yaml, realMode);
@@ -173,6 +199,8 @@ export default {
     model = await store.dispatch(`${ inStore }/cleanForDetail`, model);
 
     const out = {
+      hasGraph,
+      getGraphConfig,
       hasCustomDetail,
       hasCustomEdit,
       canViewYaml,
@@ -197,9 +225,11 @@ export default {
 
   data() {
     return {
+      chartData:       null,
       resourceSubtype: null,
 
       // Set by fetch
+      hasGraph:        null,
       hasCustomDetail: null,
       hasCustomEdit:   null,
       resource:        null,
@@ -235,6 +265,10 @@ export default {
       return this.as === _DETAIL;
     },
 
+    isGraph() {
+      return this.as === _GRAPH;
+    },
+
     offerPreview() {
       return this.as === _YAML && [_EDIT, _CLONE, _IMPORT, _STAGE].includes(this.mode);
     },
@@ -329,6 +363,7 @@ export default {
       :mode="mode"
       :real-mode="realMode"
       :as="as"
+      :has-graph="hasGraph"
       :has-detail="hasCustomDetail"
       :has-edit="hasCustomEdit"
       :can-view-yaml="canViewYaml"
@@ -342,8 +377,14 @@ export default {
       />
     </Masthead>
 
+    <ForceDirectedTreeChart
+      v-if="isGraph"
+      :data="chartData"
+      :fdc-config="getGraphConfig"
+    />
+
     <ResourceYaml
-      v-if="isYaml"
+      v-else-if="isYaml"
       ref="resourceyaml"
       v-model="value"
       :mode="mode"
@@ -370,10 +411,34 @@ export default {
       @set-subtype="setSubtype"
     />
 
-    <button v-if="isView" v-shortkey.once="['d']" class="hide" @shortkey="keyAction('goToDetail')" />
-    <button v-if="isView" v-shortkey.once="['c']" class="hide" @shortkey="keyAction('goToViewConfig')" />
-    <button v-if="isView" v-shortkey.once="['y']" class="hide" @shortkey="keyAction('goToViewYaml')" />
-    <button v-if="isView" v-shortkey.once="['e']" class="hide" @shortkey="keyAction('goToEdit')" />
+    <button
+      v-if="isView"
+      v-shortkey.once="['shift','d']"
+      :data-testid="componentTestid + '-detail'"
+      class="hide"
+      @shortkey="keyAction('goToDetail')"
+    />
+    <button
+      v-if="isView"
+      v-shortkey.once="['shift','c']"
+      :data-testid="componentTestid + '-config'"
+      class="hide"
+      @shortkey="keyAction('goToViewConfig')"
+    />
+    <button
+      v-if="isView"
+      v-shortkey.once="['shift','y']"
+      :data-testid="componentTestid + '-yaml'"
+      class="hide"
+      @shortkey="keyAction('goToViewYaml')"
+    />
+    <button
+      v-if="isView"
+      v-shortkey.once="['shift','e']"
+      :data-testid="componentTestid + '-edit'"
+      class="hide"
+      @shortkey="keyAction('goToEdit')"
+    />
   </div>
 </template>
 

package/components/ResourceList/Masthead.vue

@@ -52,6 +52,15 @@ export default {
     createButtonLabel: {
       type:    String,
       default: null
+    },
+
+    /**
+     * 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'
     }
   },
 
@@ -146,6 +155,7 @@ export default {
       <h1 class="m-0">
         {{ _typeDisplay }} <Favorite v-if="isExplorer" :resource="favoriteResource || resource" />
       </h1>
+      <slot name="header"></slot>
     </div>
     <div class="actions-container">
       <slot name="actions">
@@ -158,6 +168,7 @@ export default {
               v-if="hasEditComponent && _isCreatable"
               :to="_createLocation"
               class="btn role-primary"
+              :data-testid="componentTestid+'-create'"
             >
               {{ _createButtonlabel }}
             </n-link>
@@ -165,6 +176,7 @@ export default {
               v-else-if="_isYamlCreatable"
               :to="_yamlCreateLocation"
               class="btn role-primary"
+              :data-testid="componentTestid+'-create-yaml'"
             >
               {{ t("resourceList.head.createFromYaml") }}
             </n-link>
@@ -174,3 +186,13 @@ export default {
     </div>
   </header>
 </template>
+
+<style lang="scss" scoped>
+  .title {
+    align-items: center;
+    display: flex;
+    h1 {
+      margin: 0;
+    }
+  }
+</style>

package/components/ResourceList/ResourceLoadingIndicator.vue

@@ -0,0 +1,137 @@
+<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,
+    },
+    rows: {
+      type:     Array,
+      default:  undefined,
+    }
+  },
+
+  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.rows) {
+        return this.rows.length;
+      }
+
+      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 count = clusterCounts?.[0]?.counts?.[r]?.summary?.count || 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="ml-10 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;
+
+      .rl-fg, .rl-bg {
+        align-content: center;
+        display: flex;
+
+        > i {
+          font-size: 18px;
+          line-height: 18px;
+        }
+
+        > span {
+          margin-left: 5px;
+        }
+      }
+    }
+  }
+</style>

package/components/ResourceList/index.vue

@@ -2,13 +2,17 @@
 import ResourceTable from '@shell/components/ResourceTable';
 import Loading from '@shell/components/Loading';
 import Masthead from './Masthead';
+import ResourceLoadingIndicator from './ResourceLoadingIndicator';
+import ResourceFetch, { TYPES_RESTRICTED } from '@shell/mixins/resource-fetch';
 
 export default {
   components: {
     Loading,
     ResourceTable,
-    Masthead
+    Masthead,
+    ResourceLoadingIndicator
   },
+  mixins: [ResourceFetch],
 
   async fetch() {
     const store = this.$store;
@@ -33,6 +37,15 @@ export default {
       if ( component?.fetch ) {
         hasFetch = 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;
+        this.loadIndeterminate = loadIndeterminate;
+      }
     }
 
     if ( !hasFetch ) {
@@ -42,7 +55,11 @@ export default {
         return;
       }
 
-      this.rows = await store.dispatch(`${ inStore }/findAll`, { type: resource });
+      if (TYPES_RESTRICTED.includes(resource)) {
+        this.rows = await this.$fetchType(resource);
+      } else {
+        this.rows = await store.dispatch(`${ inStore }/findAll`, { type: resource });
+      }
     }
   },
 
@@ -61,15 +78,22 @@ export default {
     const existingData = getters[`${ inStore }/all`](resource) || [];
 
     return {
+      inStore,
       schema,
       hasListComponent,
-      hasData:      existingData.length > 0,
-      showMasthead: showMasthead === undefined ? true : showMasthead,
+      hasData:           existingData.length > 0,
+      showMasthead:      showMasthead === undefined ? true : showMasthead,
       resource,
-
+      // manual refresh
+      manualRefreshInit: false,
+      watch:             false,
+      force:             false,
       // Provided by fetch later
       rows:              [],
       customTypeDisplay: null,
+      // incremental loading
+      loadResources:     [resource],
+      loadIndeterminate: false,
     };
   },
 
@@ -89,6 +113,10 @@ export default {
 
     loading() {
       return this.hasData ? false : this.$fetchState.pending;
+    },
+
+    showIncrementalLoadingIndicator() {
+      return this.perfConfig?.incrementalLoading?.enabled;
     }
   },
 
@@ -114,8 +142,15 @@ export default {
       :type-display="customTypeDisplay"
       :schema="schema"
       :resource="resource"
-    />
-
+    >
+      <template v-slot:header>
+        <ResourceLoadingIndicator
+          v-if="showIncrementalLoadingIndicator"
+          :resources="loadResources"
+          :indeterminate="loadIndeterminate"
+        />
+      </template>
+    </Masthead>
     <div v-if="hasListComponent">
       <component
         :is="listComponent"

package/components/ResourceTable.vue

@@ -17,11 +17,19 @@ export const defaultTableSortGenerationFn = (schema, $store) => {
   }
 
   const resource = schema.id;
+  let sortKey = resource;
+
   const inStore = $store.getters['currentStore'](resource);
   const generation = $store.getters[`${ inStore }/currentGeneration`]?.(resource);
 
   if ( generation ) {
-    return `${ resource }/${ generation }`;
+    sortKey += `/${ generation }`;
+  }
+
+  const nsFilterKey = $store.getters['activeNamespaceCacheKey'];
+
+  if ( nsFilterKey ) {
+    return `${ sortKey }/${ nsFilterKey }`;
   }
 };
 
@@ -191,7 +199,8 @@ export default {
       const isVirtualProduct = this.$store.getters['currentProduct'].name === HARVESTER;
 
       // If the resources isn't namespaced or we want ALL of them, there's nothing to do.
-      if ( (!this.isNamespaced || isAll) && !isVirtualProduct) {
+      // If this is a harvester list, 'all' must still be filtered
+      if ( !this.isNamespaced || (isAll && !isVirtualProduct)) {
         return this.rows || [];
       }
 

package/components/ResourceYaml.vue

@@ -5,6 +5,7 @@ import FileSelector from '@shell/components/form/FileSelector';
 import Footer from '@shell/components/form/Footer';
 import { ANNOTATIONS_TO_FOLD } from '@shell/config/labels-annotations';
 import { ensureRegex } from '@shell/utils/string';
+import { typeOf } from '@shell/utils/sort';
 
 import {
   _CREATE,
@@ -46,7 +47,7 @@ export default {
     },
 
     doneRoute: {
-      type:    String,
+      type:    [String, Object],
       default: null,
     },
 
@@ -314,6 +315,11 @@ export default {
       if ( !this.doneRoute ) {
         return;
       }
+      if (typeOf(this.doneRoute) === 'object') {
+        this.$router.replace(this.doneRoute);
+
+        return;
+      }
       this.$router.replace({
         name:   this.doneRoute,
         params: { resource: this.value.type }

package/components/SelectIconGrid.vue

@@ -63,6 +63,15 @@ export default {
       type:    Function,
       default: (r, idx) => `color${ (idx % 8) + 1 }`,
     },
+
+    /**
+     * Inherited global identifier prefix for tests
+     * Define a term based on the parent component to avoid conflicts on multiple components
+     */
+    componentTestid: {
+      type:    String,
+      default: 'select-icon-grid'
+    }
   },
 
   methods: {
@@ -94,7 +103,11 @@ export default {
       :target="get(r, targetField)"
       :rel="rel"
       class="item"
-      :class="{'has-description': !!get(r, descriptionField), 'has-side-label': !!get(r, sideLabelField), [colorFor(r, idx)]: true, disabled: get(r, disabledField) === true}"
+      :data-testid="componentTestid + '-' + idx"
+      :class="{
+        'has-description': !!get(r, descriptionField),
+        'has-side-label': !!get(r, sideLabelField), [colorFor(r, idx)]: true, disabled: get(r, disabledField) === true
+      }"
       @click="select(r, idx)"
     >
       <div class="side-label" :class="{'indicator': true }" />

package/components/SortableTable/THead.vue

@@ -1,5 +1,5 @@
 <script>
-import Checkbox from '@shell/components/form/Checkbox';
+import { Checkbox } from '@components/Form/Checkbox';
 import { SOME, NONE } from './selection';
 
 export default {

package/components/SortableTable/debug.js

@@ -0,0 +1,117 @@
+/* eslint-disable no-console */
+
+// =========================================================================================
+// Debug helper
+// Adds a bunch of watches to help dignose computed properties bring re-evaluated
+// =========================================================================================
+
+export default {
+  watch: {
+    sortFields(neu, old) {
+      console.log('sortFields changed ------------------------------------------------');
+      console.log(neu);
+      console.log(old);
+    },
+
+    descending(neu, old) {
+      console.log('descending changed ------------------------------------------------');
+      console.log(neu);
+      console.log(old);
+    },
+
+    rows(neu, old) {
+      console.log('rows changed ------------------------------------------------');
+      console.log(neu.length);
+      console.log(old.length);
+
+      // console.log('Checking rows');
+
+      // let diff = 0;
+
+      // for (let i=0;i<neu.length;i++) {
+      //   const a = JSON.stringify(neu[i]);
+      //   const b = JSON.stringify(old[i]);
+
+      //   if (a !== b) {
+      //     console.log('rows differ ' + i);
+      //     diff++;
+      //   }
+      // }
+
+      // console.log(diff + ' rows changed');
+    },
+
+    pagingDisplay(neu, old) {
+      console.log('pagingDisplay changed ------------------------------------------------');
+      console.log(neu.length);
+      console.log(old.length);
+    },
+
+    totalPages(neu, old) {
+      console.log('totalPages changed ------------------------------------------------');
+      console.log(neu.length);
+      console.log(old.length);
+    },
+
+    pagedRows(neu, old) {
+      console.log('pagedRows changed ------------------------------------------------');
+      console.log(neu.length);
+      console.log(old.length);
+    },
+
+    arrangedRows(neu, old) {
+      console.log('arrangedRows changed ------------------------------------------------');
+      console.log(neu.length);
+      console.log(old.length);
+    },
+
+    searchFields(neu, old) {
+      console.log('searchFields changed ------------------------------------------------');
+      console.log(neu.length);
+      console.log(old.length);
+    },
+
+    filteredRows(neu, old) {
+      console.log('filteredRows changed ------------------------------------------------');
+      console.log(neu.length);
+      console.log(old.length);
+    },
+
+    groupedRows(neu, old) {
+      console.log('groupedRows changed ------------------------------------------------');
+      console.log(neu.length);
+      console.log(old.length);
+    },
+
+    headers(neu, old) {
+      console.log('headers changed ------------------------------------------------');
+      console.log(neu);
+      console.log(old);
+    },
+
+    displayRows(neu, old) {
+      console.log('displayRows changed ------------------------------------------------');
+      console.log(neu);
+      console.log(old);
+    },
+
+    groupBy(neu, old) {
+      console.log('groupBy changed ------------------------------------------------');
+      console.log(neu);
+      console.log(old);
+    },
+
+    groupSort(neu, old) {
+      console.log('groupSort changed ------------------------------------------------');
+      console.log(neu);
+      console.log(old);
+    },
+
+    columns(neu, old) {
+      console.log('columns changed ------------------------------------------------');
+      console.log(neu);
+      console.log(old);
+    },
+  }
+};
+/* eslint-enable no-console */