linkerd
/
linkerd2
mirror of https://github.com/linkerd/linkerd2.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Minor UI title renames and other tweaks (#256) 

* ServiceMesh: plot public-api instead of destination, retitle destination and telemetry graphs

* ResourceHealthOverview: Hide Inbound/Outbound request rate if there are 0 deployments

* ResourceMetricOverview: retitle DeploymentDetail/PodDetail sections
This commit is contained in:
Risha Mars 2018-02-05 11:27:31 -08:00 committed by GitHub
parent 704f00ae8f
commit c2da891be7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 26 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/app/js/components/DeploymentDetail.jsx
View File

@ -140,6 +140,7 @@ export default class DeploymentDetail extends React.Component {
_.isEmpty(this.state.deployTs) ? null :
<ResourceMetricsOverview
key="stat-pane"
resourceType="deployment"
lastUpdated={this.state.lastUpdated}
timeseries={this.state.deployTs}
window={this.api.getMetricsWindow()} />,

1
web/app/js/components/PodDetail.jsx
View File

@ -108,6 +108,7 @@ export default class PodDetail extends React.Component {
_.isEmpty(this.state.podTs) ? null :
<ResourceMetricsOverview
key="pod-stat-pane"
resourceType="pod"
lastUpdated={this.state.lastUpdated}
timeseries={this.state.podTs}
window={this.api.getMetricsWindow()} />,

16
web/app/js/components/ResourceHealthOverview.jsx
View File

@ -46,10 +46,12 @@ export default class ResourceHealthOverview extends React.Component {
return {
inbound: {
requests: metricToFormatter["REQUEST_RATE"](this.getRequestRate(this.props.upstreamMetrics)),
numDeploys: _.size(this.props.upstreamMetrics),
health: this.getHealthClassName(inboundSr)
},
outbound: {
requests: metricToFormatter["REQUEST_RATE"](this.getRequestRate(this.props.downstreamMetrics)),
numDeploys: _.size(this.props.downstreamMetrics),
health: this.getHealthClassName(outboundSr)
},
current: {
@ -63,20 +65,24 @@ export default class ResourceHealthOverview extends React.Component {
return (
<div key="entity-heath" className="entity-health">
<div className="subsection-header">{this.props.resourceType} Health</div>
<div className="subsection-header">Upstream/Downstream Traffic</div>
<Row>
<Col span={8}>
<Metric title="Inbound request rate" value={stats.inbound.requests} className="float-right" />
{ stats.inbound.numDeploys === 0 ? null :
<Metric title="Inbound request rate" value={stats.inbound.requests} className="float-right" />
}
</Col>
<Col span={8} />
<Col span={8}>
<Metric title="Outbound request rate" value={stats.outbound.requests} className="float-left" />
{ stats.outbound.numDeploys === 0 ? null :
<Metric title="Outbound request rate" value={stats.outbound.requests} className="float-left" />
}
</Col>
</Row>
<Row>
<Col span={8}>
<div className="entity-count">&laquo; {_.size(this.props.upstreamMetrics)} {this.props.resourceType}s</div>
<div className="entity-count">&laquo; {stats.inbound.numDeploys} {this.props.resourceType}s</div>
<div className={`adjacent-health ${stats.inbound.health}`}>
<TrafficIndicator healthStat={stats.inbound.health} />
</div>
@ -86,7 +92,7 @@ export default class ResourceHealthOverview extends React.Component {
<div className={`entity-title ${stats.current.health}`}>{this.props.resourceName}</div>
</Col>
<Col span={8}>
<div className="entity-count float-right">{_.size(this.props.downstreamMetrics)} {this.props.resourceType}s &raquo;</div>
<div className="entity-count float-right">{stats.outbound.numDeploys} {this.props.resourceType}s &raquo;</div>
<div className={`adjacent-health ${stats.outbound.health}`}>
<TrafficIndicator healthStat={stats.outbound.health} />
</div>

1
web/app/js/components/ResourceMetricsOverview.jsx
View File

@ -9,6 +9,7 @@ export default class ResourceMetricsOverview extends React.Component {
render() {
return (
<div>
<div className="subsection-header">{this.props.resourceType} Health</div>
<Row gutter={rowGutter}>
<Col span={8}>
<ResourceOverviewMetric

19
web/app/js/components/ServiceMesh.jsx
View File

@ -28,13 +28,18 @@ const serviceMeshDetailsColumns = [
];
const componentNames = {
"prometheus": "Prometheus",
"destination": "Controller destination",
"proxy-api": "Controller proxy-api",
"public-api": "Controller public-api",
"tap": "Controller tap",
"telemetry": "Controller telemetry",
"destination": "Controller Destination",
"proxy-api": "Controller Proxy API",
"public-api": "Controller Public API",
"tap": "Controller Tap",
"telemetry": "Controller Telemetry",
"web": "Web UI"
};
const componentGraphTitles = {
"telemetry": "Telemetry requests"
};
const componentDeploys = {
"prometheus": "prometheus",
"destination": "controller",
@ -44,7 +49,7 @@ const componentDeploys = {
"telemetry": "controller",
"web": "web"
};
const componentsToGraph = ["proxy-api", "telemetry", "destination"];
const componentsToGraph = ["proxy-api", "telemetry", "public-api"];
const noData = {
timeseries: { requestRate: [], successRate: [] }
};
@ -195,7 +200,7 @@ export default class ServiceMesh extends React.Component {
_.map(componentsToGraph, meshComponent => {
let data = _.cloneDeep(_.find(this.state.metrics, ["name", meshComponent]) || noData);
data.id = meshComponent;
data.name = componentNames[meshComponent];
data.name = componentGraphTitles[meshComponent] || componentNames[meshComponent];
return (<Col span={8} key={`col-${data.id}`}>
<DeploymentSummary
api={this.api}