append to exisitng callout (#13130)

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

@@ -16,12 +16,13 @@
  * limitations under the License.
  */
 
-import { Callout, Code, FormGroup } from '@blueprintjs/core';
+import { Button, Callout, Code, FormGroup, Intent } from '@blueprintjs/core';
 import React from 'react';
 
 import { ExternalLink, LearnMore } from '../../components';
 import { DimensionMode, getIngestionDocLink, IngestionSpec } from '../../druid-models';
 import { getLink } from '../../links';
+import { deepGet, deepSet } from '../../utils';
 
 export interface ConnectMessageProps {
   inlineMode: boolean;
@@ -216,3 +217,48 @@ export const SpecMessage = React.memo(function SpecMessage() {
     </FormGroup>
   );
 });
+
+export interface AppendToExistingIssueProps {
+  spec: Partial<IngestionSpec>;
+  onChangeSpec(newSpec: Partial<IngestionSpec>): void;
+}
+
+export const AppendToExistingIssue = React.memo(function AppendToExistingIssue(
+  props: AppendToExistingIssueProps,
+) {
+  const { spec, onChangeSpec } = props;
+
+  const partitionsSpecType = deepGet(spec, 'spec.tuningConfig.partitionsSpec.type');
+  if (
+    partitionsSpecType === 'dynamic' ||
+    deepGet(spec, 'spec.ioConfig.appendToExisting') !== true
+  ) {
+    return null;
+  }
+
+  const dynamicPartitionSpec = {
+    type: 'dynamic',
+    maxRowsPerSegment:
+      deepGet(spec, 'spec.tuningConfig.partitionsSpec.maxRowsPerSegment') ||
+      deepGet(spec, 'spec.tuningConfig.partitionsSpec.targetRowsPerSegment'),
+  };
+
+  return (
+    <FormGroup>
+      <Callout intent={Intent.DANGER}>
+        <p>
+          Only <Code>dynamic</Code> partitioning supports <Code>appendToExisting: true</Code>. You
+          have currently selected <Code>{partitionsSpecType}</Code> partitioning.
+        </p>
+        <Button
+          intent={Intent.SUCCESS}
+          onClick={() =>
+            onChangeSpec(deepSet(spec, 'spec.tuningConfig.partitionsSpec', dynamicPartitionSpec))
+          }
+        >
+          Change to <Code>dynamic</Code> partitioning
+        </Button>
+      </Callout>
+    </FormGroup>
+  );
+});

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

@@ -168,6 +168,7 @@ import { ExamplePicker } from './example-picker/example-picker';
 import { FilterTable, filterTableSelectedColumnName } from './filter-table/filter-table';
 import { FormEditor } from './form-editor/form-editor';
 import {
+  AppendToExistingIssue,
   ConnectMessage,
   FilterMessage,
   ParserMessage,
@@ -3002,6 +3003,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
         <div className="control">
           <PartitionMessage />
           {nonsensicalSingleDimPartitioningMessage}
+          <AppendToExistingIssue spec={spec} onChangeSpec={this.updateSpec} />
         </div>
         {this.renderNextBar({
           disabled: invalidPartitionConfig(spec),
@@ -3095,8 +3097,8 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
                 label: 'Append to existing',
                 type: 'boolean',
                 defaultValue: false,
-                defined: spec =>
+                // appendToExisting can only be set on 'dynamic' portioning.
-                  deepGet(spec, 'spec.tuningConfig.partitionsSpec.type') === 'dynamic',
+                // We chose to show it always and instead have a specific message, separate from this form, to notify the user of the issue.
                 info: (
                   <>
                     Creates segments as additional shards of the latest version, effectively
@@ -3165,6 +3167,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
         </div>
         <div className="control">
           <PublishMessage />
+          <AppendToExistingIssue spec={spec} onChangeSpec={this.updateSpec} />
         </div>
         {this.renderNextBar({})}
       </>
@@ -3233,6 +3236,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
               >{`There is an issue with the spec: ${issueWithSpec}`}</Callout>
             </FormGroup>
           )}
+          <AppendToExistingIssue spec={spec} onChangeSpec={this.updateSpec} />
         </div>
         <div className="next-bar">
           {!isEmptyIngestionSpec(spec) && (