Web console: add tile for Azure Event Hubs (via Kafka API) (#10317)

* Add Azure Event Hubs

* better note

* update icon

web-console/src/utils/ingestion-spec.tsx

@@ -70,7 +70,12 @@ export type IngestionComboType =
   | 'index_parallel:hdfs';
 
 // Some extra values that can be selected in the initial screen
-export type IngestionComboTypeWithExtra = IngestionComboType | 'hadoop' | 'example' | 'other';
+export type IngestionComboTypeWithExtra =
+  | IngestionComboType
+  | 'azure-event-hubs'
+  | 'hadoop'
+  | 'example'
+  | 'other';
 
 export function adjustIngestionSpec(spec: IngestionSpec) {
   const tuningConfig = deepGet(spec, 'spec.tuningConfig');
@@ -153,6 +158,9 @@ export function getIngestionTitle(ingestionType: IngestionComboTypeWithExtra): s
     case 'hadoop':
       return 'HDFS';
 
+    case 'azure-event-hubs':
+      return 'Azure Event Hub';
+
     case 'example':
       return 'Example data';
 

web-console/src/views/load-data-view/load-data-view.tsx

@@ -706,6 +706,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
         <div className="main bp3-input">
           {this.renderIngestionCard('kafka')}
           {this.renderIngestionCard('kinesis')}
+          {this.renderIngestionCard('azure-event-hubs')}
           {this.renderIngestionCard('index_parallel:s3')}
           {this.renderIngestionCard('index_parallel:azure')}
           {this.renderIngestionCard('index_parallel:google')}
@@ -800,6 +801,24 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
       case 'kinesis':
         return <p>Load streaming data in real-time from Amazon Kinesis.</p>;
 
+      case 'azure-event-hubs':
+        return (
+          <>
+            <p>Azure Event Hubs provides an Apache Kafka compatible API for consuming data.</p>
+            <p>
+              Data from an Event Hub can be streamed into Druid by enabling the Kafka API on the
+              Namespace.
+            </p>
+            <p>
+              Please see the{' '}
+              <ExternalLink href="https://docs.microsoft.com/en-us/azure/event-hubs/event-hubs-for-kafka-ecosystem-overview">
+                Event Hub documentation
+              </ExternalLink>{' '}
+              for more information.
+            </p>
+          </>
+        );
+
       case 'example':
         if (exampleManifests && exampleManifests.length) {
           return; // Yield to example picker controls
@@ -855,6 +874,45 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
           </FormGroup>
         );
 
+      case 'azure-event-hubs':
+        return (
+          <>
+            <FormGroup>
+              <Callout intent={Intent.WARNING}>
+                Please review and fill in the <Code>consumerProperties</Code> on the next step.
+              </Callout>
+            </FormGroup>
+            <FormGroup>
+              <Button
+                text="Connect via Kafka API"
+                rightIcon={IconNames.ARROW_RIGHT}
+                intent={Intent.PRIMARY}
+                onClick={() => {
+                  // Use the kafka ingestion type but preset some consumerProperties required for Event Hubs
+                  let newSpec = updateIngestionType(spec, 'kafka');
+                  newSpec = deepSet(
+                    newSpec,
+                    'spec.ioConfig.consumerProperties.{security.protocol}',
+                    'SASL_SSL',
+                  );
+                  newSpec = deepSet(
+                    newSpec,
+                    'spec.ioConfig.consumerProperties.{sasl.mechanism}',
+                    'PLAIN',
+                  );
+                  newSpec = deepSet(
+                    newSpec,
+                    'spec.ioConfig.consumerProperties.{sasl.jaas.config}',
+                    `org.apache.kafka.common.security.plain.PlainLoginModule required username="$ConnectionString" password="Value of 'Connection string-primary key' in the Azure UI";`,
+                  );
+                  this.updateSpec(newSpec);
+                  this.updateStep('connect');
+                }}
+              />
+            </FormGroup>
+          </>
+        );
+
       case 'example':
         if (!exampleManifests) return;
         return (