[Web Console] Datasource page support search datasource by keyword

web-console/package.json

@@ -68,6 +68,7 @@
     "@blueprintjs/datetime2": "^0.9.35",
     "@blueprintjs/icons": "^4.16.0",
     "@blueprintjs/popover2": "^1.14.9",
+    "@blueprintjs/select": "^4.9.24",
     "@druid-toolkit/query": "^0.22.11",
     "@druid-toolkit/visuals-core": "^0.3.3",
     "@druid-toolkit/visuals-react": "^0.3.3",

web-console/src/components/segment-timeline/__snapshots__/segment-timeline.spec.tsx.snap

@@ -95,38 +95,22 @@ exports[`SegmentTimeline matches snapshot 1`] = `
         class="bp4-form-content"
       >
         <div
-          class="bp4-html-select bp4-fill"
+          aria-controls="listbox-1"
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          class="bp4-popover2-target"
+          role="combobox"
         >
-          <select>
-            <option
-              value="all"
-            >
-              Show all
-            </option>
-          </select>
-          <span
-            class="bp4-icon bp4-icon-double-caret-vertical"
-            icon="double-caret-vertical"
+          <button
+            class="bp4-button"
+            type="button"
           >
-            <svg
-              aria-labelledby="iconTitle-0"
-              data-icon="double-caret-vertical"
-              height="16"
-              role="img"
-              viewBox="0 0 16 16"
-              width="16"
+            <span
+              class="bp4-button-text"
             >
-              <title
-                id="iconTitle-0"
-              >
-                Open dropdown
-              </title>
-              <path
-                d="M5 7h6a1.003 1.003 0 00.71-1.71l-3-3C8.53 2.11 8.28 2 8 2s-.53.11-.71.29l-3 3A1.003 1.003 0 005 7zm6 2H5a1.003 1.003 0 00-.71 1.71l3 3c.18.18.43.29.71.29s.53-.11.71-.29l3-3A1.003 1.003 0 0011 9z"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </span>
+              Show all
+            </span>
+          </button>
         </div>
       </div>
     </div>

web-console/src/components/segment-timeline/segment-timeline.tsx

@@ -16,7 +16,9 @@
  * limitations under the License.
  */
 
-import { FormGroup, HTMLSelect, Radio, RadioGroup, ResizeSensor } from '@blueprintjs/core';
+import { Button, FormGroup, MenuItem, Radio, RadioGroup, ResizeSensor } from '@blueprintjs/core';
+import type { ItemPredicate, ItemRenderer } from '@blueprintjs/select';
+import { Select2 } from '@blueprintjs/select';
 import type { AxisScale } from 'd3-axis';
 import { scaleLinear, scaleUtc } from 'd3-scale';
 import React from 'react';
@@ -528,6 +530,58 @@ ORDER BY "start" DESC`;
     const { capabilities } = this.props;
     const { datasources, activeDataType, activeDatasource, startDate, endDate } = this.state;
 
+    const filterDatasource: ItemPredicate<string> = (query, val, _index, exactMatch) => {
+      const normalizedTitle = val.toLowerCase();
+      const normalizedQuery = query.toLowerCase();
+
+      if (exactMatch) {
+        return normalizedTitle === normalizedQuery;
+      } else {
+        return ` ${normalizedTitle}`.includes(normalizedQuery);
+      }
+    };
+
+    const datasourceRenderer: ItemRenderer<string> = (
+      val,
+      { handleClick, handleFocus, modifiers },
+    ) => {
+      if (!modifiers.matchesPredicate) {
+        return null;
+      }
+      return (
+        <MenuItem
+          key={val}
+          disabled={modifiers.disabled}
+          active={modifiers.active}
+          onClick={handleClick}
+          onFocus={handleFocus}
+          roleStructure="listoption"
+          text={val}
+        />
+      );
+    };
+
+    const DatasourceSelect: React.FC = () => {
+      const showAll = 'Show all';
+      const handleItemSelected = (selectedItem: string) => {
+        this.setState({
+          activeDatasource: selectedItem === showAll ? null : selectedItem,
+        });
+      };
+      const datasourcesWzAll = [showAll].concat(datasources);
+      return (
+        <Select2<string>
+          items={datasourcesWzAll}
+          onItemSelect={handleItemSelected}
+          itemRenderer={datasourceRenderer}
+          noResults={<MenuItem disabled text="No results." roleStructure="listoption" />}
+          itemPredicate={filterDatasource}
+        >
+          <Button text={activeDatasource === null ? showAll : activeDatasource} />
+        </Select2>
+      );
+    };
+
     return (
       <div className="segment-timeline app-view">
         {this.renderStackedBarChart()}
@@ -543,24 +597,7 @@ ORDER BY "start" DESC`;
           </FormGroup>
 
           <FormGroup label="Datasource">
-            <HTMLSelect
-              onChange={(e: any) =>
-                this.setState({
-                  activeDatasource: e.target.value === 'all' ? null : e.target.value,
-                })
-              }
-              value={activeDatasource == null ? 'all' : activeDatasource}
-              fill
-            >
-              <option value="all">Show all</option>
-              {datasources.map(d => {
-                return (
-                  <option key={d} value={d}>
-                    {d}
-                  </option>
-                );
-              })}
-            </HTMLSelect>
+            <DatasourceSelect />
           </FormGroup>
 
           <FormGroup label="Interval">