ui: convert all uses of Loading to render prop

Contributes to: cockroachdb#24011
Release note: None

pkg/ui/ccl/src/views/clusterviz/containers/map/index.tsx

@@ -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>
     );
   }

pkg/ui/ccl/src/views/clusterviz/containers/map/nodeCanvasContainer.tsx

@@ -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}
+          />
+        )}
+      />
     );
   }
 }

pkg/ui/src/views/cluster/containers/dataDistribution/index.tsx

@@ -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>
     );

pkg/ui/src/views/cluster/containers/nodeLogs/index.tsx

@@ -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>
     );

pkg/ui/src/views/jobs/index.tsx

@@ -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>;
     }
@@ -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>
@@ -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>;
   }
 }

pkg/ui/src/views/reports/containers/commandQueue/index.tsx

@@ -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>
     );
   }

pkg/ui/src/views/reports/containers/localities/index.tsx

@@ -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>
     );
   }

pkg/ui/src/views/reports/containers/network/index.tsx

@@ -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>
     );
   }

pkg/ui/src/views/reports/containers/problemRanges/index.tsx

@@ -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>
     );
   }

pkg/ui/src/views/reports/containers/range/allocator.tsx

@@ -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>
     );
   }

pkg/ui/src/views/reports/containers/range/connectionsTable.tsx

@@ -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>
   );
 }

pkg/ui/src/views/reports/containers/range/logTable.tsx

@@ -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>
     );
   }

pkg/ui/src/views/reports/containers/settings/index.tsx

@@ -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>
     );
   }