Web console: be more robust to aux queries failing and improve kill tasks

web-console/src/components/auto-form/auto-form.scss

@@ -16,19 +16,7 @@
  * limitations under the License.
  */
 
-@import '../../variables';
-
 .auto-form {
-  // Popover in info label
-  label.#{$bp-ns}-label {
-    position: relative;
-
-    .#{$bp-ns}-text-muted {
-      position: absolute;
-      right: 0;
-    }
-  }
-
   .custom-input input {
     cursor: pointer;
   }

web-console/src/components/form-group-with-info/form-group-with-info.scss

@@ -19,6 +19,20 @@
 @import '../../variables';
 
 .form-group-with-info {
+  label.#{$bp-ns}-label {
+    position: relative;
+
+    .#{$bp-ns}-text-muted {
+      position: absolute;
+      right: 0;
+
+      // This is only needed because BP4 alerts are too agro in setting CSS on icons
+      .#{$bp-ns}-icon {
+        margin-right: 0;
+      }
+    }
+  }
+
   .#{$bp-ns}-text-muted .#{$bp-ns}-popover2-target {
     margin-top: 0;
   }

web-console/src/components/table-clickable-cell/table-clickable-cell.scss

@@ -24,6 +24,10 @@
   overflow: hidden;
   text-overflow: ellipsis;
 
+  &.disabled {
+    cursor: not-allowed;
+  }
+
   .hover-icon {
     position: absolute;
     top: $table-cell-v-padding;

web-console/src/components/table-clickable-cell/table-clickable-cell.tsx

@@ -27,18 +27,23 @@ export interface TableClickableCellProps {
   onClick: MouseEventHandler<any>;
   hoverIcon?: IconName;
   title?: string;
+  disabled?: boolean;
   children?: ReactNode;
 }
 
 export const TableClickableCell = React.memo(function TableClickableCell(
   props: TableClickableCellProps,
 ) {
-  const { className, onClick, hoverIcon, title, children } = props;
+  const { className, onClick, hoverIcon, title, disabled, children } = props;
 
   return (
-    <div className={classNames('table-clickable-cell', className)} title={title} onClick={onClick}>
+    <div
+      className={classNames('table-clickable-cell', className, { disabled })}
+      title={title}
+      onClick={disabled ? undefined : onClick}
+    >
       {children}
-      {hoverIcon && <Icon className="hover-icon" icon={hoverIcon} />}
+      {hoverIcon && !disabled && <Icon className="hover-icon" icon={hoverIcon} />}
     </div>
   );
 });

web-console/src/components/warning-checklist/warning-checklist.tsx

@@ -17,29 +17,31 @@
  */
 
 import { Switch } from '@blueprintjs/core';
-import React, { useState } from 'react';
+import React, { ReactNode, useState } from 'react';
 
 export interface WarningChecklistProps {
-  checks: string[];
-  onChange: (allChecked: boolean) => void;
+  checks: ReactNode[];
+  onChange(allChecked: boolean): void;
 }
 
 export const WarningChecklist = React.memo(function WarningChecklist(props: WarningChecklistProps) {
   const { checks, onChange } = props;
-  const [checked, setChecked] = useState<Record<string, boolean>>({});
+  const [checked, setChecked] = useState<Record<number, boolean>>({});
 
-  function doCheck(check: string) {
+  function doCheck(checkIndex: number) {
     const newChecked = { ...checked };
-    newChecked[check] = !newChecked[check];
+    newChecked[checkIndex] = !newChecked[checkIndex];
     setChecked(newChecked);
 
-    onChange(checks.every(check => newChecked[check]));
+    onChange(checks.every((_, i) => newChecked[i]));
   }
 
   return (
     <div className="warning-checklist">
       {checks.map((check, i) => (
-        <Switch key={i} label={check} onChange={() => doCheck(check)} />
+        <Switch key={i} onChange={() => doCheck(i)}>
+          {check}
+        </Switch>
       ))}
     </div>
   );

web-console/src/dialogs/async-action-dialog/async-action-dialog.tsx

@@ -47,7 +47,7 @@ export interface AsyncActionDialogProps {
   intent?: Intent;
   successText: string;
   failText: string;
-  warningChecks?: string[];
+  warningChecks?: ReactNode[];
   children?: ReactNode;
 }
 

web-console/src/dialogs/index.ts

@@ -24,6 +24,7 @@ export * from './diff-dialog/diff-dialog';
 export * from './doctor-dialog/doctor-dialog';
 export * from './edit-context-dialog/edit-context-dialog';
 export * from './history-dialog/history-dialog';
+export * from './kill-datasource-dialog/kill-datasource-dialog';
 export * from './lookup-edit-dialog/lookup-edit-dialog';
 export * from './numeric-input-dialog/numeric-input-dialog';
 export * from './overlord-dynamic-config-dialog/overlord-dynamic-config-dialog';

web-console/src/dialogs/kill-datasource-dialog/kill-datasource-dialog.tsx

@@ -0,0 +1,110 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Code, Intent } from '@blueprintjs/core';
+import React, { useState } from 'react';
+
+import { FormGroupWithInfo, PopoverText } from '../../components';
+import { SuggestibleInput } from '../../components/suggestible-input/suggestible-input';
+import { Api } from '../../singletons';
+import { uniq } from '../../utils';
+import { AsyncActionDialog } from '../async-action-dialog/async-action-dialog';
+
+function getSuggestions(): string[] {
+  // Default to a data 24h ago so as not to cause a conflict between streaming ingestion and kill tasks
+  const end = new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString();
+  const startOfDay = end.slice(0, 10);
+  const startOfMonth = end.slice(0, 7) + '-01';
+  const startOfYear = end.slice(0, 4) + '-01-01';
+
+  return uniq([
+    `1000-01-01/${startOfDay}`,
+    `1000-01-01/${startOfMonth}`,
+    `1000-01-01/${startOfYear}`,
+    '1000-01-01/3000-01-01',
+  ]);
+}
+
+export interface KillDatasourceDialogProps {
+  datasource: string;
+  onClose(): void;
+  onSuccess(): void;
+}
+
+export const KillDatasourceDialog = function KillDatasourceDialog(
+  props: KillDatasourceDialogProps,
+) {
+  const { datasource, onClose, onSuccess } = props;
+  const suggestions = getSuggestions();
+  const [interval, setInterval] = useState<string>(suggestions[0]);
+
+  return (
+    <AsyncActionDialog
+      className="kill-datasource-dialog"
+      action={async () => {
+        const resp = await Api.instance.delete(
+          `/druid/coordinator/v1/datasources/${Api.encodePath(
+            datasource,
+          )}?kill=true&interval=${Api.encodePath(interval)}`,
+          {},
+        );
+        return resp.data;
+      }}
+      confirmButtonText="Permanently delete unused segments"
+      successText="Kill task was issued. Unused segments in datasource will be deleted"
+      failText="Failed submit kill task"
+      intent={Intent.DANGER}
+      onClose={onClose}
+      onSuccess={onSuccess}
+      warningChecks={[
+        <>
+          I understand that this operation will delete all metadata about the unused segments of{' '}
+          <Code>{datasource}</Code> and removes them from deep storage.
+        </>,
+        'I understand that this operation cannot be undone.',
+      ]}
+    >
+      <p>
+        Are you sure you want to permanently delete unused segments in <Code>{datasource}</Code>?
+      </p>
+      <p>This action is not reversible and the data deleted will be lost.</p>
+      <FormGroupWithInfo
+        label="Interval to delete"
+        info={
+          <PopoverText>
+            <p>
+              The range of time over which to delete unused segments specified in ISO8601 interval
+              format.
+            </p>
+            <p>
+              If you have streaming ingestion running make sure that your interval range doe not
+              overlap with intervals where streaming data is being added - otherwise the kill task
+              will not start.
+            </p>
+          </PopoverText>
+        }
+      >
+        <SuggestibleInput
+          value={interval}
+          onValueChange={s => setInterval(s || '')}
+          suggestions={suggestions}
+        />
+      </FormGroupWithInfo>
+    </AsyncActionDialog>
+  );
+};

web-console/src/druid-models/compaction-status/compaction-status.spec.ts

@@ -18,11 +18,7 @@
 
 import { CompactionConfig } from '../compaction-config/compaction-config';
 
-import {
-  CompactionStatus,
-  formatCompactionConfigAndStatus,
-  zeroCompactionStatus,
-} from './compaction-status';
+import { CompactionStatus, formatCompactionInfo, zeroCompactionStatus } from './compaction-status';
 
 describe('compaction status', () => {
   const BASIC_CONFIG: CompactionConfig = {};
@@ -61,27 +57,30 @@ describe('compaction status', () => {
   });
 
   it('formatCompactionConfigAndStatus', () => {
-    expect(formatCompactionConfigAndStatus(undefined, undefined)).toEqual('Not enabled');
+    expect(formatCompactionInfo({})).toEqual('Not enabled');
 
-    expect(formatCompactionConfigAndStatus(BASIC_CONFIG, undefined)).toEqual('Awaiting first run');
+    expect(formatCompactionInfo({ config: BASIC_CONFIG })).toEqual('Awaiting first run');
 
-    expect(formatCompactionConfigAndStatus(undefined, ZERO_STATUS)).toEqual('Not enabled');
+    expect(formatCompactionInfo({ status: ZERO_STATUS })).toEqual('Not enabled');
 
-    expect(formatCompactionConfigAndStatus(BASIC_CONFIG, ZERO_STATUS)).toEqual('Running');
+    expect(formatCompactionInfo({ config: BASIC_CONFIG, status: ZERO_STATUS })).toEqual('Running');
 
     expect(
-      formatCompactionConfigAndStatus(BASIC_CONFIG, {
-        dataSource: 'tbl',
-        scheduleStatus: 'RUNNING',
-        bytesAwaitingCompaction: 0,
-        bytesCompacted: 100,
-        bytesSkipped: 0,
-        segmentCountAwaitingCompaction: 0,
-        segmentCountCompacted: 10,
-        segmentCountSkipped: 0,
-        intervalCountAwaitingCompaction: 0,
-        intervalCountCompacted: 10,
-        intervalCountSkipped: 0,
+      formatCompactionInfo({
+        config: BASIC_CONFIG,
+        status: {
+          dataSource: 'tbl',
+          scheduleStatus: 'RUNNING',
+          bytesAwaitingCompaction: 0,
+          bytesCompacted: 100,
+          bytesSkipped: 0,
+          segmentCountAwaitingCompaction: 0,
+          segmentCountCompacted: 10,
+          segmentCountSkipped: 0,
+          intervalCountAwaitingCompaction: 0,
+          intervalCountCompacted: 10,
+          intervalCountSkipped: 0,
+        },
       }),
     ).toEqual('Fully compacted');
   });

web-console/src/druid-models/compaction-status/compaction-status.ts

@@ -50,19 +50,19 @@ export function zeroCompactionStatus(compactionStatus: CompactionStatus): boolea
   );
 }
 
-export function formatCompactionConfigAndStatus(
-  compactionConfig: CompactionConfig | undefined,
-  compactionStatus: CompactionStatus | undefined,
-) {
-  if (compactionConfig) {
-    if (compactionStatus) {
-      if (
-        compactionStatus.bytesAwaitingCompaction === 0 &&
-        !zeroCompactionStatus(compactionStatus)
-      ) {
+export interface CompactionInfo {
+  config?: CompactionConfig;
+  status?: CompactionStatus;
+}
+
+export function formatCompactionInfo(compaction: CompactionInfo) {
+  const { config, status } = compaction;
+  if (config) {
+    if (status) {
+      if (status.bytesAwaitingCompaction === 0 && !zeroCompactionStatus(status)) {
         return 'Fully compacted';
       } else {
-        return capitalizeFirst(compactionStatus.scheduleStatus);
+        return capitalizeFirst(status.scheduleStatus);
       }
     } else {
       return 'Awaiting first run';

web-console/src/druid-models/coordinator-dynamic-config/coordinator-dynamic-config.tsx

@@ -69,20 +69,9 @@ export const COORDINATOR_DYNAMIC_CONFIG_FIELDS: Field<CoordinatorDynamicConfig>[
       </>
     ),
   },
-  {
-    name: 'killAllDataSources',
-    type: 'boolean',
-    defaultValue: false,
-    info: (
-      <>
-        Send kill tasks for ALL dataSources if property <Code>druid.coordinator.kill.on</Code> is
-        true. If this is set to true then <Code>killDataSourceWhitelist</Code> must not be specified
-        or be empty list.
-      </>
-    ),
-  },
   {
     name: 'killDataSourceWhitelist',
+    label: 'Kill datasource whitelist',
     type: 'string-array',
     emptyValue: [],
     info: (