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

DeploymentsList: Replace "least healthy" with "most active" deployments (#277) 

* Replace Least Healthy Deployments section with Most Active Deployments (MAD)

* Fix old arguments to ConduitLink
This commit is contained in:
Risha Mars 2018-02-06 11:35:57 -08:00 committed by GitHub
parent 8041d07e4d
commit 185f48b086
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/app/js/components/DeploymentSummary.jsx
View File

@ -8,8 +8,9 @@ export default class DeploymentSummary extends React.Component {
return this.props.data.name;
} else {
return (<this.props.api.ConduitLink
to={`/deployment?deploy=${this.props.data.name}`}
name={this.props.data.name} />);
to={`/deployment?deploy=${this.props.data.name}`}>
{this.props.data.name}
</this.props.api.ConduitLink>);
}
}

22
web/app/js/components/DeploymentsList.jsx
View File

@ -89,20 +89,20 @@ export default class DeploymentsList extends React.Component {
let limitSparklineData = _.size(meshDeployMetrics) > maxTsToFetch;
let resourceInfo = this.api.urlsForResource["deployment"];
let leastHealthyDeployments = this.getLeastHealthyDeployments(meshDeployMetrics);
let mostActiveDeployments = this.getMostActiveDeployments(meshDeployMetrics);
let tsPromises = _.map(leastHealthyDeployments, dep => {
let tsPromises = _.map(mostActiveDeployments, dep => {
let tsPathForDeploy = resourceInfo.url(dep.name).ts;
return this.api.fetchMetrics(tsPathForDeploy);
});
Promise.all(tsPromises)
.then(tsMetrics => {
let leastHealthyTs = _.reduce(tsMetrics, (mem, ea) => {
let mostActiveTs = _.reduce(tsMetrics, (mem, ea) => {
mem = mem.concat(ea.metrics);
return mem;
}, []);
let tsByDeploy = processTimeseriesMetrics(leastHealthyTs, resourceInfo.groupBy);
let tsByDeploy = processTimeseriesMetrics(mostActiveTs, resourceInfo.groupBy);
this.setState({
timeseriesByDeploy: tsByDeploy,
lastUpdated: Date.now(),
@ -122,30 +122,32 @@ export default class DeploymentsList extends React.Component {
});
}
getLeastHealthyDeployments(deployMetrics, limit = 3) {
getMostActiveDeployments(deployMetrics, limit = 3) {
return _(deployMetrics)
.filter('added')
.sortBy('successRate')
.orderBy('requestRate', 'desc')
.take(limit)
.value();
}
renderPageContents() {
let leastHealthyDeployments = this.getLeastHealthyDeployments(this.state.metrics);
let mostActiveDeployments = this.getMostActiveDeployments(this.state.metrics);
return (
<div className="clearfix">
{_.isEmpty(leastHealthyDeployments) ? null : <div className="subsection-header">Least-healthy deployments</div>}
{_.isEmpty(mostActiveDeployments) ? null :
<div className="subsection-header">Most active deployments</div>}
<Row gutter={rowGutter}>
{
_.map(leastHealthyDeployments, deployment => {
_.map(mostActiveDeployments, deployment => {
return (<Col span={8} key={`col-${deployment.name}`}>
<DeploymentSummary
key={deployment.name}
lastUpdated={this.state.lastUpdated}
data={deployment}
api = {this.api}
requestTs={_.get(this.state.timeseriesByDeploy, [deployment.name, "REQUEST_RATE"], [])} />
requestTs={_.get(this.state.timeseriesByDeploy,
[deployment.name, "REQUEST_RATE"], [])} />
</Col>);
})
}