Add breadcrumb navigation at the top of linkerd dashboard #1613

dadjeibaah · 2018-09-07T22:57:34Z

This PR adds a breadcrumb style navigation to the Linkerd dashboard. Each "crumb" links to its corresponding page in the UI.

This PR also includes a small UI fix in the sidebar. The select box always seems to revert to the All Namespaces option when ever there is a state change on the react side. The fix ensures that the select box always displays the namespace filter if it is available and revert to All Namespaces when no namespace is selected.

fixes #1464
fixes #1543
fixes #1627

Signed-off-by: Dennis Adjei-Baah dennis@buoyant.io

siggy · 2018-09-07T23:23:43Z

awesome!

following:

DOCKER_TRACE=1 bin/fast-build && bin/linkerd install | kubectl apply -f - && curl https://run.linkerd.io/emojivoto.yml | bin/linkerd inject - | kubectl apply -f -

... then...

bin/linkerd dashboard

i get some breadcrumbs...

... if i click on the last breadcrumb, Service mesh, i get...

dadjeibaah · 2018-09-07T23:27:59Z

Oh that's right I forgot about the Kubernetes proxy URL. Thanks for checking that. I will get that fixed.

rmars

😻 this looks really cool. I like the navigation that this provides!

I think we need more visual distinction between the top bar and the sidebar, otherwise the page feels un-symmetric.
I also think we should make the header bigger and bolder, more like the page title, kind of like how it is in the mocks. I think this should be doable!
Also echoing Siggy's comment, we'll need to test that this works with the path prefix.

web/app/js/components/Sidebar.jsx

rmars · 2018-09-07T23:16:02Z

web/app/css/breadcrumb-header.css

@@ -0,0 +1,17 @@
+@import 'styles.css';
+
+.ant-layout-header {


some visual feedback:
I think this would look more like a part of the header if it were 84px tall ( same height as the linkerd logo container).

rmars · 2018-09-07T23:18:57Z

web/app/css/breadcrumb-header.css

+@import 'styles.css';
+
+.ant-layout-header {
+  background-color: var(--header-black);


opinion: I think it would look less weird if the header colour here and the sidebar were different. Like maybe a gray or green for this part? The mocks use #26e99d which I think doesn't look too bad. (Though it would be really really nice if we could also change our green/reds we use for the status dots to also match this.)

rmars · 2018-09-07T23:22:50Z

web/app/js/components/BreadcrumbHeader.jsx

+
+export default withContext(BreadcrumbHeader);
+
+


nit: extra newline

rmars · 2018-09-07T23:41:07Z

web/app/js/components/BreadcrumbHeader.jsx

+    }
+  }
+
+  renderBreadcrumbSegment(segment, index) {


we have few enough routes that we can get away with a straight up map of routes to title we want to display rather than special casing a bunch of things in this way, e.g.

const routeToCrumbTitle = { "servicemesh": "Service Mesh", "replicationcontroller": "Replication Controller" } let titleToDisplay = routeToCrumbTitle[routeSegment] || _.startCase(routeSegment)

rmars · 2018-09-07T23:44:28Z

web/app/css/breadcrumb-header.css

+  }
+}
+
+.ant-layout-header:last-child {


I think it would be cool if breadcrumbs were super big, like h1 sized, and bold. And then we could remove the page headers from each page!

Something like:

@import 'styles.css'; .ant-layout-header { background-color: #26e99d; height: 84px; z-index: 100; position: fixed; width: 100vw; padding-top: 20px; & span.ant-breadcrumb-link, & span.ant-breadcrumb-separator, & :first-child { color: black; font-size: 24px; font-weight: 700; } }

dadjeibaah · 2018-09-10T17:26:28Z

@rmars, I made the changes you suggested. experimented with reducing the font weight of the breadcrumbs and kept the font relatively large. Let me know if we need to do more experimentation. @siggy fixed the URL issue as well.

siggy

awesome! shipit modulo ci

rmars

niceee! just had a couple more comments

rmars · 2018-09-10T17:56:15Z

web/app/css/breadcrumb-header.css

+  z-index: 100;
+  position: fixed;
+  width: 100vw;
+  padding:16px 50px;


you'll want this padding to be 16px 40px to match that on main-content

rmars · 2018-09-10T18:07:14Z

web/app/css/styles.css

@@ -23,7 +23,7 @@
  --font-weight-regular: 400;
  --font-weight-bold: 700;
  --font-weight-extra-bold: 900;
-  --base-width: 8px;
+  --base-width: 5px;


this is the base unit of all the grid spacing we use in the app... so changing this results in a lot of things in the UI being spaced differently. is there a particular adjustment you wanted to make with this?

This must have been some experiment I was trying to do. I don't think I actually need this. I will revert this back to its old value.

rmars · 2018-09-10T18:27:14Z

web/app/js/components/BreadcrumbHeader.jsx

+    let PrefixedLink = this.api.PrefixedLink;
+    let prefix = this.props.pathPrefix;
+
+    let breadcrumbs = _.isNil(prefix) ?


pathPrefix has a default value of "" so you could just do

let breadcrumbs = this.convertURLToBreadcrumbs(this.props.location.pathname.replace(prefix, ""));

without the isNil check

Oh nice. Thanks!

rmars · 2018-09-10T18:38:18Z

web/app/js/components/util/Utils.js

+  let singular = singularResource(name);
+  // If we end up getting the same resource name after running it through
+  // toShortResourceName, the resource is not in the shortNameLookup.
+  return toShortResourceName(singular) !== singular;


I think return _.has(shortNameLookup, singular) is easier to understand here

I like that much better! I think if we use _.has then we no longer need the comment.

rmars · 2018-09-10T18:39:46Z

web/app/test/BreadCrumbHeaderTest.jsx

@@ -0,0 +1,33 @@
+import Adapter from 'enzyme-adapter-react-16';
+import {Breadcrumb} from 'antd';


spacing nit { Breadcrumb }

rmars · 2018-09-10T18:39:56Z

web/app/test/BreadCrumbHeaderTest.jsx

+import {Breadcrumb} from 'antd';
+import BreadcrumbHeader from '../js/components/BreadcrumbHeader.jsx';
+import { BrowserRouter } from 'react-router-dom';
+import {expect} from 'chai';


similar spacing nit (it's more obvious when we have a mixture of { ... } and {...} :P)

So sorry about these import spacing issues, my editor tries to be nice by removing the spaces. I will see how I can get it to not do this.

rmars · 2018-09-10T18:40:02Z

web/app/test/BreadCrumbHeaderTest.jsx

+import { BrowserRouter } from 'react-router-dom';
+import {expect} from 'chai';
+import React from 'react';
+import Enzyme, {mount} from 'enzyme';


rmars · 2018-09-10T18:47:48Z

web/app/js/components/BreadcrumbHeader.jsx

+    let isMeshResource = isResource(segment);
+
+    if (isMeshResource) {
+      return routeToCrumbTitle[segment] || friendlyTitle(segment).singular;


I think you wanted the || singular to show, for example Namespace > emojivoto rather than Namespaces > emojivoto, but looking at the implementation of friendlyTitle, it assumes the resource you pass it is the singular version... so friendlyTitle("namespaces") results in {singular: "Namespaces", plural: "Namespacess"}....

It's also kind of complicated because if you're on the Namespaces list page you do want it to say Namespaces rather than the singular Namespace.
This could be solved by not trying to get the singular resource name if there is only one item in breadcrumbs, and otherwise looking up the singular version.
It could also be solved by adding a check to friendlyTitle that the resource is always singular (and modifying it if it's not).

Signed-off-by: Dennis Adjei-Baah <dennis@buoyant.io>

rmars

Nice colour choices! Had a few small comments, but after that, should be good to go!

rmars · 2018-09-12T00:26:59Z

web/app/css/sidebar.css

-    height: 80px;
-    padding: calc(var(--base-width)*2) 14px;
+    height: 60px;
+    padding: calc((var(--base-width) - 3)*2) 14px;


can we make this padding: var(--base-width) 14px;?

rmars · 2018-09-12T00:27:58Z

web/app/css/styles.css

@@ -12,9 +12,9 @@
  --coldgrey: #c9c9c9;
  --neutralgrey: #828282;
  --silver: #BDBDBD;
-  --green: #27AE60;
-  --siennared: #EB5757;


can we change the name of siennared to red? While it is a rather arbitrary name, I doubt it matches the original sianna red now anyway :)

rmars · 2018-09-12T00:45:15Z

web/app/js/components/util/Utils.js

-  let singular = _.startCase(resource);
-  if (resource === "replicationcontroller") {
-    singular = _.startCase("replication controller");
+  let singleResource = singularResource(resource);


naming nit, how about naming singleResource resource instead, and calling the function argument inputResource or singularOrPluralResource or something to make its purpose clearer? The fact that it's a single resource doesn't really matter much throughout the rest of the function?

Signed-off-by: Dennis Adjei-Baah <dennis@buoyant.io>

rmars · 2018-09-12T17:22:33Z

web/app/css/sidebar.css

@@ -90,7 +90,7 @@ ul.ant-menu.ant-menu-sub {

  & .sidebar-menu-header {
    height: 60px;
-    padding: calc((var(--base-width) - 3)*2) 14px;
+    padding: calc(var(--base-width)) 14px;


there's no need for the calc here... since we're not doing any calculations withvar(--base-width)... it's doesn't do anything, but this should preferrably be padding: var(--base-width) 14px;

Oops, sorry, I should have picked that out. 😦

This PR is a result of a change request that was missed in PR #1613. This change removes an unnecessary calc() function in the sidebar.css Signed-off-by: Dennis Adjei-Baah <dennis@buoyant.io>

* master: Update CHANGES.md for v18.9.1 release (linkerd#1631) Cleanly shutdown tap stream to data plane proxies (linkerd#1624) Change breadcrumb header to default font in styles.css (linkerd#1633) Improve top table to better cope with high RPS traffic (linkerd#1634) Add small success rate chart to table, misc web tweaks (linkerd#1628) Consolidate the source and destination columns in the Tap and Top tables (linkerd#1620) remove extraneous calc function in sidebar.css (linkerd#1632) Display more helpful websocket errors (linkerd#1626) Add breadcrumb navigation at the top of linkerd dashboard (linkerd#1613) Introduce inject check for known sidecars (linkerd#1619) Bump Prometheus to v2.4.0, Grafana to 5.2.4 (linkerd#1625) Improve performance of tap table by throttling updates (linkerd#1623) Add with-source flag to top (linkerd#1614) Conflicts: web/app/css/styles.css web/app/js/components/ResourceDetail.jsx web/app/js/index.js

dadjeibaah added review reviewable labels Sep 7, 2018

dadjeibaah requested review from rmars and klingerf September 7, 2018 22:57

dadjeibaah self-assigned this Sep 7, 2018

dadjeibaah force-pushed the dad/follow-the-breadcrumbs branch from d6a9368 to 1926668 Compare September 7, 2018 22:58

rmars reviewed Sep 7, 2018

View reviewed changes

siggy approved these changes Sep 10, 2018

View reviewed changes

rmars reviewed Sep 10, 2018

View reviewed changes

dadjeibaah force-pushed the dad/follow-the-breadcrumbs branch from ce2272f to 05921bb Compare September 10, 2018 23:57

rmars mentioned this pull request Sep 11, 2018

Change red/greens used in the web UI #1627

Closed

Dennis Adjei-Baah added 8 commits September 11, 2018 15:38

Add breadcrumb navigation at the top of linkerd dashboard

f4c24a4

Signed-off-by: Dennis Adjei-Baah <dennis@buoyant.io>

add color to breadcrumb header

b0f7570

Signed-off-by: Dennis Adjei-Baah <dennis@buoyant.io>

fix breadcrumb when using linkerd dashboard command

1f53019

Signed-off-by: Dennis Adjei-Baah <dennis@buoyant.io>

address PR feedback

06aa0a6

Signed-off-by: Dennis Adjei-Baah <dennis@buoyant.io>

fix overview title not being capitalized

bb8d03b

Signed-off-by: Dennis Adjei-Baah <dennis@buoyant.io>

fix import formatting

7cf3245

Signed-off-by: Dennis Adjei-Baah <dennis@buoyant.io>

refactor breadcrumb rendering to be much simpler

7cfbe7a

Signed-off-by: Dennis Adjei-Baah <dennis@buoyant.io>

change color scheme to new material design

5995ef0

Signed-off-by: Dennis Adjei-Baah <dennis@buoyant.io>

dadjeibaah force-pushed the dad/follow-the-breadcrumbs branch from 465636b to 5995ef0 Compare September 11, 2018 22:39

small tweaks and code cleanup

cd632af

Signed-off-by: Dennis Adjei-Baah <dennis@buoyant.io>

rmars approved these changes Sep 12, 2018

View reviewed changes

address PR feedback

cc9d6a4

Signed-off-by: Dennis Adjei-Baah <dennis@buoyant.io>

dadjeibaah merged commit b1181e5 into master Sep 12, 2018

dadjeibaah deleted the dad/follow-the-breadcrumbs branch September 12, 2018 16:22

rmars reviewed Sep 12, 2018

View reviewed changes

dadjeibaah mentioned this pull request Sep 12, 2018

Follow up to fix extraneous css style in sidebar css. #1632

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add breadcrumb navigation at the top of linkerd dashboard #1613

Add breadcrumb navigation at the top of linkerd dashboard #1613

dadjeibaah commented Sep 7, 2018 •

edited

Loading

siggy commented Sep 7, 2018 •

edited

Loading

dadjeibaah commented Sep 7, 2018

rmars left a comment

rmars Sep 7, 2018

rmars Sep 7, 2018

rmars Sep 7, 2018

rmars Sep 7, 2018

rmars Sep 7, 2018

dadjeibaah commented Sep 10, 2018

siggy left a comment

rmars left a comment

rmars Sep 10, 2018

rmars Sep 10, 2018

dadjeibaah Sep 10, 2018

rmars Sep 10, 2018

dadjeibaah Sep 10, 2018

rmars Sep 10, 2018

dadjeibaah Sep 10, 2018

rmars Sep 10, 2018

rmars Sep 10, 2018

dadjeibaah Sep 10, 2018

rmars Sep 10, 2018

rmars Sep 10, 2018

rmars left a comment

rmars Sep 12, 2018

rmars Sep 12, 2018

rmars Sep 12, 2018

rmars Sep 12, 2018

dadjeibaah Sep 12, 2018

		@@ -0,0 +1,33 @@
		import Adapter from 'enzyme-adapter-react-16';
		import {Breadcrumb} from 'antd';

Add breadcrumb navigation at the top of linkerd dashboard #1613

Add breadcrumb navigation at the top of linkerd dashboard #1613

Conversation

dadjeibaah commented Sep 7, 2018 • edited Loading

siggy commented Sep 7, 2018 • edited Loading

dadjeibaah commented Sep 7, 2018

rmars left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dadjeibaah commented Sep 10, 2018

siggy left a comment

Choose a reason for hiding this comment

rmars left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rmars left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dadjeibaah commented Sep 7, 2018 •

edited

Loading

siggy commented Sep 7, 2018 •

edited

Loading