-
Notifications
You must be signed in to change notification settings - Fork 712
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
The initial idea was to keep it separate since the unattached links were also to be displayed distinctively from the metrics. With the new design, unattached links are rendered in the same list as metrics with attached links. Therefore, we treat unattached metric links as an empty metric.
- Loading branch information
Showing
23 changed files
with
511 additions
and
283 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
46 changes: 46 additions & 0 deletions
46
client/app/scripts/components/node-details/node-details-table-node-metric-link.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| import React from 'react'; | ||
|
|
||
| import CloudLink from '../cloud-link'; | ||
| import { formatMetric } from '../../utils/string-utils'; | ||
| import { trackMixpanelEvent } from '../../utils/tracking-utils'; | ||
|
|
||
| class NodeDetailsTableNodeMetricLink extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
|
|
||
| this.onClick = this.onClick.bind(this); | ||
| } | ||
|
|
||
| onClick() { | ||
| trackMixpanelEvent('scope.node.metric.click', { topologyId: this.props.topologyId }); | ||
| } | ||
|
|
||
| static dismissEvent(ev) { | ||
| ev.preventDefault(); | ||
| ev.stopPropagation(); | ||
| } | ||
|
|
||
| render() { | ||
| const { url, style, value, valueEmpty } = this.props; | ||
|
|
||
| return ( | ||
| <td | ||
| className="node-details-table-node-metric" | ||
| style={style} | ||
| // Skip onMouseUp event for table row | ||
| onMouseUp={NodeDetailsTableNodeMetricLink.dismissEvent} | ||
| > | ||
| <CloudLink | ||
| alwaysShow | ||
| url={url} | ||
| className={url && 'node-details-table-node-metric-link'} | ||
| onClick={this.onClick} | ||
| > | ||
| {!valueEmpty && formatMetric(value, this.props)} | ||
| </CloudLink> | ||
| </td> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default NodeDetailsTableNodeMetricLink; |
13 changes: 0 additions & 13 deletions
13
client/app/scripts/components/node-details/node-details-table-node-metric.js
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.