ui: Create Routing Configurations route and page (#10835)

.changelog/10835.txt

@@ -0,0 +1,3 @@
+```release-note:feature
+ui: Create Routing Configurations route and page
+```

ui/packages/consul-ui/app/components/consul/source/README.mdx

@@ -0,0 +1,20 @@
+# Consul::Source
+
+A presentational component for showing a source name. This is a similar component to `Consul::Kind` and `Consul::ExternalSource`, except `Consul::Source` does not relate to a Service.
+
+```hbs preview-template
+<Consul::Source @source='Source Name' />
+```
+
+### Arguments
+
+| Argument/Attribute | Type | Default | Description |
+| --- | --- | --- | --- |
+| `source` | `string` |  | A string to be passed down and displayed as the source name. |
+
+### See
+
+- [Template Source Code](./index.hbs)
+- [Styling Source Code](./index.scss)
+
+---

ui/packages/consul-ui/app/components/consul/source/index.hbs

@@ -0,0 +1,25 @@
+<dl class="tooltip-panel">
+  <dt>
+    <span data-test-consul-source class="consul-source">
+      {{@source}}
+    </span>
+  </dt>
+  <dd>
+    <MenuPanel @position="left">
+      <BlockSlot @name="header">
+        {{t "components.consul.source.header"}}
+      </BlockSlot>
+      <BlockSlot @name="menu">
+        <li role="separator">
+          {{t "components.consul.source.menu-title"}}
+        </li>
+        <li role="none" class="docs-link">
+          <a tabindex="-1" role="menuitem" href="{{env 'CONSUL_DOCS_URL'}}/connect/l7-traffic" rel="noopener noreferrer" target="_blank">
+            {{t "components.consul.source.links.documentation"}}
+          </a>
+        </li>
+      </BlockSlot>
+    </MenuPanel>
+  </dd>
+</dl>
+

ui/packages/consul-ui/app/components/consul/source/index.scss

@@ -0,0 +1,3 @@
+.consul-source {
+  @extend %pill-200, %frame-gray-600, %p1;
+}

ui/packages/consul-ui/app/router.js

@@ -205,6 +205,9 @@ export const routes = {
         },
       },
     },
+    'routing-config': {
+      _options: { path: '/routing-config/:name' },
+    },
   },
   // Shows a datacenter picker. If you only have one
   // it just redirects you through.

ui/packages/consul-ui/app/routes/dc/routing-config.js

@@ -0,0 +1,19 @@
+import Route from 'consul-ui/routing/route';
+import { inject as service } from '@ember/service';
+
+export default class RoutingConfigRoute extends Route {
+  @service('data-source/service') data;
+
+  async model(params) {
+    const dc = this.modelFor('dc').dc.Name;
+    const nspace = this.optionalParams().nspace;
+    const name = params.name;
+
+    return {
+      dc: dc,
+      nspace: nspace,
+      slug: name,
+      chain: await this.data.source(uri => uri`/${nspace}/${dc}/discovery-chain/${params.name}`),
+    };
+  }
+}

ui/packages/consul-ui/app/styles/components.scss

@@ -80,6 +80,7 @@
 @import 'consul-ui/components/consul/exposed-path/list';
 @import 'consul-ui/components/consul/external-source';
 @import 'consul-ui/components/consul/kind';
+@import 'consul-ui/components/consul/source';
 @import 'consul-ui/components/consul/intention';
 @import 'consul-ui/components/consul/lock-session/list';
 @import 'consul-ui/components/consul/lock-session/form';

ui/packages/consul-ui/app/styles/layout.scss

@@ -49,7 +49,8 @@ html[data-route$='edit'] .app-view > header + div > *:first-child {
 /* needs a top margun :S */
 %app-view-content .tab-section > *:first-child:not(.filter-bar):not(table),
 %app-view-content .tab-section > .search-bar + p,
-%app-view-content .tab-section .consul-health-check-list {
+%app-view-content .tab-section .consul-health-check-list,
+%app-view-content .container {
   margin-top: 1.25em;
 }
 .consul-upstream-instance-list,

ui/packages/consul-ui/app/templates/dc/routing-config.hbs

@@ -0,0 +1,22 @@
+{{page-title @model.slug}}
+
+<AppView>
+  <BlockSlot @name="breadcrumbs">
+    <ol>
+        <li><a data-test-back href={{href-to 'dc.services'}}>All Services</a></li>
+    </ol>
+  </BlockSlot>
+  <BlockSlot @name="header">
+    <h1>
+      {{@model.slug}}
+    </h1>
+    <Consul::Source @source={{t "routes.dc.routing-config.source"}} @withInfo={{true}} />
+  </BlockSlot>
+  <BlockSlot @name="content">
+    <div class="container">
+      <Consul::DiscoveryChain
+        @chain={{@model.chain.Chain}}
+      />
+    </div>
+  </BlockSlot>
+</AppView>

ui/packages/consul-ui/tests/acceptance/dc/routing-config.feature

@@ -0,0 +1,21 @@
+@setupApplicationTest
+Feature: dc / routing-config
+  Scenario: Viewing a routing config
+    Given 1 datacenter model with the value "dc1"
+    When I visit the routingConfig page for yaml
+    ---
+      dc: dc1
+      name: virtual-1
+    ---
+    Then the url should be /dc1/routing-config/virtual-1
+    Then I don't see status on the error like "404"
+    And the title should be "virtual-1 - Consul"
+  Scenario: Viewing a source pill
+    Given 1 datacenter model with the value "dc1"
+    When I visit the routingConfig page for yaml
+    ---
+      dc: dc1
+      name: virtual-1
+    ---
+    And I see source
+

ui/packages/consul-ui/tests/acceptance/steps/dc/routing-config-steps.js

@@ -0,0 +1,10 @@
+import steps from '../steps';
+
+// step definitions that are shared between features should be moved to the
+// tests/acceptance/steps/steps.js file
+
+export default function(assert) {
+  return steps(assert).then('I should find a file', function() {
+    assert.ok(true, this.step);
+  });
+}

ui/packages/consul-ui/tests/pages.js

@@ -52,6 +52,7 @@ import consulKvListFactory from 'consul-ui/components/consul/kv/list/pageobject'
 import index from 'consul-ui/tests/pages/index';
 import dcs from 'consul-ui/tests/pages/dc';
 import settings from 'consul-ui/tests/pages/settings';
+import routingConfig from 'consul-ui/tests/pages/dc/routing-config';
 import services from 'consul-ui/tests/pages/dc/services/index';
 import service from 'consul-ui/tests/pages/dc/services/show';
 import instance from 'consul-ui/tests/pages/dc/services/instance';
@@ -230,4 +231,5 @@ export default {
     nspace(visitable, submitable, deletable, cancelable, policySelector, roleSelector)
   ),
   settings: create(settings(visitable, submitable, isPresent)),
+  routingConfig: create(routingConfig(visitable, text)),
 };

ui/packages/consul-ui/tests/pages/dc/routing-config.js

@@ -0,0 +1,8 @@
+import { text } from 'ember-cli-page-object';
+
+export default function(visitable, isPresent) {
+  return {
+    visit: visitable('/:dc/routing-config/:name'),
+    source: text('[data-test-consul-source]'),
+  };
+}

ui/packages/consul-ui/tests/unit/routes/dc/routing-config-test.js

@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Route | dc/routing-config', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:dc/routing-config');
+    assert.ok(route);
+  });
+});

ui/packages/consul-ui/translations/components/consul/en-us.yaml

@@ -152,3 +152,9 @@ topology-metrics:
       header: No traffic
       body: Add "{upstream}" as an explicit upstream of "{downstream}" or set the "{downstream}" proxy to "transparent" mode to enable traffic.
       action: Documentation
+source:
+  header: This is not a registered Consul service. It’s a routing configuration that routes traffic to real services in Consul. For more information, read our documentation.
+  menu-title: About Routing Configs
+  links:
+    documentation: Documentation
+

ui/packages/consul-ui/translations/routes/en-us.yaml

@@ -42,3 +42,5 @@ dc:
           header: Transparent proxy mode
           body: The upstreams listed on this page have been defined in a proxy registration. There may be more upstreams, though, as "transparent" mode is enabled on this proxy.
           footer: Read the documentation
+  routing-config:
+    source: Routing Configuration