Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ui: convert all uses of Loading to render prop #3

Closed
wants to merge 1 commit into from
Closed

ui: convert all uses of Loading to render prop #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions pkg/ui/ccl/src/views/clusterviz/containers/map/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,9 +81,8 @@ class ClusterVisualization extends React.Component<ClusterVisualizationProps & R
loading={!this.props.licenseDataExists}
className="loading-image loading-image__spinner-left"
image={spinner}
>
<NodeCanvasContent tiers={tiers} />
</Loading>
render={() => <NodeCanvasContent tiers={tiers} />}
/>
</div>
);
}
Expand Down
19 changes: 10 additions & 9 deletions pkg/ui/ccl/src/views/clusterviz/containers/map/nodeCanvasContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,15 +75,16 @@ class NodeCanvasContainer extends React.Component<NodeCanvasContainerProps & Nod
loading={!this.props.dataExists}
className="loading-image loading-image__spinner-left"
image={spinner}
>
<NodeCanvas
localityTree={currentLocality}
locationTree={this.props.locationTree}
tiers={this.props.tiers}
livenessStatuses={this.props.livenessStatuses}
livenesses={this.props.livenesses}
/>
</Loading>
render={() => (
<NodeCanvas
localityTree={currentLocality}
locationTree={this.props.locationTree}
tiers={this.props.tiers}
livenessStatuses={this.props.livenessStatuses}
livenesses={this.props.livenesses}
/>
)}
/>
);
}
}
Expand Down
15 changes: 8 additions & 7 deletions pkg/ui/src/views/cluster/containers/dataDistribution/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,13 +147,14 @@ class DataDistributionPage extends React.Component<DataDistributionPageProps> {
className="loading-image loading-image__spinner-left"
loading={!this.props.dataDistribution || !this.props.localityTree}
image={spinner}
>
<DataDistribution
localityTree={this.props.localityTree}
dataDistribution={this.props.dataDistribution}
sortedZoneConfigs={this.props.sortedZoneConfigs}
/>
</Loading>
render={() => (
<DataDistribution
localityTree={this.props.localityTree}
dataDistribution={this.props.dataDistribution}
sortedZoneConfigs={this.props.sortedZoneConfigs}
/>
)}
/>
</section>
</div>
);
Expand Down
5 changes: 2 additions & 3 deletions pkg/ui/src/views/cluster/containers/nodeLogs/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,9 +110,8 @@ class Logs extends React.Component<LogProps & RouterState, {}> {
loading={ !this.props.logs.data }
className="loading-image loading-image__spinner-left"
image={ spinner }
>
{ content }
</Loading>
render={() => content}
/>
</section>
</div>
);
Expand Down
13 changes: 8 additions & 5 deletions pkg/ui/src/views/jobs/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,7 +199,8 @@ class JobsTable extends React.Component<JobsTableProps, {}> {
this.props.setShow(selected.value);
}

renderTable(jobs: Job[]) {
renderTable = () => {
const jobs = this.props.jobs && this.props.jobs.length > 0 && this.props.jobs;
if (_.isEmpty(jobs)) {
return <div className="no-results"><h2>No Results</h2></div>;
}
Expand All @@ -218,7 +219,6 @@ class JobsTable extends React.Component<JobsTableProps, {}> {
}

render() {
const data = this.props.jobs && this.props.jobs.length > 0 && this.props.jobs;
return <div className="jobs-page">
<Helmet>
<title>Jobs</title>
Expand Down Expand Up @@ -263,9 +263,12 @@ class JobsTable extends React.Component<JobsTableProps, {}> {
</PageConfigItem>
</PageConfig>
</div>
<Loading loading={_.isNil(this.props.jobs)} className="loading-image loading-image__spinner" image={spinner}>
{ this.renderTable(data) }
</Loading>
<Loading
loading={_.isNil(this.props.jobs)}
className="loading-image loading-image__spinner"
image={spinner}
render={this.renderTable}
/>
</div>;
}
}
Expand Down
5 changes: 2 additions & 3 deletions pkg/ui/src/views/reports/containers/commandQueue/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,9 +110,8 @@ class CommandQueue extends React.Component<CommandQueueProps, {}> {
loading={!this.props.commandQueue || this.props.commandQueue.inFlight}
className="loading-image loading-image__spinner-left"
image={spinner}
>
{this.renderReportBody()}
</Loading>
render={this.renderReportBody}
/>
</div>
);
}
Expand Down
33 changes: 17 additions & 16 deletions pkg/ui/src/views/reports/containers/localities/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,22 +100,23 @@ class Localities extends React.Component<LocalitiesProps, {}> {
loading={ !this.props.localityStatus.data || !this.props.locationStatus.data }
className="loading-image loading-image__spinner-left"
image={ spinner }
>
<section className="section">
<table className="locality-table">
<thead>
<tr>
<th>Localities</th>
<th>Nodes</th>
<th>Location</th>
</tr>
</thead>
<tbody>
{ renderLocalityTree(this.props.locationTree, this.props.localityTree) }
</tbody>
</table>
</section>
</Loading>
render={() => (
<section className="section">
<table className="locality-table">
<thead>
<tr>
<th>Localities</th>
<th>Nodes</th>
<th>Location</th>
</tr>
</thead>
<tbody>
{ renderLocalityTree(this.props.locationTree, this.props.localityTree) }
</tbody>
</table>
</section>
)}
/>
</div>
);
}
Expand Down
13 changes: 7 additions & 6 deletions pkg/ui/src/views/reports/containers/network/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -446,12 +446,13 @@ class Network extends React.Component<NetworkProps, {}> {
loading={!contentAvailable(nodesSummary)}
className="loading-image loading-image__spinner-left loading-image__spinner-left__padded"
image={spinner}
>
<div>
<NodeFilterList nodeIDs={filters.nodeIDs} localityRegex={filters.localityRegex} />
{this.renderContent(nodesSummary, filters)}
</div>
</Loading>
render={() => (
<div>
<NodeFilterList nodeIDs={filters.nodeIDs} localityRegex={filters.localityRegex} />
{this.renderContent(nodesSummary, filters)}
</div>
)}
/>
</div>
);
}
Expand Down
13 changes: 7 additions & 6 deletions pkg/ui/src/views/reports/containers/problemRanges/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,12 +188,13 @@ class ProblemRanges extends React.Component<ProblemRangesProps, {}> {
loading={isLoading(this.props.problemRanges)}
className="loading-image loading-image__spinner-left loading-image__spinner-left__padded"
image={spinner}
>
<div>
{this.renderReportBody()}
<ConnectionsTable problemRanges={this.props.problemRanges} />
</div>
</Loading>
render={() => (
<div>
{this.renderReportBody()}
<ConnectionsTable problemRanges={this.props.problemRanges} />
</div>
)}
/>
</div>
);
}
Expand Down
37 changes: 19 additions & 18 deletions pkg/ui/src/views/reports/containers/range/allocator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,24 +59,25 @@ export default class AllocatorOutput extends React.Component<AllocatorOutputProp
loading={!allocator || allocator.inFlight}
className="loading-image loading-image__spinner-left"
image={spinner}
>
<table className="allocator-table">
<tbody>
<tr className="allocator-table__row allocator-table__row--header">
<th className="allocator-table__cell allocator-table__cell--header">Timestamp</th>
<th className="allocator-table__cell allocator-table__cell--header">Message</th>
</tr>
{
_.map(allocator.data.dry_run.events, (event, key) => (
<tr key={key} className="allocator-table__row">
<td className="allocator-table__cell allocator-table__cell--date">{Print.Timestamp(event.time)}</td>
<td className="allocator-table__cell">{event.message}</td>
</tr>
))
}
</tbody>
</table>
</Loading>
render={() => (
<table className="allocator-table">
<tbody>
<tr className="allocator-table__row allocator-table__row--header">
<th className="allocator-table__cell allocator-table__cell--header">Timestamp</th>
<th className="allocator-table__cell allocator-table__cell--header">Message</th>
</tr>
{
_.map(allocator.data.dry_run.events, (event, key) => (
<tr key={key} className="allocator-table__row">
<td className="allocator-table__cell allocator-table__cell--date">{Print.Timestamp(event.time)}</td>
<td className="allocator-table__cell">{event.message}</td>
</tr>
))
}
</tbody>
</table>
)}
/>
</div>
);
}
Expand Down
63 changes: 32 additions & 31 deletions pkg/ui/src/views/reports/containers/range/connectionsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,37 +31,38 @@ export default function ConnectionsTable(props: ConnectionsTableProps) {
loading={!range || range.inFlight}
className="loading-image loading-image__spinner-left"
image={spinner}
>
<table className="connections-table">
<tbody>
<tr className="connections-table__row connections-table__row--header">
<th className="connections-table__cell connections-table__cell--header">Node</th>
<th className="connections-table__cell connections-table__cell--header">Valid</th>
<th className="connections-table__cell connections-table__cell--header">Replicas</th>
<th className="connections-table__cell connections-table__cell--header">Error</th>
</tr>
{
_.map(ids, id => {
const resp = range.data.responses_by_node_id[id];
const rowClassName = classNames(
"connections-table__row",
{ "connections-table__row--warning": !resp.response || !_.isEmpty(resp.error_message) },
);
return (
<tr key={id} className={rowClassName}>
<td className="connections-table__cell">n{id}</td>
<td className="connections-table__cell">
{resp.response ? "ok" : "error"}
</td>
<td className="connections-table__cell">{resp.infos.length}</td>
<td className="connections-table__cell">{resp.error_message}</td>
</tr>
);
})
}
</tbody>
</table>
</Loading>
render={() => (
<table className="connections-table">
<tbody>
<tr className="connections-table__row connections-table__row--header">
<th className="connections-table__cell connections-table__cell--header">Node</th>
<th className="connections-table__cell connections-table__cell--header">Valid</th>
<th className="connections-table__cell connections-table__cell--header">Replicas</th>
<th className="connections-table__cell connections-table__cell--header">Error</th>
</tr>
{
_.map(ids, id => {
const resp = range.data.responses_by_node_id[id];
const rowClassName = classNames(
"connections-table__row",
{ "connections-table__row--warning": !resp.response || !_.isEmpty(resp.error_message) },
);
return (
<tr key={id} className={rowClassName}>
<td className="connections-table__cell">n{id}</td>
<td className="connections-table__cell">
{resp.response ? "ok" : "error"}
</td>
<td className="connections-table__cell">{resp.infos.length}</td>
<td className="connections-table__cell">{resp.error_message}</td>
</tr>
);
})
}
</tbody>
</table>
)}
/>
</div>
);
}
51 changes: 26 additions & 25 deletions pkg/ui/src/views/reports/containers/range/logTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,32 +103,33 @@ export default class LogTable extends React.Component<LogTableProps, {}> {
loading={!log || log.inFlight}
className="loading-image loading-image__spinner-left"
image={spinner}
>
<table className="log-table">
<tbody>
<tr className="log-table__row log-table__row--header">
<th className="log-table__cell log-table__cell--header">Timestamp</th>
<th className="log-table__cell log-table__cell--header">Store</th>
<th className="log-table__cell log-table__cell--header">Event Type</th>
<th className="log-table__cell log-table__cell--header">Range</th>
<th className="log-table__cell log-table__cell--header">Other Range</th>
<th className="log-table__cell log-table__cell--header">Info</th>
</tr>
{_.map(events, (event, key) => (
<tr key={key} className="log-table__row">
<td className="log-table__cell log-table__cell--date">
{Print.Timestamp(event.event.timestamp)}
</td>
<td className="log-table__cell">s{event.event.store_id}</td>
<td className="log-table__cell">{printLogEventType(event.event.event_type)}</td>
<td className="log-table__cell">{this.renderRangeID(event.event.range_id)}</td>
<td className="log-table__cell">{this.renderRangeID(event.event.other_range_id)}</td>
<td className="log-table__cell">{this.renderLogInfo(event.pretty_info)}</td>
render={() => (
<table className="log-table">
<tbody>
<tr className="log-table__row log-table__row--header">
<th className="log-table__cell log-table__cell--header">Timestamp</th>
<th className="log-table__cell log-table__cell--header">Store</th>
<th className="log-table__cell log-table__cell--header">Event Type</th>
<th className="log-table__cell log-table__cell--header">Range</th>
<th className="log-table__cell log-table__cell--header">Other Range</th>
<th className="log-table__cell log-table__cell--header">Info</th>
</tr>
))}
</tbody>
</table>
</Loading>
{_.map(events, (event, key) => (
<tr key={key} className="log-table__row">
<td className="log-table__cell log-table__cell--date">
{Print.Timestamp(event.event.timestamp)}
</td>
<td className="log-table__cell">s{event.event.store_id}</td>
<td className="log-table__cell">{printLogEventType(event.event.event_type)}</td>
<td className="log-table__cell">{this.renderRangeID(event.event.range_id)}</td>
<td className="log-table__cell">{this.renderRangeID(event.event.other_range_id)}</td>
<td className="log-table__cell">{this.renderLogInfo(event.pretty_info)}</td>
</tr>
))}
</tbody>
</table>
)}
/>
</div>
);
}
Expand Down
13 changes: 7 additions & 6 deletions pkg/ui/src/views/reports/containers/settings/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,12 +87,13 @@ class Settings extends React.Component<SettingsProps, {}> {
loading={!this.props.settings.data}
className="loading-image loading-image__spinner-left loading-image__spinner-left__padded"
image={spinner}
>
<div>
<p>Note that some settings have been redacted for security purposes.</p>
{this.renderTable()}
</div>
</Loading>
render={() => (
<div>
<p>Note that some settings have been redacted for security purposes.</p>
{this.renderTable()}
</div>
)}
/>
</div>
);
}
Expand Down
Loading