@rancher/shell 0.1.0

package/utils/position.js

@@ -0,0 +1,175 @@
+// @TODO replace this with popper.js...
+import $ from 'jquery';
+
+export const LEFT = 'left';
+export const RIGHT = 'right';
+export const TOP = 'top';
+export const CENTER = 'center'; // These are both the same externally so you can use either,
+export const MIDDLE = 'center'; // but have different meaning inside this file (center->left/right, middle->top/bottom)
+export const BOTTOM = 'bottom';
+export const AUTO = 'auto';
+
+export function boundingRect(elem) {
+  const $elem = $(elem);
+  const pos = $elem.offset();
+  const width = $elem.outerWidth(false);
+  const height = $elem.outerHeight(false);
+
+  return {
+    top:    pos.top,
+    right:  pos.left + width,
+    bottom: pos.top + height,
+    left:   pos.left,
+    width,
+    height,
+  };
+}
+
+export function fakeRectFor(event) {
+  return {
+    top:    event.clientY,
+    left:   event.clientX,
+    bottom: event.clientY,
+    right:  event.clientX,
+    width:  0,
+    height: 0,
+  };
+}
+
+export function screenRect() {
+  const $window = $(window);
+  const width = $window.width();
+  const height = $window.height();
+  const top = window.pageYOffset;
+  const left = window.pageXOffset;
+
+  return {
+    top,
+    right:  left + width,
+    bottom: top + height,
+    left,
+    width,
+    height,
+  };
+}
+
+export function fitOnScreen(contentElem, triggerElemOrEvent, opt, useDefaults) {
+  let {
+    positionX = AUTO, // Preferred horizontal position
+    positionY = AUTO, // Preferred vertical position
+  } = opt || {};
+
+  const {
+    fudgeX = 0,
+    fudgeY = 0,
+    overlapX = true, // Position on "top" of the trigger horizontally
+    overlapY = false, // Position on "top" of the trigger vertically
+  } = opt || {};
+
+  const screen = screenRect();
+  let trigger;
+
+  if ( triggerElemOrEvent instanceof Event ) {
+    trigger = fakeRectFor(triggerElemOrEvent);
+  } else {
+    trigger = boundingRect(triggerElemOrEvent);
+  }
+
+  let content = {};
+
+  if (contentElem) {
+    content = boundingRect(contentElem);
+  }
+
+  if (useDefaults) {
+    content = {
+      top:    0,
+      right:  147,
+      bottom: 163,
+      left:   0,
+      width:  147,
+      height: 80
+    };
+  }
+
+  // console.log('screen', screen);
+  // console.log('trigger', trigger);
+  // console.log('content', content);
+
+  const style = { position: 'absolute' };
+
+  const originFor = {
+    left:   (overlapX ? trigger.left : trigger.right ),
+    center: (trigger.left + trigger.right ) / 2,
+    right:  (overlapX ? trigger.right : trigger.left ),
+    top:    (overlapY ? trigger.bottom : trigger.top ),
+    middle: (trigger.top + trigger.bottom ) / 2,
+    bottom: (overlapY ? trigger.top : trigger.bottom ),
+  };
+
+  // console.log('origin', originFor);
+
+  const gapIf = {
+    left:   screen.right - content.width - originFor.left,
+    center: Math.min(screen.right - (content.width / 2) - originFor.center, originFor.center - (content.width / 2) - screen.left),
+    right:  originFor.right - content.width - screen.left,
+    top:    originFor.bottom - content.height - screen.top,
+    middle: Math.min(originFor.middle - (content.height / 2) - screen.top, screen.bottom - (content.height / 2) - originFor.middle),
+    bottom: screen.bottom - content.height - originFor.top,
+  };
+
+  // console.log('gapIf', gapIf);
+
+  if ( positionX === CENTER && gapIf.center < 0) {
+    positionX = AUTO;
+  }
+
+  if ( positionX === AUTO ) {
+    positionX = gapIf.left < 0 || gapIf.right * 1.5 > gapIf.left ? RIGHT : LEFT;
+  } else if ( positionY === LEFT && gapIf.left < 0 ) {
+    positionX = RIGHT;
+  } else if ( positionY === RIGHT && gapIf.right < 0 ) {
+    positionX = LEFT;
+  }
+
+  switch ( positionX ) {
+  case LEFT:
+    style.left = `${ originFor.left - fudgeX }px`;
+    break;
+  case CENTER:
+    style.left = `${ ((originFor.left + originFor.right) / 2) - (content.width / 2) - fudgeX }px`;
+    break;
+  case RIGHT:
+    style.left = `${ originFor.right + fudgeX - content.width }px`;
+    // style.right = `${ screen.width - originFor.right - fudgeX }px`;
+    break;
+  }
+
+  if ( positionY === MIDDLE && gapIf.middle < 0) {
+    positionY = AUTO;
+  }
+
+  if ( positionY === AUTO ) {
+    positionY = gapIf.top < 0 || gapIf.bottom * 1.5 > gapIf.top ? BOTTOM : TOP;
+  } else if ( positionY === TOP && gapIf.top < 0 ) {
+    positionY = BOTTOM;
+  } else if ( positionY === BOTTOM && gapIf.bottom < 0 ) {
+    positionY = TOP;
+  }
+
+  switch ( positionY ) {
+  case TOP:
+    style.top = `${ originFor.top + fudgeY - content.height }px`;
+    break;
+  case CENTER:
+    style.top = `${ ((originFor.top + originFor.bottom) / 2) + fudgeY - content.height }px`;
+    break;
+  case BOTTOM:
+    style.top = `${ originFor.bottom - fudgeY }px`;
+    break;
+  }
+
+  // console.log(positionX, positionY, style);
+
+  return style;
+}

package/utils/promise.js

@@ -0,0 +1,95 @@
+import Queue from './queue';
+
+async function _hash(hash, fnName) {
+  const keys = Object.keys(hash);
+  const promises = Object.values(hash);
+
+  const res = await Promise[fnName](promises);
+  const out = {};
+
+  for ( let i = 0 ; i < keys.length ; i++ ) {
+    out[keys[i]] = res[i];
+  }
+
+  return out;
+}
+
+export function allHash(hash) {
+  return _hash(hash, 'all');
+}
+
+export function allHashSettled(hash) {
+  return _hash(hash, 'allSettled');
+}
+
+export function eachLimit(items, limit, iterator, debug = false) {
+  if (debug) {
+    console.log('eachLimit of', items.length, ' items', limit, 'at a time'); // eslint-disable-line no-console
+  }
+
+  return new Promise((resolve, reject) => {
+    const queue = new Queue();
+    let pending = 0;
+    let failed = false;
+    const out = [];
+
+    for (let i = 0; i < items.length; i++) {
+      queue.enqueue({ item: items[i], idx: i });
+    }
+
+    process();
+
+    function process() {
+      if (debug) {
+        console.log(`process, queue=${ queue.getLength() }, pending=${ pending }, failed=${ failed }`); // eslint-disable-line no-console
+      }
+
+      if (failed) {
+        return;
+      }
+
+      if (queue.isEmpty() && pending === 0) {
+        return resolve(out);
+      }
+
+      while (!queue.isEmpty() && pending < limit && !failed) {
+        const { item, idx } = queue.dequeue();
+
+        if (debug) {
+          console.log('Running', item); // eslint-disable-line no-console
+        }
+
+        pending++;
+
+        iterator(item, idx).then((res) => {
+          if (debug) {
+            console.log('Done', item); // eslint-disable-line no-console
+          }
+
+          out[idx] = res;
+
+          pending--;
+          process();
+        }).catch((err) => {
+          if (debug) {
+            console.log('Failed', err, item); // eslint-disable-line no-console
+          }
+
+          failed = true;
+          reject(err);
+        });
+      }
+    }
+  });
+}
+
+export function deferred(name) {
+  const out = {};
+
+  out.promise = new Promise((resolve, reject) => {
+    out.resolve = resolve;
+    out.reject = reject;
+  }, name);
+
+  return out;
+}

package/utils/queue.js

@@ -0,0 +1,70 @@
+/*
+Queue.js
+A function to represent a queue
+
+Created by Stephen Morley - http://code.stephenmorley.org/ - and released under
+the terms of the CC0 1.0 Universal legal code:
+
+http://creativecommons.org/publicdomain/zero/1.0/legalcode
+*/
+
+/* Creates a new queue. A queue is a first-in-first-out (FIFO) data structure -
+ * items are added to the end of the queue and removed from the front.
+ */
+export default function Queue() {
+  // initialise the queue and offset
+  this.queue = [];
+  this.offset = 0;
+
+  // Returns the length of the queue.
+  this.getLength = function() {
+    return (this.queue.length - this.offset);
+  };
+
+  // Returns true if the queue is empty, and false otherwise.
+  this.isEmpty = function() {
+    return (this.queue.length === 0);
+  };
+
+  /* Enqueues the specified item. The parameter is:
+   *
+   * item - the item to enqueue
+   */
+  this.enqueue = function(item) {
+    this.queue.push(item);
+  };
+
+  /* Dequeues an item and returns it. If the queue is empty, the value
+   * 'undefined' is returned.
+   */
+  this.dequeue = function() {
+    // if the queue is empty, return immediately
+    if (this.queue.length === 0) {
+      return undefined;
+    }
+
+    // store the item at the front of the queue
+    const item = this.queue[this.offset];
+
+    // increment the offset and remove the free space if necessary
+    if (++this.offset * 2 >= this.queue.length) {
+      this.queue = this.queue.slice(this.offset);
+      this.offset = 0;
+    }
+
+    // return the dequeued item
+    return item;
+  };
+
+  /* Returns the item at the front of the queue (without dequeuing it). If the
+   * queue is empty then undefined is returned.
+   */
+  this.peek = function() {
+    return (this.queue.length > 0 ? this.queue[this.offset] : undefined);
+  };
+
+  this.clear = function() {
+    this.offset = 0;
+    this.queue.length = 0;
+  };
+}

package/utils/router.js

@@ -0,0 +1,27 @@
+export function queryParamsFor(current, qp, defaults = {}) {
+  const query = Object.assign({}, current || {});
+
+  for ( const key of Object.keys(qp) ) {
+    const val = qp[key];
+
+    if ( typeof defaults[key] === 'undefined' ) {
+      // There is no default
+      query[key] = qp[key];
+    } else if ( defaults[key] === false ) {
+      // Value-less boolean flags
+      if ( val ) {
+        query[key] = null;
+      } else {
+        delete query[key];
+      }
+    } else if ( val === defaults[key] ) {
+      // The value is the default
+      delete query[key];
+    } else {
+      // The value is not the default
+      query[key] = val;
+    }
+  }
+
+  return query;
+}

package/utils/select.js

@@ -0,0 +1,67 @@
+import $ from 'jquery';
+
+export function onClickOption(option, e) {
+  if (!this.$attrs.multiple) {
+    return;
+  }
+
+  const getValue = opt => (this.optionKey ? this.get(opt, this.optionKey) : this.getOptionLabel(opt));
+  const optionValue = getValue(option);
+  const value = this.value || [];
+  const optionIndex = value.findIndex(option => getValue(option) === optionValue);
+
+  if (optionIndex < 0) {
+    return;
+  }
+
+  this.value.splice(optionIndex, 1);
+
+  this.$emit('input', this.value);
+  e.preventDefault();
+  e.stopPropagation();
+
+  if (this.closeOnSelect) {
+    this.$refs['select-input'].closeSearchOptions();
+  }
+}
+
+// This is a simpler positionner for the dropdown for a select control
+// We used to use popper for these, but it does not suppotr fractional pixel placements which
+// means the dropdown does not appear aligned to the control when placed in a column-based layout
+export function calculatePosition(dropdownList, component, width, placement) {
+  const selectEl = $(component.$parent.$el)[0];
+  const r = selectEl.getBoundingClientRect();
+  const p = placement || 'bottom-start';
+  const docHeight = document.body.offsetHeight;
+  const bottom = docHeight - window.scrollY - r.y - 1;
+  let top;
+
+  // If placement is not at the top, then position if underneath
+  if (!p.includes('top')) {
+    // Position is bottom
+    top = r.y + r.height - 1;
+
+    // Check to see if the dropdown would fall off the screen, if so, try putting it above
+    const end = top + dropdownList.offsetHeight;
+
+    if (end > window.innerHeight) {
+      top = undefined;
+    } else {
+      top += window.scrollY;
+    }
+  }
+
+  if (!top) {
+    dropdownList.style.bottom = `${ bottom }px`;
+    dropdownList.classList.add('vs__dropdown-up');
+    selectEl.classList.add('vs__dropdown-up');
+  } else {
+    dropdownList.style.top = `${ top }px`;
+    dropdownList.classList.remove('vs__dropdown-up');
+    selectEl.classList.remove('vs__dropdown-up');
+  }
+
+  dropdownList.style.left = `${ r.x }px`;
+  dropdownList.style.width = 'min-content';
+  dropdownList.style.minWidth = `${ r.width }px`;
+}

package/utils/selector.js

@@ -0,0 +1,227 @@
+import { isArray, addObject, findBy } from '@shell/utils/array';
+
+const parseCache = {};
+
+const OP_MAP = {
+  '=':  'In',
+  '==': 'In',
+  '!=': 'NotIn',
+  '<':  'Lt',
+  '>':  'Gt',
+};
+
+// Parse a labelSelector string
+export function parse(labelSelector) {
+  // matchLabels:
+  // comma-separated list, all rules ANDed together
+  // spaces may be encoded as +
+  //
+  // Equals:      foo = bar
+  // Not Equals:  bar != baz
+  // Key Exists:  optional.prefix/just-some-key
+  // Key Doesn't: !optional.prefix/just-some-key
+  // In Set:      environment in (production,qa)
+  // Not in Set:  environment notin (production,qa)
+
+  // Convert into matchExpressions, which newer resources support
+  // and express the same things
+  //
+  // Object of:
+  // key: optional.prefix/some-key
+  // operator: In, NotIn, Exists, or DoesNotExist
+  // values:  [array, of, values, even, if, only, one]
+
+  labelSelector = labelSelector.replace(/\+/g, ' ');
+
+  if ( parseCache[labelSelector] ) {
+    return parseCache[labelSelector];
+  }
+
+  let match;
+  const out = [];
+  const parens = [];
+
+  // Substitute out all the parenthetical lists because they might have commas in them
+  match = labelSelector.match(/\([^)]+\)/g);
+  if ( match && match.length ) {
+    for ( const str of match ) {
+      const val = str.replace(/^\s*\(\s*/, '').replace(/\s*\)\s*$/, '').split(/\s*,\s*/);
+
+      parens.push(val);
+      labelSelector = labelSelector.replace(str, ` @${ parens.length - 1 } `);
+    }
+  }
+
+  const parts = labelSelector.split(/\s*,\s*/).filter(x => !!x);
+
+  for ( let rule of parts ) {
+    rule = rule.trim();
+
+    match = rule.match(/^(.*?)\s+((not\s*)?in)\s+@(\d+)*$/i);
+
+    if ( match ) {
+      out.push({
+        key:      match[1].trim(),
+        operator: match[2].toLowerCase().replace(/\s/g, '') === 'notin' ? 'NotIn' : 'In',
+        values:   parens[match[4].trim()],
+      });
+
+      continue;
+    }
+
+    match = rule.match(/^([^!=]*)\s*(\!=|=|==|>|<)\s*([^!=]*)$/);
+    if ( match ) {
+      out.push({
+        key:      match[1].trim(),
+        operator: OP_MAP[match[2]],
+        values:   [match[3].trim()],
+      });
+
+      continue;
+    }
+
+    if ( rule.startsWith('!') ) {
+      out.push({
+        key:      rule.substr(1).trim(),
+        operator: 'DoesNotExist'
+      });
+
+      continue;
+    }
+
+    out.push({
+      key:      rule.trim(),
+      operator: 'Exists'
+    });
+  }
+
+  parseCache[labelSelector] = out;
+
+  return out;
+}
+
+// Convert a Selector object to matchExpressions
+export function convertSelectorObj(obj) {
+  return convert(obj.matchLabels || {}, obj.matchExpressions || []);
+}
+
+// Convert matchLabels to matchExpressions
+// Optionally combining with an existing set of matchExpressions
+export function convert(matchLabelsObj, matchExpressions) {
+  const keys = Object.keys(matchLabelsObj || {});
+  const out = matchExpressions || [];
+
+  for ( const key of keys ) {
+    const value = matchLabelsObj[key];
+    const existing = findBy(out, { key, operator: 'In' });
+
+    if ( existing ) {
+      addObject(existing.values, value);
+    } else {
+      out.push({
+        key,
+        operator: 'In',
+        values:   [value],
+      });
+    }
+  }
+
+  return out;
+}
+
+// Convert matchExpressions to matchLabels when possible,
+// returning the simplest combination of them.
+export function simplify(matchExpressionsInput) {
+  const matchLabels = {};
+  const matchExpressions = [];
+
+  // Look for keys with more than one "In" expression and disqualify them from simplifying
+  const impossible = [];
+  const seen = {};
+
+  for ( const expr of matchExpressionsInput ) {
+    if ( expr.operator !== 'In' ) {
+      continue;
+    }
+
+    if ( seen[expr.key] ) {
+      addObject(impossible, expr.key);
+    } else {
+      seen[expr.key] = true;
+    }
+  }
+
+  for ( const expr of matchExpressionsInput ) {
+    if ( expr.operator === 'In' && expr.values.length === 1 && !impossible.includes(expr.key) ) {
+      matchLabels[expr.key] = expr.values[0];
+    } else {
+      matchExpressions.push(Object.assign({}, expr));
+    }
+  }
+
+  return { matchLabels, matchExpressions };
+}
+
+export function matches(obj, selector) {
+  let rules = [];
+
+  if ( typeof selector === 'string' ) {
+    // labelSelector string
+    rules = parse(selector);
+  } else if ( isArray(selector) ) {
+    // Already matchExpression
+    rules = selector;
+  } else if ( typeof selector === 'object' && selector ) {
+    // matchLabels object
+    rules = convert(selector);
+  } else {
+    return false;
+  }
+
+  const labels = obj?.metadata?.labels || {};
+
+  for ( const rule of rules ) {
+    const value = labels[rule.key];
+    const asInt = parseInt(value, 10);
+    const exists = typeof labels[rule.key] !== 'undefined';
+
+    switch ( rule.operator ) {
+    case 'Exists':
+      if ( !exists ) {
+        return false;
+      }
+      break;
+    case 'DoesNotExist':
+      if ( exists ) {
+        return false;
+      }
+      break;
+    case 'In':
+      if ( !value || !rule.values.length || !rule.values.includes(value) ) {
+        return false;
+      }
+      break;
+    case 'NotIn':
+      if ( rule.values.includes(value) ) {
+        return false;
+      }
+      break;
+    case 'Lt':
+      if ( isNaN(asInt) || asInt >= Math.min.apply(null, rule.values) ) {
+        return false;
+      }
+      break;
+    case 'Gt':
+      if ( isNaN(asInt) || asInt <= Math.max.apply(null, rule.values) ) {
+        return false;
+      }
+      break;
+    }
+  }
+
+  return true;
+}
+
+export function matching(ary, selector) {
+  return ary.filter(obj => matches(obj, selector));
+}