@rancher/shell 0.5.2 → 1.2.0

package/utils/__tests__/create-yaml.test.ts

@@ -2,6 +2,7 @@ import {
   getBlockDescriptor,
   dumpBlock,
 } from '@shell/utils/create-yaml';
+import jsyaml from 'js-yaml';
 
 const key = 'example';
 const randomData = '\n      foo\n      bar\n';
@@ -61,6 +62,15 @@ describe('fx: dumpBlock', () => {
     });
   });
 
+  it('should not create a data block when the value of a key is not a string', () => {
+    const data = { key: { test: 'test' } };
+
+    const expectedResult = jsyaml.dump(data);
+    const result = dumpBlock(data);
+
+    expect(result).toStrictEqual(expectedResult);
+  });
+
   it('should retain line breaks when a line longer than 80 characters exists', () => {
     const data = {
       'managerApiConfiguration.properties': `# Sample XPlanManagerAPI Configuration (if this comment is longer than 80 characters, the output should remain the same)

package/utils/axios.js

@@ -75,6 +75,10 @@ const createAxiosInstance = (axiosOptions) => {
 };
 
 const setupProgress = (axios) => {
+  if (process.server) {
+    return;
+  }
+
   // A noop loading inteterface for when $nuxt is not yet ready
   const noopLoading = {
     finish: () => { },
@@ -163,6 +167,21 @@ export default (ctx, inject) => {
     headers
   };
 
+  // Proxy SSR request headers headers
+  if (process.server && ctx.req && ctx.req.headers) {
+    const reqHeaders = { ...ctx.req.headers };
+
+    for (const h of ['accept', 'host', 'cf-ray', 'cf-connecting-ip', 'content-length', 'content-md5', 'content-type']) {
+      delete reqHeaders[h];
+    }
+    axiosOptions.headers.common = { ...reqHeaders, ...axiosOptions.headers.common };
+  }
+
+  if (process.server) {
+    // Don't accept brotli encoding because Node can't parse it
+    axiosOptions.headers.common['accept-encoding'] = 'gzip, deflate';
+  }
+
   const axios = createAxiosInstance(axiosOptions);
 
   // Inject axios to the context as $axios

package/utils/create-yaml.js

@@ -32,6 +32,7 @@ const ALWAYS_ADD = [
 ];
 
 export const NEVER_ADD = [
+  'metadata.clusterName',
   'metadata.clusterName',
   'metadata.creationTimestamp',
   'metadata.deletionGracePeriodSeconds',
@@ -45,16 +46,11 @@ export const NEVER_ADD = [
   'metadata.resourceVersion',
   'metadata.relationships',
   'metadata.selfLink',
-  'metadata.state',
   'metadata.uid',
   // CRD -> Schema describes the schema used for validation, pruning, and defaulting of this version of the custom resource. If we allow processing we fall into inf loop on openAPIV3Schema.allOf which contains a cyclical ref of allOf props.
   'spec.versions.schema',
   'status',
   'stringData',
-  'links',
-  '_name',
-  '_labels',
-  '_annotations',
 ];
 
 export const ACTIVELY_REMOVE = [
@@ -465,7 +461,11 @@ export function dumpBlock(data, options = {}) {
 
   let out = parsed;
 
-  const blockFields = Object.keys(data).filter((k) => data[k].includes('\n'));
+  const blockFields = Object.keys(data).filter((k) => {
+    if (typeof data[k] === 'string') {
+      return data[k].includes('\n');
+    }
+  });
 
   if (blockFields.length) {
     for (const key of blockFields) {

package/utils/custom-validators.js

@@ -8,6 +8,7 @@ import { cronSchedule } from '@shell/utils/validators/cron-schedule';
 import { podAffinity } from '@shell/utils/validators/pod-affinity';
 import { roleTemplateRules } from '@shell/utils/validators/role-template';
 import { clusterName } from '@shell/utils/validators/cluster-name';
+import { isHttps } from '@shell/utils/validators/setting';
 
 /**
 * Custom validation functions beyond normal scalr types
@@ -29,4 +30,5 @@ export default {
   cronSchedule,
   podAffinity,
   roleTemplateRules,
+  isHttps,
 };

package/utils/error.js

@@ -1,24 +1,9 @@
 import { isArray } from '@shell/utils/array';
 
 export class ClusterNotFoundError extends Error {
-  static name = 'ClusterNotFoundError'
-
   constructor(message) {
     super(message);
-    this.name = ClusterNotFoundError.name;
-  }
-}
-
-/**
- * An error occurred and the user should be redirected to a certain location (where this is handled)
- */
-export class RedirectToError extends Error {
-  static name = 'RedirectToError'
-
-  constructor(message, url) {
-    super(message);
-    this.url = url;
-    this.name = RedirectToError.name;
+    this.name = 'ClusterNotFoundError';
   }
 }
 

package/utils/monitoring.js

@@ -1,6 +1,6 @@
 // Helpers for determining if V2 or v1 Monitoring are installed
 
-import { SCHEMA, MONITORING, WORKLOAD_TYPES, ENDPOINTS } from '@shell/config/types';
+import { SCHEMA, MONITORING, ENDPOINTS } from '@shell/config/types';
 import { normalizeType } from '@shell/plugins/dashboard-store/normalize';
 import { findBy } from '@shell/utils/array';
 import { isEmpty } from '@shell/utils/object';
@@ -9,10 +9,7 @@ import { isEmpty } from '@shell/utils/object';
 export function monitoringStatus() {
   return {
     monitoringStatus() {
-      const status = {
-        v1: haveV1Monitoring(this.$store.getters),
-        v2: haveV2Monitoring(this.$store.getters),
-      };
+      const status = { v2: haveV2Monitoring(this.$store.getters) };
 
       status.installed = status.v1 || status.v2;
 
@@ -22,10 +19,6 @@ export function monitoringStatus() {
 }
 
 export function haveV2Monitoring(getters) {
-  // Can't have V2 and V1 monitoring installed, so if V1 is installed we know v2 is not
-  if (haveV1Monitoring(getters)) {
-    return false;
-  }
   const inStore = getters['getStoreNameByProductId'];
 
   // Just check for the pod monitors CRD
@@ -35,36 +28,8 @@ export function haveV2Monitoring(getters) {
   return !!exists;
 }
 
-// For v1 Monitoring, the cluster object indicates presence via status.monitoringStatus
-export function haveV1Monitoring(getters) {
-  const cluster = getters['currentCluster'];
-
-  return !!cluster?.status?.monitoringStatus;
-}
-
 export const CATTLE_MONITORING_NAMESPACE = 'cattle-monitoring-system';
 
-export async function haveV1MonitoringWorkloads(store) {
-  const workloadsByType = await Promise.all(
-    Object.values(WORKLOAD_TYPES).map((type) => store.dispatch('cluster/findAll', { type })
-    )
-  );
-  const workloads = workloadsByType.flat();
-
-  for (let i = 0; i < workloads.length; i++) {
-    const workload = workloads[i];
-
-    if (!isEmpty(workload?.spec?.template?.spec?.containers) &&
-        workload.spec.template.spec.containers.find((c) => c.image?.includes('quay.io/coreos/prometheus-operator') ||
-          c.image?.includes('rancher/coreos-prometheus-operator')) &&
-        workload?.metadata?.namespace !== CATTLE_MONITORING_NAMESPACE) {
-      return Promise.resolve(true);
-    }
-
-    return Promise.resolve(false);
-  }
-}
-
 async function hasEndpointSubsets(store, id) {
   if (store.getters['cluster/schemaFor'](ENDPOINTS)) {
     const endpoints = await store.dispatch('cluster/findAll', { type: ENDPOINTS }) || [];

package/utils/nuxt.js

@@ -5,10 +5,12 @@ import {
 
 // window.{{globals.loadedCallback}} hook
 // Useful for jsdom testing or plugins (https://github.com/tmpvar/jsdom#dealing-with-asynchronous-script-loading)
-window.onNuxtReadyCbs = [];
-window.onNuxtReady = (cb) => {
-  window.onNuxtReadyCbs.push(cb);
-};
+if (process.client) {
+  window.onNuxtReadyCbs = [];
+  window.onNuxtReady = (cb) => {
+    window.onNuxtReadyCbs.push(cb);
+  };
+}
 
 export function createGetCounter(counterObject, defaultKey = '') {
   return function getCounter(id = defaultKey) {
@@ -90,6 +92,10 @@ export function applyAsyncData(Component, asyncData) {
   Component.options.data = function() {
     const data = ComponentData.call(this, this);
 
+    if (this.$ssrContext) {
+      asyncData = this.$ssrContext.asyncData[Component.cid];
+    }
+
     return { ...data, ...asyncData };
   };
 
@@ -204,14 +210,15 @@ export async function setContext(app, context) {
   // If context not defined, create it
   if (!app.context) {
     app.context = {
-      isDev:   true,
-      isHMR:   false,
+      isStatic: process.static,
+      isDev:    true,
+      isHMR:    false,
       app,
-      store:   app.store,
-      payload: context.payload,
-      error:   context.error,
-      base:    app.router.options.base,
-      env:     {
+      store:    app.store,
+      payload:  context.payload,
+      error:    context.error,
+      base:     app.router.options.base,
+      env:      {
         commit: 'head', version: '0.1.2', dev: true, pl: 1, perfTest: false, rancherEnv: 'web', api: 'http://localhost:8989'
       }
     };
@@ -224,6 +231,9 @@ export async function setContext(app, context) {
       app.context.res = context.res;
     }
 
+    if (context.ssrContext) {
+      app.context.ssrContext = context.ssrContext;
+    }
     app.context.redirect = (status, path, query) => {
       if (!status) {
         return;
@@ -250,16 +260,27 @@ export async function setContext(app, context) {
         });
       } else {
         path = withQuery(path, query);
+        if (process.server) {
+          app.context.next({
+            path,
+            status
+          });
+        }
+        if (process.client) {
+          // https://developer.mozilla.org/en-US/docs/Web/API/Location/replace
+          window.location.replace(path);
 
-        // https://developer.mozilla.org/en-US/docs/Web/API/Location/replace
-        window.location.replace(path);
-
-        // Throw a redirect error
-        throw new Error('ERR_REDIRECT');
+          // Throw a redirect error
+          throw new Error('ERR_REDIRECT');
+        }
       }
     };
-
-    app.context.nuxtState = window.__NUXT__;
+    if (process.server) {
+      app.context.beforeNuxtRender = (fn) => context.beforeRenderFns.push(fn);
+    }
+    if (process.client) {
+      app.context.nuxtState = window.__NUXT__;
+    }
   }
 
   // Dynamic keys

package/utils/object.js

@@ -110,20 +110,6 @@ export function remove(obj, path) {
   return obj;
 }
 
-/**
- * `delete` a property at the given path.
- *
- * This is similar to `remove` but doesn't need any fancy kube obj path splitting
- * and doesn't use `Vue.set` (avoids reactivity)
- */
-export function deleteProperty(obj, path) {
-  const pathAr = path.split('.');
-  const propToDelete = pathAr.pop();
-
-  // Walk down path until final prop, then delete final prop
-  delete pathAr.reduce((o, k) => o[k] || {}, obj)[propToDelete];
-}
-
 export function getter(path) {
   return function(obj) {
     return get(obj, path);

package/utils/router.scrollBehavior.js

@@ -1,19 +1,21 @@
 import { getMatchedComponents, setScrollRestoration } from './nuxt';
 
-if ('scrollRestoration' in window.history) {
-  setScrollRestoration('manual');
+if (process.client) {
+  if ('scrollRestoration' in window.history) {
+    setScrollRestoration('manual');
 
-  // reset scrollRestoration to auto when leaving page, allowing page reload
-  // and back-navigation from other pages to use the browser to restore the
-  // scrolling position.
-  window.addEventListener('beforeunload', () => {
-    setScrollRestoration('auto');
-  });
+    // reset scrollRestoration to auto when leaving page, allowing page reload
+    // and back-navigation from other pages to use the browser to restore the
+    // scrolling position.
+    window.addEventListener('beforeunload', () => {
+      setScrollRestoration('auto');
+    });
 
-  // Setting scrollRestoration to manual again when returning to this page.
-  window.addEventListener('load', () => {
-    setScrollRestoration('manual');
-  });
+    // Setting scrollRestoration to manual again when returning to this page.
+    window.addEventListener('load', () => {
+      setScrollRestoration('manual');
+    });
+  }
 }
 
 function shouldScrollToTop(route) {

package/utils/socket.js

@@ -27,6 +27,7 @@ export const EVENT_DISCONNECT_ERROR = 'disconnect_error';
 
 export const NO_WATCH = 'NO_WATCH';
 export const NO_SCHEMA = 'NO_SCHEMA';
+export const NO_PERMS = 'NO_PERMS';
 export const REVISION_TOO_OLD = 'TOO_OLD';
 
 export default class Socket extends EventTarget {

package/utils/time.js

@@ -10,7 +10,7 @@ export function diffFrom(value, from, t) {
   const now = day();
 
   from = from || now;
-  const diff = value.diff(from, 'seconds');
+  const diff = value.diff(now, 'seconds');
 
   let absDiff = Math.abs(diff);
 

package/utils/title.ts

@@ -0,0 +1,3 @@
+export function updatePageTitle(...breadcrumb: (string | null | undefined | false)[]): void {
+  document.title = breadcrumb.filter((s) => s).join(' - ');
+}

package/utils/url.ts

@@ -2,7 +2,7 @@ type UriField = 'source' | 'protocol' | 'authority' | 'userInfo' | 'user' | 'pas
 type UriFields = {
   [key in UriField]: string; // eslint-disable-line no-unused-vars
 }
-export type QueryParams = {
+type QueryParams = {
   [key: string]: string
 }
 

package/utils/validators/formRules/__tests__/index.test.ts

@@ -43,66 +43,21 @@ describe('formRules', () => {
     expect(formRuleResult).toStrictEqual(expectedResult);
   });
 
-  it('"https" : returns undefined when valid https url value is supplied', () => {
+  it('"isHttps" : returns undefined when valid https url value is supplied', () => {
     const testValue = 'https://url.com';
-    const formRuleResult = formRules.https(testValue);
+    const formRuleResult = formRules.isHttps('server-url')(testValue);
 
     expect(formRuleResult).toBeUndefined();
   });
 
-  it('"https" : returns correct message when http url value is supplied', () => {
+  it('"isHttps" : returns correct message when http url value is supplied', () => {
     const testValue = 'http://url.com';
-    const formRuleResult = formRules.https(testValue);
+    const formRuleResult = formRules.isHttps('server-url')(testValue);
     const expectedResult = JSON.stringify({ message: 'validation.setting.serverUrl.https' });
 
     expect(formRuleResult).toStrictEqual(expectedResult);
   });
 
-  describe('localhost', () => {
-    const message = JSON.stringify({ message: 'validation.setting.serverUrl.localhost' });
-    const testCases = [
-      ['http://LOCALhosT:8005', message],
-      ['http://localhost:8005', message],
-      ['https://localhost:8005', message],
-      ['localhost', message],
-      ['http://127.0.0.1', message],
-      ['https://127.0.0.1', message],
-      ['127.0.0.1', message],
-      ['https://test.com', undefined],
-      ['https://test.com/localhost', undefined],
-      [undefined, undefined]
-    ];
-
-    it.each(testCases)(
-      'should return undefined or correct message based on the provided url',
-      (url, expected) => {
-        const formRuleResult = formRules.localhost(url);
-
-        expect(formRuleResult).toStrictEqual(expected);
-      }
-    );
-  });
-
-  describe('trailingForwardSlash', () => {
-    const message = JSON.stringify({ message: 'validation.setting.serverUrl.trailingForwardSlash' });
-    const testCases = [
-      ['https://test.com', undefined],
-      ['https://test.com/', message],
-      ['https://', undefined],
-      ['/', undefined],
-      [undefined, undefined]
-    ];
-
-    it.each(testCases)(
-      'should return undefined or correct message based on the provided url',
-      (url, expected) => {
-        const formRuleResult = formRules.trailingForwardSlash(url);
-
-        expect(formRuleResult).toStrictEqual(expected);
-      }
-    );
-  });
-
   it('"interval" : returns undefined when valid hour interval value is supplied', () => {
     const testValue = '5h';
     const formRuleResult = formRules.interval(testValue);

package/utils/validators/formRules/index.ts

@@ -2,11 +2,9 @@ import { RBAC } from '@shell/config/types';
 import { HCI } from '@shell/config/labels-annotations';
 import isEmpty from 'lodash/isEmpty';
 import has from 'lodash/has';
-import isUrl from 'is-url';
 // import uniq from 'lodash/uniq';
 import cronstrue from 'cronstrue';
 import { Translation } from '@shell/types/t';
-import { isHttps, isLocalhost, hasTrailingForwardSlash } from '@shell/utils/validators/setting';
 
 // import uniq from 'lodash/uniq';
 export type Validator<T = undefined | string> = (val: any, arg?: any) => T;
@@ -36,6 +34,10 @@ export class Port {
   }
 }
 
+const httpsKeys = [
+  'server-url'
+];
+
 const runValidators = (val: any, validators: Validator[]) => {
   for (const validator of validators) {
     const message = validator(val);
@@ -137,13 +139,11 @@ export default function(t: Translation, { key = 'Value' }: ValidationOptions): {
     }
   };
 
-  const https: Validator = (val: string) => val && !isHttps(val) ? t('validation.setting.serverUrl.https') : undefined;
-
-  const localhost: Validator = (val: string) => isLocalhost(val) ? t('validation.setting.serverUrl.localhost') : undefined;
+  const isHttps: ValidatorFactory = (key: string) => {
+    const isHttps: Validator = (val: string) => httpsKeys.includes(key) && !val.toLowerCase().startsWith('https://') ? t('validation.setting.serverUrl.https') : undefined;
 
-  const trailingForwardSlash: Validator = (val: string) => hasTrailingForwardSlash(val) ? t('validation.setting.serverUrl.trailingForwardSlash') : undefined;
-
-  const url: Validator = (val: string) => val && !isUrl(val) ? t('validation.setting.serverUrl.url') : undefined;
+    return isHttps;
+  };
 
   const interval: Validator = (val: string) => !/^\d+[hms]$/.test(val) ? t('validation.monitoring.route.interval', { key }) : undefined;
 
@@ -475,10 +475,7 @@ export default function(t: Translation, { key = 'Value' }: ValidationOptions): {
     hostname,
     imageUrl,
     interval,
-    https,
-    localhost,
-    trailingForwardSlash,
-    url,
+    isHttps,
     matching,
     maxLength,
     maxValue,

package/utils/validators/setting.js

@@ -1,9 +1,13 @@
-import isUrl from 'is-url';
+const httpsKeys = [
+  'server-url'
+];
 
-export const isServerUrl = (value) => value === 'server-url';
+export function isHttps(value, getters, errors, validatorArgs, displayKey) {
+  const key = validatorArgs[0];
 
-export const isHttps = (value) => value.toLowerCase().startsWith('https://');
+  if (httpsKeys.includes(key) && !value.toLowerCase().startsWith('https://')) {
+    errors.push(getters['i18n/t']('validation.setting.serverUrl.https'));
+  }
 
-export const isLocalhost = (value) => (/^(?:https?:\/\/)?(?:localhost|127\.0\.0\.1)/i).test(value);
-
-export const hasTrailingForwardSlash = (value) => isUrl(value) && value?.toLowerCase().endsWith('/');
+  return errors;
+}

package/vue.config.js

@@ -6,7 +6,6 @@ const { generateDynamicTypeImport } = require('./pkg/auto-import');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const serverMiddlewares = require('./server/server-middleware.js');
 const configHelper = require('./vue-config-helper.js');
-const har = require('./server/har-file');
 
 // Suppress info level logging messages from http-proxy-middleware
 // This hides all of the "[HPM Proxy created] ..." messages
@@ -292,14 +291,6 @@ module.exports = function(dir, _appConfig) {
     '/engines-dist':   configHelper.proxyOpts('https://127.0.0.1:8000'),
   };
 
-  // HAR File support - load network responses from the specified .har file and use those rather than communicating to the Rancher server
-  const harFile = process.env.HAR_FILE;
-  let harData;
-
-  if (harFile) {
-    harData = har.loadFile(harFile, devPorts ? 8005 : 80, ''); // eslint-disable-line no-console
-  }
-
   const config = {
     // Vue server
     devServer: {
@@ -322,19 +313,6 @@ module.exports = function(dir, _appConfig) {
 
         app.use(serverMiddlewares);
 
-        if (harData) {
-          console.log('Installing HAR file middleware'); // eslint-disable-line no-console
-          app.use(har.harProxy(harData, process.env.HAR_DIR));
-
-          server.websocketProxies.push({
-            upgrade(req, socket, head) {
-              const responseHeaders = ['HTTP/1.1 101 Web Socket Protocol Handshake', 'Upgrade: WebSocket', 'Connection: Upgrade'];
-
-              socket.write(`${ responseHeaders.join('\r\n') }\r\n\r\n`);
-            }
-          });
-        }
-
         Object.keys(proxy).forEach((p) => {
           const px = createProxyMiddleware({
             ...proxy[p],
@@ -400,7 +378,7 @@ module.exports = function(dir, _appConfig) {
       config.resolve.alias['@pkg'] = path.join(dir, 'pkg');
       config.resolve.alias['./node_modules'] = path.join(dir, 'node_modules');
       config.resolve.alias['@components'] = COMPONENTS_DIR;
-      config.resolve.alias['vue$'] = dev ? path.resolve(process.cwd(), 'node_modules', 'vue') : 'vue';
+      config.resolve.alias['vue$'] = path.resolve(process.cwd(), 'node_modules', 'vue', 'dist', dev ? 'vue.js' : 'vue.min.js');
       config.resolve.modules.push(__dirname);
       config.plugins.push(virtualModules);
       config.plugins.push(autoImport);
@@ -409,6 +387,7 @@ module.exports = function(dir, _appConfig) {
       // DefinePlugin does string replacement within our code. We may want to consider replacing it with something else. In code we'll see something like
       // process.env.commit even though process and env aren't even defined objects. This could cause people to be mislead.
       config.plugins.push(new webpack.DefinePlugin({
+        'process.client':                  JSON.stringify(true),
         'process.env.commit':              JSON.stringify(commit),
         'process.env.version':             JSON.stringify(dashboardVersion),
         'process.env.dev':                 JSON.stringify(dev),
@@ -565,7 +544,7 @@ module.exports = function(dir, _appConfig) {
               options: { mode: ['body'] }
             }
           ]
-        },
+        }
       ];
 
       config.module.rules.push(...loaders);