@rancher/shell 0.2.5 → 0.3.1

package/components/nav/WindowManager/index.vue

@@ -1,20 +1,22 @@
 <script>
 import { mapState } from 'vuex';
 import debounce from 'lodash/debounce';
-import { screenRect, boundingRect } from '@shell/utils/position';
+import {
+  screenRect, boundingRect, BOTTOM, RIGHT, LEFT
+} from '@shell/utils/position';
 
 export default {
   data() {
     return {
       dragOffset:     0,
       reportedHeight: this.height,
-      firstHeight:    true,
+      reportedWidth:  this.width,
       component:      { },
     };
   },
 
   computed: {
-    ...mapState('wm', ['tabs', 'active', 'open', 'userHeight']),
+    ...mapState('wm', ['tabs', 'active', 'open', 'userHeight', 'userWidth', 'userPin']),
 
     height: {
       get() {
@@ -47,9 +49,53 @@ export default {
         return val;
       },
     },
+
+    width: {
+      get() {
+        if ( process.server ) {
+          return 0;
+        }
+
+        if (this.userWidth) {
+          return this.userWidth;
+        }
+
+        const windowWidth = window.innerWidth;
+        let width = parseInt(window.localStorage.getItem('wm-width'), 10);
+
+        if (!width) {
+          width = Math.round(windowWidth / 8);
+        }
+        width = Math.min(width, 3 * windowWidth / 4);
+
+        window.localStorage.setItem('wm-width', width);
+
+        return width;
+      },
+      set(val) {
+        this.$store.commit('wm/setUserWidth', val);
+        window.localStorage.setItem('wm-width', val);
+        this.show();
+
+        return val;
+      }
+    },
+
+    pinClass() {
+      return `pin-${ this.userPin }`;
+    },
   },
 
   watch: {
+    userPin(v) {
+      if (this.open) {
+        this.setWmDimensions();
+        if (v === LEFT || v === RIGHT) {
+          this.setReportedHeight(window.innerHeight - 55);
+        }
+      }
+    },
+
     tabs() {
       this.toggle(true);
     },
@@ -87,7 +133,7 @@ export default {
     },
 
     show() {
-      document.documentElement.style.setProperty('--wm-height', `${ this.height }px`);
+      this.setWmDimensions();
       this.$store.commit('wm/setOpen', true);
     },
 
@@ -96,20 +142,21 @@ export default {
         document.documentElement.style.setProperty('--wm-height', `calc(var(--wm-tab-height, 29px) + 2px)`);
       } else {
         document.documentElement.style.setProperty('--wm-height', '0');
+        document.documentElement.style.setProperty('--wm-width', '0');
       }
 
       this.$store.commit('wm/setOpen', false);
     },
 
-    dragStart(event) {
+    dragYStart(event) {
       const doc = document.documentElement;
 
-      doc.addEventListener('mousemove', this.dragMove);
-      doc.addEventListener('touchmove', this.dragMove, true);
-      doc.addEventListener('mouseup', this.dragEnd);
-      doc.addEventListener('mouseleave', this.dragEnd);
-      doc.addEventListener('touchend touchcancel', this.dragEnd, true);
-      doc.addEventListener('touchstart', this.dragEnd, true);
+      doc.addEventListener('mousemove', this.dragYMove);
+      doc.addEventListener('touchmove', this.dragYMove, true);
+      doc.addEventListener('mouseup', this.dragYEnd);
+      doc.addEventListener('mouseleave', this.dragYEnd);
+      doc.addEventListener('touchend touchcancel', this.dragYEnd, true);
+      doc.addEventListener('touchstart', this.dragYEnd, true);
 
       const eventY = event.screenY;
 
@@ -119,7 +166,7 @@ export default {
       this.dragOffset = offset;
     },
 
-    dragMove(event) {
+    dragYMove(event) {
       const screen = screenRect();
       const eventY = event.screenY;
       const min = 50;
@@ -134,15 +181,15 @@ export default {
       this.queueUpdate();
     },
 
-    dragEnd(event) {
+    dragYEnd(event) {
       const doc = document.documentElement;
 
-      doc.removeEventListener('mousemove', this.dragMove);
-      doc.removeEventListener('touchmove', this.dragMove, true);
-      doc.removeEventListener('mouseup', this.dragEnd);
-      doc.removeEventListener('mouseleave', this.dragEnd);
-      doc.removeEventListener('touchend touchcancel', this.dragEnd, true);
-      doc.removeEventListener('touchstart', this.dragEnd, true);
+      doc.removeEventListener('mousemove', this.dragYMove);
+      doc.removeEventListener('touchmove', this.dragYMove, true);
+      doc.removeEventListener('mouseup', this.dragYEnd);
+      doc.removeEventListener('mouseleave', this.dragYEnd);
+      doc.removeEventListener('touchend touchcancel', this.dragYEnd, true);
+      doc.removeEventListener('touchstart', this.dragYEnd, true);
 
       this.setReportedHeight();
       setTimeout(() => {
@@ -150,8 +197,87 @@ export default {
       }, 100);
     },
 
-    setReportedHeight() {
-      this.reportedHeight = this.height;
+    dragXStart(event) {
+      const doc = document.documentElement;
+
+      doc.addEventListener('mousemove', this.dragXMove);
+      doc.addEventListener('touchmove', this.dragXMove, true);
+      doc.addEventListener('mouseup', this.dragXEnd);
+      doc.addEventListener('mouseleave', this.dragXEnd);
+      doc.addEventListener('touchend touchcancel', this.dragXEnd, true);
+      doc.addEventListener('touchstart', this.dragXEnd, true);
+
+      const eventX = event.screenX;
+      const rect = boundingRect(event.target);
+
+      switch (this.userPin) {
+      case RIGHT:
+        this.dragOffset = eventX - rect.left;
+        break;
+      case LEFT:
+        this.dragOffset = rect.right - eventX;
+        break;
+      }
+    },
+
+    dragXMove(event) {
+      const screen = screenRect();
+      const eventX = event.screenX;
+
+      const min = 250;
+      const max = Math.round(2 * screen.width / 5);
+      let neu;
+
+      switch (this.userPin) {
+      case RIGHT:
+        neu = screen.width - eventX + this.dragOffset;
+        break;
+      case LEFT:
+        neu = eventX + this.dragOffset;
+        break;
+      }
+
+      neu = Math.max(min, Math.min(neu, max));
+      this.width = neu;
+      this.dragging = true;
+      debounce(this.setReportedWidth, 250)();
+    },
+
+    dragXEnd(event) {
+      const doc = document.documentElement;
+
+      doc.removeEventListener('mousemove', this.dragXMove);
+      doc.removeEventListener('touchmove', this.dragXMove, true);
+      doc.removeEventListener('mouseup', this.dragXEnd);
+      doc.removeEventListener('mouseleave', this.dragXEnd);
+      doc.removeEventListener('touchend touchcancel', this.dragXEnd, true);
+      doc.removeEventListener('touchstart', this.dragXEnd, true);
+
+      this.setReportedWidth();
+      setTimeout(() => {
+        this.dragging = false;
+      }, 100);
+    },
+
+    setReportedHeight(height = this.height) {
+      this.reportedHeight = height;
+    },
+
+    setReportedWidth() {
+      this.reportedWidth = this.width;
+    },
+
+    setWmDimensions() {
+      switch (this.userPin) {
+      case RIGHT:
+      case LEFT:
+        document.documentElement.style.setProperty('--wm-height', `${ window.innerHeight - 55 }px`);
+        document.documentElement.style.setProperty('--wm-width', `${ this.width }px`);
+        break;
+      case BOTTOM:
+        document.documentElement.style.setProperty('--wm-height', `${ this.height }px`);
+        break;
+      }
     },
 
     close(id) {
@@ -169,6 +295,10 @@ export default {
       }
 
       return this.component[tab.component];
+    },
+
+    emitDraggable(event) {
+      this.$emit('draggable', event);
     }
   }
 };
@@ -178,11 +308,25 @@ export default {
   <div
     id="windowmanager"
     class="windowmanager"
+    :class="{[pinClass]: true}"
   >
     <div
       ref="tabs"
       class="tabs"
+      :class="{
+        'resizer-left': userPin == 'left',
+      }"
+      @mousedown="emitDraggable(true)"
+      @mouseup="emitDraggable(false)"
     >
+      <div
+        v-if="userPin == 'right'"
+        class="resizer resizer-x"
+        @mousedown.prevent.stop="dragXStart($event)"
+        @touchstart.prevent.stop="dragXStart($event)"
+      >
+        <i class="icon icon-code" />
+      </div>
       <div
         v-for="tab in tabs"
         :key="tab.id"
@@ -202,25 +346,39 @@ export default {
         />
       </div>
       <div
-        class="resizer"
-        @mousedown.prevent.stop="dragStart($event)"
-        @touchstart.prevent.stop="dragStart($event)"
+        v-if="userPin == 'bottom'"
+        class="resizer resizer-y"
+        @mousedown.prevent.stop="dragYStart($event)"
+        @touchstart.prevent.stop="dragYStart($event)"
         @click="toggle"
       >
         <i class="icon icon-sort" />
       </div>
+      <div
+        v-if="userPin == 'left'"
+        class="resizer resizer-x resizer-align-right"
+        @mousedown.prevent.stop="dragXStart($event)"
+        @touchstart.prevent.stop="dragXStart($event)"
+      >
+        <i class="icon icon-code" />
+      </div>
     </div>
     <div
       v-for="tab in tabs"
       :key="tab.id"
       class="body"
       :class="{'active': tab.id === active}"
+      draggable="false"
+      @dragstart.prevent.stop
+      @dragend.prevent.stop
+      @mouseover="emitDraggable(false)"
     >
       <component
         :is="componentFor(tab)"
         :tab="tab"
         :active="tab.id === active"
         :height="reportedHeight"
+        :width="reportedWidth"
         v-bind="tab.attrs"
         @close="close(tab.id)"
       />
@@ -257,6 +415,7 @@ export default {
         user-select: none;
         border-top: 1px solid var(--wm-border);
         border-right: 1px solid var(--wm-border);
+        border-left: 1px solid var(--wm-border);
         padding: 5px 10px;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -303,9 +462,23 @@ export default {
         }
       }
 
-      .resizer {
+      .resizer-y {
         cursor: ns-resize;
       }
+
+      .resizer-x {
+        cursor: col-resize;
+      }
+
+      .resizer-align-right {
+        margin-left: auto;
+      }
+
+      &.resizer-left {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+      }
     }
 
     .body {
@@ -319,5 +492,13 @@ export default {
         height: 100%;
       }
     }
+
+    &.pin-right {
+      border-left: var(--nav-border-size) solid var(--nav-border);
+    }
+
+    &.pin-left {
+      border-right: var(--nav-border-size) solid var(--nav-border);
+    }
   }
 </style>

package/config/elemental-types.js

@@ -0,0 +1,9 @@
+export const ELEMENTAL_PRODUCT_NAME = 'elemental';
+export const ELEMENTAL_CLUSTER_PROVIDER = 'machineinventoryselectortemplate';
+
+export const ELEMENTAL_SCHEMA_IDS = {
+  MACHINE_INVENTORIES:            'elemental.cattle.io.machineinventory',
+  MACHINE_INV_SELECTOR_TEMPLATES: 'elemental.cattle.io.machineinventoryselectortemplate',
+};
+
+export const KIND = { MACHINE_INV_SELECTOR_TEMPLATES: 'MachineInventorySelectorTemplate' };

package/config/features.js

@@ -1,3 +1,5 @@
 export const ONE_WAY = [
   'token-hashing', 'multi-cluster-management'
 ];
+
+export const HARVESTER_NAME = 'harvester';

package/config/home-links.js

@@ -48,7 +48,10 @@ export async function fetchLinks(store, hasSupport, isSupportPage, t) {
   try {
     const uiLinksSetting = await store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.UI_CUSTOM_LINKS });
 
-    uiLinks = JSON.parse(uiLinksSetting.value);
+    // Don't try and parse empty string
+    if (uiLinksSetting.value) {
+      uiLinks = JSON.parse(uiLinksSetting.value);
+    }
   } catch (e) {
     console.warn('Could not parse custom link settings', e); // eslint-disable-line no-console
   }

package/config/labels-annotations.js

@@ -57,15 +57,15 @@ export const CAPI = {
 };
 
 export const CATALOG = {
-  CERTIFIED:     'catalog.cattle.io/certified',
-  _RANCHER:      'rancher',
-  _PARTNER:      'partner',
-  _OTHER:         'other',
+  CERTIFIED: 'catalog.cattle.io/certified',
+  _RANCHER:  'rancher',
+  _PARTNER:  'partner',
+  _OTHER:    'other',
 
-  EXPERIMENTAL:  'catalog.cattle.io/experimental',
-  NAMESPACE:     'catalog.cattle.io/namespace',
-  RELEASE_NAME:  'catalog.cattle.io/release-name',
-  FEATURED:      'catalog.cattle.io/featured',
+  EXPERIMENTAL: 'catalog.cattle.io/experimental',
+  NAMESPACE:    'catalog.cattle.io/namespace',
+  RELEASE_NAME: 'catalog.cattle.io/release-name',
+  FEATURED:     'catalog.cattle.io/featured',
 
   REQUIRES_GVK:     'catalog.cattle.io/requires-gvr',
   PROVIDES:         'catalog.cattle.io/provides-gvr',
@@ -75,14 +75,14 @@ export const CATALOG = {
   REQUESTS_CPU:     'catalog.cattle.io/requests-cpu',
   REQUESTS_MEMORY:  'catalog.cattle.io/requests-memory',
 
-  SCOPE:            'catalog.cattle.io/scope',
-  _MANAGEMENT:      'management',
-  _DOWNSTREAM:      'downstream',
+  SCOPE:       'catalog.cattle.io/scope',
+  _MANAGEMENT: 'management',
+  _DOWNSTREAM: 'downstream',
 
-  TYPE:             'catalog.cattle.io/type',
-  _APP:             'app',
-  _CLUSTER_TPL:     'cluster-template',
-  _CLUSTER_TOOL:    'cluster-tool',
+  TYPE:          'catalog.cattle.io/type',
+  _APP:          'app',
+  _CLUSTER_TPL:  'cluster-template',
+  _CLUSTER_TOOL: 'cluster-tool',
 
   COMPONENT:        'catalog.cattle.io/ui-component',
   SOURCE_REPO_TYPE: 'catalog.cattle.io/ui-source-repo-type',
@@ -92,7 +92,7 @@ export const CATALOG = {
 
   SUPPORTED_OS: 'catalog.cattle.io/os',
   PERMITTED_OS: 'catalog.cattle.io/permits-os',
-  DEPLOYED_OS:   'catalog.cattle.io/deploys-on-os',
+  DEPLOYED_OS:  'catalog.cattle.io/deploys-on-os',
 
   MIGRATED: 'apps.cattle.io/migrated',
   MANAGED:  'catalog.cattle.io/managed',
@@ -140,9 +140,9 @@ export const HCI = {
 // Can't use ui.cattle.io - it seems to strip these out - so using io.rancher
 export const CLUSTER_BADGE = {
   // Badge text - badge is only shown if badge text is not empty
-  TEXT:        'ui.rancher/badge-text',
+  TEXT:      'ui.rancher/badge-text',
   // Badge color - as a hex color - e.g. #ff00ff
-  COLOR:       'ui.rancher/badge-color',
+  COLOR:     'ui.rancher/badge-color',
   // Custom icon text - max 2 characters
-  ICON_TEXT:   'ui.rancher/badge-icon-text',
+  ICON_TEXT: 'ui.rancher/badge-icon-text',
 };

package/config/pod-security-admission.ts

@@ -0,0 +1,82 @@
+import { PSADimension, PSALevel, PSAMode } from '@shell/types/pod-security-admission';
+
+/**
+ * All the PSA labels are created with this prefix, so we can use this to identify them
+ */
+export const PSALabelPrefix = 'pod-security.kubernetes.io/';
+
+/**
+ * Default modes of restrictions used for PSA
+ */
+export const PSAModes: PSAMode[] = ['enforce', 'audit', 'warn'];
+
+/**
+ * Levels of restrictions for the PSA
+ */
+export const PSALevels: PSALevel[] = ['privileged', 'baseline', 'restricted'];
+
+/**
+ * Used for restrictions in templates
+ */
+export const PSADimensions: PSADimension[] = ['usernames', 'runtimeClasses', 'namespaces'];
+
+/**
+ * For the UI, we prefer use this value as default one
+ */
+export const PSADefaultLevel = PSALevels[0];
+
+/**
+ * Default values for PSA should always be this one
+ */
+export const PSADefaultVersion = 'latest';
+
+/**
+ * PSA labels for namespaces.
+ * MODE must be one of `enforce`, `audit`, or `warn`.
+ * LEVEL must be one of `privileged`, `baseline`, or `restricted`.
+ * pod-security.kubernetes.io/<MODE>: <LEVEL>
+ *
+ * Optional: per-mode version label that can be used to pin the policy to the
+ * version that shipped with a given Kubernetes minor version (for example v1.25).
+ *
+ * https://kubernetes.io/docs/concepts/security/pod-security-admission/#pod-security-admission-labels-for-namespaces
+ */
+export const PSALabelsNamespaceMode = PSAModes.reduce((acc, mode) => [
+  ...acc,
+  `${ PSALabelPrefix }${ mode }`,
+], [] as string[]);
+
+/**
+ * PSA labels for namespaces.
+ * MODE must be one of `enforce`, `audit`, or `warn`.
+ * VERSION must be a valid Kubernetes minor version, or `latest`.
+ * pod-security.kubernetes.io/<MODE>-version: <VERSION>
+ *
+ * https://kubernetes.io/docs/concepts/security/pod-security-admission/#pod-security-admission-labels-for-namespaces
+ */
+export const PSALabelsNamespaceVersion = PSAModes.reduce((acc, mode) => [
+  ...acc,
+  `${ PSALabelPrefix }${ mode }-version`
+], [] as string[]);
+
+/**
+ * PSA labels for namespaces.
+ * MODE must be one of `enforce`, `audit`, or `warn`.
+ * LEVEL must be one of `privileged`, `baseline`, or `restricted`.
+ * pod-security.kubernetes.io/<MODE>: <LEVEL>
+ *
+ * Optional: per-mode version label that can be used to pin the policy to the
+ * version that shipped with a given Kubernetes minor version (for example v1.25).
+ *
+ * MODE must be one of `enforce`, `audit`, or `warn`.
+ * VERSION must be a valid Kubernetes minor version, or `latest`.
+ * pod-security.kubernetes.io/<MODE>-version: <VERSION>
+ *
+ * https://kubernetes.io/docs/concepts/security/pod-security-admission/#pod-security-admission-labels-for-namespaces
+ */
+export const PSALabelsNamespaces: string[] = [...PSALabelsNamespaceMode, ...PSALabelsNamespaceVersion];
+
+/**
+ * Generated table of icons with or hardcoded generated PSA labels
+ */
+export const PSAIconsDisplay: Record<string, string> = Object.assign({}, ...PSALabelsNamespaces.map(psa => ({ [psa]: 'icon-pod_security' })));

package/config/product/apps.js

@@ -32,12 +32,12 @@ export function init(store) {
   });
 
   virtualType({
-    label:       'Charts',
+    labelKey:   'catalog.charts.header',
     icon:       'compass',
-    namespaced:  false,
-    name:        'charts',
-    weight:      100,
-    route:       { name: 'c-cluster-apps-charts' },
+    namespaced: false,
+    name:       'charts',
+    weight:     100,
+    route:      { name: 'c-cluster-apps-charts' },
   });
 
   weightType(CATALOG.APP, 99, true);

package/config/product/auth.js

@@ -37,22 +37,22 @@ export function init(store) {
   });
 
   virtualType({
-    labelKey:    'auth.config.label',
-    icon:        'lock',
-    namespaced:  false,
-    name:        'config',
-    weight:      -1,
-    route:       { name: 'c-cluster-auth-config' },
+    labelKey:   'auth.config.label',
+    icon:       'lock',
+    namespaced: false,
+    name:       'config',
+    weight:     -1,
+    route:      { name: 'c-cluster-auth-config' },
     ifHaveType: MANAGEMENT.AUTH_CONFIG
   });
 
   virtualType({
-    label:       store.getters['type-map/labelFor']({ id: MANAGEMENT.USER }, 2),
-    name:           USERS_VIRTUAL_TYPE,
-    namespaced:     false,
-    weight:         102,
-    icon:           'user',
-    route:          {
+    labelKey:   'typeLabel."management.cattle.io.user"',
+    name:       USERS_VIRTUAL_TYPE,
+    namespaced: false,
+    weight:     103,
+    icon:       'user',
+    route:      {
       name:   'c-cluster-product-resource',
       params: {
         cluster:  'local',
@@ -64,8 +64,9 @@ export function init(store) {
   configureType(MANAGEMENT.USER, { showListMasthead: false });
 
   spoofedType({
-    label:             store.getters['type-map/labelFor']({ id: NORMAN.SPOOFED.GROUP_PRINCIPAL }, 2),
+    labelKey:          'typeLabel."group.principal"',
     type:              NORMAN.SPOOFED.GROUP_PRINCIPAL,
+    weight:            101,
     ifHaveType:        MANAGEMENT.GLOBAL_ROLE_BINDING,
     collectionMethods: [],
     schemas:           [
@@ -142,15 +143,15 @@ export function init(store) {
   weightType(NORMAN.SPOOFED.GROUP_PRINCIPAL, 101, true);
 
   virtualType({
-    label:       store.getters['i18n/t']('rbac.roletemplate.label'),
-    icon:        'user',
-    namespaced:  false,
-    name:        ROLES_VIRTUAL_TYPE,
-    weight:      101,
-    route:       { name: 'c-cluster-auth-roles' },
+    labelKey:   'rbac.roletemplate.label',
+    icon:       'user',
+    namespaced: false,
+    name:       ROLES_VIRTUAL_TYPE,
+    weight:     102,
+    route:      { name: 'c-cluster-auth-roles' },
     // There are two resource types shown on this page, MANAGEMENT.GLOBAL_ROLE and MANAGEMENT.ROLE_TEMPLATE
     // If there user can't see ROLE_TEMPLATE, they definitely can't see GLOBAL_ROLE
-    ifHaveType:  MANAGEMENT.ROLE_TEMPLATE
+    ifHaveType: MANAGEMENT.ROLE_TEMPLATE
   });
 
   configureType(MANAGEMENT.AUTH_CONFIG, {
@@ -188,7 +189,7 @@ export function init(store) {
   // A lot of the built in roles have nicer names returned by nameDisplay. In both tables we want to show both nicer and base names
   const DISPLAY_NAME = {
     ...HEADER_NAME,
-    name:          'displayName',
+    name:     'displayName',
     labelKey: 'tableHeaders.nameDisplay',
   };