Add an Endpoints view to the web dashboard by rmars · Pull Request #2275 · linkerd/linkerd2

rmars · 2019-02-13T02:15:35Z

In #2195 we introduced linkerd endpoints on the CLI. I would like similar information to be on the web.

This PR adds an api endpoint at /api/endpoints, and introduces a new page with a table that is the same as the CLI table, available at /endpoints but currently not linked in the nav.

siggy

awesome! a couple tioli comments but good to go! 🚢 👍

siggy · 2019-02-13T08:03:11Z

web/app/js/components/Endpoints.jsx

+
+export default withREST(
+  withContext(Endpoints),
+  ({api}) => [api.fetchMetrics("/api/endpoints")]


not a huge deal but this is adding a window=1m param on the URL, which is not needed/used by /api/endpoints.

good catch! I think api.fetch is better here

siggy · 2019-02-13T08:10:35Z

web/app/js/components/Endpoints.jsx

+  },
+  {
+    title: "Resource Version",
+    dataIndex: "pod.resourceVersion"


tioli perhaps sorting by resource version could be useful in determining pod age / service discovery staleness?

ohhh that's interesting. I'll add it!

siggy · 2019-02-13T08:12:18Z

web/srv/handlers.go

 	handler struct {
 		render              renderTemplate
-		apiClient           pb.ApiClient
+		apiClient           public.APIClient


grampelberg · 2019-02-13T17:24:54Z

Definitely not a blocker for this PR, but would it be possible to have links for pods/resources/services? Pods and services should link to the detail views and the resource could maybe pull the actual YAML?

rmars · 2019-02-13T23:29:10Z

@grampelberg oh yeah, that's a good idea, we can easily link to the detail views!

siggy

looks great! one nit then 🚢

siggy · 2019-02-14T00:43:36Z

web/app/js/components/Endpoints.jsx

    title: "Resource Version",
-    dataIndex: "pod.resourceVersion"
+    dataIndex: "pod.resourceVersion",
+    sorter: (a, b) => (a.pod.resourceVersion).localeCompare(b.resourceVersion)


are these numbers stored as strings? will this sort numerically?

yeah they are, but maybe I should set numeric: true on the localeCompare so that they are sorted as numbers

dadjeibaah

This looks awesome! Thanks for adding this. What are your thoughts on where this link would reside? Would it be another option in the sidebar? Would it be a link in the Service Mesh page? To me, it feels like this is essentially debug information for the control plane, so it would naturally be somewhere in the Service Mesh page. WDYT?

web/srv/server.go

dadjeibaah · 2019-02-15T19:58:23Z

web/app/js/components/Endpoints.jsx

+      let pods = [];
+      _each(svc.portEndpoints, info => {
+        info.podAddresses.forEach(podAddress => {
+          podAddress.service = svcName;


TIOLI: I think this section here could produce a more "flattened" object. This would forego the need to have nested object traversal in the endpointColumns const.

diff --git a/web/app/js/components/Endpoints.jsx b/web/app/js/components/Endpoints.jsx index 539f8b09..4f16168d 100644 --- a/web/app/js/components/Endpoints.jsx +++ b/web/app/js/components/Endpoints.jsx @@ -21,12 +21,12 @@ const endpointColumns = [ }, { title: "IP", - dataIndex: "pod.podIP" + dataIndex: "ip" }, { title: "Port", - dataIndex: "addr.port", - sorter: (a, b) => numericSort(a.addr.port, b.addr.port) + dataIndex: "port", + sorter: (a, b) => numericSort(a.port, b.port) }, { title: "Pod", @@ -36,8 +36,8 @@ const endpointColumns = [ }, { title: "Resource Version", - dataIndex: "pod.resourceVersion", - sorter: (a, b) => numericSort(a.pod.resourceVersion, b.pod.resourceVersion) + dataIndex: "resourceVersion", + sorter: (a, b) => numericSort(a.resourceVersion, b.resourceVersion) }, { title: "Service", @@ -80,12 +80,18 @@ class Endpoints extends React.Component { let pods = []; _each(svc.portEndpoints, info => { info.podAddresses.forEach(podAddress => { - podAddress.service = svcName; let [podNamespace, podName] = podAddress.pod.name.split("/"); - podAddress.name = podName; - podAddress.namespace = podNamespace; - podAddress.pod.resourceVersion = parseInt(podAddress.pod.resourceVersion, 10); - pods.push(podAddress); + let resourceVersion = parseInt(podAddress.pod.resourceVersion, 10); + let podIP = podAddress.pod.podIP; + let port = podAddress.addr.port; + pods.push({ + service: svcName, + name: podName, + namespace: podNamespace, + resourceVersion: resourceVersion, + ip: podIP, + port: port + }); }); }); return mem.concat(pods); @@ -101,7 +107,7 @@ class Endpoints extends React.Component { tableColumns={endpointColumns} tableClassName="metric-table" defaultOrderBy="namespace" - rowKey={r => r.service + r.pod.name} + rowKey={r => r.service + r.name} padding="dense" /> </React.Fragment>

great point! updated

rmars · 2019-02-19T19:51:01Z

@dadjeibaah Yeah! I think this table could fit in the service mesh page! I think it could also be part of a /debug page, if we have more things to put in that page! I feel like the service mesh page is more "Overviewy" and this is more debug info, but we could also just try this on that page and see how it feels!

grampelberg · 2019-02-19T20:48:21Z

My preference is for a /debug page. The mesh page needs a big revamp for it to be valuable again.

dadjeibaah

This is awesome! Thanks for making these changes! 📦

klingerf

⭐️ New page looks really great!

klingerf · 2019-02-20T22:03:39Z

web/app/js/components/Debug.jsx

+        control-plane&#39;s proxy-api container. Note that this cache of service discovery
+        information is populated on-demand via linkerd-proxy requests. No endpoints
+        will be found  until a linkerd-proxy begins routing
+        requests.


You have two spaces here between "found" and "until". Might as well move "requests" up a line while you're at it.

reindented this section!

klingerf · 2019-02-20T22:12:02Z

web/app/js/components/Debug.jsx

+  {
+    title: "IP",
+    dataIndex: "ip"
+  },


TIOLI, "IP" is the only column that's not sortable. Would it make sense to add a sorter for it? I think it's also totally fine for it to not be sortable, but in that case I'd recommend removing the sorter from the "Port" column, since it feels pretty similar to this column.

klingerf · 2019-02-20T22:12:14Z

web/app/js/components/Debug.jsx

+        {this.banner()}
+        <Typography variant="h6">Endpoints</Typography>
+        <Typography>
+        This table allow you to see Linkerd&#39;s service discovery state. It provides


Typo here: allow => allows

klingerf

⭐️ Great, thanks for updating!

scottcarol

The changes look great - everything worked when I ran it locally!

rmars added 2 commits February 12, 2019 17:28

Add web api handler for endpoints

24baf70

Add Endpoints page to the dashboard

9a5f12a

rmars added the area/web label Feb 13, 2019

rmars self-assigned this Feb 13, 2019

rmars requested review from klingerf, scottcarol and siggy February 13, 2019 02:15

siggy approved these changes Feb 13, 2019

View reviewed changes

rmars added 2 commits February 13, 2019 15:29

Use fetch instead of fetchMetrics, add sorter to resourceVersion

bddec7a

Link to Namespaces and ResourceDetail pages

4b333f9

siggy approved these changes Feb 14, 2019

View reviewed changes

Use a numericSort for resourceVersion

93e1a7b

dadjeibaah reviewed Feb 15, 2019

View reviewed changes

Simplify nesting

24cae0b

rmars added 2 commits February 19, 2019 15:39

Add the endpoints table in a page at /debug, called Debug

9f9cfc5

Fix lint errors 😭

7b656f2

dadjeibaah approved these changes Feb 20, 2019

View reviewed changes

klingerf approved these changes Feb 20, 2019

View reviewed changes

Reindent, fix typo, add sorting

7ba80d7

klingerf approved these changes Feb 21, 2019

View reviewed changes

scottcarol approved these changes Feb 21, 2019

View reviewed changes

rmars merged commit 3e9c7d2 into master Feb 21, 2019

rmars deleted the rmars/endpoints branch February 21, 2019 19:57

Conversation

rmars commented Feb 13, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

siggy left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

grampelberg commented Feb 13, 2019

Uh oh!

rmars commented Feb 13, 2019

Uh oh!

siggy left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dadjeibaah left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rmars commented Feb 19, 2019

Uh oh!

grampelberg commented Feb 19, 2019

Uh oh!

dadjeibaah left a comment

Choose a reason for hiding this comment

Uh oh!

klingerf left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

klingerf left a comment

Choose a reason for hiding this comment

Uh oh!

scottcarol left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

rmars commented Feb 13, 2019 •

edited

Loading