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

Rename js components to clarify component relationships (#179) 

* Rename components to clarify component relationships
* Rename Deployment to DeploymentDetail to match PodDetail
* Rename Deployments to DeploymentsList to clarify which page this is
* Rename StatPane to ResourceMetricsOverview to be a less generic name
* Rename HealthPane -> ResourceHealthOverview
* Rename StatPaneStat -> ResourceOverviewMetric

Signed-off-by: Risha Mars <mars@buoyant.io>
This commit is contained in:
Risha Mars 2018-01-23 10:05:53 -08:00 committed by GitHub
parent db913e3d18
commit b9f5ad093f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 56 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
web/app/js/components/Deployment.jsx → web/app/js/components/DeploymentDetail.jsx
View File

@ -2,12 +2,12 @@ import _ from 'lodash';
import BarChart from './BarChart.jsx';
import ConduitSpinner from "./ConduitSpinner.jsx";
import ErrorBanner from './ErrorBanner.jsx';
import HealthPane from './HealthPane.jsx';
import { incompleteMeshMessage } from './util/CopyUtils.jsx';
import Metric from './Metric.jsx';
import React from 'react';
import ResourceHealthOverview from './ResourceHealthOverview.jsx';
import ResourceMetricsOverview from './ResourceMetricsOverview.jsx';
import { rowGutter } from './util/Utils.js';
import StatPane from './StatPane.jsx';
import TabbedMetricsTable from './TabbedMetricsTable.jsx';
import UpstreamDownstream from './UpstreamDownstream.jsx';
import { ApiHelpers, urlsForResource } from './util/ApiHelpers.js';
@ -16,7 +16,7 @@ import { emptyMetric, getPodsByDeployment, processRollupMetrics, processTimeseri
import './../../css/deployment.css';
import 'whatwg-fetch';
export default class Deployment extends React.Component {
export default class DeploymentDetail extends React.Component {
constructor(props) {
super(props);
this.api = ApiHelpers(this.props.pathPrefix);
@ -130,24 +130,24 @@ export default class Deployment extends React.Component {
let currentSuccessRate = _.get(_.last(srTs), "value");
return [
<HealthPane
<ResourceHealthOverview
key="deploy-health-pane"
entity={this.state.deploy}
entityType="deployment"
resourceName={this.state.deploy}
resourceType="deployment"
currentSr={currentSuccessRate}
upstreamMetrics={this.state.upstreamMetrics}
downstreamMetrics={this.state.downstreamMetrics}
deploymentAdded={this.state.added} />,
_.isEmpty(this.state.deployTs) ? null :
<StatPane
<ResourceMetricsOverview
key="stat-pane"
lastUpdated={this.state.lastUpdated}
timeseries={this.state.deployTs} />,
this.renderMidsection(),
<UpstreamDownstream
key="deploy-upstream-downstream"
resource="deployment"
entity={this.state.deploy}
resourceType="deployment"
resourceName={this.state.deploy}
lastUpdated={this.state.lastUpdated}
upstreamMetrics={this.state.upstreamMetrics}
downstreamMetrics={this.state.downstreamMetrics}
@ -185,7 +185,7 @@ export default class Deployment extends React.Component {
}
<TabbedMetricsTable
resource="pod"
entity={this.state.deploy}
resourceName={this.state.deploy}
metrics={podTableData}
lastUpdated={this.state.lastUpdated}
pathPrefix={this.props.pathPrefix}

2
web/app/js/components/Deployments.jsx → web/app/js/components/DeploymentsList.jsx
View File

@ -23,7 +23,7 @@ let nodeStats = (description, node) => (
</div>
);
export default class Deployments extends React.Component {
export default class DeploymentsList extends React.Component {
constructor(props) {
super(props);
this.api = ApiHelpers(this.props.pathPrefix);

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

@ -1,9 +1,9 @@
import _ from 'lodash';
import ConduitSpinner from "./ConduitSpinner.jsx";
import ErrorBanner from './ErrorBanner.jsx';
import HealthPane from './HealthPane.jsx';
import React from 'react';
import StatPane from './StatPane.jsx';
import ResourceHealthOverview from './ResourceHealthOverview.jsx';
import ResourceMetricsOverview from './ResourceMetricsOverview.jsx';
import UpstreamDownstream from './UpstreamDownstream.jsx';
import { ApiHelpers, urlsForResource } from './util/ApiHelpers.js';
import { processRollupMetrics, processTimeseriesMetrics } from './util/MetricUtils.js';
@ -99,22 +99,22 @@ export default class PodDetail extends React.Component {
let currentSuccessRate = _.get(_.last(_.get(this.state.podTs, "SUCCESS_RATE", [])), "value");
return [
<HealthPane
<ResourceHealthOverview
key="pod-health-pane"
entity={this.state.pod}
entityType="pod"
resourceName={this.state.pod}
resourceType="pod"
currentSr={currentSuccessRate}
upstreamMetrics={this.state.upstreamMetrics}
downstreamMetrics={this.state.downstreamMetrics} />,
_.isEmpty(this.state.podTs) ? null :
<StatPane
<ResourceMetricsOverview
key="pod-stat-pane"
lastUpdated={this.state.lastUpdated}
timeseries={this.state.podTs} />,
<UpstreamDownstream
key="pod-upstream-downstream"
resource="pod"
entity={this.state.pod}
resourceType="pod"
resourceName={this.state.pod}
lastUpdated={this.state.lastUpdated}
upstreamMetrics={this.state.upstreamMetrics}
downstreamMetrics={this.state.downstreamMetrics}

10
web/app/js/components/HealthPane.jsx → web/app/js/components/ResourceHealthOverview.jsx
View File

@ -16,7 +16,7 @@ const TrafficIndicator = ({healthStat}) => {
};
export default class HealthPane extends React.Component {
export default class ResourceHealthOverview extends React.Component {
getRequestRate(metrics) {
return _.sumBy(metrics, 'requestRate');
}
@ -63,7 +63,7 @@ export default class HealthPane extends React.Component {
return (
<div key="entity-heath" className="entity-health">
<div className="subsection-header">{this.props.entityType} Health</div>
<div className="subsection-header">{this.props.resourceType} Health</div>
<Row>
<Col span={8}>
<Metric title="Inbound request rate" value={stats.inbound.requests} className="float-right" />
@ -76,17 +76,17 @@ export default class HealthPane extends React.Component {
<Row>
<Col span={8}>
<div className="entity-count">&laquo; {_.size(this.props.upstreamMetrics)} {this.props.entityType}s</div>
<div className="entity-count">&laquo; {_.size(this.props.upstreamMetrics)} {this.props.resourceType}s</div>
<div className={`adjacent-health ${stats.inbound.health}`}>
<TrafficIndicator healthStat={stats.inbound.health} />
</div>
</Col>
<Col span={8}>
<div className="entity-count">&nbsp;</div>
<div className={`entity-title ${stats.current.health}`}>{this.props.entity}</div>
<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.entityType}s &raquo;</div>
<div className="entity-count float-right">{_.size(this.props.downstreamMetrics)} {this.props.resourceType}s &raquo;</div>
<div className={`adjacent-health ${stats.outbound.health}`}>
<TrafficIndicator healthStat={stats.outbound.health} />
</div>

8
web/app/js/components/StatPane.jsx → web/app/js/components/ResourceMetricsOverview.jsx
View File

@ -1,24 +1,24 @@
import _ from 'lodash';
import LatencyOverview from './LatencyOverview.jsx';
import React from 'react';
import ResourceOverviewMetric from './ResourceOverviewMetric.jsx';
import { rowGutter } from './util/Utils.js';
import StatPaneStat from './StatPaneStat.jsx';
import { Col, Row } from 'antd';
export default class StatPane extends React.Component {
export default class ResourceMetricsOverview extends React.Component {
render() {
return (
<div>
<Row gutter={rowGutter}>
<Col span={8}>
<StatPaneStat
<ResourceOverviewMetric
name="Current request rate"
metric="REQUEST_RATE"
lastUpdated={this.props.lastUpdated}
timeseries={_.get(this.props.timeseries, "REQUEST_RATE", [])} />
</Col>
<Col span={8}>
<StatPaneStat
<ResourceOverviewMetric
name="Current success rate"
metric="SUCCESS_RATE"
lastUpdated={this.props.lastUpdated}

2
web/app/js/components/StatPaneStat.jsx → web/app/js/components/ResourceOverviewMetric.jsx
View File

@ -3,7 +3,7 @@ import LineGraph from './LineGraph.jsx';
import React from 'react';
import { metricToFormatter, toClassName } from './util/Utils.js';
export default class StatPaneStat extends React.Component {
export default class EntityOverviewMetric extends React.Component {
render() {
let lastDatapoint = _.last(this.props.timeseries) || {};
let metric = _.get(lastDatapoint, "value");

2
web/app/js/components/TabbedMetricsTable.jsx
View File

@ -125,7 +125,7 @@ export default class TabbedMetricsTable extends React.Component {
timeseries: {},
rollup: this.preprocessMetrics(),
groupBy: tsHelper.groupBy,
metricsUrl: tsHelper.url(this.props.entity),
metricsUrl: tsHelper.url(this.props.resourceName),
error: '',
lastUpdated: this.props.lastUpdated,
metricsWindow: "10s",

12
web/app/js/components/UpstreamDownstream.jsx
View File

@ -17,12 +17,12 @@ export default class UpstreamDownstreamTables extends React.Component {
<div className="upstream-downstream-list">
<div className="border-container border-neutral subsection-header">
<div className="border-container-content subsection-header">
Upstream {this.props.resource}s: {numUpstreams}
Upstream {this.props.resourceType}s: {numUpstreams}
</div>
</div>
<TabbedMetricsTable
resource={`upstream_${this.props.resource}`}
entity={this.props.entity}
resource={`upstream_${this.props.resourceType}`}
resourceName={this.props.resourceName}
hideSparklines={numUpstreams > maxTsToFetch}
lastUpdated={this.props.lastUpdated}
metrics={this.props.upstreamMetrics}
@ -35,12 +35,12 @@ export default class UpstreamDownstreamTables extends React.Component {
<div className="upstream-downstream-list">
<div className="border-container border-neutral subsection-header">
<div className="border-container-content subsection-header">
Downstream {this.props.resource}s: {numDownstreams}
Downstream {this.props.resourceType}s: {numDownstreams}
</div>
</div>
<TabbedMetricsTable
resource={`downstream_${this.props.resource}`}
entity={this.props.entity}
resource={`downstream_${this.props.resourceType}`}
resourceName={this.props.resourceName}
hideSparklines={numDownstreams > maxTsToFetch}
lastUpdated={this.props.lastUpdated}
metrics={this.props.downstreamMetrics}

8
web/app/js/index.js
View File

@ -1,5 +1,5 @@
import Deployment from './components/Deployment.jsx';
import Deployments from './components/Deployments.jsx';
import DeploymentDetail from './components/DeploymentDetail.jsx';
import DeploymentsList from './components/DeploymentsList.jsx';
import NoMatch from './components/NoMatch.jsx';
import Paths from './components/Paths.jsx';
import PodDetail from './components/PodDetail.jsx';
@ -32,8 +32,8 @@ ReactDOM.render((
<Switch>
<Redirect exact from={`${pathPrefix}/`} to={`${pathPrefix}/servicemesh`} />
<Route path={`${pathPrefix}/servicemesh`} render={() => <ServiceMesh pathPrefix={pathPrefix} releaseVersion={appData.releaseVersion} />} />
<Route path={`${pathPrefix}/deployments`} render={() => <Deployments pathPrefix={pathPrefix} />} />
<Route path={`${pathPrefix}/deployment`} render={props => <Deployment pathPrefix={pathPrefix} location={props.location} />} />
<Route path={`${pathPrefix}/deployments`} render={() => <DeploymentsList pathPrefix={pathPrefix} />} />
<Route path={`${pathPrefix}/deployment`} render={props => <DeploymentDetail pathPrefix={pathPrefix} location={props.location} />} />
<Route path={`${pathPrefix}/paths`} render={props => <Paths pathPrefix={pathPrefix} location={props.location} />} />
<Route path={`${pathPrefix}/pod`} render={props => <PodDetail pathPrefix={pathPrefix} location={props.location} />} />
<Route path={`${pathPrefix}/routes`} render={() => <Routes pathPrefix={pathPrefix} />} />

8
web/app/test/DeploymentTest.jsx → web/app/test/DeploymentDetailTest.jsx
View File

@ -1,7 +1,7 @@
/* eslint-disable */
import 'raf/polyfill';
import Adapter from 'enzyme-adapter-react-16';
import Deployment from '../js/components/Deployment.jsx';
import DeploymentDetail from '../js/components/DeploymentDetail.jsx';
import Enzyme from 'enzyme';
import { expect } from 'chai';
import { mount } from 'enzyme';
@ -13,11 +13,11 @@ import sinonStubPromise from 'sinon-stub-promise';
Enzyme.configure({ adapter: new Adapter() });
sinonStubPromise(sinon);
describe('Deployment', () => {
describe('DeploymentDetail', () => {
let component, fetchStub;
function withPromise(fn) {
return component.find("Deployment").instance().serverPromise.then(fn);
return component.find("DeploymentDetail").instance().serverPromise.then(fn);
}
beforeEach(() => {
@ -34,7 +34,7 @@ describe('Deployment', () => {
ok: true,
json: () => Promise.resolve({ metrics: [] })
});
component = mount(routerWrap(Deployment));
component = mount(routerWrap(DeploymentDetail));
return withPromise(() => {
expect(component.find("ConduitSpinner")).to.have.length(1);

18
web/app/test/DeploymentsTest.jsx → web/app/test/DeploymentsListTest.jsx
View File

@ -1,5 +1,5 @@
import Adapter from 'enzyme-adapter-react-16';
import Deployments from '../js/components/Deployments.jsx';
import DeploymentsList from '../js/components/DeploymentsList.jsx';
import Enzyme from 'enzyme';
import { expect } from 'chai';
import { mount } from 'enzyme';
@ -11,11 +11,11 @@ import sinonStubPromise from 'sinon-stub-promise';
Enzyme.configure({ adapter: new Adapter() });
sinonStubPromise(sinon);
describe('Deployments', () => {
describe('DeploymentsList', () => {
let component, fetchStub;
function withPromise(fn) {
return component.find("Deployments").instance().serverPromise.then(fn);
return component.find("DeploymentsList").instance().serverPromise.then(fn);
}
beforeEach(() => {
@ -29,10 +29,10 @@ describe('Deployments', () => {
it('renders the spinner before metrics are loaded', () => {
fetchStub.returnsPromise().resolves({ ok: true });
component = mount(routerWrap(Deployments));
component = mount(routerWrap(DeploymentsList));
return withPromise(() => {
expect(component.find("Deployments")).to.have.length(1);
expect(component.find("DeploymentsList")).to.have.length(1);
expect(component.find("ConduitSpinner")).to.have.length(1);
expect(component.find("CallToAction")).to.have.length(0);
});
@ -43,11 +43,11 @@ describe('Deployments', () => {
ok: true,
json: () => Promise.resolve({ metrics: [] })
});
component = mount(routerWrap(Deployments));
component = mount(routerWrap(DeploymentsList));
return withPromise(() => {
component.update();
expect(component.find("Deployments").length).to.equal(1);
expect(component.find("DeploymentsList").length).to.equal(1);
expect(component.find("ConduitSpinner").length).to.equal(0);
expect(component.find("CallToAction").length).to.equal(1);
});
@ -58,11 +58,11 @@ describe('Deployments', () => {
ok: true,
json: () => Promise.resolve({ metrics: [], pods: podFixtures.pods })
});
component = mount(routerWrap(Deployments));
component = mount(routerWrap(DeploymentsList));
return withPromise(() => {
component.update();
expect(component.find("Deployments").length).to.equal(1);
expect(component.find("DeploymentsList").length).to.equal(1);
expect(component.find("ConduitSpinner").length).to.equal(0);
expect(component.find("CallToAction").length).to.equal(0);
expect(component.find("TabbedMetricsTable").length).to.equal(1);

6
web/app/test/StatPaneTest.jsx → web/app/test/ResourceMetricsOverviewTest.jsx
View File

@ -3,14 +3,14 @@ import Enzyme from 'enzyme';
import { expect } from 'chai';
import { mount } from 'enzyme';
import React from 'react';
import StatPane from '../js/components/StatPane.jsx';
import ResourceMetricsOverview from '../js/components/ResourceMetricsOverview.jsx';
Enzyme.configure({ adapter: new Adapter() });
describe('StatPane', () => {
describe('ResourceMetricsOverview', () => {
it('renders the request, success rate and latency components', () => {
let component = mount(
<StatPane
<ResourceMetricsOverview
lastUpdated={Date.now()}
timeseries={[]} />
);