github/weave-scope
1
0
Fork 0
mirror of https://github.com/weaveworks/scope.git synced 2026-03-03 02:00:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Applied a couple of simpler rules

Browse Source
This commit is contained in:
fbarl
2016-12-05 18:35:52 +01:00
committed by Filip Barl
parent 0cb48f6d71
commit e47c3e0973
43 changed files with 212 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
client/.eslintrc
View File

@@ -15,21 +15,14 @@
"react/prop-types": 0,
"import/first": 0,
"import/prefer-default-export": 0,
"import/no-extraneous-dependencies": 0,
"import/no-named-as-default": 0,
"jsx-a11y/no-static-element-interactions": 0,
"jsx-a11y/label-has-for": 0,
"react/jsx-indent": 0,
"react/jsx-filename-extension": 0,
"react/jsx-first-prop-new-line": 0,
"react/jsx-no-target-blank": 0,
"react/no-find-dom-node": 0,
"react/no-string-refs": 0,
"react/self-closing-comp": 0,
"react/forbid-prop-types": 0,
"no-plusplus": 0,
"no-mixed-operators": 0,
"no-restricted-properties": 0,
"no-underscore-dangle": 0,

3
client/app/scripts/charts/edge.js
View File

@@ -17,7 +17,8 @@ class Edge extends React.Component {
const className = classNames('edge', {highlighted, blurred, focused});
return (
<g className={className} onMouseEnter={this.handleMouseEnter}
<g
className={className} onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave} id={id}>
<path d={path} className="shadow" />
<path d={path} className="link" />

11
client/app/scripts/charts/node-container.js
View File

@@ -14,11 +14,12 @@ class NodeContainer extends React.Component {
const other = omit(this.props, 'dx', 'dy');
return (
<Motion style={{
x: spring(dx, animConfig),
y: spring(dy, animConfig),
f: spring(scaleFactor, animConfig)
}}>
<Motion
style={{
x: spring(dx, animConfig),
y: spring(dy, animConfig),
f: spring(scaleFactor, animConfig)
}}>
{interpolated => {
const transform = `translate(${round(interpolated.x, layoutPrecision)},`
+ `${round(interpolated.y, layoutPrecision)})`;

8
client/app/scripts/charts/node-shape-circle.js
View File

@@ -17,8 +17,12 @@ export default function NodeShapeCircle({id, highlighted, size, color, metric})
{highlighted && <circle r={size * 0.7} className="highlighted" />}
<circle r={size * 0.5} className="border" stroke={color} />
<circle r={size * 0.45} className="shadow" />
{hasMetric && <circle r={size * 0.45} className="metric-fill" style={metricStyle}
clipPath={`url(#${clipId})`} />}
{hasMetric && <circle
r={size * 0.45}
className="metric-fill"
style={metricStyle}
clipPath={`url(#${clipId})`}
/>}
{highlighted && hasMetric ?
<text style={{fontSize}}>{formattedValue}</text> :
<circle className="node" r={Math.max(2, (size * 0.125))} />}

3
client/app/scripts/charts/node-shape-cloud.js
View File

@@ -37,8 +37,7 @@ export default function NodeShapeCloud({highlighted, size, color}) {
return (
<g className="shape shape-cloud">
{highlighted &&
<path className="highlighted" {...pathProps(0.7)} />}
{highlighted && <path className="highlighted" {...pathProps(0.7)} />}
<path className="border" stroke={color} {...pathProps(0.5)} />
<path className="shadow" {...pathProps(0.45)} />
<circle className="node" r={Math.max(2, (size * 0.125))} />

10
client/app/scripts/charts/node-shape-heptagon.js
View File

@@ -12,7 +12,7 @@ const spline = line()
function polygon(r, sides) {
const a = (Math.PI * 2) / sides;
const points = [];
for (let i = 0; i < sides; i++) {
for (let i = 0; i < sides; i += 1) {
points.push([r * Math.sin(a * i), -r * Math.cos(a * i)]);
}
return points;
@@ -37,8 +37,12 @@ export default function NodeShapeHeptagon({id, highlighted, size, color, metric}
{highlighted && <path className="highlighted" {...pathProps(0.7)} />}
<path className="border" stroke={color} {...pathProps(0.5)} />
<path className="shadow" {...pathProps(0.45)} />
{hasMetric && <path className="metric-fill" clipPath={`url(#${clipId})`}
style={metricStyle} {...pathProps(0.45)} />}
{hasMetric && <path
className="metric-fill"
clipPath={`url(#${clipId})`}
style={metricStyle}
{...pathProps(0.45)}
/>}
{highlighted && hasMetric ?
<text style={{fontSize}}>{formattedValue}</text> :
<circle className="node" r={Math.max(2, (size * 0.125))} />}

8
client/app/scripts/charts/node-shape-hexagon.js
View File

@@ -53,8 +53,12 @@ export default function NodeShapeHexagon({id, highlighted, size, color, metric})
{highlighted && <path className="highlighted" {...pathProps(0.7)} />}
<path className="border" stroke={color} {...pathProps(0.5)} />
<path className="shadow" {...pathProps(shadowSize)} />
{hasMetric && <path className="metric-fill" style={metricStyle}
clipPath={`url(#${clipId})`} {...pathProps(shadowSize)} />}
{hasMetric && <path
className="metric-fill"
style={metricStyle}
clipPath={`url(#${clipId})`}
{...pathProps(shadowSize)}
/>}
{highlighted && hasMetric ?
<text style={{fontSize}}>
{formattedValue}

7
client/app/scripts/charts/node-shape-square.js
View File

@@ -28,8 +28,11 @@ export default function NodeShapeSquare({
{highlighted && <rect className="highlighted" {...rectProps(0.7)} />}
<rect className="border" stroke={color} {...rectProps(0.5, 0.5)} />
<rect className="shadow" {...rectProps(0.45, 0.39)} />
{hasMetric && <rect className="metric-fill" style={metricStyle}
clipPath={`url(#${clipId})`} {...rectProps(0.45, 0.39)} />}
{hasMetric && <rect
className="metric-fill" style={metricStyle}
clipPath={`url(#${clipId})`}
{...rectProps(0.45, 0.39)}
/>}
{highlighted && hasMetric ?
<text style={{fontSize}}>
{formattedValue}

14
client/app/scripts/charts/node.js
View File

@@ -127,9 +127,12 @@ class Node extends React.Component {
svgLabels(label, subLabel, labelClassName, subLabelClassName, labelOffsetY) :
<foreignObject style={{pointerEvents: 'none'}} x={labelOffsetX} y={labelOffsetY}
<foreignObject
style={{pointerEvents: 'none'}}
x={labelOffsetX} y={labelOffsetY}
width={labelWidth} height="100em">
<div className="node-label-wrapper"
<div
className="node-label-wrapper"
style={{pointerEvents: 'all', fontSize, maxWidth: labelWidth}}
{...mouseEvents}>
<div className={labelClassName}>
@@ -149,8 +152,11 @@ class Node extends React.Component {
{...this.props} />
</g>
{showingNetworks && <NodeNetworksOverlay offset={networkOffset}
size={size} networks={networks} stack={stack} />}
{showingNetworks && <NodeNetworksOverlay
offset={networkOffset}
size={size} networks={networks}
stack={stack}
/>}
</g>
);
}

3
client/app/scripts/charts/nodes-chart.js
View File

@@ -219,7 +219,8 @@ class NodesChart extends React.Component {
const layoutPrecision = getLayoutPrecision(nodes.size);
return (
<div className="nodes-chart">
<svg width="100%" height="100%" id="nodes-chart-canvas"
<svg
width="100%" height="100%" id="nodes-chart-canvas"
className={svgClassNames} onClick={this.handleMouseClick}>
<g transform="translate(24,24) scale(0.25)">
<Logo />

9
client/app/scripts/charts/nodes-layout.js
View File

@@ -249,11 +249,11 @@ function layoutSingleNodes(layout, opts) {
if (singleNodes.has(node.get('id'))) {
if (col === columns) {
col = 0;
row++;
row += 1;
}
singleX = col * (nodesep + nodeWidth) + offsetX;
singleY = row * (ranksep + nodeHeight) + offsetY;
col++;
col += 1;
return node.merge({
x: singleX,
y: singleY
@@ -453,9 +453,10 @@ export function doLayout(immNodes, immEdges, opts) {
const useCache = !options.forceRelayout && cachedLayout && nodeCache && edgeCache;
let layout;
++layoutRuns;
layoutRuns += 1;
if (useCache && !hasUnseenNodes(immNodes, nodeCache)) {
log('skip layout, trivial adjustment', ++layoutRunsTrivial, layoutRuns);
layoutRunsTrivial += 1;
log('skip layout, trivial adjustment', layoutRunsTrivial, layoutRuns);
layout = cloneLayout(cachedLayout, immNodes, immEdges);
// copy old properties, works also if nodes get re-added
layout = copyLayoutProperties(layout, nodeCache, edgeCache);

2
client/app/scripts/components/debug-toolbar.js
View File

@@ -338,7 +338,7 @@ class DebugToolbar extends React.Component {
{LABEL_PREFIXES.map(r => (
<tr key={r}>
{LABEL_PREFIXES.map(c => (
<td key={c} title={`(${r}, ${c})`} style={{backgroundColor: fn(r, c)}}></td>
<td key={c} title={`(${r}, ${c})`} style={{backgroundColor: fn(r, c)}} />
))}
</tr>
))}

7
client/app/scripts/components/details-card.js
View File

@@ -3,8 +3,11 @@ import { connect } from 'react-redux';
import NodeDetails from './node-details';
import EmbeddedTerminal from './embedded-terminal';
import { DETAILS_PANEL_WIDTH as WIDTH, DETAILS_PANEL_OFFSET as OFFSET,
DETAILS_PANEL_MARGINS as MARGINS } from '../constants/styles';
import {
DETAILS_PANEL_WIDTH as WIDTH,
DETAILS_PANEL_OFFSET as OFFSET,
DETAILS_PANEL_MARGINS as MARGINS
} from '../constants/styles';
class DetailsCard extends React.Component {

10
client/app/scripts/components/details.js
View File

@@ -9,10 +9,12 @@ class Details extends React.Component {
// render all details as cards, later cards go on top
return (
<div className="details">
{details.toIndexedSeq().map((obj, index) => <DetailsCard key={obj.id}
index={index} cardCount={details.size}
nodeControlStatus={controlStatus.get(obj.id)} {...obj} />
)}
{details.toIndexedSeq().map((obj, index) => (
<DetailsCard
key={obj.id} index={index} cardCount={details.size}
nodeControlStatus={controlStatus.get(obj.id)} {...obj}
/>
))}
</div>
);
}

6
client/app/scripts/components/dev-tools.js
View File

@@ -4,8 +4,10 @@ import LogMonitor from 'redux-devtools-log-monitor';
import DockMonitor from 'redux-devtools-dock-monitor';
export default createDevTools(
<DockMonitor defaultIsVisible={false}
toggleVisibilityKey="ctrl-h" changePositionKey="ctrl-w">
<DockMonitor
defaultIsVisible={false}
toggleVisibilityKey="ctrl-h"
changePositionKey="ctrl-w">
<LogMonitor />
</DockMonitor>
);

13
client/app/scripts/components/footer.js
View File

@@ -48,7 +48,8 @@ class Footer extends React.Component {
<div className="footer">
<div className="footer-status">
{versionUpdate && <a className="footer-versionupdate"
{versionUpdate && <a
className="footer-versionupdate"
title={versionUpdateTitle} href={versionUpdate.downloadUrl} target="_blank">
Update available: {versionUpdate.version}
</a>}
@@ -67,11 +68,14 @@ class Footer extends React.Component {
{pauseLabel !== '' && <span className="footer-label">{pauseLabel}</span>}
<span className="fa fa-pause" />
</a>
<a className="footer-icon" onClick={this.props.clickForceRelayout}
<a
className="footer-icon"
onClick={this.props.clickForceRelayout}
title={forceRelayoutTitle}>
<span className="fa fa-refresh" />
</a>
<a className="footer-icon" onClick={this.props.clickDownloadGraph}
<a
className="footer-icon" onClick={this.props.clickDownloadGraph}
title="Save canvas as SVG (does not include search highlighting)">
<span className="fa fa-download" />
</a>
@@ -84,8 +88,7 @@ class Footer extends React.Component {
<a className="footer-icon" href="https://gitreports.com/issue/weaveworks/scope" target="_blank" title="Report an issue">
<span className="fa fa-bug" />
</a>
<a className="footer-icon" onClick={this.props.toggleHelp}
title="Show help">
<a className="footer-icon" onClick={this.props.toggleHelp} title="Show help">
<span className="fa fa-question" />
</a>
</div>

2
client/app/scripts/components/help-panel.js
View File

@@ -85,7 +85,7 @@ function renderSearches(searches) {
{searches.map(({term, label}) => (
<div key={term} className="help-panel-search-row">
<div className="help-panel-search-row-term">
<i className="fa fa-search search-label-icon"></i>
<i className="fa fa-search search-label-icon" />
{term}
</div>
<div className="help-panel-search-row-term-label">{label}</div>

41
client/app/scripts/components/logo.js
View File

@@ -6,53 +6,66 @@ export default function Logo() {
<g className="logo">
<path fill="#32324B" d="M114.937,118.165l75.419-67.366c-5.989-4.707-12.71-8.52-19.981-11.211l-55.438,49.52V118.165z" />
<path fill="#32324B" d="M93.265,108.465l-20.431,18.25c1.86,7.57,4.88,14.683,8.87,21.135l11.561-10.326V108.465z" />
<path fill="#00D2FF" d="M155.276,53.074V35.768C151.815,35.27,148.282,35,144.685,35c-3.766,0-7.465,0.286-11.079,0.828v36.604
<path
fill="#00D2FF" d="M155.276,53.074V35.768C151.815,35.27,148.282,35,144.685,35c-3.766,0-7.465,0.286-11.079,0.828v36.604
L155.276,53.074z" />
<path fill="#00D2FF" d="M155.276,154.874V82.133l-21.671,19.357v80.682c3.614,0.543,7.313,0.828,11.079,0.828
<path
fill="#00D2FF" d="M155.276,154.874V82.133l-21.671,19.357v80.682c3.614,0.543,7.313,0.828,11.079,0.828
c4.41,0,8.723-0.407,12.921-1.147l58.033-51.838c1.971-6.664,3.046-13.712,3.046-21.015c0-3.439-0.254-6.817-0.708-10.132
L155.276,154.874z" />
<path fill="#FF4B19" d="M155.276,133.518l58.14-51.933c-2.77-6.938-6.551-13.358-11.175-19.076l-46.965,41.951V133.518z" />
<path fill="#FF4B19" d="M133.605,123.817l-18.668,16.676V41.242c-8.086,3.555-15.409,8.513-21.672,14.567V162.19
<path
fill="#FF4B19" d="M133.605,123.817l-18.668,16.676V41.242c-8.086,3.555-15.409,8.513-21.672,14.567V162.19
c4.885,4.724,10.409,8.787,16.444,12.03l23.896-21.345V123.817z" />
<polygon fill="#32324B" points="325.563,124.099 339.389,72.22 357.955,72.22 337.414,144.377 315.556,144.377 303.311,95.79
<polygon
fill="#32324B" points="325.563,124.099 339.389,72.22 357.955,72.22 337.414,144.377 315.556,144.377 303.311,95.79
291.065,144.377 269.207,144.377 248.666,72.22 267.232,72.22 281.058,124.099 294.752,72.22 311.869,72.22 " />
<path fill="#32324B" d="M426.429,120.676c-2.106,14.352-13.167,24.623-32.128,24.623c-20.146,0-35.025-12.114-35.025-36.605
<path
fill="#32324B" d="M426.429,120.676c-2.106,14.352-13.167,24.623-32.128,24.623c-20.146,0-35.025-12.114-35.025-36.605
c0-24.622,15.406-37.395,35.025-37.395c21.726,0,33.182,15.933,33.182,37.263v3.819h-49.772c0,8.031,3.291,18.17,16.327,18.17
c7.242,0,12.904-3.555,14.353-10.27L426.429,120.676z M408.654,99.608c-0.659-10.008-7.11-13.694-14.484-13.694
c-8.427,0-14.879,5.135-15.801,13.694H408.654z" />
<path fill="#32324B" d="M480.628,97.634v-2.502c0-5.662-2.37-9.351-13.036-9.351c-13.298,0-13.694,7.375-13.694,9.877h-17.117
<path
fill="#32324B" d="M480.628,97.634v-2.502c0-5.662-2.37-9.351-13.036-9.351c-13.298,0-13.694,7.375-13.694,9.877h-17.117
c0-10.666,4.477-24.359,31.338-24.359c25.676,0,30.285,12.771,30.285,23.174v39.766c0,2.897,0.131,5.267,0.395,7.11l0.527,3.028
h-18.172v-7.241c-5.134,5.134-12.245,8.163-22.384,8.163c-14.221,0-25.018-8.296-25.018-22.648c0-16.59,15.67-20.146,21.99-21.199
L480.628,97.634z M480.628,111.195l-6.979,1.054c-3.819,0.658-8.427,1.315-11.192,1.843c-3.029,0.527-5.662,1.186-7.637,2.765
c-1.844,1.449-2.765,3.425-2.765,5.926c0,2.107,0.79,8.69,10.666,8.69c5.793,0,10.928-2.105,13.693-4.872
c3.556-3.555,4.214-8.032,4.214-11.587V111.195z" />
<polygon fill="#32324B" points="549.495,144.377 525.399,144.377 501.698,72.221 521.186,72.221 537.775,127.392 554.499,72.221
<polygon
fill="#32324B" points="549.495,144.377 525.399,144.377 501.698,72.221 521.186,72.221 537.775,127.392 554.499,72.221
573.459,72.221 " />
<path fill="#32324B" d="M641.273,120.676c-2.106,14.352-13.167,24.623-32.128,24.623c-20.146,0-35.025-12.114-35.025-36.605
<path
fill="#32324B" d="M641.273,120.676c-2.106,14.352-13.167,24.623-32.128,24.623c-20.146,0-35.025-12.114-35.025-36.605
c0-24.622,15.406-37.395,35.025-37.395c21.726,0,33.182,15.933,33.182,37.263v3.819h-49.772c0,8.031,3.291,18.17,16.327,18.17
c7.242,0,12.904-3.555,14.354-10.27L641.273,120.676z M623.498,99.608c-0.659-10.008-7.109-13.694-14.483-13.694
c-8.428,0-14.88,5.135-15.802,13.694H623.498z" />
<path fill="#32324B" d="M682.976,80.873c-7.524,0-16.896,2.376-16.896,10.692c0,17.952,46.201,1.452,46.201,30.229
<path
fill="#32324B" d="M682.976,80.873c-7.524,0-16.896,2.376-16.896,10.692c0,17.952,46.201,1.452,46.201,30.229
c0,9.637-5.676,22.309-30.229,22.309c-19.009,0-27.721-9.636-28.249-22.44h11.881c0.264,7.788,5.147,13.332,17.688,13.332
c14.52,0,17.952-6.204,17.952-12.54c0-13.332-24.421-7.788-37.753-15.181c-4.885-2.771-8.316-7.128-8.316-15.048
c0-11.616,10.824-20.461,27.853-20.461c20.989,0,27.193,12.145,27.589,20.196h-11.484
C698.685,83.381,691.556,80.873,682.976,80.873z" />
<path fill="#32324B" d="M756.233,134.994c10.429,0,17.953-5.939,19.009-16.632h10.957c-1.98,17.028-13.597,25.74-29.966,25.74
<path
fill="#32324B" d="M756.233,134.994c10.429,0,17.953-5.939,19.009-16.632h10.957c-1.98,17.028-13.597,25.74-29.966,25.74
c-18.744,0-32.076-12.012-32.076-35.905c0-23.76,13.464-36.433,32.209-36.433c16.104,0,27.721,8.712,29.568,25.213h-10.956
c-1.452-11.353-9.24-16.104-18.877-16.104c-12.012,0-20.856,8.448-20.856,27.324C735.245,127.471,744.485,134.994,756.233,134.994z
" />
<path fill="#32324B" d="M830.418,144.103c-19.141,0-32.341-12.145-32.341-36.169c0-23.893,13.2-36.169,32.341-36.169
<path
fill="#32324B" d="M830.418,144.103c-19.141,0-32.341-12.145-32.341-36.169c0-23.893,13.2-36.169,32.341-36.169
c19.009,0,32.209,12.145,32.209,36.169C862.627,132.091,849.427,144.103,830.418,144.103z M830.418,134.994
c12.145,0,21.12-7.392,21.12-27.061c0-19.536-8.976-27.061-21.12-27.061c-12.276,0-21.253,7.393-21.253,27.061
C809.165,127.603,818.142,134.994,830.418,134.994z" />
<path fill="#32324B" d="M888.629,72.688v10.692c3.96-6.732,12.54-11.616,22.969-11.616c19.009,0,30.757,12.673,30.757,36.169
<path
fill="#32324B" d="M888.629,72.688v10.692c3.96-6.732,12.54-11.616,22.969-11.616c19.009,0,30.757,12.673,30.757,36.169
c0,23.629-12.145,36.169-31.152,36.169c-10.429,0-18.745-4.224-22.573-11.22v35.641h-10.824V72.688H888.629z M910.409,134.994
c12.145,0,20.857-7.392,20.857-27.061c0-19.536-8.713-27.061-20.857-27.061c-12.275,0-21.912,7.393-21.912,27.061
C888.497,127.603,898.134,134.994,910.409,134.994z" />
<path fill="#32324B" d="M1016.801,119.022c-1.452,12.408-10.032,25.08-30.229,25.08c-18.745,0-32.341-12.804-32.341-36.037
<path
fill="#32324B" d="M1016.801,119.022c-1.452,12.408-10.032,25.08-30.229,25.08c-18.745,0-32.341-12.804-32.341-36.037
c0-21.912,13.464-36.301,32.209-36.301c19.8,0,30.757,14.784,30.757,38.018h-51.878c0.265,13.332,5.809,25.212,21.385,25.212
c11.484,0,18.217-7.128,19.141-16.104L1016.801,119.022z M1005.448,101.201c-1.056-14.916-9.636-20.328-19.272-20.328
c-10.824,0-19.141,7.26-20.46,20.328H1005.448z" />
c-10.824,0-19.141,7.26-20.46,20.328H1005.448z" />
</g>
);
}

4
client/app/scripts/components/matched-results.js
View File

@@ -18,7 +18,9 @@ class MatchedResults extends React.Component {
<span className="matched-results-match-label">
{match.label}:
</span>
<MatchedText text={text} match={match} maxLength={MAX_MATCH_LENGTH}
<MatchedText
text={text} match={match}
maxLength={MAX_MATCH_LENGTH}
truncate={match.truncate} />
</div>
</div>

2
client/app/scripts/components/metric-selector-item.js
View File

@@ -45,7 +45,7 @@ class MetricSelectorItem extends React.Component {
onMouseOver={this.onMouseOver}
onClick={this.onMouseClick}>
{metric.get('label')}
{isPinned && <span className="fa fa-thumb-tack"></span>}
{isPinned && <span className="fa fa-thumb-tack" />}
</div>
);
}

2
client/app/scripts/components/network-selector-item.js
View File

@@ -50,7 +50,7 @@ class NetworkSelectorItem extends React.Component {
onClick={this.onMouseClick}
style={style}>
{network.get('label')}
{isPinned && <span className="fa fa-thumb-tack"></span>}
{isPinned && <span className="fa fa-thumb-tack" />}
</div>
);
}

33
client/app/scripts/components/node-details.js
View File

@@ -20,7 +20,7 @@ function getTruncationText(count) {
+ ` (${count} extra entries not included). We are working to remove this limitation.`;
}
export class NodeDetails extends React.Component {
class NodeDetails extends React.Component {
constructor(props, context) {
super(props, context);
@@ -53,8 +53,10 @@ export class NodeDetails extends React.Component {
return (
<div className="node-details-tools-wrapper">
<div className="node-details-tools">
{showSwitchTopology && <span title={topologyTitle}
className="fa fa-long-arrow-left" onClick={this.handleShowTopologyForNode}>
{showSwitchTopology && <span
title={topologyTitle}
className="fa fa-long-arrow-left"
onClick={this.handleShowTopologyForNode}>
<span>Show in <span>{this.props.topologyId.replace(/-/g, ' ')}</span></span>
</span>}
<span title="Close details" className="fa fa-close" onClick={this.handleClickClose} />
@@ -168,7 +170,8 @@ export class NodeDetails extends React.Component {
</div>
{showControls && <div className="node-details-controls-wrapper" style={styles.controls}>
<NodeDetailsControls nodeId={this.props.nodeId}
<NodeDetailsControls
nodeId={this.props.nodeId}
controls={details.controls}
pending={pending}
error={error} />
@@ -184,18 +187,21 @@ export class NodeDetails extends React.Component {
<NodeDetailsInfo rows={details.metadata} matches={nodeMatches.get('metadata')} />
</div>}
{details.connections && details.connections.map(connections => <div
className="node-details-content-section" key={connections.id}>
<NodeDetailsTable {...connections} nodes={connections.connections}
nodeIdKey="nodeId" />
{details.connections && details.connections.map(connections => (
<div className="node-details-content-section" key={connections.id}>
<NodeDetailsTable
{...connections}
nodes={connections.connections}
nodeIdKey="nodeId"
/>
</div>
)}
))}
{details.children && details.children.map(children => <div
className="node-details-content-section" key={children.topologyId}>
{details.children && details.children.map(children => (
<div className="node-details-content-section" key={children.topologyId}>
<NodeDetailsTable {...children} />
</div>
)}
))}
{details.tables && details.tables.length > 0 && details.tables.map(table => {
if (table.rows.length > 0) {
@@ -208,7 +214,8 @@ export class NodeDetails extends React.Component {
<Warning text={getTruncationText(table.truncationCount)} />
</span>}
</div>
<NodeDetailsLabels rows={table.rows} controls={table.controls}
<NodeDetailsLabels
rows={table.rows} controls={table.controls}
matches={nodeMatches.get('tables')} />
</div>
);

2
client/app/scripts/components/node-details/node-details-controls.js
View File

@@ -21,7 +21,7 @@ export default function NodeDetailsControls({controls, error, nodeId, pending})
{sortBy(controls, 'rank').map(control => <NodeDetailsControlButton
nodeId={nodeId} control={control} pending={pending} key={control.id} />)}
</span>
{controls && <span title="Applying..." className={spinnerClassName}></span>}
{controls && <span title="Applying..." className={spinnerClassName} />}
</div>
);
}

5
client/app/scripts/components/node-details/node-details-health-item.js
View File

@@ -6,9 +6,10 @@ import { formatMetric } from '../../utils/string-utils';
function NodeDetailsHealthItem(props) {
return (
<div className="node-details-health-item">
<div className="node-details-health-item-value">{formatMetric(props.value, props)}</div>
<div className="node-details-health-item-value">{formatMetric(props.value, props)}</div>
<div className="node-details-health-item-sparkline">
<Sparkline data={props.samples} max={props.max} format={props.format}
<Sparkline
data={props.samples} max={props.max} format={props.format}
first={props.first} last={props.last} />
</div>
<div className="node-details-health-item-label">{props.label}</div>

9
client/app/scripts/components/node-details/node-details-health.js
View File

@@ -33,10 +33,13 @@ export default class NodeDetailsHealth extends React.Component {
<div className="node-details-health" style={{flexWrap, justifyContent}}>
<div className="node-details-health-wrapper">
{primeMetrics.map(item => <NodeDetailsHealthItem key={item.id} {...item} />)}
{showOverflow && <NodeDetailsHealthOverflow items={overflowMetrics}
handleClick={this.handleClickMore} />}
{showOverflow && <NodeDetailsHealthOverflow
items={overflowMetrics}
handleClick={this.handleClickMore}
/>}
</div>
<ShowMore handleClick={this.handleClickMore} collection={this.props.metrics}
<ShowMore
handleClick={this.handleClickMore} collection={this.props.metrics}
expanded={this.state.expanded} notShown={notShown} hideNumber />
</div>
);

3
client/app/scripts/components/node-details/node-details-info.js
View File

@@ -54,7 +54,8 @@ export default class NodeDetailsInfo extends React.Component {
</div>
);
})}
<ShowMore handleClick={this.handleClickMore} collection={this.props.rows}
<ShowMore
handleClick={this.handleClickMore} collection={this.props.rows}
expanded={this.state.expanded} notShown={notShown} />
</div>
);

11
client/app/scripts/components/node-details/node-details-labels.js
View File

@@ -50,9 +50,11 @@ export default class NodeDetailsLabels extends React.Component {
return (
<div className="node-details-labels">
{controls && this.renderControls(controls)}
{rows.map(field => (<div className="node-details-labels-field" key={field.id}>
<div className="node-details-labels-field-label truncate" title={field.label}
key={field.id}>
{rows.map(field => (
<div className="node-details-labels-field" key={field.id}>
<div
className="node-details-labels-field-label truncate"
title={field.label} key={field.id}>
{field.label}
</div>
<div className="node-details-labels-field-value truncate" title={field.value}>
@@ -60,7 +62,8 @@ export default class NodeDetailsLabels extends React.Component {
</div>
</div>
))}
<ShowMore handleClick={this.handleLimitClick} collection={this.props.rows}
<ShowMore
handleClick={this.handleLimitClick} collection={this.props.rows}
expanded={expanded} notShown={notShown} />
</div>
);

7
client/app/scripts/components/node-details/node-details-relatives.js
View File

@@ -39,8 +39,11 @@ export default class NodeDetailsRelatives extends React.Component {
key={relative.id}
match={matches.get(relative.id)}
{...relative} />))}
{showLimitAction && <span className="node-details-relatives-more"
onClick={this.handleLimitClick}>{limitActionText}</span>}
{showLimitAction && <span
className="node-details-relatives-more"
onClick={this.handleLimitClick}>
{limitActionText}
</span>}
</div>
);
}

5
client/app/scripts/components/node-details/node-details-table-node-link.js
View File

@@ -23,8 +23,9 @@ class NodeDetailsTableNodeLink extends React.Component {
if (linkable) {
return (
<span className="node-details-table-node-link" title={title}
onClick={this.handleClick}>
<span
className="node-details-table-node-link"
title={title} onClick={this.handleClick}>
{label}
</span>
);

13
client/app/scripts/components/node-details/node-details-table-row.js
View File

@@ -40,7 +40,9 @@ function renderValues(node, columns = [], columnStyles = []) {
if (field.valueType === 'metadata') {
const {value, title} = formatDataType(field);
return (
<td className="node-details-table-node-value truncate" title={title}
<td
className="node-details-table-node-value truncate"
title={title}
style={style}
key={field.id}>
{value}
@@ -49,7 +51,9 @@ function renderValues(node, columns = [], columnStyles = []) {
}
if (field.valueType === 'relatives') {
return (
<td className="node-details-table-node-value truncate" title={field.value}
<td
className="node-details-table-node-value truncate"
title={field.value}
style={style}
key={field.id}>
{<NodeDetailsTableNodeLink linkable nodeId={field.relative.id} {...field.relative} />}
@@ -132,8 +136,9 @@ export default class NodeDetailsTableRow extends React.Component {
onMouseEnter={onMouseEnterRow && this.onMouseEnter}
onMouseLeave={onMouseLeaveRow && this.onMouseLeave}
className={className}>
<td ref={this.storeLabelRef} className="node-details-table-node-label truncate"
style={firstColumnStyle}>
<td
className="node-details-table-node-label truncate"
ref={this.storeLabelRef} style={firstColumnStyle}>
{this.props.renderIdCell(Object.assign(node, {topologyId, nodeId}))}
</td>
{values}

10
client/app/scripts/components/node-details/node-details-table.js
View File

@@ -243,7 +243,8 @@ export default class NodeDetailsTable extends React.Component {
header.label;
return (
<td className={headerClasses.join(' ')} style={style} onClick={onHeaderClick}
<td
className={headerClasses.join(' ')} style={style} onClick={onHeaderClick}
title={header.label} key={header.id}>
{isSortedAsc
&& <span className="node-details-table-header-sorter fa fa-caret-up" />}
@@ -278,14 +279,15 @@ export default class NodeDetailsTable extends React.Component {
const className = classNames('node-details-table-wrapper-wrapper', this.props.className);
return (
<div className={className}
style={this.props.style}>
<div className={className} style={this.props.style}>
<div className="node-details-table-wrapper">
<table className="node-details-table">
<thead>
{this.renderHeaders(sortedBy, sortedDesc)}
</thead>
<tbody style={this.props.tbodyStyle} onMouseEnter={onMouseEnter}
<tbody
style={this.props.tbodyStyle}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}>
{nodes && nodes.map(node => (
<NodeDetailsTableRow

9
client/app/scripts/components/nodes.js
View File

@@ -63,13 +63,8 @@ class Nodes extends React.Component {
{this.renderEmptyTopologyError(topologiesLoaded && nodesLoaded && topologyEmpty)}
{gridMode ?
<NodesGrid {...this.state}
nodeSize="24"
margins={CANVAS_MARGINS}
/> :
<NodesChart {...this.state}
margins={CANVAS_MARGINS}
/>}
<NodesGrid {...this.state} nodeSize="24" margins={CANVAS_MARGINS} /> :
<NodesChart {...this.state} margins={CANVAS_MARGINS} />}
</div>
);
}

11
client/app/scripts/components/search.js
View File

@@ -90,9 +90,9 @@ class Search extends React.Component {
componentDidUpdate() {
if (this.props.searchFocused) {
ReactDOM.findDOMNode(this.refs.queryInput).focus();
ReactDOM.findDOMNode(this.queryInput).focus();
} else if (!this.state.value) {
ReactDOM.findDOMNode(this.refs.queryInput).blur();
ReactDOM.findDOMNode(this.queryInput).blur();
}
}
@@ -121,13 +121,14 @@ class Search extends React.Component {
<div className="search-input">
{showPinnedSearches && pinnedSearches.toIndexedSeq()
.map(query => <SearchItem query={query} key={query} />)}
<input className="search-input-field" type="text" id={inputId}
<input
className="search-input-field" type="text" id={inputId}
value={value} onChange={this.handleChange}
onFocus={this.handleFocus} onBlur={this.handleBlur}
disabled={disabled} ref="queryInput" />
disabled={disabled} ref={(c) => { this.queryInput = c; }} />
</div>
<div className="search-label">
<i className="fa fa-search search-label-icon"></i>
<i className="fa fa-search search-label-icon" />
<label className="search-label-hint" htmlFor={inputId}>
Search
</label>

12
client/app/scripts/components/sparkline.js
View File

@@ -81,10 +81,14 @@ export default class Sparkline extends React.Component {
return (
<div title={title}>
<svg width={this.props.width} height={this.props.height}>
<path className="sparkline" fill="none" stroke={this.props.strokeColor}
strokeWidth={this.props.strokeWidth} ref="path" d={this.line(data)} />
<circle className="sparkcircle" cx={lastX} cy={lastY} fill="#46466a"
fillOpacity="0.6" stroke="none" r={this.props.circleDiameter} />
<path
className="sparkline" fill="none" stroke={this.props.strokeColor}
strokeWidth={this.props.strokeWidth} d={this.line(data)}
/>
<circle
className="sparkcircle" cx={lastX} cy={lastY} fill="#46466a"
fillOpacity="0.6" stroke="none" r={this.props.circleDiameter}
/>
</svg>
</div>
);

5
client/app/scripts/components/terminal.js
View File

@@ -5,12 +5,12 @@ import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import classNames from 'classnames';
import { debounce } from 'lodash';
import Term from 'xterm';
import { clickCloseTerminal } from '../actions/app-actions';
import { getNeutralColor } from '../utils/color-utils';
import { setDocumentTitle } from '../utils/title-utils';
import { getPipeStatus, basePath, doResizeTty } from '../utils/web-api-utils';
import Term from 'xterm';
const wsProto = location.protocol === 'https:' ? 'wss' : 'ws';
const wsUrl = `${wsProto}://${location.host}${basePath(location.pathname)}`;
@@ -313,7 +313,8 @@ class Terminal extends React.Component {
onClick={this.handlePopoutTerminal}>
Pop out
</span>
<span title="Close" className="terminal-header-tools-item-icon fa fa-close"
<span
title="Close" className="terminal-header-tools-item-icon fa fa-close"
onClick={this.handleCloseClick} />
</div>
<span className="terminal-header-title">{this.getTitle()}</span>

3
client/app/scripts/components/topologies.js
View File

@@ -28,7 +28,8 @@ class Topologies extends React.Component {
});
return (
<div className={className} title={title} key={topologyId} rel={topologyId}
<div
className={className} title={title} key={topologyId} rel={topologyId}
onClick={this.onTopologyClick}>
<div className="topologies-sub-item-label">
{subTopology.get('name')}

8
client/app/scripts/contrast-main.js
View File

@@ -1,13 +1,13 @@
require('font-awesome-webpack');
require('../styles/contrast.less');
require('../images/favicon.ico');
import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import configureStore from './stores/configureStore';
require('font-awesome-webpack');
require('../styles/contrast.less');
require('../images/favicon.ico');
const store = configureStore();
function renderApp() {

14
client/app/scripts/main.dev.js
View File

@@ -1,17 +1,17 @@
require('font-awesome-webpack');
require('../styles/main.less');
require('../images/favicon.ico');
import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import configureStore from './stores/configureStore.dev';
import DevTools from './components/dev-tools';
import Immutable from 'immutable';
import installDevTools from 'immutable-devtools';
import configureStore from './stores/configureStore.dev';
import DevTools from './components/dev-tools';
require('font-awesome-webpack');
require('../styles/main.less');
require('../images/favicon.ico');
installDevTools(Immutable);
const store = configureStore();

8
client/app/scripts/main.js
View File

@@ -1,13 +1,13 @@
require('font-awesome-webpack');
require('../styles/main.less');
require('../images/favicon.ico');
import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import configureStore from './stores/configureStore';
require('font-awesome-webpack');
require('../styles/main.less');
require('../images/favicon.ico');
const store = configureStore();
function renderApp() {

6
client/app/scripts/terminal-main.js
View File

@@ -1,12 +1,12 @@
require('../styles/main.less');
require('../images/favicon.ico');
import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import configureStore from './stores/configureStore';
require('../styles/main.less');
require('../images/favicon.ico');
const store = configureStore();
function renderApp() {

2
client/app/scripts/utils/color-utils.js
View File

@@ -17,7 +17,7 @@ const letterRange = endLetterRange - startLetterRange;
export function text2degree(text) {
const input = text.substr(0, 2).toUpperCase();
let num = 0;
for (let i = 0; i < input.length; i++) {
for (let i = 0; i < input.length; i += 1) {
const charCode = Math.max(Math.min(input[i].charCodeAt(), endLetterRange), startLetterRange);
num += Math.pow(letterRange, input.length - i - 1) * (charCode - startLetterRange);
}

3
client/app/scripts/utils/file-utils.js
View File

@@ -55,8 +55,7 @@ function setInlineStyles(svg, target, emptySvgDeclarationComputed) {
// hardcode computed css styles inside svg
const allElements = traverse(svg);
const allTargetElements = traverse(target);
let i = allElements.length;
while (i--) {
for (let i = allElements.length - 1; i >= 0; i -= 1) {
explicitlySetStyle(allElements[i], allTargetElements[i]);
}

4
client/app/scripts/utils/metric-utils.js
View File

@@ -1,9 +1,9 @@
import { includes } from 'lodash';
import { scaleLog } from 'd3-scale';
import { formatMetricSvg } from './string-utils';
import { colors } from './color-utils';
import React from 'react';
import { formatMetricSvg } from './string-utils';
import { colors } from './color-utils';
export function getClipPathDefinition(clipId, size, height,
x = -size * 0.5, y = size * 0.5 - height) {