tenfortyeight/index.html

## index.html
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.18.1/vis.min.js"></script>
  <style>
    body {
      background-color: #000;
    }
  </style>
</head>

<body>
  <div style="height:700px" id="my-graph"></div>
  <script>
    (function () {
      var stringToColour = function (str) {
        var hash = 0;
        for (var i = 0; i < str.length; i++) {
          hash = str.charCodeAt(i) + ((hash << 5) - hash);
        }
        var colour = '#';
        for (var i = 0; i < 3; i++) {
          var value = (hash >> (i * 8)) & 0xFF;
          colour += ('00' + value.toString(16)).substr(-2);
        }
        return colour;
      }

      function fetchData() {
        return window.fetch('http://my-registry/').then(response => response.json())
      }

      function drawGraph(response) {
        var apps = response.map(x => x.application).concat(response.map(x => x.subscribesTo))
        apps = [...new Set(apps)]

        var relations = response

        var nodes = new vis.DataSet(apps.map(app => ({
          id: app,
          label: app.substring(app.indexOf('-') + 1),
          group: app.substring(0, app.indexOf('-')),
          level: app.startsWith('contentapi') ? 0 : (app.indexOf('forapi') > -1 ? 1 : (app.indexOf('fetch') > -1 ? 3 : 2)),
        })))

        var edges = new vis.DataSet(relations.map(r => ({
          from: r.application,
          to: r.subscribesTo,
          arrows: 'from',
          label: `${r.remaining} (${r.failures})`,
        })))

        var container = document.getElementById('my-graph')

        var data = {
          nodes: nodes,
          edges: edges,
        }

        var options = {
          nodes: {
            shape: 'dot',
            size: 10,
            borderWidth: 4,
            font: {
              size: 12,
              color: '#fff',
              face: 'sans-serif',
              background: '#000',
            }
          },
          edges: {
            font: {
              size: 12,
              color: '#fff',
              face: 'sans-serif',
              strokeWidth: 0,
              background: '#000',
            }
          },
        }

        var network = new vis.Network(container, data, options)

        function updateGraph(response) {
          for (var node of Object.values(nodes._data)) {
            var data = updateData.find(x => x.application === node.id)
            var app = data.application
            nodes.update({
              id: app,
              label: app.substring(app.indexOf('-') + 1),
              group: app.substring(0, app.indexOf('-')),
              level: app.startsWith('contentapi') ? 0 : (app.indexOf('forapi') > -1 ? 1 : (app.indexOf('fetch') > -1 ? 3 : 2)),
            })
          }

          for (var edge of Object.values(edges._data)) {
            var data = updateData.find(x => x.application === edge.from && x.subscribesTo === edge.to)
            edges.update({
              id: edge.id,
              from: edge.from,
              to: edge.to,
              arrows: 'from',
              label: `${data.remaining} (${data.failures})`
            })
          }
        }

        setInterval(() => fetchData().then(updateGraph), 2500)
      }

      fetchData()
        .then(drawGraph)
    })()
  </script>
</body>

</html>
	<html>

	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.18.1/vis.min.js"></script>
	<style>
	body {
	background-color: #000;
	}
	</style>
	</head>

	<body>
	<div style="height:700px" id="my-graph"></div>
	<script>
	(function () {
	var stringToColour = function (str) {
	var hash = 0;
	for (var i = 0; i < str.length; i++) {
	hash = str.charCodeAt(i) + ((hash << 5) - hash);
	}
	var colour = '#';
	for (var i = 0; i < 3; i++) {
	var value = (hash >> (i * 8)) & 0xFF;
	colour += ('00' + value.toString(16)).substr(-2);
	}
	return colour;
	}

	function fetchData() {
	return window.fetch('http://my-registry/').then(response => response.json())
	}

	function drawGraph(response) {
	var apps = response.map(x => x.application).concat(response.map(x => x.subscribesTo))
	apps = [...new Set(apps)]

	var relations = response

	var nodes = new vis.DataSet(apps.map(app => ({
	id: app,
	label: app.substring(app.indexOf('-') + 1),
	group: app.substring(0, app.indexOf('-')),
	level: app.startsWith('contentapi') ? 0 : (app.indexOf('forapi') > -1 ? 1 : (app.indexOf('fetch') > -1 ? 3 : 2)),
	})))

	var edges = new vis.DataSet(relations.map(r => ({
	from: r.application,
	to: r.subscribesTo,
	arrows: 'from',
	label: `${r.remaining} (${r.failures})`,
	})))

	var container = document.getElementById('my-graph')

	var data = {
	nodes: nodes,
	edges: edges,
	}

	var options = {
	nodes: {
	shape: 'dot',
	size: 10,
	borderWidth: 4,
	font: {
	size: 12,
	color: '#fff',
	face: 'sans-serif',
	background: '#000',
	}
	},
	edges: {
	font: {
	size: 12,
	color: '#fff',
	face: 'sans-serif',
	strokeWidth: 0,
	background: '#000',
	}
	},
	}

	var network = new vis.Network(container, data, options)

	function updateGraph(response) {
	for (var node of Object.values(nodes._data)) {
	var data = updateData.find(x => x.application === node.id)
	var app = data.application
	nodes.update({
	id: app,
	label: app.substring(app.indexOf('-') + 1),
	group: app.substring(0, app.indexOf('-')),
	level: app.startsWith('contentapi') ? 0 : (app.indexOf('forapi') > -1 ? 1 : (app.indexOf('fetch') > -1 ? 3 : 2)),
	})
	}

	for (var edge of Object.values(edges._data)) {
	var data = updateData.find(x => x.application === edge.from && x.subscribesTo === edge.to)
	edges.update({
	id: edge.id,
	from: edge.from,
	to: edge.to,
	arrows: 'from',
	label: `${data.remaining} (${data.failures})`
	})
	}
	}

	setInterval(() => fetchData().then(updateGraph), 2500)
	}

	fetchData()
	.then(drawGraph)
	})()
	</script>
	</body>

	</html>