@rancher/shell 0.4.0 → 0.5.1

package/{layouts → components/templates}/default.vue

@@ -248,7 +248,10 @@ export default {
         v-if="clusterAndRouteReady"
         class="main-layout"
       >
-        <nuxt class="outlet" />
+        <router-view
+          :key="$route.path"
+          class="outlet"
+        />
         <ActionMenu />
         <PromptRemove />
         <PromptRestore />
@@ -282,7 +285,10 @@ export default {
         v-else-if="unmatchedRoute"
         class="main-layout"
       >
-        <nuxt class="outlet" />
+        <router-view
+          :key="$route.path"
+          class="outlet"
+        />
       </main>
       <div
         v-if="$refs.draggableZone"
@@ -304,99 +310,3 @@ export default {
     <DraggableZone ref="draggableZone" />
   </div>
 </template>
-<style lang="scss">
-  .dashboard-root {
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-  }
-
-  .dashboard-content {
-    display: grid;
-    position: relative;
-    flex: 1 1 auto;
-    overflow-y: auto;
-    min-height: 0px;
-
-    &.dashboard-padding-left {
-    padding-left: $app-bar-collapsed-width;
-
-      .overlay-content-mode {
-        left: calc(var(--nav-width) + $app-bar-collapsed-width);
-      }
-   }
-
-    &.pin-right {
-      grid-template-areas:
-        "header  header  header"
-        "nav      main     wm";
-      grid-template-rows:    var(--header-height) auto;
-      grid-template-columns: var(--nav-width)     auto var(--wm-width, 0px);
-    }
-
-    &.pin-bottom {
-      grid-template-areas:
-        "header  header"
-        "nav       main"
-        "wm         wm";
-      grid-template-rows:    var(--header-height) auto  var(--wm-height, 0px);
-      grid-template-columns: var(--nav-width)     auto;
-    }
-
-    &.pin-left {
-      grid-template-areas:
-        "header  header  header"
-        "wm       nav     main";
-      grid-template-rows:    var(--header-height) auto;
-      grid-template-columns: var(--wm-width, 0px) var(--nav-width) auto;
-    }
-
-    > HEADER {
-      grid-area: header;
-    }
-
-    .default-side-nav {
-      grid-area: nav;
-    }
-  }
-
-  .wm {
-    grid-area: wm;
-    overflow-y: hidden;
-    z-index: 1;
-  }
-
-  .localeSelector {
-    ::v-deep .popover-inner {
-      padding: 50px 0;
-    }
-
-    ::v-deep .popover-arrow {
-      display: none;
-    }
-
-    ::v-deep .popover:focus {
-      outline: 0;
-    }
-
-    li {
-      padding: 8px 20px;
-
-      &:hover {
-        background-color: var(--primary-hover-bg);
-        color: var(--primary-hover-text);
-        text-decoration: none;
-      }
-    }
-  }
-
-  .drag-start {
-    z-index: 1000;
-    opacity: 0.5;
-    transition: opacity .3s ease;
-  }
-
-  .drag-end {
-    opacity: 1;
-  }
-</style>

package/{layouts → components/templates}/error.vue

@@ -5,18 +5,15 @@ export default {
   name:       'NuxtError',
   mixins:     [Brand],
   middleware: ['unauthenticated'],
-  props:      {
-    error: {
-      type:    Object,
-      default: null
-    }
-  },
 
   data() {
     return { ready: false };
   },
 
   computed: {
+    error() {
+      return window.$nuxt.nuxt.err || {};
+    },
     statusCode() {
       return (this.error && this.error.statusCode) || 599;
     },
@@ -24,6 +21,11 @@ export default {
       return this.error.message || '';
     }
   },
+  watch: {
+    message(neu) {
+      document.title = neu;
+    }
+  },
 
   mounted() {
     // If the page isn't a sub-path of the base url, redirect to it instead of saying not found.
@@ -40,19 +42,8 @@ export default {
     setTimeout(() => {
       this.ready = true;
     }, 1000);
+    document.title = this.message;
   },
-
-  head() {
-    return {
-      title: this.message,
-      meta:  [
-        {
-          name:    'viewport',
-          content: 'width=device-width,initial-scale=1.0,minimum-scale=1.0'
-        }
-      ]
-    };
-  }
 };
 </script>
 
@@ -112,7 +103,7 @@ export default {
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
   -webkit-font-smoothing: antialiased;
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   right: 0;

package/{layouts → components/templates}/home.vue

@@ -68,7 +68,10 @@ export default {
       />
 
       <main class="main-layout">
-        <nuxt class="outlet" />
+        <router-view
+          :key="$route.path"
+          class="outlet"
+        />
       </main>
     </div>
     <FixedBanner :footer="true" />

package/{layouts → components/templates}/plain.vue

@@ -70,7 +70,10 @@ export default {
       <Header :simple="true" />
       <main class="main-layout">
         <IndentedPanel class="pt-20">
-          <nuxt class="outlet" />
+          <router-view
+            :key="$route.path"
+            class="outlet"
+          />
         </IndentedPanel>
         <ActionMenu />
         <PromptRemove />

package/{layouts → components/templates}/standalone.vue

@@ -3,7 +3,7 @@ export default { middleware: ['unauthenticated'] };
 </script>
 
 <template>
-  <nuxt />
+  <router-view :key="$route.path" />
 </template>
 
 <style lang="scss">

package/{layouts → components/templates}/unauthenticated.vue

@@ -14,7 +14,7 @@ export default {
     <div class="dashboard-root">
       <FixedBanner :header="true" />
       <FixedBanner :consent="true" />
-      <nuxt />
+      <router-view :key="$route.path" />
       <FixedBanner :footer="true" />
     </div>
   </main>

package/composables/useCompactInput.ts

@@ -0,0 +1,20 @@
+import { computed, ComputedRef } from 'vue';
+
+interface CompactInputProps {
+  compact?: boolean;
+  label?: string;
+  labelKey?: string;
+}
+
+interface UseCompactInput {
+  isCompact: ComputedRef<boolean>;
+}
+
+export const useCompactInput = (props: CompactInputProps): UseCompactInput => {
+  const isCompact = computed(() => {
+    // Compact if explicitly set - otherwise compact if there is no label
+    return props.compact !== null ? !!props.compact : !(props.label || props.labelKey);
+  });
+
+  return { isCompact };
+};

package/composables/useLabeledFormElement.ts

@@ -0,0 +1,138 @@
+import { ref, computed, ComputedRef, Ref } from 'vue';
+import { _VIEW, _EDIT } from '@shell/config/query-params';
+
+interface LabeledFormElementProps {
+  mode: string;
+  value: string | number | Record<string, any>
+  required: boolean;
+  disabled: boolean;
+  rules: Array<any>;
+}
+
+interface UseLabeledFormElement {
+  raised: Ref<boolean>;
+  focused: Ref<boolean>;
+  blurred: Ref<number | null>;
+  requiredField: ComputedRef<any>;
+  isDisabled: ComputedRef<any>;
+  validationMessage: ComputedRef<any>;
+  onFocusLabeled: () => void;
+  onBlurLabeled: () => void;
+}
+
+export const labeledFormElementProps = {
+  tooltipKey: {
+    type:    String,
+    default: null
+  },
+  placeholder: {
+    type:    [String, Number],
+    default: ''
+  },
+  placeholderKey: {
+    type:    String,
+    default: null
+  },
+  label: {
+    type:    String,
+    default: null
+  },
+  labelKey: {
+    type:    String,
+    default: null
+  },
+  value: {
+    type:    [String, Number, Object],
+    default: ''
+  },
+  mode: {
+    type:    String,
+    default: _EDIT,
+  },
+  rules: {
+    default:   (): Array<unknown> => [],
+    type:      Array,
+    // we only want functions in the rules array
+    validator: (rules: Array<unknown>): boolean => rules.every((rule: unknown) => ['function'].includes(typeof rule))
+  },
+  required: {
+    type:    Boolean,
+    default: false,
+  },
+  disabled: {
+    type:    Boolean,
+    default: false,
+  },
+};
+
+export const useLabeledFormElement = (props: LabeledFormElementProps, emit: (event: string, ...args: any[]) => void): UseLabeledFormElement => {
+  const raised = ref(props.mode === _VIEW || !!`${ props.value }`);
+  const focused = ref(false);
+  const blurred = ref<number | null>(null);
+
+  const requiredField = computed(() => {
+    return props.required || props.rules?.some((rule: any) => rule?.name === 'required');
+  });
+
+  const isView = computed(() => {
+    return props.mode === _VIEW;
+  });
+
+  const isDisabled = computed(() => {
+    return props.disabled || isView.value;
+  });
+
+  const validationMessage = computed(() => {
+    const requiredRule = props.rules.find((rule: any) => rule?.name === 'required') as Function;
+    const ruleMessages = [];
+    const value = props.value;
+
+    if (requiredRule && blurred.value && !focused.value) {
+      const message = requiredRule(value);
+
+      if (!!message) {
+        return message;
+      }
+    }
+
+    for (const rule of props.rules) {
+      const message = rule(value);
+
+      if (!!message && rule.name !== 'required') {
+        ruleMessages.push(message);
+      }
+    }
+
+    if (ruleMessages.length > 0 && (blurred.value || focused.value)) {
+      return ruleMessages.join(', ');
+    } else {
+      return undefined;
+    }
+  });
+
+  const onFocusLabeled = () => {
+    raised.value = true;
+    focused.value = true;
+  };
+
+  const onBlurLabeled = () => {
+    focused.value = false;
+
+    if (!props.value) {
+      raised.value = false;
+    }
+
+    blurred.value = Date.now();
+  };
+
+  return {
+    raised,
+    focused,
+    blurred,
+    onFocusLabeled,
+    onBlurLabeled,
+    isDisabled,
+    validationMessage,
+    requiredField
+  };
+};

package/config/harvester-manager-types.js

@@ -1 +1,3 @@
 export const NAME = 'harvesterManager';
+
+export const KIND = { MACHINE_TEMPLATE: 'HarvesterMachineTemplate' };

package/config/private-label.js

@@ -23,6 +23,7 @@ export function setMode(m) {
 
 export function setVendor(v) {
   vendor = v;
+  setTitle();
 }
 
 export function setProduct(p) {
@@ -71,3 +72,24 @@ export function getVendor() {
 export function getProduct() {
   return product;
 }
+
+export function setTitle() {
+  const v = getVendor();
+
+  if (v === 'Harvester') {
+    const ico = require(`~shell/assets/images/pl/harvester.png`);
+
+    document.title = 'Harvester';
+    const link = document.createElement('link');
+
+    link.hid = 'icon';
+    link.rel = 'icon';
+    link.type = 'image/x-icon';
+    link.hrefv = ico;
+    const head = document.getElementsByTagName('head')[0];
+
+    head.appendChild(link);
+  } else {
+    document.title = v;
+  }
+}

package/config/product/explorer.js

@@ -7,6 +7,7 @@ import {
   MANAGEMENT,
   NAMESPACE,
   NORMAN,
+  SNAPSHOT,
   VIRTUAL_TYPES,
 } from '@shell/config/types';
 
@@ -162,6 +163,8 @@ export function init(store) {
   configureType(MANAGEMENT.PROJECT_ROLE_TEMPLATE_BINDING, { isEditable: false, depaginate: true });
   configureType(MANAGEMENT.PROJECT, { displayName: store.getters['i18n/t']('namespace.project.label') });
   configureType(NORMAN.PROJECT_ROLE_TEMPLATE_BINDING, { depaginate: true });
+  configureType(SNAPSHOT, { depaginate: true });
+  configureType(NORMAN.ETCD_BACKUP, { depaginate: true });
 
   configureType(EVENT, { limit: 500 });
   weightType(EVENT, -1, true);

package/config/product/fleet.js

@@ -3,6 +3,7 @@ import { FLEET } from '@shell/config/types';
 import { STATE, NAME as NAME_COL, AGE } from '@shell/config/table-headers';
 import { FLEET as FLEET_FEATURE } from '@shell/store/features';
 import { gitRepoGraphConfig } from '@shell/pages/c/_cluster/fleet/GitRepoGraphConfig';
+import { BLANK_CLUSTER } from '@shell/store/store-types.js';
 
 export const NAME = 'fleet';
 export const CHART_NAME = 'fleet';
@@ -26,6 +27,10 @@ export function init(store) {
     removable:             false,
     showClusterSwitcher:   false,
     showWorkspaceSwitcher: true,
+    to:                    {
+      name:   'c-cluster-fleet',
+      params: { resource: FLEET.DASHBOARD, cluster: BLANK_CLUSTER }
+    },
   });
 
   virtualType({
@@ -37,7 +42,7 @@ export function init(store) {
     weight:     110,
     route:      {
       name:   'c-cluster-fleet',
-      params: { resource: FLEET.DASHBOARD }
+      params: { resource: FLEET.DASHBOARD, cluster: BLANK_CLUSTER }
     },
     exact: true,
   });

package/config/product/manager.js

@@ -4,9 +4,10 @@ import {
   CATALOG,
   NORMAN,
   HCI,
-  MANAGEMENT
+  MANAGEMENT,
+  SNAPSHOT
 } from '@shell/config/types';
-import { MULTI_CLUSTER } from '@shell/store/features';
+import { MULTI_CLUSTER, RKE1_UI } from '@shell/store/features';
 import { DSL } from '@shell/store/type-map';
 import { BLANK_CLUSTER } from '@shell/store/store-types.js';
 
@@ -60,6 +61,9 @@ export function init(store) {
     'drivers',
   ]);
 
+  configureType(SNAPSHOT, { depaginate: true });
+  configureType(NORMAN.ETCD_BACKUP, { depaginate: true });
+
   configureType(CAPI.RANCHER_CLUSTER, {
     showListMasthead: false, namespaced: false, alias: [HCI.CLUSTER]
   });
@@ -84,6 +88,7 @@ export function init(store) {
   });
 
   virtualType({
+    ifFeature:  RKE1_UI,
     labelKey:   'manager.rkeTemplates.label',
     name:       'rke-templates',
     group:      'Root',
@@ -94,6 +99,7 @@ export function init(store) {
   });
 
   virtualType({
+    ifFeature:  RKE1_UI,
     labelKey:   'manager.nodeTemplates.label',
     name:       'rke-node-templates',
     group:      'Root',

package/config/query-params.js

@@ -50,6 +50,7 @@ export const _SPLIT = 'split';
 
 // CruResource
 export const SUB_TYPE = 'type';
+export const RKE_TYPE = 'rkeType';
 
 // App launch
 export const REPO_TYPE = 'repo-type';