open-consul/ui/packages/consul-ui/app/components/consul/discovery-chain/index.js

import Component from '@ember/component';
import { inject as service } from '@ember/service';
import { set, get, computed } from '@ember/object';

import { createRoute, getSplitters, getRoutes, getResolvers } from './utils';

export default Component.extend({
  dom: service('dom'),
  ticker: service('ticker'),
  dataStructs: service('data-structs'),
  classNames: ['discovery-chain'],
  classNameBindings: ['active'],
  selectedId: '',
  init: function() {
    this._super(...arguments);
    this._listeners = this.dom.listeners();
  },
  didInsertElement: function() {
    this._listeners.add(this.dom.document(), {
      click: e => {
        // all route/splitter/resolver components currently
        // have classes that end in '-card'
        if (!this.dom.closest('[class$="-card"]', e.target)) {
          set(this, 'active', false);
          set(this, 'selectedId', '');
        }
      },
    });
  },
  willDestroyElement: function() {
    this._super(...arguments);
    this._listeners.remove();
    this.ticker.destroy(this);
  },
  splitters: computed('chain.Nodes', function() {
    return getSplitters(get(this, 'chain.Nodes'));
  }),
  routes: computed('chain.Nodes', function() {
    const routes = getRoutes(get(this, 'chain.Nodes'), this.dom.guid);
    // if we have no routes with a PathPrefix of '/' or one with no definition at all
    // then add our own 'default catch all'
    if (
      !routes.find(item => get(item, 'Definition.Match.HTTP.PathPrefix') === '/') &&
      !routes.find(item => typeof item.Definition === 'undefined')
    ) {
      let nextNode;
      const resolverID = `resolver:${this.chain.ServiceName}.${this.chain.Namespace}.${this.chain.Partition}.${this.chain.Datacenter}`;
      const splitterID = `splitter:${this.chain.ServiceName}.${this.chain.Namespace}.${this.chain.Partition}`;
      // The default router should look for a splitter first,
      // if there isn't one try the default resolver
      if (typeof this.chain.Nodes[splitterID] !== 'undefined') {
        nextNode = splitterID;
      } else if (typeof this.chain.Nodes[resolverID] !== 'undefined') {
        nextNode = resolverID;
      }
      if (typeof nextNode !== 'undefined') {
        const route = {
          Default: true,
          ID: `route:${this.chain.ServiceName}`,
          Name: this.chain.ServiceName,
          Definition: {
            Match: {
              HTTP: {
                PathPrefix: '/',
              },
            },
          },
          NextNode: nextNode,
        };
        routes.push(createRoute(route, this.chain.ServiceName, this.dom.guid));
      }
    }
    return routes;
  }),
  nodes: computed('routes', 'splitters', 'resolvers', function() {
    let nodes = this.resolvers.reduce((prev, item) => {
      prev[`resolver:${item.ID}`] = item;
      item.Children.reduce((prev, item) => {
        prev[`resolver:${item.ID}`] = item;
        return prev;
      }, prev);
      return prev;
    }, {});
    nodes = this.splitters.reduce((prev, item) => {
      prev[item.ID] = item;
      return prev;
    }, nodes);
    nodes = this.routes.reduce((prev, item) => {
      prev[item.ID] = item;
      return prev;
    }, nodes);
    Object.entries(nodes).forEach(([key, value]) => {
      if (typeof value.NextNode !== 'undefined') {
        value.NextItem = nodes[value.NextNode];
      }
      if (typeof value.Splits !== 'undefined') {
        value.Splits.forEach(item => {
          if (typeof item.NextNode !== 'undefined') {
            item.NextItem = nodes[item.NextNode];
          }
        });
      }
    });
    return '';
  }),
  resolvers: computed('chain.{Nodes,Targets}', function() {
    return getResolvers(
      this.chain.Datacenter,
      this.chain.Partition,
      this.chain.Namespace,
      get(this, 'chain.Targets'),
      get(this, 'chain.Nodes')
    );
  }),
  graph: computed('splitters', 'routes.[]', function() {
    const graph = this.dataStructs.graph();
    this.splitters.forEach(item => {
      item.Splits.forEach(splitter => {
        graph.addLink(item.ID, splitter.NextNode);
      });
    });
    this.routes.forEach((route, i) => {
      graph.addLink(route.ID, route.NextNode);
    });
    return graph;
  }),
  selected: computed('selectedId', 'graph', function() {
    if (this.selectedId === '' || !this.dom.element(`#${this.selectedId}`)) {
      return {};
    }
    const id = this.selectedId;
    const type = id.split(':').shift();
    const nodes = [id];
    const edges = [];
    this.graph.forEachLinkedNode(id, (linkedNode, link) => {
      nodes.push(linkedNode.id);
      edges.push(`${link.fromId}>${link.toId}`);
      this.graph.forEachLinkedNode(linkedNode.id, (linkedNode, link) => {
        const nodeType = linkedNode.id.split(':').shift();
        if (type !== nodeType && type !== 'splitter' && nodeType !== 'splitter') {
          nodes.push(linkedNode.id);
          edges.push(`${link.fromId}>${link.toId}`);
        }
      });
    });
    return {
      nodes: nodes.map(item => `#${CSS.escape(item)}`),
      edges: edges.map(item => `#${CSS.escape(item)}`),
    };
  }),
  actions: {
    click: function(e) {
      const id = e.currentTarget.getAttribute('id');
      if (id === this.selectedId) {
        set(this, 'active', false);
        set(this, 'selectedId', '');
      } else {
        set(this, 'active', true);
        set(this, 'selectedId', id);
      }
    },
  },
});