Separated sections to methods for readability

This commit is contained in:
Shay Nehmad 2019-08-19 18:09:05 +03:00
parent 2fa2c04940
commit d52a6eab57
1 changed files with 44 additions and 37 deletions

View File

@ -61,44 +61,10 @@ class ZeroTrustReportPageComponent extends AuthComponent {
if (this.stillLoadingDataFromServer()) {
content = <ReportLoader loading={true}/>;
} else {
const overviewSection = <div id="overview-section">
<h2>Overview</h2>
<Grid fluid={true}>
<Row className="show-grid">
<Col xs={8} sm={8} md={8} lg={8}>
<PillarsOverview pillarsToStatuses={this.state.pillars.pillarsToStatuses} grades={this.state.pillars.grades}/>
</Col>
<Col xs={4} sm={4} md={4} lg={4}>
<MonkeysStillAliveWarning allMonkeysAreDead={this.state.allMonkeysAreDead}/>
<SecurityIssuesGlance issuesFound={this.anyIssuesFound()}/>
<StatusesToPillarsSummary statusesToPillars={this.state.pillars.statusesToPillars} />
</Col>
</Row>
</Grid>
</div>;
const directivesSection = <div id="directives-overview">
<h2>Directives</h2>
{
Object.keys(this.state.directives).map((pillar) =>
<SinglePillarDirectivesStatus
key={pillar}
pillar={pillar}
directivesStatus={this.state.directives[pillar]}
pillarsToStatuses={this.state.pillars.pillarsToStatuses}/>
)
}
</div>;
const findingSection = <div id="findings-overview">
<h2>Findings</h2>
<FindingsTable pillarsToStatuses={this.state.pillars.pillarsToStatuses} findings={this.state.findings}/>
</div>;
content = <div id="MainContentSection">
{overviewSection}
{directivesSection}
{findingSection}
{this.generateOverviewSection()}
{this.generateDirectivesSection()}
{this.generateFindingsSection()}
</div>;
}
@ -119,6 +85,47 @@ class ZeroTrustReportPageComponent extends AuthComponent {
)
}
generateFindingsSection() {
return (<div id="findings-overview">
<h2>Findings</h2>
<FindingsTable pillarsToStatuses={this.state.pillars.pillarsToStatuses} findings={this.state.findings}/>
</div>);
}
generateDirectivesSection() {
return (<div id="directives-overview">
<h2>Directives</h2>
{
Object.keys(this.state.directives).map((pillar) =>
<SinglePillarDirectivesStatus
key={pillar}
pillar={pillar}
directivesStatus={this.state.directives[pillar]}
pillarsToStatuses={this.state.pillars.pillarsToStatuses}/>
)
}
</div>);
}
generateOverviewSection() {
return (<div id="overview-section">
<h2>Overview</h2>
<Grid fluid={true}>
<Row className="show-grid">
<Col xs={8} sm={8} md={8} lg={8}>
<PillarsOverview pillarsToStatuses={this.state.pillars.pillarsToStatuses}
grades={this.state.pillars.grades}/>
</Col>
<Col xs={4} sm={4} md={4} lg={4}>
<MonkeysStillAliveWarning allMonkeysAreDead={this.state.allMonkeysAreDead}/>
<SecurityIssuesGlance issuesFound={this.anyIssuesFound()}/>
<StatusesToPillarsSummary statusesToPillars={this.state.pillars.statusesToPillars}/>
</Col>
</Row>
</Grid>
</div>);
}
stillLoadingDataFromServer() {
return typeof this.state.findings === "undefined" || typeof this.state.pillars === "undefined" || typeof this.state.directives === "undefined";
}