Metrics on canvas #1105

foot · 2016-03-03T12:19:37Z

Fixes #1074

Bugs:

Fix metric formatting, either w/ BE support from a metric.format, or a local mapping. It might be good to get metric.label here to keep the metrics consistent w/ the labels in the details panel.
Figure out what metrics are actually available to display by re-scanning [node].metrics onAdd/onUpdate.
Fix text size
Fix 0.0001 displaying a tiny bit of metric-area when it gets rounded away to 0.00
~~Clarify what it means to have an agg node metric. (In metric selector perhaps. avg)~~ -No agg metrics for now.
~~Do we want to show "host cpu" on the processes topo, is that interesting?~~ - No
Fixes metric keyboard sorting order.
Keep selected metric in the url state.

Features

Fade the node border color when a metric is selected to give the metric more emphasis while still (just) keeping the ability to determine a node's rank.
<, >, and q kb shortcuts to cycle metrics, like the top command.
Different color for different metrics for more easily recognising when cycling.
As soon as a metric is non-zero bump up the fill to start at effectively 10% for easier detection of 0/non-zero metrics.
Pin / unpin with by re-clicking metric.
Log scale for load (50) / open-files (100000) as these don't really have a max, though we are considering ulimit for open-files
Update metrics every 3s as the reports come in from the probe. (mocked)
Change colors away from green/red/orange.

paulbellamy · 2016-03-07T16:20:46Z

The highlight on hover with this seems to also highlight all connected nodes...

foot · 2016-03-07T16:25:43Z

Feature!

But will play with that. I guess its not stuff you might necessarily really be interested in, so, distracting.

paulbellamy · 2016-03-07T17:17:56Z

Need to figure out a better way to do the pruning for the websocket diff. Maybe RenderableNode.Diff(other RenderableNode)?

The js seems to go a bit wonky when the websocket updates arrive. There's a metric on every node with the value NaN after..

foot · 2016-03-09T09:24:29Z

Questions

How often do we want the metrics to update? It sounded good to have every changed pushed onto the WS, but thats a lot of stuff perhaps.
How often does the server get a new value for a metric? every 15s or 3s?
We could do something similar to the details panel where we build a buffer up from the BE and stream it out slowly to give the (false) impression of "live" metrics.

paulbellamy · 2016-03-09T09:30:15Z

How often does the server get a new value for a metric? every 15s or 3s?

Everytime there's a new report so every 3s.

foot · 2016-03-09T09:55:20Z

Figure out how we should handle max. at the mo:

cpu: max is 100. (is it 200 w/ 2 cores?)
load/memory/open fds: the max value in the 15 samples the BE stores?

Does it make sense to try and figure out other values for max, e.g.

Total available memory on the system for memory.
ulimit for open files?

paulbellamy · 2016-03-09T10:07:37Z

(is it 200 w/ 2 cores?)

yes

Total available memory on the system for memory. ulimit for open files

Probably, yeah

Edit: but all of that should be encapsulated in the metric's max value.

foot · 2016-03-09T10:18:48Z

Nice! #1149 would be pretty great.

I'm not sure about load.

Take the global max of the topo
Choose a very large value like 100 and use a log scale for the fill/bar.

A log scale could work for open files too as the max is probably something v.large.

paulbellamy · 2016-03-11T16:13:17Z

Upon reflection, I'm not convinced the PruneWithMetrics hack will work for this. Needs revisiting.

paulbellamy · 2016-03-14T15:45:58Z

Figure out how to send the metric summaries in deltas and topologies updates
Only send the last/latest value for metrics in the summaries

foot · 2016-03-31T11:08:56Z

rfr @davkal

Just the JS code in this branch in the end.

client/app/scripts/actions/app-actions.js

+  AppDispatcher.dispatch({
+    type: ActionTypes.PIN_METRIC,
+    metricId,
+    metricType: AppStore.getAvailableCanvasMetricsTypes()[metricId]


client/app/styles/main.less

    /* cloud paths have stroke-width set dynamically */
    &:not(.shape-cloud) .border {
      stroke-width: @node-border-stroke-width;
      fill: @background-color;
+      transition: stroke-opacity 0.5s cubic-bezier(0,0,0.21,1), fill 0.5s cubic-bezier(0,0,0.21,1);


davkal · 2016-04-01T08:12:00Z

All works well and looks good.

My personal nit would be the fill color. I feel it's too strong. Maybe use getNodeColorDark for more consistent coloring and try a lower opacity for a lighter feel. Or add a new getNodeColorLight that corrects lightness in the manner getNodeColorDark, just the towards consistent lightness.

- Adds metric on canvas support for more shapes - More variation from the debug bar.

Locks onto a metric after you mouseout.

- change color to bg - show "x" to remove the metric. - Small debugToolbar enhancements.

- Remove node's grey-inner-border when showing metrics

- Small fixes after the rebase

- Bump non-zero metrics up to start at 10% fill so we can see them.

- Fade out rank color opacity when showing metric

Going w/ the `top` key mappings, needs discussion.

- Bring MoC under new linting rules - adds support for immutable-console-renderer - fixes up metrics actually displaying after bad fixes when rebasing. - Mock all metrics client side for demoing

- Fixes metric keyboard selection order

- introduces "metric type" so we can flick across topos and keep the "type" of metric selected. Cheating and using label as the type atm.

- Fixes metric font-size on selected nodes - Round metric-height value to be the same as rounded displayed value. - No red/green colors in the MoC! They have to much association w/ success/failure

- no rand ids, org code - Fixes tests, no .includes in jest for now - Small comment on moc stuff - Patch up differences after MoC rebase

In meetings etc the term pin is more often used.

- Refactor some things. - Fixes heptagon moc rendering - Experiment w/ duller colors.

foot changed the title ~~Metrics on canvas~~ [WIP] Metrics on canvas Mar 3, 2016

paulbellamy mentioned this pull request Mar 9, 2016

More meaningful maximum value for metrics #1149

Closed

foot force-pushed the metrics-on-canvas branch from 855c08b to 7672ed8 Compare March 10, 2016 11:09

paulbellamy force-pushed the metrics-on-canvas branch from 9fbcb5d to eaed5f1 Compare March 15, 2016 11:34

paulbellamy mentioned this pull request Mar 15, 2016

More complete node summary #1169

Closed

foot force-pushed the metrics-on-canvas branch 4 times, most recently from 824dfb6 to 97d82ca Compare March 21, 2016 18:23

foot force-pushed the metrics-on-canvas branch 2 times, most recently from 335dcb1 to 2863ad3 Compare March 30, 2016 09:24

foot force-pushed the metrics-on-canvas branch 2 times, most recently from 0a6fb4f to 5b53cd8 Compare March 30, 2016 16:41

foot changed the title ~~[WIP] Metrics on canvas~~ Metrics on canvas Mar 31, 2016

foot assigned davkal Mar 31, 2016

davkal reviewed Mar 31, 2016
View reviewed changes

client/app/scripts/actions/app-actions.js

AppDispatcher.dispatch({

type: ActionTypes.PIN_METRIC,

metricId,

metricType: AppStore.getAvailableCanvasMetricsTypes()[metricId]

This comment was marked as abuse.

Sign in to view

davkal reviewed Apr 1, 2016
View reviewed changes

foot force-pushed the metrics-on-canvas branch from 2e273f8 to fb40e54 Compare April 4, 2016 15:48

foot added 19 commits April 4, 2016 17:48

Metrics on canvas!

d31aadf

- Adds metric on canvas support for more shapes - More variation from the debug bar.

Basic hover to select metric

ef1c69e

Simple metric selection clicking!

a104962

Locks onto a metric after you mouseout.

Adds < and > keyboard shortcuts for next/prev metric-on-canvas

cc3d392

Show metrics that are available for displayed nodes.

319fe31

- change color to bg - show "x" to remove the metric. - Small debugToolbar enhancements.

Play w/ metric on canvas color and fix nested radius in squircles

0f21c1b

- Remove node's grey-inner-border when showing metrics

Better labels for metrics-on-canvas, log scale for load and open-files

f8a69fa

- Small fixes after the rebase

Adds metric formatting clientside

eb66800

- Bump non-zero metrics up to start at 10% fill so we can see them.

Metric fill color based on node color

0df2a2b

Different metrics get different fill colors

439b3aa

Fade out rank border color for more emphesis on metric

13a625a

- Fade out rank color opacity when showing metric

Key binding to clear metrics "q"

31ee76a

Going w/ the `top` key mappings, needs discussion.

Return to mock-metrics for now.

1ad7c2c

- Bring MoC under new linting rules - adds support for immutable-console-renderer - fixes up metrics actually displaying after bad fixes when rebasing. - Mock all metrics client side for demoing

No metric selected by default.

f64908a

- Fixes metric keyboard selection order

Save locked metric in the url.

1710db6

- introduces "metric type" so we can flick across topos and keep the "type" of metric selected. Cheating and using label as the type atm.

Fixes a couple of MoC visual bugs

3fdd780

- Fixes metric font-size on selected nodes - Round metric-height value to be the same as rounded displayed value. - No red/green colors in the MoC! They have to much association w/ success/failure

Tidying up MoC

9d968a7

- no rand ids, org code - Fixes tests, no .includes in jest for now - Small comment on moc stuff - Patch up differences after MoC rebase

Terminology change from lock -> pin

432ea92

In meetings etc the term pin is more often used.

Tidy up code, remove small comment

4a840c2

foot force-pushed the metrics-on-canvas branch from fb40e54 to 96789da Compare April 4, 2016 15:49

foot added 2 commits April 4, 2016 21:02

metrics-on-canvas review feedback updates.

4ec8b97

- Refactor some things. - Fixes heptagon moc rendering - Experiment w/ duller colors.

Back to brighter colors for metrics-on-canvas

4ec9750

foot force-pushed the metrics-on-canvas branch from 96789da to 4ec9750 Compare April 4, 2016 19:03

foot merged commit c9b323f into master Apr 4, 2016

foot deleted the metrics-on-canvas branch April 5, 2016 11:19

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Metrics on canvas #1105

Metrics on canvas #1105

foot commented Mar 3, 2016

paulbellamy commented Mar 7, 2016

foot commented Mar 7, 2016

paulbellamy commented Mar 7, 2016

foot commented Mar 9, 2016

paulbellamy commented Mar 9, 2016

foot commented Mar 9, 2016

paulbellamy commented Mar 9, 2016

foot commented Mar 9, 2016

paulbellamy commented Mar 11, 2016

paulbellamy commented Mar 14, 2016

foot commented Mar 31, 2016

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

davkal commented Apr 1, 2016

Metrics on canvas #1105

Metrics on canvas #1105

Conversation

foot commented Mar 3, 2016

paulbellamy commented Mar 7, 2016

foot commented Mar 7, 2016

paulbellamy commented Mar 7, 2016

foot commented Mar 9, 2016

paulbellamy commented Mar 9, 2016

foot commented Mar 9, 2016

paulbellamy commented Mar 9, 2016

foot commented Mar 9, 2016

paulbellamy commented Mar 11, 2016

paulbellamy commented Mar 14, 2016

foot commented Mar 31, 2016

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

davkal commented Apr 1, 2016