weaveworks · rndstr · Aug 15, 2017 · Jun 29, 2017 · Jun 29, 2017 · Jun 29, 2017
@@ -556,7 +556,7 @@ func captureReporter(rep Reporter, f reporterHandler) CtxHandlerFunc {
 	}
 }
 
-type rendererHandler func(context.Context, render.Renderer, render.Decorator, report.Report, http.ResponseWriter, *http.Request)
+type rendererHandler func(context.Context, render.Renderer, render.Decorator, report.RenderContext, http.ResponseWriter, *http.Request)
 
 func (r *Registry) captureRenderer(rep Reporter, f rendererHandler) CtxHandlerFunc {
 	return func(ctx context.Context, w http.ResponseWriter, req *http.Request) {
@@ -579,6 +579,6 @@ func (r *Registry) captureRenderer(rep Reporter, f rendererHandler) CtxHandlerFu
 			respondWith(w, http.StatusInternalServerError, err)
 			return
 		}
-		f(ctx, renderer, decorator, rpt, w, req)
+		f(ctx, renderer, decorator, RenderContextForReporter(rep, rpt), w, req)
 	}
 }
@@ -183,7 +183,7 @@ func getTestContainerLabelFilterTopologySummary(t *testing.T, exclude bool) (det
 		return nil, err
 	}
 
-	return detailed.Summaries(fixture.Report, renderer.Render(fixture.Report, decorator)), nil
+	return detailed.Summaries(report.RenderContext{Report: fixture.Report}, renderer.Render(fixture.Report, decorator)), nil
 }
 
 func TestAPITopologyAddsKubernetes(t *testing.T) {

@@ -29,27 +29,27 @@ type APINode struct {
 }
 
 // Full topology.
-func handleTopology(ctx context.Context, renderer render.Renderer, decorator render.Decorator, report report.Report, w http.ResponseWriter, r *http.Request) {
+func handleTopology(ctx context.Context, renderer render.Renderer, decorator render.Decorator, rc report.RenderContext, w http.ResponseWriter, r *http.Request) {
 	respondWith(w, http.StatusOK, APITopology{
-		Nodes: detailed.Summaries(report, renderer.Render(report, decorator)),
+		Nodes: detailed.Summaries(rc, renderer.Render(rc.Report, decorator)),
 	})
 }
 
 // Individual nodes.
-func handleNode(ctx context.Context, renderer render.Renderer, decorator render.Decorator, report report.Report, w http.ResponseWriter, r *http.Request) {
+func handleNode(ctx context.Context, renderer render.Renderer, decorator render.Decorator, rc report.RenderContext, w http.ResponseWriter, r *http.Request) {
 	var (
 		vars             = mux.Vars(r)
 		topologyID       = vars["topology"]
 		nodeID           = vars["id"]
 		preciousRenderer = render.PreciousNodeRenderer{PreciousNodeID: nodeID, Renderer: renderer}
-		rendered         = preciousRenderer.Render(report, decorator)
+		rendered         = preciousRenderer.Render(rc.Report, decorator)
 		node, ok         = rendered[nodeID]
 	)
 	if !ok {
 		http.NotFound(w, r)
 		return
 	}
-	respondWith(w, http.StatusOK, APINode{Node: detailed.MakeNode(topologyID, report, rendered, node)})
+	respondWith(w, http.StatusOK, APINode{Node: detailed.MakeNode(topologyID, rc, rendered, node)})
 }
 
 // Websocket for the full topology.
@@ -113,17 +113,17 @@ func handleWebsocket(
 		// might be interested in implementing in the future.
 		timestampDelta := time.Since(channelOpenedAt)
 		reportTimestamp := startReportingAt.Add(timestampDelta)
-		report, err := rep.Report(ctx, reportTimestamp)
+		re, err := rep.Report(ctx, reportTimestamp)
 		if err != nil {
 			log.Errorf("Error generating report: %v", err)
 			return
 		}
-		renderer, decorator, err := topologyRegistry.RendererForTopology(topologyID, r.Form, report)
+		renderer, decorator, err := topologyRegistry.RendererForTopology(topologyID, r.Form, re)
 		if err != nil {
 			log.Errorf("Error generating report: %v", err)
 			return
 		}
-		newTopo := detailed.Summaries(report, renderer.Render(report, decorator))
+		newTopo := detailed.Summaries(RenderContextForReporter(rep, re), renderer.Render(re, decorator))
 		diff := detailed.TopoDiff(previousTopo, newTopo)
 		previousTopo = newTopo
 

@@ -34,6 +34,23 @@ type Reporter interface {
 	UnWait(context.Context, chan struct{})
 }
 
+// WebReporter is a reporter that creates reports whose data is eventually
+// displayed on websites. It carries fields that will be forwarded to the
+// report.RenderContext
+type WebReporter struct {
+	Reporter
+	MetricsGraphURL string
+}
+
+// RenderContextForReporter creates the rendering context for the given reporter.
+func RenderContextForReporter(rep Reporter, r report.Report) report.RenderContext {
+	rc := report.RenderContext{Report: r}
+	if wrep, ok := rep.(WebReporter); ok {
+		rc.MetricsGraphURL = wrep.MetricsGraphURL
+	}
+	return rc
+}
+
 // Adder is something that can accept reports. It's a convenient interface for
 // parts of the app, and several experimental components.  It takes the following
 // arguments:

@@ -23,6 +23,7 @@ function getColumns(nodes) {
     .toList()
     .flatMap((n) => {
       const metrics = (n.get('metrics') || makeList())
+        .filter(m => !m.get('valueEmpty'))
         .map(m => makeMap({ id: m.get('id'), label: m.get('label'), dataType: 'number' }));
       return metrics;
     })
@@ -87,10 +88,6 @@ class NodesGrid extends React.Component {
   }
 
   onClickRow(ev, node) {
-    // TODO: do this better
-    if (ev.target.className === 'node-details-table-node-link') {
-      return;
-    }
     trackMixpanelEvent('scope.node.click', {
       layout: TABLE_VIEW_MODE,
       topologyId: this.props.currentTopology.get('id'),

@@ -17,6 +17,11 @@ class CloudFeature extends React.Component {
       });
     }
 
+    // also show if not in weave cloud?
+    if (this.props.alwaysShow) {
+      return React.cloneElement(React.Children.only(this.props.children));
+    }
+
     return null;
   }
 }

@@ -0,0 +1,72 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import filterInvalidDOMProps from 'filter-invalid-dom-props';
+
+import CloudFeature from './cloud-feature';
+
+/**
+ * CloudLink provides an anchor that allows to set a target
+ * that is comprised of Weave Cloud related pieces.
+ *
+ * We support here relative links with a leading `/` that rewrite
+ * the browser url as well as cloud-related placeholders (:orgId).
+ *
+ * If no `url` is given, only the children is rendered (no anchor).
+ *
+ * If you want to render the content even if not on the cloud, set
+ * the `alwaysShow` property. A location redirect will be made for
+ * clicks instead.
+ */
+const CloudLink = ({ alwaysShow, ...props }) => (
+  <CloudFeature alwaysShow={alwaysShow}>
+    <LinkWrapper {...props} />
+  </CloudFeature>
+    );
+
+class LinkWrapper extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this.handleClick = this.handleClick.bind(this);
+    this.buildHref = this.buildHref.bind(this);
+  }
+
+  handleClick(ev, href) {
+    ev.preventDefault();
+    if (!href) return;
+
+    const { router, onClick } = this.props;
+
+    if (onClick) {
+      onClick();
+    }
+
+    if (router && href[0] === '/') {
+      router.push(href);
+    } else {
+      location.href = href;
+    }
+  }
+
+  buildHref(url) {
+    const { params } = this.props;
+    if (!url || !params || !params.orgId) return url;
+    return url.replace(/:orgid/gi, encodeURIComponent(this.props.params.orgId));
+  }
+
+  render() {
+    const { url, children, ...props } = this.props;
+    if (!url) {
+      return children;
+    }
+
+    const href = this.buildHref(url);
+    return (
+      <a {...filterInvalidDOMProps(props)} href={href} onClick={e => this.handleClick(e, href)}>
+        {children}
+      </a>
+    );
+  }
+}
+
+export default connect()(CloudLink);
@@ -158,7 +158,7 @@ class NodeDetails extends React.Component {
   }
 
   renderDetails() {
-    const { details, nodeControlStatus, nodeMatches = makeMap() } = this.props;
+    const { details, nodeControlStatus, nodeMatches = makeMap(), topologyId } = this.props;
     const showControls = details.controls && details.controls.length > 0;
     const nodeColor = getNodeColorDark(details.rank, details.label, details.pseudo);
     const {error, pending} = nodeControlStatus ? nodeControlStatus.toJS() : {};
@@ -199,7 +199,10 @@ class NodeDetails extends React.Component {
         <div className="node-details-content">
           {details.metrics && <div className="node-details-content-section">
             <div className="node-details-content-section-header">Status</div>
-            <NodeDetailsHealth metrics={details.metrics} />
+            <NodeDetailsHealth
+              metrics={details.metrics}
+              topologyId={topologyId}
+              />
           </div>}
           {details.metadata && <div className="node-details-content-section">
             <div className="node-details-content-section-header">Info</div>

@@ -0,0 +1,29 @@
+import moment from 'moment';
+
+import { appendTime } from '../node-details-health-link-item';
+
+
+describe('NodeDetailsHealthLinkItem', () => {
+  describe('appendTime', () => {
+    const time = moment.unix(1496275200);
+
+    it('returns url for empty url or time', () => {
+      expect(appendTime('', time)).toEqual('');
+      expect(appendTime('foo', null)).toEqual('foo');
+      expect(appendTime('', null)).toEqual('');
+    });
+
+    it('appends as json for cloud link', () => {
+      const url = appendTime('/prom/:orgid/notebook/new/%7B%22cells%22%3A%5B%7B%22queries%22%3A%5B%22go_goroutines%22%5D%7D%5D%7D', time);
+      expect(url).toContain(time.unix());
+
+      const payload = JSON.parse(decodeURIComponent(url.substr(url.indexOf('new/') + 4)));
+      expect(payload.time.queryEnd).toEqual(time.unix());
+    });
+
+    it('appends as GET parameter', () => {
+      expect(appendTime('http://example.test?q=foo', time)).toEqual('http://example.test?q=foo&time=1496275200');
+      expect(appendTime('http://example.test/q=foo/', time)).toEqual('http://example.test/q=foo/?time=1496275200');
+    });
+  });
+});
@@ -4,15 +4,20 @@ import Sparkline from '../sparkline';
 import { formatMetric } from '../../utils/string-utils';
 
 function NodeDetailsHealthItem(props) {
+  const labelStyle = { color: props.labelColor };
   return (
     <div className="node-details-health-item">
-      <div className="node-details-health-item-value">{formatMetric(props.value, props)}</div>
+      {!props.valueEmpty && <div className="node-details-health-item-value" style={labelStyle}>{formatMetric(props.value, props)}</div>}
       <div className="node-details-health-item-sparkline">
         <Sparkline
           data={props.samples} max={props.max} format={props.format}
-          first={props.first} last={props.last} />
+          first={props.first} last={props.last} hoverColor={props.metricColor}
+          hovered={props.hovered}
+        />
+      </div>
+      <div className="node-details-health-item-label" style={labelStyle}>
+        {props.label}
       </div>
-      <div className="node-details-health-item-label">{props.label}</div>
     </div>
   );
 }

@@ -0,0 +1,98 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import NodeDetailsHealthItem from './node-details-health-item';
+import CloudLink from '../cloud-link';
+import { getMetricColor } from '../../utils/metric-utils';
+import { darkenColor } from '../../utils/color-utils';
+import { trackMixpanelEvent } from '../../utils/tracking-utils';
+
+/**
+ * @param {string} url
+ * @param {Moment} time
+ * @returns {string}
+ */
+export function appendTime(url, time) {
+  if (!url || !time) return url;
+
+  // rudimentary check whether we have a cloud link
+  const cloudLinkPathEnd = 'notebook/new/';
+  const pos = url.indexOf(cloudLinkPathEnd);
+  if (pos !== -1) {
+    let payload;
+    const json = decodeURIComponent(url.substr(pos + cloudLinkPathEnd.length));
+    try {
+      payload = JSON.parse(json);
+      payload.time = { queryEnd: time.unix() };
+    } catch (e) {
+      return url;
+    }
+
+    return `${url.substr(0, pos + cloudLinkPathEnd.length)}${encodeURIComponent(JSON.stringify(payload) || '')}`;
+  }
+
+  if (url.indexOf('?') !== -1) {
+    return `${url}&time=${time.unix()}`;
+  }
+  return `${url}?time=${time.unix()}`;
+}
+
+class NodeDetailsHealthLinkItem extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      hovered: false
+    };
+
+    this.onMouseOver = this.onMouseOver.bind(this);
+    this.onMouseOut = this.onMouseOut.bind(this);
+    this.onClick = this.onClick.bind(this);
+  }
+
+  onMouseOver() {
+    this.setState({hovered: true});
+  }
+
+  onMouseOut() {
+    this.setState({hovered: false});
+  }
+
+  onClick() {
+    trackMixpanelEvent('scope.node.metric.click', { topologyId: this.props.topologyId });
+  }
+
+  render() {
+    const { id, url, pausedAt, ...props } = this.props;
+    const metricColor = getMetricColor(id);
+    const labelColor = this.state.hovered && !props.valueEmpty && darkenColor(metricColor);
+
+    const timedUrl = appendTime(url, pausedAt);
+
+    return (
+      <CloudLink
+        alwaysShow
+        className="node-details-health-link-item"
+        onMouseOver={this.onMouseOver}
+        onMouseOut={this.onMouseOut}
+        onClick={this.onClick}
+        url={timedUrl}
+      >
+        <NodeDetailsHealthItem
+          {...props}
+          hovered={this.state.hovered}
+          labelColor={labelColor}
+          metricColor={metricColor}
+        />
+      </CloudLink>
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return {
+    pausedAt: state.get('pausedAt'),
+  };
+}
+
+export default connect(mapStateToProps)(NodeDetailsHealthLinkItem);