From 24d823621923452f7647ecab2ca722dc17ec539c Mon Sep 17 00:00:00 2001
From: Kenia <19161242+kaxcode@users.noreply.github.com>
Date: Fri, 5 Nov 2021 13:46:41 -0400
Subject: [PATCH] ui: Topology view with no dependencies (#11280)

---
 .changelog/11280.txt                          |  3 +
 .../topology-metrics/card/index.hbs           | 10 ++-
 .../topology-metrics/down-lines/index.hbs     |  4 +-
 .../app/components/topology-metrics/index.hbs | 10 +--
 .../app/components/topology-metrics/index.js  | 63 +++++++++++++++++--
 .../app/components/topology-metrics/skin.scss |  3 +-
 .../topology-metrics/up-lines/index.hbs       |  2 +-
 .../app/helpers/service/card-permissions.js   | 22 +++++++
 .../helpers/service/intention-permissions.js  | 18 ------
 ui/packages/consul-ui/app/models/topology.js  |  5 ++
 .../templates/dc/services/show/topology.hbs   | 42 ++++++-------
 .../dc/services/show/topology/empty-steps.js  | 10 +++
 ...sions-test.js => card-permissions-test.js} |  4 +-
 .../consul-ui/tests/pages/dc/services/show.js |  6 ++
 .../translations/components/consul/en-us.yaml |  8 +++
 15 files changed, 152 insertions(+), 58 deletions(-)
 create mode 100644 .changelog/11280.txt
 create mode 100644 ui/packages/consul-ui/app/helpers/service/card-permissions.js
 delete mode 100644 ui/packages/consul-ui/app/helpers/service/intention-permissions.js
 create mode 100644 ui/packages/consul-ui/tests/acceptance/steps/dc/services/show/topology/empty-steps.js
 rename ui/packages/consul-ui/tests/integration/helpers/service/{intention-permissions-test.js => card-permissions-test.js} (76%)

diff --git a/.changelog/11280.txt b/.changelog/11280.txt
new file mode 100644
index 000000000..38cdedf9c
--- /dev/null
+++ b/.changelog/11280.txt
@@ -0,0 +1,3 @@
+```release-note:feature
+ui: Topology - New views for scenarios where no dependencies exist or ACLs are disabled
+```
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/card/index.hbs b/ui/packages/consul-ui/app/components/topology-metrics/card/index.hbs
index 0e457b229..1a6417cf5 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/card/index.hbs
+++ b/ui/packages/consul-ui/app/components/topology-metrics/card/index.hbs
@@ -1,5 +1,9 @@
-{{#if (eq @item.Name '* (All Services)')}}
-<a data-test-topology-metrics-card class="topology-metrics-card" href={{href-to 'dc.services.index'}}>
+{{#if (eq @item.Datacenter '')}}
+<a
+  class="topology-metrics-card"
+  href={{href-to 'dc.services.index'}}
+  data-permission={{service/card-permissions @item}}
+>
   <p class="empty">
     {{@item.Name}}
   </p>
@@ -12,7 +16,7 @@
     (href-to this.hrefPath @item.Datacenter @item.Name params=(hash nspace=@item.Namespace))
     (href-to this.hrefPath @item.Name)
   }}
-  data-permission={{service/intention-permissions @item}}
+  data-permission={{service/card-permissions @item}}
   id="{{@item.Namespace}}{{@item.Name}}"
 >
   <p>
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/down-lines/index.hbs b/ui/packages/consul-ui/app/components/topology-metrics/down-lines/index.hbs
index c617a182c..c27c6d028 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/down-lines/index.hbs
+++ b/ui/packages/consul-ui/app/components/topology-metrics/down-lines/index.hbs
@@ -84,7 +84,7 @@
 
 {{#let (not (can 'update intention for service' item=@service.Service)) as |disabled|}}
 {{#each @items as |item|}}
-  {{#if (or (not item.Intention.Allowed) item.Intention.HasPermissions)}}
+  {{#if (and (not-eq item.Datacenter '') (or (not item.Intention.Allowed) item.Intention.HasPermissions))}}
     <TopologyMetrics::Popover
       @type={{if item.Intention.HasPermissions 'l7' 'deny'}}
       @position={{find-by 'id' (concat this.guid item.Namespace item.Name) this.iconPositions}}
@@ -92,7 +92,7 @@
       @disabled={{disabled}}
       @oncreate={{action @oncreate item @service}}
     />
-  {{else if (and item.Intention.Allowed (not item.TransparentProxy) (eq item.Source 'specific-intention'))}}
+  {{else if (and (not-eq item.Datacenter '') item.Intention.Allowed (not item.TransparentProxy) (eq item.Source 'specific-intention'))}}
     <TopologyMetrics::Popover
       @type='not-defined'
       @service={{@service}}
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/index.hbs b/ui/packages/consul-ui/app/components/topology-metrics/index.hbs
index 17fa60164..23e6dd8f4 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/index.hbs
+++ b/ui/packages/consul-ui/app/components/topology-metrics/index.hbs
@@ -2,12 +2,13 @@
   {{on-resize this.calculate}}
   class="topology-container consul-topology-metrics"
 >
-{{#if (gt @topology.Downstreams.length 0)}}
+{{#if (gt this.downstreams.length 0)}}
   <div
     id="downstream-container"
     {{did-insert this.setHeight 'downstream-lines'}}
-    {{did-update this.setHeight 'downstream-lines' @topology.Downstreams}}
+    {{did-update this.setHeight 'downstream-lines' this.downstreams}}
   >
+  {{#if (not this.emptyColumn)}}
     <div>
       <p>{{@dc.Name}}</p>
       <span>
@@ -16,7 +17,8 @@
         </Tooltip>
       </span>
     </div>
-  {{#each @topology.Downstreams as |item|}}
+  {{/if}}
+  {{#each this.downstreams as |item|}}
     <TopologyMetrics::Card
       @nspace={{@nspace}}
       @dc={{@dc.Name}}
@@ -82,7 +84,7 @@
       @view={{this.downView}}
       @center={{this.centerDimensions}}
       @lines={{this.downLines}}
-      @items={{@topology.Downstreams}}
+      @items={{this.downstreams}}
       @oncreate={{action @oncreate}}
     />
   </div>
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/index.js b/ui/packages/consul-ui/app/components/topology-metrics/index.js
index d7d17236f..45d835804 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/index.js
+++ b/ui/packages/consul-ui/app/components/topology-metrics/index.js
@@ -1,8 +1,11 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action, get } from '@ember/object';
+import { inject as service } from '@ember/service';
 
 export default class TopologyMetrics extends Component {
+  @service('env') env;
+
   // =attributes
   @tracked centerDimensions;
   @tracked downView;
@@ -66,19 +69,58 @@ export default class TopologyMetrics extends Component {
       });
   }
 
+  emptyColumn() {
+    const noDependencies = get(this.args.topology, 'noDependencies');
+    return !this.env.var('CONSUL_ACLS_ENABLED') || noDependencies;
+  }
+
+  get downstreams() {
+    const downstreams = get(this.args.topology, 'Downstreams') || [];
+    const items = [...downstreams];
+    const noDependencies = get(this.args.topology, 'noDependencies');
+
+    if (!this.env.var('CONSUL_ACLS_ENABLED') && noDependencies) {
+      items.push({
+        Name: 'Downstreams unknown.',
+        Empty: true,
+        Datacenter: '',
+        Namespace: '',
+      });
+    } else if (downstreams.length === 0) {
+      items.push({
+        Name: 'No downstreams.',
+        Datacenter: '',
+        Namespace: '',
+      });
+    }
+
+    return items;
+  }
+
   get upstreams() {
     const upstreams = get(this.args.topology, 'Upstreams') || [];
     const items = [...upstreams];
     const defaultACLPolicy = get(this.args.dc, 'DefaultACLPolicy');
     const wildcardIntention = get(this.args.topology, 'wildcardIntention');
-    if (defaultACLPolicy === 'allow' || wildcardIntention) {
+    const noDependencies = get(this.args.topology, 'noDependencies');
+
+    if (!this.env.var('CONSUL_ACLS_ENABLED') && noDependencies) {
+      items.push({
+        Name: 'Upstreams unknown.',
+        Datacenter: '',
+        Namespace: '',
+      });
+    } else if (defaultACLPolicy === 'allow' || wildcardIntention) {
       items.push({
         Name: '* (All Services)',
         Datacenter: '',
         Namespace: '',
-        Intention: {
-          Allowed: true,
-        },
+      });
+    } else if (upstreams.length === 0) {
+      items.push({
+        Name: 'No upstreams.',
+        Datacenter: '',
+        Namespace: '',
       });
     }
     return items;
@@ -112,10 +154,21 @@ export default class TopologyMetrics extends Component {
     }
 
     // Calculate viewBox dimensions
-    this.downView = document.getElementById('downstream-lines').getBoundingClientRect();
+    const downstreamLines = document.getElementById('downstream-lines').getBoundingClientRect();
     const upstreamLines = document.getElementById('upstream-lines').getBoundingClientRect();
     const upstreamColumn = document.getElementById('upstream-column');
 
+    if (this.emptyColumn) {
+      this.downView = {
+        x: downstreamLines.x,
+        y: downstreamLines.y,
+        width: downstreamLines.width,
+        height: downstreamLines.height + 10,
+      };
+    } else {
+      this.downView = downstreamLines;
+    }
+
     if (upstreamColumn) {
       this.upView = {
         x: upstreamLines.x,
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/skin.scss b/ui/packages/consul-ui/app/components/topology-metrics/skin.scss
index 92d907c89..afd24a606 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/skin.scss
+++ b/ui/packages/consul-ui/app/components/topology-metrics/skin.scss
@@ -65,7 +65,8 @@
     stroke: rgb(var(--tone-gray-300));
     stroke-width: 2;
   }
-  path[data-permission='not-defined'] {
+  path[data-permission='not-defined'],
+  path[data-permission='empty'] {
     stroke-dasharray: 4;
   }
   path[data-permission='deny'] {
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/up-lines/index.hbs b/ui/packages/consul-ui/app/components/topology-metrics/up-lines/index.hbs
index 33b9e59e4..2f3748280 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/up-lines/index.hbs
+++ b/ui/packages/consul-ui/app/components/topology-metrics/up-lines/index.hbs
@@ -83,7 +83,7 @@
   </svg>
 {{/if}}
 {{#each @items as |item|}}
-  {{#if (or (not item.Intention.Allowed) item.Intention.HasPermissions)}}
+  {{#if (and (not-eq item.Datacenter '') (or (not item.Intention.Allowed) item.Intention.HasPermissions))}}
     <TopologyMetrics::Popover
       @type={{if item.Intention.HasPermissions 'l7' 'deny'}}
       @position={{find-by 'id' (concat this.guid item.Namespace item.Name) this.iconPositions}}
diff --git a/ui/packages/consul-ui/app/helpers/service/card-permissions.js b/ui/packages/consul-ui/app/helpers/service/card-permissions.js
new file mode 100644
index 000000000..aa067e83c
--- /dev/null
+++ b/ui/packages/consul-ui/app/helpers/service/card-permissions.js
@@ -0,0 +1,22 @@
+import { helper } from '@ember/component/helper';
+
+export default helper(function serviceCardPermissions([params] /*, hash*/) {
+  if (params.Datacenter === '') {
+    return 'empty';
+  } else {
+    const hasPermissions = params.Intention.HasPermissions;
+    const allowed = params.Intention.Allowed;
+    const notExplicitlyDefined = params.Source === 'specific-intention' && !params.TransparentProxy;
+
+    switch (true) {
+      case hasPermissions:
+        return 'allow';
+      case !allowed && !hasPermissions:
+        return 'deny';
+      case allowed && notExplicitlyDefined:
+        return 'not-defined';
+      default:
+        return 'allow';
+    }
+  }
+});
diff --git a/ui/packages/consul-ui/app/helpers/service/intention-permissions.js b/ui/packages/consul-ui/app/helpers/service/intention-permissions.js
deleted file mode 100644
index b882fa53f..000000000
--- a/ui/packages/consul-ui/app/helpers/service/intention-permissions.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { helper } from '@ember/component/helper';
-
-export default helper(function serviceIntentionPermissions([params] /*, hash*/) {
-  const hasPermissions = params.Intention.HasPermissions;
-  const allowed = params.Intention.Allowed;
-  const notExplicitlyDefined = params.Source === 'specific-intention' && !params.TransparentProxy;
-
-  switch (true) {
-    case hasPermissions:
-      return 'allow';
-    case !allowed && !hasPermissions:
-      return 'deny';
-    case allowed && notExplicitlyDefined:
-      return 'not-defined';
-    default:
-      return 'allow';
-  }
-});
diff --git a/ui/packages/consul-ui/app/models/topology.js b/ui/packages/consul-ui/app/models/topology.js
index e465a6268..268037f32 100644
--- a/ui/packages/consul-ui/app/models/topology.js
+++ b/ui/packages/consul-ui/app/models/topology.js
@@ -46,4 +46,9 @@ export default class Topology extends Model {
 
     return downstreamWildcard || upstreamWildcard;
   }
+
+  @computed('Downstreams', 'Upstreams')
+  get noDependencies() {
+    return this.Upstreams.length === 0 && this.Downstreams.length === 0;
+  }
 }
diff --git a/ui/packages/consul-ui/app/templates/dc/services/show/topology.hbs b/ui/packages/consul-ui/app/templates/dc/services/show/topology.hbs
index 9a37e5a6f..96ddbc647 100644
--- a/ui/packages/consul-ui/app/templates/dc/services/show/topology.hbs
+++ b/ui/packages/consul-ui/app/templates/dc/services/show/topology.hbs
@@ -27,26 +27,6 @@ as |route|>
   loader.data
 as |nspace dc items topology|}}
   <div class="tab-section">
-    {{#if (and (eq topology.Upstreams.length 0) (eq topology.Downstreams.length 0) (not-eq dc.DefaultACLPolicy 'allow') (not topology.wildcardIntention))}}
-      <EmptyState>
-        <BlockSlot @name="header">
-          <h2>
-            No dependencies
-          </h2>
-        </BlockSlot>
-        <BlockSlot @name="body">
-          <p>
-            This service has neither downstreams nor upstreams, which means that no services are configured to connect with it. Add upstreams and intentions to ensure this service is connected with the rest of your service mesh.
-          </p>
-        </BlockSlot>
-        <BlockSlot @name="actions">
-          <li class="docs-link">
-            <a href="{{env 'CONSUL_DOCS_URL'}}/connect/registration/service-registration#complete-configuration-example" rel="noopener noreferrer" target="_blank">Documentation on upstreams</a>
-          </li>
-        </BlockSlot>
-      </EmptyState>
-    {{else}}
-
   {{#let (collapsible-notices topology.FilteredByACLs (eq dc.DefaultACLPolicy 'allow') topology.wildcardIntention topology.notDefinedIntention) as |collapsible| }}
     <CollapsibleNotices @collapsible={{collapsible}}>
       {{#if topology.FilteredByACLs}}
@@ -85,6 +65,26 @@ as |nspace dc items topology|}}
           @action={{true}}
         />
       {{/if}}
+      {{#if (and topology.noDependencies (can 'use acls'))}}
+        <TopologyMetrics::Notice
+          data-test-notice='no-dependencies'
+          @type="info"
+          @for="no-dependencies"
+          @link="{{env 'CONSUL_DOCS_URL'}}/connect/registration/service-registration#upstream-configuration-reference"
+          @internal={{false}}
+          @action={{true}}
+        />
+      {{/if}}
+      {{#if (and topology.noDependencies (not (can 'use acls')))}}
+        <TopologyMetrics::Notice
+          data-test-notice='acls-disabled'
+          @type="warning"
+          @for="acls-disabled"
+          @link="{{env 'CONSUL_DOCS_URL'}}/security/acl/acl-system#configuring-acls"
+          @internal={{false}}
+          @action={{true}}
+        />
+      {{/if}}
     </CollapsibleNotices>
   {{/let}}
     <DataSource
@@ -113,8 +113,6 @@ as |nspace dc items topology|}}
       />
     {{/if}}
     </DataSource>
-
-    {{/if}}
   </div>
 {{/let}}
     </BlockSlot>
diff --git a/ui/packages/consul-ui/tests/acceptance/steps/dc/services/show/topology/empty-steps.js b/ui/packages/consul-ui/tests/acceptance/steps/dc/services/show/topology/empty-steps.js
new file mode 100644
index 000000000..f2aad107e
--- /dev/null
+++ b/ui/packages/consul-ui/tests/acceptance/steps/dc/services/show/topology/empty-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);
+  });
+}
diff --git a/ui/packages/consul-ui/tests/integration/helpers/service/intention-permissions-test.js b/ui/packages/consul-ui/tests/integration/helpers/service/card-permissions-test.js
similarity index 76%
rename from ui/packages/consul-ui/tests/integration/helpers/service/intention-permissions-test.js
rename to ui/packages/consul-ui/tests/integration/helpers/service/card-permissions-test.js
index 6219c04de..5ea7544bb 100644
--- a/ui/packages/consul-ui/tests/integration/helpers/service/intention-permissions-test.js
+++ b/ui/packages/consul-ui/tests/integration/helpers/service/card-permissions-test.js
@@ -3,7 +3,7 @@ import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 
-module('Integration | Helper | service/intention-permissions', function(hooks) {
+module('Integration | Helper | service/card-permissions', function(hooks) {
   setupRenderingTest(hooks);
 
   // TODO: Replace this with your real tests.
@@ -15,7 +15,7 @@ module('Integration | Helper | service/intention-permissions', function(hooks) {
       },
     });
 
-    await render(hbs`{{service/intention-permissions inputValue}}`);
+    await render(hbs`{{service/card-permissions inputValue}}`);
 
     assert.equal(this.element.textContent.trim(), 'allow');
   });
diff --git a/ui/packages/consul-ui/tests/pages/dc/services/show.js b/ui/packages/consul-ui/tests/pages/dc/services/show.js
index 52910c3da..8914eb9dd 100644
--- a/ui/packages/consul-ui/tests/pages/dc/services/show.js
+++ b/ui/packages/consul-ui/tests/pages/dc/services/show.js
@@ -48,6 +48,12 @@ export default function(
     notDefinedIntention: {
       see: isPresent('[data-test-notice="not-defined-intention"]'),
     },
+    noDependencies: {
+      see: isPresent('[data-test-notice="no-dependencies"]'),
+    },
+    aclsDisabled: {
+      see: isPresent('[data-test-notice="acls-disabled"]'),
+    },
   };
   page.tabs.upstreamsTab = {
     services: collection('.consul-upstream-list > ul > li:not(:first-child)', {
diff --git a/ui/packages/consul-ui/translations/components/consul/en-us.yaml b/ui/packages/consul-ui/translations/components/consul/en-us.yaml
index fdc946617..03f3cd84c 100644
--- a/ui/packages/consul-ui/translations/components/consul/en-us.yaml
+++ b/ui/packages/consul-ui/translations/components/consul/en-us.yaml
@@ -143,6 +143,14 @@ topology-metrics:
       footer:
         name: Edit intentions
         URL: dc.services.show.intentions
+    no-dependencies:
+      header: No dependencies
+      body: The service you are viewing currently has no dependencies. You will only see metrics for the current service until dependencies are added.
+      footer: Read the documentation
+    acls-disabled:
+      header: Enable ACLs
+      body: This connect-native service may have dependencies, but Consul isn't aware of them when ACLs are disabled. Enable ACLs to make this view more useful.
+      footer: Read the documentation
   popover:
     l7:
       header: Layer 7 permissions