@rancher/shell 0.2.5 → 0.3.1

package/utils/svg-filter.js

@@ -0,0 +1,301 @@
+'use strict';
+
+// Utilities to generate a css filter to give a required color
+
+class Color {
+  constructor(r, g, b) {
+    this.set(r, g, b);
+  }
+
+  toString() {
+    return `rgb(${ Math.round(this.r) }, ${ Math.round(this.g) }, ${ Math.round(this.b) })`;
+  }
+
+  set(r, g, b) {
+    this.r = this.clamp(r);
+    this.g = this.clamp(g);
+    this.b = this.clamp(b);
+  }
+
+  hueRotate(angle = 0) {
+    angle = angle / 180 * Math.PI;
+    const sin = Math.sin(angle);
+    const cos = Math.cos(angle);
+
+    this.multiply([
+      0.213 + cos * 0.787 - sin * 0.213,
+      0.715 - cos * 0.715 - sin * 0.715,
+      0.072 - cos * 0.072 + sin * 0.928,
+      0.213 - cos * 0.213 + sin * 0.143,
+      0.715 + cos * 0.285 + sin * 0.140,
+      0.072 - cos * 0.072 - sin * 0.283,
+      0.213 - cos * 0.213 - sin * 0.787,
+      0.715 - cos * 0.715 + sin * 0.715,
+      0.072 + cos * 0.928 + sin * 0.072,
+    ]);
+  }
+
+  grayscale(value = 1) {
+    this.multiply([
+      0.2126 + 0.7874 * (1 - value),
+      0.7152 - 0.7152 * (1 - value),
+      0.0722 - 0.0722 * (1 - value),
+      0.2126 - 0.2126 * (1 - value),
+      0.7152 + 0.2848 * (1 - value),
+      0.0722 - 0.0722 * (1 - value),
+      0.2126 - 0.2126 * (1 - value),
+      0.7152 - 0.7152 * (1 - value),
+      0.0722 + 0.9278 * (1 - value),
+    ]);
+  }
+
+  sepia(value = 1) {
+    this.multiply([
+      0.393 + 0.607 * (1 - value),
+      0.769 - 0.769 * (1 - value),
+      0.189 - 0.189 * (1 - value),
+      0.349 - 0.349 * (1 - value),
+      0.686 + 0.314 * (1 - value),
+      0.168 - 0.168 * (1 - value),
+      0.272 - 0.272 * (1 - value),
+      0.534 - 0.534 * (1 - value),
+      0.131 + 0.869 * (1 - value),
+    ]);
+  }
+
+  saturate(value = 1) {
+    this.multiply([
+      0.213 + 0.787 * value,
+      0.715 - 0.715 * value,
+      0.072 - 0.072 * value,
+      0.213 - 0.213 * value,
+      0.715 + 0.285 * value,
+      0.072 - 0.072 * value,
+      0.213 - 0.213 * value,
+      0.715 - 0.715 * value,
+      0.072 + 0.928 * value,
+    ]);
+  }
+
+  multiply(matrix) {
+    const newR = this.clamp(this.r * matrix[0] + this.g * matrix[1] + this.b * matrix[2]);
+    const newG = this.clamp(this.r * matrix[3] + this.g * matrix[4] + this.b * matrix[5]);
+    const newB = this.clamp(this.r * matrix[6] + this.g * matrix[7] + this.b * matrix[8]);
+
+    this.r = newR;
+    this.g = newG;
+    this.b = newB;
+  }
+
+  brightness(value = 1) {
+    this.linear(value);
+  }
+
+  contrast(value = 1) {
+    this.linear(value, -(0.5 * value) + 0.5);
+  }
+
+  linear(slope = 1, intercept = 0) {
+    this.r = this.clamp(this.r * slope + intercept * 255);
+    this.g = this.clamp(this.g * slope + intercept * 255);
+    this.b = this.clamp(this.b * slope + intercept * 255);
+  }
+
+  invert(value = 1) {
+    this.r = this.clamp((value + this.r / 255 * (1 - 2 * value)) * 255);
+    this.g = this.clamp((value + this.g / 255 * (1 - 2 * value)) * 255);
+    this.b = this.clamp((value + this.b / 255 * (1 - 2 * value)) * 255);
+  }
+
+  hsl() {
+    // Code taken from https://stackoverflow.com/a/9493060/2688027, licensed under CC BY-SA.
+    const r = this.r / 255;
+    const g = this.g / 255;
+    const b = this.b / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const l = (max + min) / 2;
+    let h = l;
+    let s = l;
+
+    if (max === min) {
+      h = s = 0;
+    } else {
+      const d = max - min;
+
+      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+      switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+
+      case g:
+        h = (b - r) / d + 2;
+        break;
+
+      case b:
+        h = (r - g) / d + 4;
+        break;
+      }
+      h /= 6;
+    }
+
+    return {
+      h: h * 100,
+      s: s * 100,
+      l: l * 100,
+    };
+  }
+
+  clamp(value) {
+    if (value > 255) {
+      value = 255;
+    } else if (value < 0) {
+      value = 0;
+    }
+
+    return value;
+  }
+}
+
+export class Solver {
+  constructor(rgb) {
+    this.target = new Color(rgb.r, rgb.g, rgb.b);
+    this.targetHSL = this.target.hsl();
+    this.reusedColor = new Color(0, 0, 0);
+  }
+
+  solve() {
+    const result = this.solveNarrow(this.solveWide());
+
+    return {
+      values: result.values,
+      loss:   result.loss,
+      filter: this.css(result.values),
+    };
+  }
+
+  solveWide() {
+    const A = 5;
+    const c = 15;
+    const a = [60, 180, 18000, 600, 1.2, 1.2];
+
+    let best = { loss: Infinity };
+
+    for (let i = 0; best.loss > 25 && i < 3; i++) {
+      const initial = [50, 20, 3750, 50, 100, 100];
+      const result = this.spsa(A, a, c, initial, 1000);
+
+      if (result.loss < best.loss) {
+        best = result;
+      }
+    }
+
+    return best;
+  }
+
+  solveNarrow(wide) {
+    const A = wide.loss;
+    const c = 2;
+    const A1 = A + 1;
+    const a = [0.25 * A1, 0.25 * A1, A1, 0.25 * A1, 0.2 * A1, 0.2 * A1];
+
+    return this.spsa(A, a, c, wide.values, 500);
+  }
+
+  spsa(A, a, c, values, iters) {
+    const alpha = 1;
+    const gamma = 0.16666666666666666;
+
+    let best = null;
+    let bestLoss = Infinity;
+    const deltas = new Array(6);
+    const highArgs = new Array(6);
+    const lowArgs = new Array(6);
+
+    for (let k = 0; k < iters; k++) {
+      const ck = c / Math.pow(k + 1, gamma);
+
+      for (let i = 0; i < 6; i++) {
+        deltas[i] = Math.random() > 0.5 ? 1 : -1;
+        highArgs[i] = values[i] + ck * deltas[i];
+        lowArgs[i] = values[i] - ck * deltas[i];
+      }
+
+      const lossDiff = this.loss(highArgs) - this.loss(lowArgs);
+
+      for (let i = 0; i < 6; i++) {
+        const g = lossDiff / (2 * ck) * deltas[i];
+        const ak = a[i] / Math.pow(A + k + 1, alpha);
+
+        values[i] = fix(values[i] - ak * g, i);
+      }
+
+      const loss = this.loss(values);
+
+      if (loss < bestLoss) {
+        best = values.slice(0);
+        bestLoss = loss;
+      }
+    }
+
+    return { values: best, loss: bestLoss };
+
+    function fix(value, idx) {
+      let max = 100;
+
+      if (idx === 2 /* saturate */) {
+        max = 7500;
+      } else if (idx === 4 /* brightness */ || idx === 5 /* contrast */) {
+        max = 200;
+      }
+
+      if (idx === 3 /* hue-rotate */) {
+        if (value > max) {
+          value %= max;
+        } else if (value < 0) {
+          value = max + value % max;
+        }
+      } else if (value < 0) {
+        value = 0;
+      } else if (value > max) {
+        value = max;
+      }
+
+      return value;
+    }
+  }
+
+  loss(filters) {
+    // Argument is array of percentages.
+    const color = this.reusedColor;
+
+    color.set(0, 0, 0);
+
+    color.invert(filters[0] / 100);
+    color.sepia(filters[1] / 100);
+    color.saturate(filters[2] / 100);
+    color.hueRotate(filters[3] * 3.6);
+    color.brightness(filters[4] / 100);
+    color.contrast(filters[5] / 100);
+
+    const colorHSL = color.hsl();
+
+    return (
+      Math.abs(color.r - this.target.r) +
+      Math.abs(color.g - this.target.g) +
+      Math.abs(color.b - this.target.b) +
+      Math.abs(colorHSL.h - this.targetHSL.h) +
+      Math.abs(colorHSL.s - this.targetHSL.s) +
+      Math.abs(colorHSL.l - this.targetHSL.l)
+    );
+  }
+
+  css(filters) {
+    function fmt(idx, multiplier = 1) {
+      return Math.round(filters[idx] * multiplier);
+    }
+
+    return `filter: invert(${ fmt(0) }%) sepia(${ fmt(1) }%) saturate(${ fmt(2) }%) hue-rotate(${ fmt(3, 3.6) }deg) brightness(${ fmt(4) }%) contrast(${ fmt(5) }%);`;
+  }
+}

package/utils/time.js

@@ -54,3 +54,58 @@ export function safeSetTimeout(timeout, callback, that) {
     }, timeout);
   }
 }
+
+export function getSecondsDiff(startDate, endDate) {
+  return Math.round(
+    Math.abs(Date.parse(endDate) - Date.parse(startDate)) / 1000
+  );
+}
+
+/**
+ * return { diff: number; label: string }
+ *
+ * diff:  update frequency in seconds
+ * label: content of the cell's column
+ */
+export function elapsedTime(seconds) {
+  if (!seconds) {
+    return {};
+  }
+
+  if (seconds < 120) {
+    return {
+      diff:  1,
+      label: `${ seconds }s`
+    };
+  }
+
+  const minutes = Math.floor(seconds / 60);
+
+  if (minutes < 10) {
+    return {
+      diff:  1,
+      label: `${ minutes }m${ seconds - (minutes * 60) }s`
+    };
+  }
+
+  const hours = Math.floor(seconds / 3600);
+
+  if (hours < 3) {
+    return {
+      diff:  60,
+      label: `${ minutes }m`,
+    };
+  }
+
+  if (hours > 7) {
+    return {
+      diff:  60,
+      label: `${ hours }h`,
+    };
+  }
+
+  return {
+    diff:  60,
+    label: `${ hours }h${ minutes - (hours * 60) }m`,
+  };
+}

package/utils/validators/cidr.js

@@ -3,3 +3,7 @@ const validCIDRregex = /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2
 export function isValidCIDR(cidr) {
   return !!cidr.match(validCIDRregex);
 }
+
+export function isValidMac(value) {
+  return /^[A-Fa-f0-9]{2}(-[A-Fa-f0-9]{2}){5}$|^[A-Fa-f0-9]{2}(:[A-Fa-f0-9]{2}){5}$/.test(value);
+}

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

@@ -113,7 +113,7 @@ describe('formRules', () => {
     const formRuleResult = formRules.containerImage(testValue);
     const expectedResult = JSON.stringify({
       message: 'workload.validation.containerImage',
-      name:     testValue.name
+      name:    testValue.name
     });
 
     expect(formRuleResult).toStrictEqual(expectedResult);
@@ -149,7 +149,7 @@ describe('formRules', () => {
     const formRuleResult = formRules.containerImages(testValue);
     const expectedResult = JSON.stringify({
       message: 'workload.validation.containerImage',
-      name:     'testName'
+      name:    'testName'
     });
 
     expect(formRuleResult).toStrictEqual(expectedResult);
@@ -191,7 +191,7 @@ describe('formRules', () => {
     const formRuleResult = formRules.groupsAreValid(testValue);
     const expectedResult = JSON.stringify({
       message: 'validation.prometheusRule.groups.valid.singleEntry',
-      index:     1
+      index:   1
     });
 
     expect(formRuleResult).toStrictEqual(expectedResult);
@@ -1041,17 +1041,37 @@ describe('formRules', () => {
     ['minLength', 2, ['test'], ['x']],
     ['maxLength', 10, ['x'], ['wrong value']],
     ['betweenLengths', [2, 10], ['test'], ['x', 'wrong value']],
-  ])('%p with parameter %p should', (rule, argument, correctValues, wrongValues) => {
-    it.each(wrongValues as [])('return error for value %p', (wrong) => {
+  ])('given factory validator %p with parameter %p', (rule, argument, correctValues, wrongValues) => {
+    it.each(wrongValues as [])('should return error for value %p', (wrong) => {
       const formRuleResult = (formRules as any)[rule](argument)(wrong);
 
       expect(formRuleResult).not.toBeUndefined();
     });
 
-    it.each(correctValues as [])('return valid for value %p', (correct) => {
+    it.each(correctValues as [])('should return valid for value %p', (correct) => {
       const formRuleResult = (formRules as any)[rule](argument)(correct);
 
       expect(formRuleResult).toBeUndefined();
     });
   });
+
+  describe.each([
+    ['requiredInt', [2, 2.2], ['e']],
+    ['isInteger', ['2', 2, 0], [2.2, 'e', '1.0']],
+    ['isPositive', ['0', 1], [-1]],
+    ['isOctal', ['0', 0, 10], ['01']],
+
+  ])('given validator %p', (rule, correctValues, wrongValues) => {
+    it.each(wrongValues as [])('should return error for value %p', (wrong) => {
+      const formRuleResult = (formRules as any)[rule](wrong);
+
+      expect(formRuleResult).not.toBeUndefined();
+    });
+
+    it.each(correctValues as [])('should return valid for value %p', (correct) => {
+      const formRuleResult = (formRules as any)[rule](correct);
+
+      expect(formRuleResult).toBeUndefined();
+    });
+  });
 });

package/utils/validators/formRules/index.ts

@@ -83,6 +83,17 @@ export default function(t: Translation, { key = 'Value' }: ValidationOptions) {
 
   const requiredInt: Validator = (val: string) => isNaN(parseInt(val, 10)) ? t('validation.number.requiredInt', { key }) : undefined;
 
+  const isInteger: Validator = (val: string | number) => !Number.isInteger(+val) || `${ val }`.match(/\.+/g) ? t('validation.number.requiredInt', { key }) : undefined;
+
+  const isPositive: Validator = (val: string | number) => +val < 0 ? t('validation.number.isPositive', { key }) : undefined;
+
+  const isOctal: Validator = (val: string | number) => {
+    const valueString = `${ val }`;
+    const isValid = valueString.match(/(^0+)(.+)/);
+
+    return isValid ? t('validation.number.isOctal', { key }) : undefined;
+  };
+
   const portNumber: Validator = (val: string) => parseInt(val, 10) < 1 || parseInt(val, 10) > 65535 ? t('validation.number.between', {
     key, min: '1', max: '65535'
   }) : undefined;
@@ -470,6 +481,9 @@ export default function(t: Translation, { key = 'Value' }: ValidationOptions) {
     portNumber,
     required,
     requiredInt,
+    isInteger,
+    isPositive,
+    isOctal,
     roleTemplateRules,
     ruleGroups,
     servicePort,

package/config/product/harvester-manager.js

@@ -1,162 +0,0 @@
-import { HCI, MANAGEMENT, CAPI } from '@shell/config/types';
-import { HARVESTER, MULTI_CLUSTER } from '@shell/store/features';
-import { DSL } from '@shell/store/type-map';
-import { STATE, NAME as NAME_COL, AGE, VERSION } from '@shell/config/table-headers';
-import { allHash } from '@shell/utils/promise';
-import dynamicPluginLoader from '@shell/pkg/dynamic-plugin-loader';
-import { BLANK_CLUSTER } from '@shell/store';
-
-dynamicPluginLoader.register({
-  load: async({ route, store }) => {
-    // Check that we've either got here either
-    // - directly (page refresh/load -> have path but no name)
-    // - via router name (have name but no path)
-    let clusterId;
-    const pathParts = route.path.split('/');
-
-    if (pathParts?.[1] === HARVESTER_NAME && pathParts?.[3] ) {
-      clusterId = pathParts?.[3];
-    } else {
-      const nameParts = route.name?.split('-');
-
-      if (nameParts?.[0] === HARVESTER_NAME) {
-        clusterId = route.params?.cluster;
-      }
-    }
-
-    // If we have a cluster id, try to load the plugin via the harvester cluster's `loadClusterPlugin`
-    if (clusterId) {
-      const provClusters = await store.dispatch('management/findAll', { type: CAPI.RANCHER_CLUSTER });
-      const provCluster = provClusters.find(p => p.mgmt.id === clusterId);
-
-      if (provCluster) {
-        const harvCluster = await store.dispatch('management/create', {
-          ...provCluster,
-          type: HCI.CLUSTER
-        });
-
-        if (harvCluster) {
-          try {
-            await harvCluster.loadClusterPlugin();
-
-            return route;
-          } catch (err) {
-            // If we've failed to load the harvester plugin nav to the harvester cluster list (probably got here from a bookmarked
-            // harvester instance that hasn't been updated to serve a plugin)
-            console.error('Failed to load harvester package: ', typeof error === 'object' ? JSON.stringify(err) : err); // eslint-disable-line no-console
-
-            return harvesterClustersLocation;
-          }
-        }
-      }
-    }
-  }
-});
-
-export const NAME = 'harvesterManager';
-
-export const HARVESTER_NAME = 'harvester';
-
-const MACHINE_POOLS = {
-  name:      'summary',
-  labelKey:  'tableHeaders.machines',
-  sort:      false,
-  search:    false,
-  value:    'nodes.length',
-  align:     'center',
-  width:     100,
-};
-
-const harvesterClustersLocation = {
-  name:   'c-cluster-product-resource',
-  params: {
-    cluster:  BLANK_CLUSTER,
-    product:  NAME,
-    resource: HCI.CLUSTER
-  }
-};
-
-export function init(store) {
-  const {
-    product,
-    basicType,
-    headers,
-    spoofedType,
-    configureType
-  } = DSL(store, NAME);
-
-  product({
-    ifHaveType:          CAPI.RANCHER_CLUSTER,
-    ifFeature:           [MULTI_CLUSTER, HARVESTER],
-    inStore:             'management',
-    icon:                'harvester',
-    removable:           false,
-    showClusterSwitcher: false,
-    weight:              100,
-    to:                  harvesterClustersLocation,
-  });
-
-  configureType(HCI.CLUSTER, { showListMasthead: false });
-  headers(HCI.CLUSTER, [
-    STATE,
-    NAME_COL,
-    {
-      ...VERSION,
-      value:    'kubernetesVersion',
-      getValue: row => row.kubernetesVersion
-    },
-    MACHINE_POOLS,
-    AGE,
-    {
-      name:  'harvester',
-      label: ' ',
-      align: 'right',
-      width: 65,
-    },
-  ]);
-  basicType([HCI.CLUSTER]);
-  spoofedType({
-    label:      store.getters['i18n/t']('harvesterManager.cluster.label'),
-    name:       HCI.CLUSTER,
-    type:       HCI.CLUSTER,
-    namespaced: false,
-    weight:     -1,
-    route:      {
-      name:     'c-cluster-product-resource',
-      params:   {
-        product:  NAME,
-        resource: HCI.CLUSTER,
-      }
-    },
-    exact:   false,
-    schemas: [
-      {
-        id:                HCI.CLUSTER,
-        type:              'schema',
-        collectionMethods: [],
-        resourceFields:    {},
-        attributes:        { namespaced: true },
-      },
-    ],
-    group:        'Root',
-    getInstances: async() => {
-      const hash = {
-        rancherClusters: store.dispatch('management/findAll', { type: CAPI.RANCHER_CLUSTER }),
-        clusters:        store.dispatch('management/findAll', { type: MANAGEMENT.CLUSTER }),
-      };
-
-      if (store.getters['management/schemaFor'](MANAGEMENT.NODE)) {
-        hash.nodes = store.dispatch('management/findAll', { type: MANAGEMENT.NODE });
-      }
-
-      const res = await allHash(hash);
-
-      return res.rancherClusters.map((c) => {
-        return {
-          ...c,
-          type: HCI.CLUSTER,
-        };
-      });
-    },
-  });
-}

package/creators/pkg/nuxt.config.js

@@ -1,6 +0,0 @@
-import config from '@rancher/shell/nuxt.config';
-
-export default config(__dirname, {
-  excludes:   [],
-  autoImport: []
-});