vogievetsky commented on a change in pull request #8172: Web-console: add
loader to show-json, add status-dialog
URL: https://github.com/apache/incubator-druid/pull/8172#discussion_r307918093
##########
File path: web-console/src/views/home-view/home-view.tsx
##########
@@ -366,136 +393,161 @@ GROUP BY 1`,
);
}
+ renderModalCard(cardOptions: CardModalOptions): JSX.Element {
+ return (
+ <Card
+ className="status-card"
+ interactive
+ onClick={() => this.setState({ showStatusDialog: true })}
+ >
+ <H5>
+ <Icon color="#bfccd5" icon={cardOptions.icon} />
+ {cardOptions.title}
+ </H5>
+ {cardOptions.loading ? (
+ <p>Loading...</p>
+ ) : cardOptions.error ? (
+ `Error: ${cardOptions.error}`
+ ) : (
+ cardOptions.content
+ )}
+ </Card>
+ );
+ }
+
render() {
const state = this.state;
return (
- <div className="home-view app-view">
- {this.renderCard({
- href: UrlBaser.base('/status'),
- icon: IconNames.GRAPH,
- title: 'Status',
- loading: state.statusLoading,
- content: state.status ? `Apache Druid is running version
${state.status.version}` : '',
- error: state.statusError,
- })}
- {this.renderCard({
- href: '#datasources',
- icon: IconNames.MULTI_SELECT,
- title: 'Datasources',
- loading: state.datasourceCountLoading,
- content: pluralIfNeeded(state.datasourceCount, 'datasource'),
- error: state.datasourceCountError,
- })}
- {this.renderCard({
- href: '#segments',
- icon: IconNames.STACKED_CHART,
- title: 'Segments',
- loading: state.segmentCountLoading,
- content: (
- <>
- <p>{pluralIfNeeded(state.segmentCount, 'segment')}</p>
- {Boolean(state.unavailableSegmentCount) && (
- <p>{pluralIfNeeded(state.unavailableSegmentCount, 'unavailable
segment')}</p>
- )}
- </>
- ),
- error: state.datasourceCountError,
- })}
- {this.renderCard({
- href: '#tasks',
- icon: IconNames.LIST_COLUMNS,
- title: 'Supervisors',
- loading: state.supervisorCountLoading,
- content: (
- <>
- {!Boolean(state.runningSupervisorCount +
state.suspendedSupervisorCount) && (
- <p>0 supervisors</p>
- )}
- {Boolean(state.runningSupervisorCount) && (
- <p>{pluralIfNeeded(state.runningSupervisorCount, 'running
supervisor')}</p>
- )}
- {Boolean(state.suspendedSupervisorCount) && (
- <p>{pluralIfNeeded(state.suspendedSupervisorCount, 'suspended
supervisor')}</p>
- )}
- </>
- ),
- error: state.supervisorCountError,
- })}
- {this.renderCard({
- href: '#tasks',
- icon: IconNames.GANTT_CHART,
- title: 'Tasks',
- loading: state.taskCountLoading,
- content: (
- <>
- {Boolean(state.runningTaskCount) && (
- <p>{pluralIfNeeded(state.runningTaskCount, 'running task')}</p>
- )}
- {Boolean(state.pendingTaskCount) && (
- <p>{pluralIfNeeded(state.pendingTaskCount, 'pending task')}</p>
- )}
- {Boolean(state.successTaskCount) && (
- <p>{pluralIfNeeded(state.successTaskCount, 'successful
task')}</p>
- )}
- {Boolean(state.waitingTaskCount) && (
- <p>{pluralIfNeeded(state.waitingTaskCount, 'waiting task')}</p>
- )}
- {Boolean(state.failedTaskCount) && (
- <p>{pluralIfNeeded(state.failedTaskCount, 'failed task')}</p>
- )}
- {!(
- Boolean(state.runningTaskCount) ||
- Boolean(state.pendingTaskCount) ||
- Boolean(state.successTaskCount) ||
- Boolean(state.waitingTaskCount) ||
- Boolean(state.failedTaskCount)
- ) && <p>There are no tasks</p>}
- </>
- ),
- error: state.taskCountError,
- })}
- {this.renderCard({
- href: '#servers',
- icon: IconNames.DATABASE,
- title: 'Servers',
- loading: state.serverCountLoading,
- content: (
- <>
- <p>{`${pluralIfNeeded(state.overlordCount, 'overlord')},
${pluralIfNeeded(
- state.coordinatorCount,
- 'coordinator',
- )}`}</p>
- <p>{`${pluralIfNeeded(state.routerCount, 'router')},
${pluralIfNeeded(
- state.brokerCount,
- 'broker',
- )}`}</p>
- <p>{`${pluralIfNeeded(state.historicalCount, 'historical')},
${pluralIfNeeded(
- state.middleManagerCount,
- 'middle manager',
- )}`}</p>
- {Boolean(state.peonCount) && <p>{pluralIfNeeded(state.peonCount,
'peon')}</p>}
- </>
- ),
- error: state.serverCountError,
- })}
- {this.renderCard({
- href: '#lookups',
- icon: IconNames.PROPERTIES,
- title: 'Lookups',
- loading: state.lookupsCountLoading,
- content: (
- <>
- <p>
- {!state.lookupsUninitialized
- ? pluralIfNeeded(state.lookupsCount, 'lookup')
- : 'Lookups uninitialized'}
- </p>
- </>
- ),
- error: !state.lookupsUninitialized ? state.lookupsCountError : null,
- })}
- </div>
+ <>
+ <div className="home-view app-view">
+ {this.renderModalCard({
+ onClick: () => this.setState({ showStatusDialog: true }),
+ icon: IconNames.GRAPH,
+ title: 'Status',
+ loading: state.statusLoading,
+ content: state.status ? `Apache Druid is running version
${state.status.version}` : '',
+ error: state.statusError,
+ })}
+ {this.renderCard({
+ href: '#datasources',
+ icon: IconNames.MULTI_SELECT,
+ title: 'Datasources',
+ loading: state.datasourceCountLoading,
+ content: pluralIfNeeded(state.datasourceCount, 'datasource'),
+ error: state.datasourceCountError,
+ })}
+ {this.renderCard({
+ href: '#segments',
+ icon: IconNames.STACKED_CHART,
+ title: 'Segments',
+ loading: state.segmentCountLoading,
+ content: (
+ <>
+ <p>{pluralIfNeeded(state.segmentCount, 'segment')}</p>
+ {Boolean(state.unavailableSegmentCount) && (
+ <p>{pluralIfNeeded(state.unavailableSegmentCount,
'unavailable segment')}</p>
+ )}
+ </>
+ ),
+ error: state.datasourceCountError,
+ })}
+ {this.renderCard({
+ href: '#tasks',
+ icon: IconNames.LIST_COLUMNS,
+ title: 'Supervisors',
+ loading: state.supervisorCountLoading,
+ content: (
+ <>
+ {!Boolean(state.runningSupervisorCount +
state.suspendedSupervisorCount) && (
+ <p>0 supervisors</p>
+ )}
+ {Boolean(state.runningSupervisorCount) && (
+ <p>{pluralIfNeeded(state.runningSupervisorCount, 'running
supervisor')}</p>
+ )}
+ {Boolean(state.suspendedSupervisorCount) && (
+ <p>{pluralIfNeeded(state.suspendedSupervisorCount,
'suspended supervisor')}</p>
+ )}
+ </>
+ ),
+ error: state.supervisorCountError,
+ })}
+ {this.renderCard({
+ href: '#tasks',
+ icon: IconNames.GANTT_CHART,
+ title: 'Tasks',
+ loading: state.taskCountLoading,
+ content: (
+ <>
+ {Boolean(state.runningTaskCount) && (
+ <p>{pluralIfNeeded(state.runningTaskCount, 'running
task')}</p>
+ )}
+ {Boolean(state.pendingTaskCount) && (
+ <p>{pluralIfNeeded(state.pendingTaskCount, 'pending
task')}</p>
+ )}
+ {Boolean(state.successTaskCount) && (
+ <p>{pluralIfNeeded(state.successTaskCount, 'successful
task')}</p>
+ )}
+ {Boolean(state.waitingTaskCount) && (
+ <p>{pluralIfNeeded(state.waitingTaskCount, 'waiting
task')}</p>
+ )}
+ {Boolean(state.failedTaskCount) && (
+ <p>{pluralIfNeeded(state.failedTaskCount, 'failed task')}</p>
+ )}
+ {!(
+ Boolean(state.runningTaskCount) ||
+ Boolean(state.pendingTaskCount) ||
+ Boolean(state.successTaskCount) ||
+ Boolean(state.waitingTaskCount) ||
+ Boolean(state.failedTaskCount)
+ ) && <p>There are no tasks</p>}
+ </>
+ ),
+ error: state.taskCountError,
+ })}
+ {this.renderCard({
+ href: '#servers',
+ icon: IconNames.DATABASE,
+ title: 'Servers',
+ loading: state.serverCountLoading,
+ content: (
+ <>
+ <p>{`${pluralIfNeeded(state.overlordCount, 'overlord')},
${pluralIfNeeded(
+ state.coordinatorCount,
+ 'coordinator',
+ )}`}</p>
+ <p>{`${pluralIfNeeded(state.routerCount, 'router')},
${pluralIfNeeded(
+ state.brokerCount,
+ 'broker',
+ )}`}</p>
+ <p>{`${pluralIfNeeded(state.historicalCount, 'historical')},
${pluralIfNeeded(
+ state.middleManagerCount,
+ 'middle manager',
+ )}`}</p>
+ {Boolean(state.peonCount) &&
<p>{pluralIfNeeded(state.peonCount, 'peon')}</p>}
+ </>
+ ),
+ error: state.serverCountError,
+ })}
+ {this.renderCard({
+ href: '#lookups',
+ icon: IconNames.PROPERTIES,
+ title: 'Lookups',
+ loading: state.lookupsCountLoading,
+ content: (
+ <>
+ <p>
+ {!state.lookupsUninitialized
+ ? pluralIfNeeded(state.lookupsCount, 'lookup')
+ : 'Lookups uninitialized'}
+ </p>
+ </>
+ ),
+ error: !state.lookupsUninitialized ? state.lookupsCountError :
null,
+ })}
+ </div>
+ {!state.statusLoading && this.renderStatusDialog()}
Review comment:
I think it is totally cool to put `{!state.statusLoading &&
this.renderStatusDialog()}` in the `div` no need for a wrapper fragment
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
[email protected]
With regards,
Apache Git Services
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
