@rancher/shell 0.5.3 → 1.2.1

package/pages/rio/mesh.vue

@@ -0,0 +1,508 @@
+<script>
+import { escapeHtml } from '@shell/utils/string';
+
+const RADIUS = 5;
+
+const INTERVAL = 10000;
+
+/*
+function randomStats() {
+  return {
+    'p50ms':       Math.random(),
+    'p90ms':       Math.random() * 2,
+    'p99ms':       Math.random() * 5,
+    'rps':         Math.random() * 100,
+    'successRate': Math.random(),
+  };
+}
+
+function randomItem(ary) {
+  const idx = Math.floor(Math.random() * ary.length);
+
+  return ary[idx];
+}
+
+function randomData() {
+  const nodes = [];
+  const edges = [];
+
+  ['foo', 'bar', 'baz', 'bat', 'qux'].forEach((name) => {
+    nodes.push({
+      'namespace': 'default',
+      'app':       name,
+      'version':   'v1',
+      'stats':     randomStats(),
+    });
+  });
+
+  ['a', 'b', 'c', 'd', 'e'].forEach((name) => {
+    nodes.push({
+      'namespace': 'another',
+      'app':       name,
+      'version':   'v1',
+      'stats':     randomStats(),
+    });
+  });
+
+  for ( let i = 0 ; i < 10 ; i++ ) {
+    const from = randomItem(nodes);
+    const crossNs = Math.random() < 0.2;
+    const toChoices = nodes.filter((x) => {
+      if ( x === from ) {
+        return false;
+      }
+
+      if ( crossNs ) {
+        return x.namespace !== from.namespace;
+      } else {
+        return x.namespace === from.namespace;
+      }
+    });
+    const to = randomItem(toChoices);
+
+    edges.push({
+      fromNamespace: from.namespace,
+      fromApp:       from.app,
+      fromVersion:   from.version,
+      toNamespace:   to.namespace,
+      toApp:         to.app,
+      toVersion:     to.version,
+      stats:         randomStats(),
+    });
+  }
+
+  return {
+    nodes,
+    edges
+  };
+}
+*/
+
+function nodeIdFor(obj) {
+  return `${ obj.namespace }:${ obj.app }@${ obj.version }`;
+}
+
+function fromId(obj) {
+  return `${ obj.fromNamespace }:${ obj.fromApp }@${ obj.fromVersion }`;
+}
+
+function toId(obj) {
+  return `${ obj.toNamespace }:${ obj.toApp }@${ obj.toVersion }`;
+}
+
+async function loadData(store) {
+  const data = await store.dispatch('rancher/request', { url: '/v1-metrics/meshsummary' });
+
+  const known = {};
+
+  data.nodes = data.nodes.filter((x) => !!x.app && !!x.namespace);
+  data.nodes.forEach((x) => {
+    x.id = nodeIdFor(x);
+    known[x.id] = true;
+  });
+
+  data.edges = data.edges.filter((x) => known[fromId(x)] && known[toId(x)]);
+
+  return data;
+}
+
+function round3Digits(num) {
+  if ( !num ) {
+    return 0;
+  }
+
+  if ( num > 100 ) {
+    return Math.round(num);
+  } else if ( num > 10 ) {
+    return Math.round(num * 10) / 10;
+  } else {
+    return Math.round(num * 100) / 100;
+  }
+}
+
+export default {
+
+  /* (
+  data() {
+    return {
+      loading: true,
+      ...randomData(),
+    };
+  },
+  */
+
+  async asyncData({ store }) {
+    const data = await loadData(store);
+
+    return data;
+  },
+  computed: {
+    namespaces() {
+      return this.$store.getters['namespaces']();
+    },
+
+    displayNodes() {
+      console.log('get displayNodes'); // eslint-disable-line no-console
+      const namespaces = this.namespaces;
+
+      const out = this.nodes.filter((x) => {
+        return namespaces[x.namespace];
+      });
+
+      return out;
+    },
+
+    displayEdges() {
+      console.log('get displayEdges'); // eslint-disable-line no-console
+      const namespaces = this.namespaces;
+
+      const out = this.edges.filter((x) => {
+        const ns1 = x.fromNamespace;
+        const ns2 = x.toNamespace;
+
+        return namespaces[ns1] && namespaces[ns2];
+      });
+
+      return out;
+    },
+  },
+
+  watch: {
+    // Nodes isn't watched, but gets updated at the same time...
+    nodes() {
+      console.log('nodes updated'); // eslint-disable-line no-console
+      this.updateGraph();
+      this.renderGraph();
+    },
+
+    namespaces() {
+      console.log('namespaces updated'); // eslint-disable-line no-console
+      this.updateGraph();
+      this.renderGraph();
+    },
+
+    edges() {
+      console.log('edges updated'); // eslint-disable-line no-console
+      this.updateGraph();
+      this.renderGraph();
+    },
+  },
+
+  async mounted() {
+    console.log('Mounted'); // eslint-disable-line no-console
+    this.timer = setInterval(() => {
+      console.log('Timer'); // eslint-disable-line no-console
+      this.refreshData();
+    }, INTERVAL);
+
+    await this.initGraph();
+    this.updateGraph();
+    this.renderGraph();
+
+    window.m = this;
+  },
+
+  beforeDestroy() {
+    clearInterval(this.timer);
+  },
+
+  methods: {
+    async refreshData() {
+      console.log('Refreshing...'); // eslint-disable-line no-console
+      const neu = await loadData(this.$store);
+
+      this.nodes = neu.nodes;
+      this.edges = neu.edges;
+      console.log('Refreshed'); // eslint-disable-line no-console
+    },
+
+    async initGraph() {
+      const d3 = await import('d3');
+      const dagreD3 = await import('dagre-d3');
+
+      const g = new dagreD3.graphlib.Graph({ compound: true });
+
+      g.setGraph({
+        marginx: 0,
+        marginy: 0,
+        rankdir: 'LR',
+        align:   'UL',
+        ranker:  'longest-path', // 'tight-tree',
+      });
+
+      g.setDefaultEdgeLabel(() => {
+        return {};
+      });
+
+      // Create the renderer
+      const render = new dagreD3.render();
+
+      // Add our custom arrow
+      render.arrows().smaller = function normal(parent, id, edge, type) {
+        const marker = parent.append('marker')
+          .attr('id', id)
+          .attr('viewBox', '0 0 12 12')
+          .attr('refX', 6)
+          .attr('refY', 6)
+          .attr('markerUnits', 'userSpaceOnUse')
+          .attr('markerWidth', 12)
+          .attr('markerHeight', 12)
+          .attr('orient', 'auto');
+        const path = marker.append('path')
+          .attr('class', 'arrowhead')
+          .attr('d', 'M 6 0 L 0 6 L 6 12 L 12 6 z')
+          .style('stroke-width', 1)
+          .style('stroke-dasharray', '1,0');
+
+        dagreD3.util.applyStyle(path, edge[`${ type }Style`]);
+      };
+
+      // Set up an SVG group so that we can translate the final graph.
+      const svg = d3.select(this.$refs.mesh);
+      const group = svg.append('g');
+
+      const zoom = d3.zoom().on('zoom', () => {
+        if ( d3.event.sourceEvent ) {
+          this.lastZoom = d3.event.transform;
+        }
+        group.attr('transform', d3.event.transform);
+      });
+
+      svg.call(zoom);
+
+      this.d3 = d3;
+      this.dagreD3 = dagreD3;
+      this.graph = g;
+      this.render = render;
+      this.group = group;
+      this.zoom = zoom;
+    },
+
+    updateGraph() {
+      // @TODO diff nodes/edges, remove unexpected and add missing ones
+      console.log('Updating...'); // eslint-disable-line no-console
+
+      const e = escapeHtml;
+      const g = this.graph;
+
+      const seenNamespaces = {};
+
+      for ( const node of this.displayNodes ) {
+        const nsId = ensureNamespace(node.namespace);
+        const id = nodeIdFor(node);
+
+        node.label = `${ node.app }@${ node.version }`;
+
+        let p99 = node.stats.p99ms;
+        let unit = 'ms';
+
+        if ( p99 > 1000 ) {
+          p99 /= 1000;
+          unit = 's';
+        }
+
+        const html = `
+          <div class="version">
+            <h4>${ e(node.app) }@${ e(node.version) }</h4>
+            <div class="row">
+              <div class="col span-4 sr">
+                <span>${ round3Digits(node.stats.successRate * 100) }</span><span class="unit">%</span>
+              </div>
+              <div class="col span-4 rps">
+                <span>${ round3Digits(node.stats.rps) }</span>
+              </div>
+              <div class="col span-4 p99">
+                <span>${ round3Digits(p99) }</span><span class="unit">${ unit }</span>
+              </div>
+            </div>
+          </div>
+        `;
+
+        g.setNode(id, {
+          labelType: 'html',
+          label:     html,
+          width:     158,
+          height:    80,
+          rx:        RADIUS,
+          ry:        RADIUS,
+        });
+        g.setParent(id, nsId);
+      }
+
+      const rpses = this.displayEdges.map((x) => x.stats.rps);
+      const min = Math.min(...rpses);
+      const max = Math.max(...rpses);
+
+      for ( const edge of this.displayEdges ) {
+        ensureNamespace(edge.fromNamespace);
+        ensureNamespace(edge.toNamespace);
+        const weight = Math.floor(4 * (edge.stats.rps - min) / (max - min)) + 1;
+
+        g.setEdge(fromId(edge), toId(edge), {
+          arrowhead:      'smaller',
+          arrowheadClass: 'arrowhead',
+          class:          `weight${ weight }`,
+          curve:          this.d3.curveBasis,
+          weight,
+        });
+      }
+
+      function ensureNamespace(name) {
+        const id = `ns:${ name }`;
+
+        if ( !seenNamespaces[name] ) {
+          seenNamespaces[name] = true;
+          g.setNode(id, {
+            label:           `Namespace: ${ name }`,
+            clusterLabelPos: 'top',
+            rx:              RADIUS,
+            ry:              RADIUS
+          });
+        }
+
+        return id;
+      }
+    },
+
+    renderGraph() {
+      console.log('Rendering...'); // eslint-disable-line no-console
+
+      const d3 = this.d3;
+      const svg = this.d3.select(this.$refs.mesh);
+      const group = this.group;
+      const g = this.graph;
+      const render = this.render;
+      const zoom = this.zoom;
+
+      svg.call(zoom.transform, d3.zoomIdentity.translate(0, 0).scale(1));
+
+      // Run the renderer. This is what draws the final graph.
+      render(group, g);
+
+      const graphWidth = g.graph().width;
+      const graphHeight = g.graph().height;
+      const width = parseInt(svg.style('width').replace(/px/, ''));
+      const height = parseInt(svg.style('height').replace(/px/, ''));
+      const scale = Math.min(width / graphWidth, height / graphHeight);
+      const dX = (width / 2) - ((graphWidth * scale) / 2);
+      const dY = (height / 2) - ((graphHeight * scale) / 2);
+
+      console.log('render'); // eslint-disable-line no-console
+      if ( this.lastZoom ) {
+        svg.call(zoom.transform, d3.zoomIdentity.translate(this.lastZoom.x, this.lastZoom.y).scale(this.lastZoom.k));
+      } else {
+        svg.call(zoom.transform, d3.zoomIdentity.translate(dX, dY).scale(scale));
+      }
+
+      this.loading = false;
+    },
+
+    clicked(event) {
+      const path = event.target.closest('.edgePath');
+
+      console.log(path); // eslint-disable-line no-console
+    }
+  },
+};
+</script>
+<template>
+  <div class="mesh">
+    <header>
+      <h1>App Mesh</h1>
+    </header>
+
+    <svg
+      id="mesh"
+      ref="mesh"
+      @click="clicked"
+    />
+  </div>
+</template>
+
+<style lang="scss">
+  #mesh {
+    width: 100%;
+    height: calc(100vh - 165px);
+
+    .version {
+      width: 158px;
+      height: 80px;
+      color: #b6b6c2;
+      text-align: center;
+
+      .row {
+        margin: 0;
+      }
+
+      H4 {
+        color: #b6b6c2;
+        display: block;
+        border-bottom: 1px solid #555;
+        text-align: left;
+        padding-bottom: 5px;
+        margin-bottom: 5px;
+      }
+
+      .sr, .rps, .p99 {
+        font-size: 20px;
+
+        .unit {
+          font-size: 12px;
+        }
+      }
+
+      .sr:before, .rps:before, .p99:before {
+        color: white;
+        font-weight: bold;
+        font-size: 15px;
+        display: block;
+      }
+
+      .sr:before {
+        content: 'SR';
+      }
+
+      .rps:before {
+        content: 'RPS';
+      }
+
+      .p99:before {
+        content: '99%';
+      }
+
+    }
+
+    .clusters .label text {
+      fill: #b6b6c2;
+      font-weight: bold;
+    }
+
+    .clusters RECT {
+      fill: #222;
+      stroke: #555;
+    }
+
+    .arrowhead {
+      fill: #6c6c76;
+    }
+
+    .node RECT {
+      fill: #111;
+      stroke: #555;
+    }
+
+    PATH {
+      stroke: #6c6c76;
+    }
+
+    .edgePath {
+      cursor: pointer;
+    }
+
+    .weight1 { stroke-width: 2px; }
+    .weight2 { stroke-width: 3px; }
+    .weight3 { stroke-width: 4px; }
+    .weight4 { stroke-width: 5px; }
+    .weight5 { stroke-width: 6px; }
+  }
+</style>

package/pages/support/index.vue

@@ -10,6 +10,7 @@ import { isRancherPrime } from '@shell/config/version';
 import { hasCspAdapter } from 'mixins/brand';
 
 export default {
+  layout: 'home',
 
   components: {
     BannerGraphic,
@@ -81,8 +82,13 @@ export default {
     },
 
     serverUrl() {
-      // Client-side rendered: use the current window location
-      return window.location.origin;
+      if (process.client) {
+        // Client-side rendered: use the current window location
+        return window.location.origin;
+      }
+
+      // Server-side rendered
+      return this.serverSetting?.value || '';
     },
 
     supportConfigLink() {

package/pkg/auto-import.js

@@ -1,6 +1,6 @@
 const fs = require('fs');
 const path = require('path');
-const contextFolders = ['chart', 'cloud-credential', 'content', 'detail', 'edit', 'list', 'machine-config', 'models', 'promptRemove', 'l10n', 'windowComponents', 'dialog', 'formatters', 'login'];
+const contextFolders = ['chart', 'cloud-credential', 'content', 'detail', 'edit', 'layouts', 'list', 'machine-config', 'models', 'promptRemove', 'l10n', 'windowComponents', 'dialog', 'formatters', 'login'];
 const contextMap = contextFolders.reduce((map, obj) => {
   map[obj] = true;
 

package/plugins/axios.js

@@ -1,5 +1,7 @@
 import https from 'https';
 import { CSRF } from '@shell/config/cookies';
+import { parse as setCookieParser } from 'set-cookie-parser';
+import pkg from '../package.json';
 
 export default function({
   $axios, $cookies, isDev, req
@@ -13,8 +15,42 @@ export default function({
     if ( csrf ) {
       config.headers['x-api-csrf'] = csrf;
     }
+
+    if ( process.server ) {
+      config.headers.common['access-control-expose-headers'] = `set-cookie`;
+      config.headers.common['user-agent'] = `Dashboard (Mozilla) v${ pkg.version }`;
+
+      if ( req.headers.cookie ) {
+        config.headers.common['cookies'] = req.headers.cookie;
+      }
+
+      if ( config.url.startsWith('/') ) {
+        config.baseURL = `${ req.protocol || 'https' }://${ req.headers.host }`;
+      }
+    }
   });
 
+  if ( process.server ) {
+    $axios.onResponse((res) => {
+      const parsed = setCookieParser(res.headers['set-cookie'] || []);
+
+      for ( const opt of parsed ) {
+        const key = opt.name;
+        const value = opt.value;
+
+        delete opt.name;
+        delete opt.value;
+
+        opt.encode = (x) => x;
+        opt.sameSite = true;
+        opt.path = '/';
+        opt.secure = true;
+
+        $cookies.set(key, value, opt);
+      }
+    });
+  }
+
   if ( isDev ) {
     // https://github.com/nuxt-community/axios-module/blob/dev/lib/module.js#L78
     // forces localhost to http, for no obvious reason.

package/plugins/back-button.js

@@ -1,3 +1,5 @@
-window.addEventListener('popstate', () => {
-  window._popStateDetected = true;
-});
+if ( process.client ) {
+  window.addEventListener('popstate', () => {
+    window._popStateDetected = true;
+  });
+}

package/plugins/clean-html-directive.js

@@ -1,5 +1,23 @@
 import Vue from 'vue';
-import { purifyHTML } from './clean-html';
+import DOMPurify from 'dompurify';
+
+const ALLOWED_TAGS = [
+  'code',
+  'li',
+  'a',
+  'p',
+  'b',
+  'br',
+  'ul',
+  'pre',
+  'span',
+  'div',
+  'i',
+  'em',
+  'strong',
+];
+
+export const purifyHTML = (value) => DOMPurify.sanitize(value, { ALLOWED_TAGS });
 
 export const cleanHtmlDirective = {
   inserted(el, binding) {

package/plugins/clean-tooltip-directive.js

@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import { VTooltip } from 'v-tooltip';
-import { purifyHTML } from './clean-html';
+import { purifyHTML } from './clean-html-directive';
 
 function purifyContent(value) {
   const type = typeof value;

package/plugins/codemirror-loader.js

@@ -1,5 +1,5 @@
 // Share codemirror with plugins
 
-if ( !window.__codeMirrorLoader ) {
+if ( process.client && !window.__codeMirrorLoader ) {
   window.__codeMirrorLoader = () => import(/* webpackChunkName: "codemirror" */ '@shell/plugins/codemirror');
 }

package/plugins/codemirror.js

@@ -125,47 +125,6 @@ CodeMirror.defineExtension('foldLinesMatching', function(regex) {
   });
 });
 
-function countSpaces(line) {
-  for (let i = 0; i < line.length; i++) {
-    if (line[i] !== ' ') {
-      return i;
-    }
-  }
-
-  return line.length;
-}
-
-CodeMirror.defineExtension('foldYaml', function(path) {
-  this.operation(() => {
-    let elements = [];
-
-    for (let i = this.firstLine(), e = this.lastLine(); i <= e; i++) {
-      const line = this.getLine(i);
-      const index = countSpaces(line);
-      const trimmed = line.trim();
-
-      if (trimmed.endsWith(':') || trimmed.endsWith(': >-')) {
-        const name = trimmed.split(':')[0].substr(0, trimmed.length - 1);
-
-        // Remove all elements of the same are greater index
-        elements = elements.filter((e) => e.index < index);
-
-        // Add on this one
-        elements.push({
-          index,
-          name
-        });
-
-        const currentPath = elements.map((e) => e.name).join('.');
-
-        if (currentPath === path) {
-          this.foldCode(CodeMirror.Pos(i, 0), null, 'fold');
-        }
-      }
-    }
-  });
-});
-
 CodeMirror.registerHelper('fold', 'yamlcomments', (cm, start) => {
   if ( !isLineComment(cm, start.line) ) {
     return;

package/plugins/dashboard-store/__tests__/{mutations.test.ts → mutations.spec.ts}

@@ -1,4 +1,4 @@
-import { batchChanges } from '@shell/plugins/dashboard-store/mutations.js';
+import { batchChanges } from '@shell/plugins/dashboard-store/mutations';
 import { POD, WORKLOAD_TYPES } from '@shell/config/types';
 import Resource from '@shell/plugins/dashboard-store/resource-class';