@rancher/shell 3.0.12-rc.3 → 3.0.12-rc.4

package/components/CruResource.vue

@@ -1,5 +1,6 @@
 <script>
 import isEmpty from 'lodash/isEmpty';
+import throttle from 'lodash/throttle';
 import { createYamlWithOptions } from '@shell/utils/create-yaml';
 import { clone, get } from '@shell/utils/object';
 import { SCHEMA, NAMESPACE } from '@shell/config/types';
@@ -11,6 +12,10 @@ import { stringify, exceptionToErrorsArray } from '@shell/utils/error';
 import CruResourceFooter from '@shell/components/CruResourceFooter';
 import { useResourceCreatePageProvider, useResourceEditPageProvider } from '@shell/composables/cruResource';
 
+import { useFormSummary } from '@shell/components/TableOfContents/composables';
+import { useTemplateRef } from 'vue';
+import TableOfContents from '@shell/components/TableOfContents/TableOfContents.vue';
+
 import {
   _EDIT, _VIEW, AS, _YAML, _UNFLAG, SUB_TYPE, _CREATE
 } from '@shell/config/query-params';
@@ -31,7 +36,8 @@ export default {
     Banner,
     CruResourceFooter,
     ResourceYaml,
-    Wizard
+    Wizard,
+    TableOfContents
   },
 
   props: {
@@ -162,9 +168,22 @@ export default {
     yamlModifiers: {
       type:    Object,
       default: undefined
+    },
+
+    showToc: {
+      type:    Boolean,
+      default: false
     }
   },
 
+  setup() {
+    const cruFormRef = useTemplateRef('cru-form');
+    const { locatedComponents } = useFormSummary(cruFormRef);
+    const accordions = locatedComponents;
+
+    return { accordions };
+  },
+
   data(props) {
     const inStore = this.$store.getters['currentStore'](this.resource);
     const schema = this.$store.getters[`${ inStore }/schemaFor`](this.resource.type);
@@ -176,27 +195,30 @@ export default {
     }
 
     return {
-      isCancelModal:   false,
-      showAsForm:      this.$route.query[AS] !== _YAML,
+      isCancelModal:                      false,
+      showAsForm:                         this.$route.query[AS] !== _YAML,
+      tocContainerHeight:                 0,
+      mainLayoutEl:                       null,
+      throttledComputeTocContainerHeight: null,
       /**
        * Initialised on demand (given that it needs to make a request to fetch schema definition)
        */
-      resourceYaml:    null,
+      resourceYaml:                       null,
       /**
        * Initialised on demand (given that it needs to make a request to fetch schema definition)
        */
-      initialYaml:     null,
+      initialYaml:                        null,
       /**
        * Save a copy of the initial resource. This is used to calc the initial yaml later on
        */
-      initialResource: clone(this.resource),
-      abbrSizes:       {
+      initialResource:                    clone(this.resource),
+      abbrSizes:                          {
         3: '24px',
         4: '18px',
         5: '16px',
         6: '14px'
       },
-      schema
+      schema,
     };
   },
 
@@ -276,10 +298,11 @@ export default {
           icon:    null
         }
       }), {});
-    },
+    }
   },
 
   created() {
+    this.throttledComputeTocContainerHeight = throttle(this.computeTocContainerHeight, 20);
     if ( this._selectedSubtype ) {
       this.$emit('select-type', this._selectedSubtype);
     }
@@ -290,12 +313,42 @@ export default {
   },
 
   beforeUnmount() {
+    this.mainLayoutEl?.removeEventListener('scroll', this.throttledComputeTocContainerHeight);
+    window.removeEventListener('resize', this.throttledComputeTocContainerHeight);
+    this.throttledComputeTocContainerHeight?.cancel?.();
     this.$store.dispatch('cru-resource/setCreateNamespace', false);
   },
 
   methods: {
     stringify,
 
+    // as the user scrolls past the CruResource Masthead, the amount of vertical space available to the table of contents changes
+    computeTocContainerHeight() {
+      const root = this.$el;
+
+      if (!root) {
+        this.tocContainerHeight = 0;
+
+        return 0;
+      }
+
+      const tocEl = root.querySelector('.cru__toc');
+      const footerEl = root.querySelector('.cru__footer');
+
+      if (!tocEl || !footerEl) {
+        this.tocContainerHeight = 0;
+
+        return 0;
+      }
+
+      const tocTop = tocEl.getBoundingClientRect().top;
+      const footerTop = footerEl.getBoundingClientRect().top;
+      const gapLgValue = getComputedStyle(root).getPropertyValue('--gap-lg').trim();
+      const gapLg = Number.parseFloat(gapLgValue) || 0;
+
+      this.tocContainerHeight = Math.max(0, Math.round((footerTop - tocTop) - gapLg));
+    },
+
     confirmCancel(isCancelNotBack = true) {
       if (isCancelNotBack) {
         this.emitOrRoute();
@@ -532,13 +585,38 @@ export default {
           this.initialYaml = await this.createResourceYaml(undefined, this.initialResource);
         }
       }
+    },
+
+    showToc: {
+      handler(neu, old) {
+        if (neu) {
+          // Compute height on first render
+          this.$nextTick(() => {
+            this.throttledComputeTocContainerHeight?.();
+          });
+          // Add event listeners for computeTocContainerHeight on scroll
+          this.mainLayoutEl = document.querySelector('.main-layout');
+          this.mainLayoutEl?.addEventListener('scroll', this.throttledComputeTocContainerHeight, { passive: true });
+          // Add event listener for computeTocContainerHeight on window resize
+          window.addEventListener('resize', this.throttledComputeTocContainerHeight, { passive: true });
+        } else if (old) {
+          // Remove event listeners for computeTocContainerHeight when TOC is hidden
+          this.mainLayoutEl?.removeEventListener('scroll', this.throttledComputeTocContainerHeight);
+          window.removeEventListener('resize', this.throttledComputeTocContainerHeight);
+        }
+      },
+      immediate: true
     }
   }
 };
 </script>
 
 <template>
-  <section class="cru">
+  <section
+    ref="cru-form"
+    :class="{'show-toc':showToc}"
+    class="cru"
+  >
     <slot name="noticeBanner" />
     <p
       v-if="description"
@@ -548,6 +626,7 @@ export default {
     </p>
     <component
       :is="(isView? 'div' : 'form')"
+
       :value="resource"
       data-testid="cru-form"
       class="create-resource-container cru__form"
@@ -771,15 +850,23 @@ export default {
       </template>
       <!------ SINGLE PROCESS ------>
       <template v-else-if="showAsForm">
+        <TableOfContents
+          v-if="showToc"
+          class="cru__toc"
+          :style="tocContainerHeight ? { '--toc-container-height': `${tocContainerHeight}px` } : {}"
+          :accordions="accordions"
+        />
         <div
           v-if="_selectedSubtype || !subtypes.length"
-          class="resource-container cru__content"
+          class="cru__content resource-container"
+
           :style="[minHeight ? { 'min-height': minHeight } : {}]"
         >
           <slot name="single">
             <slot />
           </slot>
         </div>
+
         <slot name="form-footer">
           <CruResourceFooter
             v-if="!isView"
@@ -912,6 +999,11 @@ export default {
 </template>
 
 <style lang='scss' scoped>
+$logo: 60px;
+$logo-space: 100px;
+
+$table-contents-width: 250px;
+
 .cru-resource-yaml-container {
   .resource-yaml {
     .yaml-editor {
@@ -937,9 +1029,6 @@ export default {
   }
 }
 
-$logo: 60px;
-$logo-space: 100px;
-
 .title {
   margin-top: 20px;
 
@@ -992,10 +1081,26 @@ form.create-resource-container .cru {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
+
+  }
+
+  &__toc {
+    width: $table-contents-width;
+    margin: 20px var(--gap-lg) 20px var(--gap-lg);
+    min-width: $table-contents-width;
+    max-width: $table-contents-width;
+    position: sticky;
+    top: 24px;
+    align-self: flex-start;
+    max-height: var(--toc-container-height, calc(100vh - 24px - $footer-height - calc( 2 * var(--gap-lg)) - 125px));
+    transition: max-height 50ms ease-in-out;
+    overflow-y: auto;
+    overflow-x: hidden;
   }
 
   &__content {
     flex-grow: 1;
+
     &-wizard {
       display: flex;
     }
@@ -1025,6 +1130,48 @@ form.create-resource-container .cru {
   }
 }
 
+.show-toc.cru{
+   &>.cru__form{
+        display: grid;
+        grid-template-columns: [content] 1fr [toc] calc(#{$table-contents-width} + var(--gap-lg));
+        grid-template-rows: [errors] auto [content] 1fr [footer] min-content;
+
+      &>.cru__errors {
+        grid-column: content;
+        grid-row: errors;
+      }
+
+      &>.cru__toc {
+        grid-column: toc;
+        grid-row: errors / footer;
+      }
+
+      &>.cru__content {
+          grid-column: content;
+          grid-row: content;
+      }
+
+      &>.cru__footer {
+        grid-column: content / 3;
+        grid-row: footer;
+      }
+    }
+}
+
+@media (max-width: map-get($breakpoints, '--viewport-9')) {
+  .show-toc.cru {
+    & > .cru__form {
+      display: flex;
+      grid-template-columns: none;
+      grid-template-rows: none;
+
+      & > .cru__toc {
+        display: none;
+      }
+    }
+  }
+}
+
 .description {
   margin-bottom: 15px;
   margin-top: 5px;

package/components/ExplorerMembers.vue

@@ -12,6 +12,7 @@ import { mapGetters } from 'vuex';
 import { canViewProjectMembershipEditor } from '@shell/components/form/Members/ProjectMembershipEditor.vue';
 import { allHash } from '@shell/utils/promise';
 import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
+import { RcButton } from '@components/RcButton';
 
 /**
  * Explorer members page.
@@ -26,7 +27,8 @@ export default {
     ResourceTable,
     Tabbed,
     Tab,
-    SortableTable
+    SortableTable,
+    RcButton,
   },
 
   props: {
@@ -308,12 +310,14 @@ export default {
           v-if="canEditClusterMembers"
           class="row mb-10 cluster-add"
         >
-          <router-link
+          <rc-button
+            size="large"
+            class="pull-right"
+            data-testid="button-cluster-member-add"
             :to="createLocation"
-            class="btn role-primary pull-right"
           >
             {{ t('members.createActionLabel') }}
-          </router-link>
+          </rc-button>
         </div>
         <ResourceTable
           :schema="schema"

package/components/ExplorerProjectsNamespaces.vue

@@ -20,6 +20,7 @@ import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
 import perfSettingsUtils from '@shell/utils/perf-setting.utils';
 import ActionMenu from '@shell/components/ActionMenuShell.vue';
 import { useRuntimeFlag } from '@shell/composables/useRuntimeFlag';
+import { RcButton } from '@components/RcButton';
 
 export default {
   name:       'ListProjectNamespace',
@@ -29,6 +30,7 @@ export default {
     ResourceTable,
     ButtonMultiAction,
     ActionMenu,
+    RcButton
   },
   mixins: [ResourceFetch],
 
@@ -445,13 +447,14 @@ export default {
         v-if="showCreateNsButton"
         #extraActions
       >
-        <router-link
+        <rc-button
+          size="large"
+          class="mr-10"
           :to="createNamespaceLocationFlatList()"
-          class="btn role-primary mr-10"
           data-testid="create_project_namespaces"
         >
           {{ t('projectNamespaces.createNamespace') }}
-        </router-link>
+        </rc-button>
       </template>
     </Masthead>
     <!-- Extensions area -->
@@ -495,13 +498,14 @@ export default {
             </div>
           </div>
           <div class="right mr-10">
-            <router-link
+            <rc-button
               v-if="isNamespaceCreatable && (canSeeProjectlessNamespaces || group.group.key !== notInProjectKey)"
-              class="create-namespace btn btn-sm role-secondary mr-5"
+              variant="secondary"
+              class="mr-5"
               :to="createNamespaceLocation(group.group)"
             >
               {{ t('projectNamespaces.createNamespace') }}
-            </router-link>
+            </rc-button>
             <template v-if="featureDropdownMenu">
               <ActionMenu
                 v-if="showProjectActionButton(group.group)"

package/components/GrowlManager.vue

@@ -204,6 +204,10 @@ export default {
         > P {
           padding-top: 2px;
 
+          // Limit size of message and scroll just the message, not the entire growl, so that the title and icon are always visible
+          max-height: 200px;
+          overflow-y: scroll;
+
           &.has-title {
             margin-top: 5px;
           }

package/components/MgmtNodeList.vue

@@ -0,0 +1,184 @@
+<script>
+import { MANAGEMENT } from '@shell/config/types';
+import ResourceTable from '@shell/components/ResourceTable';
+import {
+  INTERNAL_EXTERNAL_IP,
+  STATE, NAME as NAME_COL, AGE, MANAGEMENT_NODE_OS
+} from '@shell/config/table-headers';
+
+// exclude roles column - it is not necessarily used (or used the same way) outside of Rancher provisioning
+export const DEFAULT_HEADERS = [STATE, {
+  ...NAME_COL,
+  value:         'status.nodeName',
+  formatterOpts: { reference: 'kubeNodeDetailLocation' }
+}, INTERNAL_EXTERNAL_IP, MANAGEMENT_NODE_OS, AGE];
+
+export default {
+  name: 'ClusterScopedManagementNodeList',
+
+  components: { ResourceTable },
+
+  props: {
+    resource: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    },
+
+    // override default management node schema headers
+    headers: {
+      type:    Array,
+      default: () => DEFAULT_HEADERS
+    },
+
+    // function to get node group for a given node, used for grouping nodes by pool in the table
+    // result  should be an object with name and (optionally) description properties
+    getNodeGroup: {
+      type:    Function,
+      default: null
+    }
+
+  },
+
+  /**
+   * avoid fetching ALL nodes to find this cluster's nodes
+   * mgmt nodes do not have labels that can be used with a labelSelector action
+   * neither the prov cluster nor mgmt cluster list mgmt nodes in their metadata.relationships nor are the node names listed in either cluster's status
+   * BUT mgmt nodes are scoped to a cluster's namespace, so we can fetch only mgmt nodes in the cluster's namespace
+   */
+  async fetch() {
+    const canList = this.$store.getters['management/canList'](MANAGEMENT.NODE);
+
+    if ( canList ) {
+      const hasAllMgmtNodes = this.$store.getters['management/haveAll'](MANAGEMENT.NODE);
+
+      if (hasAllMgmtNodes) {
+        this.mgmtNodes = this.$store.getters['management/all'](MANAGEMENT.NODE);
+      } else {
+        const res = await this.$store.dispatch('management/findLabelSelector', {
+          type:     MANAGEMENT.NODE,
+          matching: {
+            namespace:     this.resource.mgmtClusterId,
+            labelSelector: {
+              matchExpressions: [
+                {
+                  key:      'management.cattle.io/nodename',
+                  operator: 'Exists',
+                }
+              ]
+            }
+          }
+        } );
+
+        this.mgmtNodes = res;
+      }
+    }
+  },
+
+  data() {
+    return {
+      mgmtNodes: [],
+
+      mgmtNodeSchema: this.$store.getters[`management/schemaFor`](MANAGEMENT.NODE),
+
+      noneGroupOption: {
+        tooltipKey: 'resourceTable.groupBy.none',
+        icon:       'icon-list-flat',
+        value:      'none',
+      },
+
+      poolGroupOption: {
+        tooltipKey: 'resourceTable.groupBy.pool',
+        icon:       'icon-cluster',
+        value:      'poolRef',
+        field:      'poolRef.name'
+      }
+
+    };
+  },
+
+  computed: {
+    nodes() {
+      return this.mgmtNodes.filter((x) => x.mgmtClusterId === this.resource.mgmtClusterId).map((node) => {
+        const poolRef = typeof this.getNodeGroup === 'function' ? this.getNodeGroup(node) : null;
+
+        node.poolRef = poolRef;
+
+        return node;
+      });
+    },
+  },
+};
+</script>
+
+<template>
+  <ResourceTable
+    v-bind="$attrs"
+    :schema="mgmtNodeSchema"
+    :headers="headers"
+    :rows="nodes"
+    :ignore-filter="true"
+    group-ref="poolRef"
+    data-testid="mgmt-node-table"
+    :group-options="[noneGroupOption, poolGroupOption]"
+  >
+    <template #main-row:isFake="{fullColspan}">
+      <tr class="main-row">
+        <td
+          :colspan="fullColspan"
+          class="no-entries"
+        >
+          {{ t('node.list.noNodes') }}
+        </td>
+      </tr>
+    </template>
+
+    <template #group-by="{group}">
+      <div
+        class="pool-row"
+        :class="{'has-description':group.ref}"
+      >
+        <div
+          v-trim-whitespace
+          class="group-tab"
+        >
+          {{ group.ref?.name || t('resourceTable.groupLabel.notInANodePool') }}
+          <div
+            v-if="group.ref && group.ref.description"
+            v-clean-html="group.ref.description"
+            class="description text-muted text-small"
+          />
+        </div>
+      </div>
+    </template>
+  </ResourceTable>
+</template>
+
+<style scoped lang="scss">
+.pool-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  &.has-description {
+    .group-tab {
+      &, &::after {
+          height: 50px;
+      }
+
+      &::after {
+          right: -20px;
+      }
+
+      .description {
+          margin-top: -20px;
+      }
+    }
+  }
+  .group-header-buttons {
+    align-items: center;
+    display: flex;
+  }
+}
+</style>

package/components/Resource/Detail/Card/StateCard/__tests__/composables.test.ts

@@ -1,4 +1,4 @@
-import { useResourceCardRow } from '@shell/components/Resource/Detail/Card/StateCard/composables';
+import { useResourceCardRow, useResourceCardRowFromRelationships } from '@shell/components/Resource/Detail/Card/StateCard/composables';
 
 describe('useResourceCardRow', () => {
   describe('with default keys', () => {
@@ -140,3 +140,92 @@ describe('useResourceCardRow', () => {
     });
   });
 });
+
+describe('useResourceCardRowFromRelationships', () => {
+  it('should return empty props for empty relationships', () => {
+    const result = useResourceCardRowFromRelationships('Refers to', []);
+
+    expect(result.label).toBe('Refers to');
+    expect(result.color).toBeUndefined();
+    expect(result.counts).toBeUndefined();
+  });
+
+  it('should aggregate relationship states', () => {
+    const rels = [
+      { toType: 'configmap', state: 'active' },
+      { toType: 'secret', state: 'active' },
+      { toType: 'serviceaccount', state: 'error' }
+    ];
+
+    const result = useResourceCardRowFromRelationships('Refers to', rels);
+
+    expect(result.counts).toHaveLength(2);
+    expect(result.counts).toContainEqual(expect.objectContaining({ label: 'active', count: 2 }));
+    expect(result.counts).toContainEqual(expect.objectContaining({ label: 'error', count: 1 }));
+  });
+
+  it('should default missing state to "missing"', () => {
+    const rels = [
+      { toType: 'configmap' },
+      { toType: 'secret', state: 'active' }
+    ];
+
+    const result = useResourceCardRowFromRelationships('Refers to', rels);
+
+    expect(result.counts).toContainEqual(expect.objectContaining({
+      label: 'missing', count: 1, color: 'warning'
+    }));
+    expect(result.counts).toContainEqual(expect.objectContaining({
+      label: 'active', count: 1, color: 'success'
+    }));
+  });
+
+  it('should set the highest alert color as main color', () => {
+    const rels = [
+      { toType: 'configmap', state: 'active' },
+      { toType: 'secret', state: 'error' }
+    ];
+
+    const result = useResourceCardRowFromRelationships('Refers to', rels);
+
+    expect(result.color).toBe('error');
+  });
+
+  it('should sort by alert level then by count', () => {
+    const rels = [
+      { toType: 'a', state: 'active' },
+      { toType: 'b', state: 'active' },
+      { toType: 'c', state: 'active' },
+      { toType: 'd', state: 'error' },
+      { toType: 'e', state: 'warning' },
+      { toType: 'f', state: 'warning' }
+    ];
+
+    const result = useResourceCardRowFromRelationships('Refers to', rels);
+
+    expect(result.counts![0].color).toBe('error');
+    expect(result.counts![1].color).toBe('warning');
+    expect(result.counts![2].color).toBe('success');
+  });
+
+  it('should pass the to parameter through', () => {
+    const to = { hash: '#related' };
+    const result = useResourceCardRowFromRelationships('Refers to', [], to);
+
+    expect(result.to).toStrictEqual(to);
+  });
+
+  it('should handle all relationships having no state', () => {
+    const rels = [
+      { toType: 'configmap' },
+      { toType: 'secret' }
+    ];
+
+    const result = useResourceCardRowFromRelationships('Refers to', rels);
+
+    expect(result.counts).toHaveLength(1);
+    expect(result.counts![0]).toStrictEqual(expect.objectContaining({
+      label: 'missing', count: 2, color: 'warning'
+    }));
+  });
+});