clintropolis commented on a change in pull request #7947: Web console: Power up
the data loader init step
URL: https://github.com/apache/incubator-druid/pull/7947#discussion_r297898412
##########
File path: web-console/src/views/load-data-view/load-data-view.tsx
##########
@@ -484,79 +492,234 @@ export class LoadDataView extends
React.PureComponent<LoadDataViewProps, LoadDat
// ==================================================================
- initWith(comboType: IngestionComboType) {
- this.setState({
- spec: getBlankSpec(comboType),
- });
- setTimeout(() => {
- this.updateStep('connect');
- }, 10);
- }
-
- renderIngestionCard(title: string, comboType: IngestionComboType,
requiredModule?: string) {
- const { overlordModules } = this.state;
+ renderIngestionCard(comboType: IngestionComboTypeWithExtra) {
+ const { overlordModules, selectedComboType } = this.state;
if (!overlordModules) return null;
+ const requiredModule = getRequiredModule(comboType);
const goodToGo = !requiredModule ||
overlordModules.includes(requiredModule);
return (
<Card
- className={classNames({ disabled: !goodToGo })}
+ className={classNames({ disabled: !goodToGo, active: selectedComboType
=== comboType })}
interactive
onClick={() => {
- if (goodToGo) {
- this.initWith(comboType);
- } else {
- this.setState({
- overlordModuleNeededMessage: `${title} ingestion requires the
'${requiredModule}' to be loaded.`,
- });
- }
+ this.setState({ selectedComboType: selectedComboType !== comboType ?
comboType : null });
}}
>
- {title}
+ <img
src={UrlBaser.base(`/assets/${getIngestionImage(comboType)}.png`)} />
+ <p>{getIngestionTitle(comboType)}</p>
</Card>
);
}
- renderInitStep() {
- const { goToTask } = this.props;
- const { overlordModuleNeededMessage } = this.state;
+ renderWelcomeStep() {
+ const { spec } = this.state;
return (
<>
- <div className="intro">Please specify where your raw data is
located</div>
-
- <div className="cards">
- {this.renderIngestionCard('Apache Kafka', 'kafka',
'druid-kafka-indexing-service')}
- {this.renderIngestionCard('AWS Kinesis', 'kinesis',
'druid-kinesis-indexing-service')}
- {this.renderIngestionCard('HTTP(s)', 'index:http')}
- {this.renderIngestionCard('AWS S3', 'index:static-s3',
'druid-s3-extensions')}
- {this.renderIngestionCard(
- 'Google Cloud Storage',
- 'index:static-google-blobstore',
- 'druid-google-extensions',
+ <div className="main">
+ {this.renderIngestionCard('kafka')}
+ {this.renderIngestionCard('kinesis')}
+ {this.renderIngestionCard('index:static-s3')}
+ {this.renderIngestionCard('index:static-google-blobstore')}
+ {this.renderIngestionCard('hadoop')}
+ {this.renderIngestionCard('index:http')}
+ {this.renderIngestionCard('index:local')}
+ {/* this.renderIngestionCard('example') */}
+ {this.renderIngestionCard('other')}
+ </div>
+ <div className="control">
+ <Callout
className="intro">{this.renderWelcomeStepMessage()}</Callout>
+ {this.renderWelcomeStepControls()}
+ {!isEmptyIngestionSpec(spec) && (
+ <Button icon={IconNames.RESET} text="Reset spec"
onClick={this.handleResetConfirm} />
)}
- {this.renderIngestionCard('Local disk', 'index:local')}
- <Card interactive onClick={() => goToTask(null, 'supervisor')}>
- Other (streaming)
- </Card>
- <Card interactive onClick={() => goToTask(null, 'task')}>
- Other (batch)
- </Card>
</div>
-
- <Alert
- icon={IconNames.WARNING_SIGN}
- intent={Intent.WARNING}
- isOpen={Boolean(overlordModuleNeededMessage)}
- confirmButtonText="Close"
- onConfirm={() => this.setState({ overlordModuleNeededMessage: null
})}
- >
- <p>{overlordModuleNeededMessage}</p>
- </Alert>
</>
);
}
+ renderWelcomeStepMessage() {
+ const { selectedComboType } = this.state;
+
+ if (!selectedComboType) {
+ return <p>Please specify where your raw data is located</p>;
+ }
+
+ const issue = this.selectedIngestionTypeIssue();
+ if (issue) return issue;
+
+ switch (selectedComboType) {
+ case 'index:http':
+ return (
+ <>
+ <p>Load data accessible through HTTP(s).</p>
+ <p>
+ Data must be in a text format and the HTTP(s) endpoint must be
reachable by every
+ Druid process in the cluster.
+ </p>
+ </>
+ );
+
+ case 'index:local':
+ return (
+ <>
+ <p>
+ <em>Recommended only in single server deployments.</em>
+ </p>
+ <p>Load data directly from a local file.</p>
+ <p>
+ Files must be in a text format and must be accessible to all the
Druid processes in
+ the cluster.
+ </p>
+ </>
+ );
+
+ case 'index:static-s3':
+ return <p>Load text based data from Amazon S3.</p>;
+
+ case 'index:static-google-blobstore':
+ return <p>Load text based data from the Google Blobstore.</p>;
Review comment:
Should we just refer to this 'Google Cloud Storage' since I think that is
likely what people will be using this for?
https://cloud.google.com/appengine/docs/standard/java/blobstore/ suggests
that is the storage people should be using (the blobstore API can read from
google cloud storage buckets, also detailed in the link).
----------------------------------------------------------------
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]
