{"version":3,"sources":["webpack:///./node_modules/@rancher/shell/pages/rio/mesh.vue","webpack:///node_modules/@rancher/shell/pages/rio/mesh.vue","webpack:///./node_modules/@rancher/shell/pages/rio/mesh.vue?f3c6","webpack:///./node_modules/@rancher/shell/pages/rio/mesh.vue?db88","webpack:///./node_modules/@rancher/shell/pages/rio/mesh.vue?128d","webpack:///./node_modules/@rancher/shell/pages/rio/mesh.vue?78c2","webpack:///./node_modules/@rancher/shell/pages/rio/mesh.vue?dc21"],"names":["render","_vm","this","_c","_self","staticClass","_m","_v","ref","attrs","on","clicked","staticRenderFns","RADIUS","INTERVAL","nodeIdFor","obj","concat","namespace","app","version","fromId","fromNamespace","fromApp","fromVersion","toId","toNamespace","toApp","toVersion","loadData","_x","_loadData","apply","arguments","_asyncToGenerator","_regeneratorRuntime","mark","_callee5","store","data","known","wrap","_context5","prev","next","dispatch","url","sent","nodes","filter","x","forEach","id","edges","abrupt","stop","round3Digits","num","Math","round","asyncData","_ref","_callee","_context","computed","namespaces","$store","getters","displayNodes","console","log","out","displayEdges","ns1","ns2","watch","updateGraph","renderGraph","mounted","_this","_callee2","_context2","timer","setInterval","refreshData","initGraph","window","m","beforeDestroy","clearInterval","methods","_this2","_callee3","neu","_context3","_this3","_callee4","d3","dagreD3","g","svg","group","zoom","_context4","graphlib","Graph","compound","setGraph","marginx","marginy","rankdir","align","ranker","setDefaultEdgeLabel","arrows","smaller","parent","edge","type","marker","append","attr","path","style","util","applyStyle","select","$refs","mesh","event","sourceEvent","lastZoom","transform","call","graph","_step","e","escapeHtml","seenNamespaces","_iterator","_createForOfIteratorHelper","s","n","done","node","value","nsId","ensureNamespace","label","p99","stats","p99ms","unit","html","successRate","rps","setNode","labelType","width","height","rx","ry","setParent","err","f","_step2","rpses","map","min","_toConsumableArray","max","_iterator2","weight","floor","setEdge","arrowhead","arrowheadClass","class","curve","curveBasis","name","clusterLabelPos","zoomIdentity","translate","scale","graphWidth","graphHeight","parseInt","replace","dX","dY","y","k","loading","target","closest","component","___CSS_LOADER_API_IMPORT___","exports","push","module","i","content","__esModule","default","locals","add"],"mappings":"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","file":"js/pages/rio/mesh.47c66b8b.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"mesh\"},[_vm._m(0),_vm._v(\" \"),_c('svg',{ref:\"mesh\",attrs:{\"id\":\"mesh\"},on:{\"click\":_vm.clicked}})])\n}\nvar staticRenderFns = [function (){var _vm=this,_c=_vm._self._c;return _c('header',[_c('h1',[_vm._v(\"App Mesh\")])])\n}]\n\nexport { render, staticRenderFns }","<script>\nimport { escapeHtml } from '@shell/utils/string';\n\nconst RADIUS = 5;\n\nconst INTERVAL = 10000;\n\n/*\nfunction randomStats() {\n  return {\n    'p50ms':       Math.random(),\n    'p90ms':       Math.random() * 2,\n    'p99ms':       Math.random() * 5,\n    'rps':         Math.random() * 100,\n    'successRate': Math.random(),\n  };\n}\n\nfunction randomItem(ary) {\n  const idx = Math.floor(Math.random() * ary.length);\n\n  return ary[idx];\n}\n\nfunction randomData() {\n  const nodes = [];\n  const edges = [];\n\n  ['foo', 'bar', 'baz', 'bat', 'qux'].forEach((name) => {\n    nodes.push({\n      'namespace': 'default',\n      'app':       name,\n      'version':   'v1',\n      'stats':     randomStats(),\n    });\n  });\n\n  ['a', 'b', 'c', 'd', 'e'].forEach((name) => {\n    nodes.push({\n      'namespace': 'another',\n      'app':       name,\n      'version':   'v1',\n      'stats':     randomStats(),\n    });\n  });\n\n  for ( let i = 0 ; i < 10 ; i++ ) {\n    const from = randomItem(nodes);\n    const crossNs = Math.random() < 0.2;\n    const toChoices = nodes.filter((x) => {\n      if ( x === from ) {\n        return false;\n      }\n\n      if ( crossNs ) {\n        return x.namespace !== from.namespace;\n      } else {\n        return x.namespace === from.namespace;\n      }\n    });\n    const to = randomItem(toChoices);\n\n    edges.push({\n      fromNamespace: from.namespace,\n      fromApp:       from.app,\n      fromVersion:   from.version,\n      toNamespace:   to.namespace,\n      toApp:         to.app,\n      toVersion:     to.version,\n      stats:         randomStats(),\n    });\n  }\n\n  return {\n    nodes,\n    edges\n  };\n}\n*/\n\nfunction nodeIdFor(obj) {\n  return `${ obj.namespace }:${ obj.app }@${ obj.version }`;\n}\n\nfunction fromId(obj) {\n  return `${ obj.fromNamespace }:${ obj.fromApp }@${ obj.fromVersion }`;\n}\n\nfunction toId(obj) {\n  return `${ obj.toNamespace }:${ obj.toApp }@${ obj.toVersion }`;\n}\n\nasync function loadData(store) {\n  const data = await store.dispatch('rancher/request', { url: '/v1-metrics/meshsummary' });\n\n  const known = {};\n\n  data.nodes = data.nodes.filter((x) => !!x.app && !!x.namespace);\n  data.nodes.forEach((x) => {\n    x.id = nodeIdFor(x);\n    known[x.id] = true;\n  });\n\n  data.edges = data.edges.filter((x) => known[fromId(x)] && known[toId(x)]);\n\n  return data;\n}\n\nfunction round3Digits(num) {\n  if ( !num ) {\n    return 0;\n  }\n\n  if ( num > 100 ) {\n    return Math.round(num);\n  } else if ( num > 10 ) {\n    return Math.round(num * 10) / 10;\n  } else {\n    return Math.round(num * 100) / 100;\n  }\n}\n\nexport default {\n\n  /* (\n  data() {\n    return {\n      loading: true,\n      ...randomData(),\n    };\n  },\n  */\n\n  async asyncData({ store }) {\n    const data = await loadData(store);\n\n    return data;\n  },\n  computed: {\n    namespaces() {\n      return this.$store.getters['namespaces']();\n    },\n\n    displayNodes() {\n      console.log('get displayNodes'); // eslint-disable-line no-console\n      const namespaces = this.namespaces;\n\n      const out = this.nodes.filter((x) => {\n        return namespaces[x.namespace];\n      });\n\n      return out;\n    },\n\n    displayEdges() {\n      console.log('get displayEdges'); // eslint-disable-line no-console\n      const namespaces = this.namespaces;\n\n      const out = this.edges.filter((x) => {\n        const ns1 = x.fromNamespace;\n        const ns2 = x.toNamespace;\n\n        return namespaces[ns1] && namespaces[ns2];\n      });\n\n      return out;\n    },\n  },\n\n  watch: {\n    // Nodes isn't watched, but gets updated at the same time...\n    nodes() {\n      console.log('nodes updated'); // eslint-disable-line no-console\n      this.updateGraph();\n      this.renderGraph();\n    },\n\n    namespaces() {\n      console.log('namespaces updated'); // eslint-disable-line no-console\n      this.updateGraph();\n      this.renderGraph();\n    },\n\n    edges() {\n      console.log('edges updated'); // eslint-disable-line no-console\n      this.updateGraph();\n      this.renderGraph();\n    },\n  },\n\n  async mounted() {\n    console.log('Mounted'); // eslint-disable-line no-console\n    this.timer = setInterval(() => {\n      console.log('Timer'); // eslint-disable-line no-console\n      this.refreshData();\n    }, INTERVAL);\n\n    await this.initGraph();\n    this.updateGraph();\n    this.renderGraph();\n\n    window.m = this;\n  },\n\n  beforeDestroy() {\n    clearInterval(this.timer);\n  },\n\n  methods: {\n    async refreshData() {\n      console.log('Refreshing...'); // eslint-disable-line no-console\n      const neu = await loadData(this.$store);\n\n      this.nodes = neu.nodes;\n      this.edges = neu.edges;\n      console.log('Refreshed'); // eslint-disable-line no-console\n    },\n\n    async initGraph() {\n      const d3 = await import('d3');\n      const dagreD3 = await import('dagre-d3');\n\n      const g = new dagreD3.graphlib.Graph({ compound: true });\n\n      g.setGraph({\n        marginx: 0,\n        marginy: 0,\n        rankdir: 'LR',\n        align:   'UL',\n        ranker:  'longest-path', // 'tight-tree',\n      });\n\n      g.setDefaultEdgeLabel(() => {\n        return {};\n      });\n\n      // Create the renderer\n      const render = new dagreD3.render();\n\n      // Add our custom arrow\n      render.arrows().smaller = function normal(parent, id, edge, type) {\n        const marker = parent.append('marker')\n          .attr('id', id)\n          .attr('viewBox', '0 0 12 12')\n          .attr('refX', 6)\n          .attr('refY', 6)\n          .attr('markerUnits', 'userSpaceOnUse')\n          .attr('markerWidth', 12)\n          .attr('markerHeight', 12)\n          .attr('orient', 'auto');\n        const path = marker.append('path')\n          .attr('class', 'arrowhead')\n          .attr('d', 'M 6 0 L 0 6 L 6 12 L 12 6 z')\n          .style('stroke-width', 1)\n          .style('stroke-dasharray', '1,0');\n\n        dagreD3.util.applyStyle(path, edge[`${ type }Style`]);\n      };\n\n      // Set up an SVG group so that we can translate the final graph.\n      const svg = d3.select(this.$refs.mesh);\n      const group = svg.append('g');\n\n      const zoom = d3.zoom().on('zoom', () => {\n        if ( d3.event.sourceEvent ) {\n          this.lastZoom = d3.event.transform;\n        }\n        group.attr('transform', d3.event.transform);\n      });\n\n      svg.call(zoom);\n\n      this.d3 = d3;\n      this.dagreD3 = dagreD3;\n      this.graph = g;\n      this.render = render;\n      this.group = group;\n      this.zoom = zoom;\n    },\n\n    updateGraph() {\n      // @TODO diff nodes/edges, remove unexpected and add missing ones\n      console.log('Updating...'); // eslint-disable-line no-console\n\n      const e = escapeHtml;\n      const g = this.graph;\n\n      const seenNamespaces = {};\n\n      for ( const node of this.displayNodes ) {\n        const nsId = ensureNamespace(node.namespace);\n        const id = nodeIdFor(node);\n\n        node.label = `${ node.app }@${ node.version }`;\n\n        let p99 = node.stats.p99ms;\n        let unit = 'ms';\n\n        if ( p99 > 1000 ) {\n          p99 /= 1000;\n          unit = 's';\n        }\n\n        const html = `\n          <div class=\"version\">\n            <h4>${ e(node.app) }@${ e(node.version) }</h4>\n            <div class=\"row\">\n              <div class=\"col span-4 sr\">\n                <span>${ round3Digits(node.stats.successRate * 100) }</span><span class=\"unit\">%</span>\n              </div>\n              <div class=\"col span-4 rps\">\n                <span>${ round3Digits(node.stats.rps) }</span>\n              </div>\n              <div class=\"col span-4 p99\">\n                <span>${ round3Digits(p99) }</span><span class=\"unit\">${ unit }</span>\n              </div>\n            </div>\n          </div>\n        `;\n\n        g.setNode(id, {\n          labelType: 'html',\n          label:     html,\n          width:     158,\n          height:    80,\n          rx:        RADIUS,\n          ry:        RADIUS,\n        });\n        g.setParent(id, nsId);\n      }\n\n      const rpses = this.displayEdges.map((x) => x.stats.rps);\n      const min = Math.min(...rpses);\n      const max = Math.max(...rpses);\n\n      for ( const edge of this.displayEdges ) {\n        ensureNamespace(edge.fromNamespace);\n        ensureNamespace(edge.toNamespace);\n        const weight = Math.floor(4 * (edge.stats.rps - min) / (max - min)) + 1;\n\n        g.setEdge(fromId(edge), toId(edge), {\n          arrowhead:      'smaller',\n          arrowheadClass: 'arrowhead',\n          class:          `weight${ weight }`,\n          curve:          this.d3.curveBasis,\n          weight,\n        });\n      }\n\n      function ensureNamespace(name) {\n        const id = `ns:${ name }`;\n\n        if ( !seenNamespaces[name] ) {\n          seenNamespaces[name] = true;\n          g.setNode(id, {\n            label:           `Namespace: ${ name }`,\n            clusterLabelPos: 'top',\n            rx:              RADIUS,\n            ry:              RADIUS\n          });\n        }\n\n        return id;\n      }\n    },\n\n    renderGraph() {\n      console.log('Rendering...'); // eslint-disable-line no-console\n\n      const d3 = this.d3;\n      const svg = this.d3.select(this.$refs.mesh);\n      const group = this.group;\n      const g = this.graph;\n      const render = this.render;\n      const zoom = this.zoom;\n\n      svg.call(zoom.transform, d3.zoomIdentity.translate(0, 0).scale(1));\n\n      // Run the renderer. This is what draws the final graph.\n      render(group, g);\n\n      const graphWidth = g.graph().width;\n      const graphHeight = g.graph().height;\n      const width = parseInt(svg.style('width').replace(/px/, ''));\n      const height = parseInt(svg.style('height').replace(/px/, ''));\n      const scale = Math.min(width / graphWidth, height / graphHeight);\n      const dX = (width / 2) - ((graphWidth * scale) / 2);\n      const dY = (height / 2) - ((graphHeight * scale) / 2);\n\n      console.log('render'); // eslint-disable-line no-console\n      if ( this.lastZoom ) {\n        svg.call(zoom.transform, d3.zoomIdentity.translate(this.lastZoom.x, this.lastZoom.y).scale(this.lastZoom.k));\n      } else {\n        svg.call(zoom.transform, d3.zoomIdentity.translate(dX, dY).scale(scale));\n      }\n\n      this.loading = false;\n    },\n\n    clicked(event) {\n      const path = event.target.closest('.edgePath');\n\n      console.log(path); // eslint-disable-line no-console\n    }\n  },\n};\n</script>\n<template>\n  <div class=\"mesh\">\n    <header>\n      <h1>App Mesh</h1>\n    </header>\n\n    <svg\n      id=\"mesh\"\n      ref=\"mesh\"\n      @click=\"clicked\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\">\n  #mesh {\n    width: 100%;\n    height: calc(100vh - 165px);\n\n    .version {\n      width: 158px;\n      height: 80px;\n      color: #b6b6c2;\n      text-align: center;\n\n      .row {\n        margin: 0;\n      }\n\n      H4 {\n        color: #b6b6c2;\n        display: block;\n        border-bottom: 1px solid #555;\n        text-align: left;\n        padding-bottom: 5px;\n        margin-bottom: 5px;\n      }\n\n      .sr, .rps, .p99 {\n        font-size: 20px;\n\n        .unit {\n          font-size: 12px;\n        }\n      }\n\n      .sr:before, .rps:before, .p99:before {\n        color: white;\n        font-weight: bold;\n        font-size: 15px;\n        display: block;\n      }\n\n      .sr:before {\n        content: 'SR';\n      }\n\n      .rps:before {\n        content: 'RPS';\n      }\n\n      .p99:before {\n        content: '99%';\n      }\n\n    }\n\n    .clusters .label text {\n      fill: #b6b6c2;\n      font-weight: bold;\n    }\n\n    .clusters RECT {\n      fill: #222;\n      stroke: #555;\n    }\n\n    .arrowhead {\n      fill: #6c6c76;\n    }\n\n    .node RECT {\n      fill: #111;\n      stroke: #555;\n    }\n\n    PATH {\n      stroke: #6c6c76;\n    }\n\n    .edgePath {\n      cursor: pointer;\n    }\n\n    .weight1 { stroke-width: 2px; }\n    .weight2 { stroke-width: 3px; }\n    .weight3 { stroke-width: 4px; }\n    .weight4 { stroke-width: 5px; }\n    .weight5 { stroke-width: 6px; }\n  }\n</style>\n","import mod from \"-!../../../../cache-loader/dist/cjs.js??ref--16-0!../../../../babel-loader/lib/index.js??ref--16-1!../../../../cache-loader/dist/cjs.js??ref--1-0!../../../../@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./mesh.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../cache-loader/dist/cjs.js??ref--16-0!../../../../babel-loader/lib/index.js??ref--16-1!../../../../cache-loader/dist/cjs.js??ref--1-0!../../../../@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./mesh.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./mesh.vue?vue&type=template&id=69499c3c&\"\nimport script from \"./mesh.vue?vue&type=script&lang=js&\"\nexport * from \"./mesh.vue?vue&type=script&lang=js&\"\nimport style0 from \"./mesh.vue?vue&type=style&index=0&id=69499c3c&prod&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../@vue/cli-service/node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../../../vue-style-loader/index.js??ref--9-oneOf-1-0!../../../../@vue/cli-service/node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../../../@vue/cli-service/node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../postcss-loader/src/index.js??ref--9-oneOf-1-2!../../../../postcss-loader/src/index.js??ref--9-oneOf-1-3!../../../../sass-loader/dist/cjs.js??ref--9-oneOf-1-4!../../../../cache-loader/dist/cjs.js??ref--1-0!../../../../@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./mesh.vue?vue&type=style&index=0&id=69499c3c&prod&lang=scss&\"","// Imports\nvar ___CSS_LOADER_API_IMPORT___ = require(\"../../../../@vue/cli-service/node_modules/css-loader/dist/runtime/api.js\");\nexports = ___CSS_LOADER_API_IMPORT___(false);\n// Module\nexports.push([module.id, \"#mesh{width:100%;height:calc(100vh - 165px)}#mesh .version{width:158px;height:80px;color:#b6b6c2;text-align:center}#mesh .version .row{margin:0}#mesh .version H4{color:#b6b6c2;display:block;border-bottom:1px solid #555;text-align:left;padding-bottom:5px;margin-bottom:5px}#mesh .version .p99,#mesh .version .rps,#mesh .version .sr{font-size:20px}#mesh .version .p99 .unit,#mesh .version .rps .unit,#mesh .version .sr .unit{font-size:12px}#mesh .version .p99:before,#mesh .version .rps:before,#mesh .version .sr:before{color:#fff;font-weight:700;font-size:15px;display:block}#mesh .version .sr:before{content:\\\"SR\\\"}#mesh .version .rps:before{content:\\\"RPS\\\"}#mesh .version .p99:before{content:\\\"99%\\\"}#mesh .clusters .label text{fill:#b6b6c2;font-weight:700}#mesh .clusters RECT{fill:#222;stroke:#555}#mesh .arrowhead{fill:#6c6c76}#mesh .node RECT{fill:#111;stroke:#555}#mesh PATH{stroke:#6c6c76}#mesh .edgePath{cursor:pointer}#mesh .weight1{stroke-width:2px}#mesh .weight2{stroke-width:3px}#mesh .weight3{stroke-width:4px}#mesh .weight4{stroke-width:5px}#mesh .weight5{stroke-width:6px}\", \"\"]);\n// Exports\nmodule.exports = exports;\n","// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = require(\"!!../../../../@vue/cli-service/node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../../../@vue/cli-service/node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../postcss-loader/src/index.js??ref--9-oneOf-1-2!../../../../postcss-loader/src/index.js??ref--9-oneOf-1-3!../../../../sass-loader/dist/cjs.js??ref--9-oneOf-1-4!../../../../cache-loader/dist/cjs.js??ref--1-0!../../../../@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./mesh.vue?vue&type=style&index=0&id=69499c3c&prod&lang=scss&\");\nif(content.__esModule) content = content.default;\nif(typeof content === 'string') content = [[module.id, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar add = require(\"!../../../../vue-style-loader/lib/addStylesClient.js\").default\nvar update = add(\"741c1b2c\", content, true, {\"sourceMap\":false,\"shadowMode\":false});"],"sourceRoot":""}