From f981818e41ccfcaff0103b077976a9990178f0f1 Mon Sep 17 00:00:00 2001
From: Kenia <19161242+kaxcode@users.noreply.github.com>
Date: Fri, 9 Oct 2020 16:57:08 -0400
Subject: [PATCH] ui: Make the topology cards into links (#8911)

---
 ui-v2/app/components/topology-metrics/card.hbs         | 6 +++---
 ui-v2/app/components/topology-metrics/layout.scss      | 5 +++--
 ui-v2/app/components/topology-metrics/stats/index.scss | 2 +-
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/ui-v2/app/components/topology-metrics/card.hbs b/ui-v2/app/components/topology-metrics/card.hbs
index 861f049f9..a8adcfbbd 100644
--- a/ui-v2/app/components/topology-metrics/card.hbs
+++ b/ui-v2/app/components/topology-metrics/card.hbs
@@ -1,6 +1,6 @@
 {{#each @items as |item|}}
-<div
-  class="card"
+<a class="card"
+  href={{href-to "dc.services.show.index" item.Name}}
   data-permission={{service/intention-permissions item}}
   id="{{item.Namespace}}{{item.Name}}"
 >
@@ -52,5 +52,5 @@
       <TopologyMetrics::Stats @endpoint='downstream-summary-for-service' @service={{@service}} @item={{item.Name}} />
     {{/if}}
   {{/if}}
-</div>
+</a>
 {{/each}}
\ No newline at end of file
diff --git a/ui-v2/app/components/topology-metrics/layout.scss b/ui-v2/app/components/topology-metrics/layout.scss
index ab408af3d..341712754 100644
--- a/ui-v2/app/components/topology-metrics/layout.scss
+++ b/ui-v2/app/components/topology-metrics/layout.scss
@@ -53,8 +53,9 @@
 }
 #upstream-container .card,
 #downstream-container .card {
-  display: flex;
-  flex-direction: column;
+  display: block;
+  color: $gray-700;
+  overflow: hidden;
   p {
     padding: 12px 12px 0 12px;
     font-size: 16px;
diff --git a/ui-v2/app/components/topology-metrics/stats/index.scss b/ui-v2/app/components/topology-metrics/stats/index.scss
index 17277802a..e2bdf6702 100644
--- a/ui-v2/app/components/topology-metrics/stats/index.scss
+++ b/ui-v2/app/components/topology-metrics/stats/index.scss
@@ -5,8 +5,8 @@
   justify-content: space-between;
   align-items: stretch;
   width: 100%;
-  overflow: hidden;
   height: 46px;
+  overflow: hidden;
   dl {
     display:flex;
     margin-bottom: 50px; // pushes wrapped metrics well out of the bounding box to hide them.