English | 简体中文

Customized WEB-CLI component

Screenshot

Install

npm i @infinilabs/ui-web-cli

# or
cnpm i @infinilabs/ui-web-cli

# or
yarn add @infinilabs/ui-web-cli

# or
pnpm add @infinilabs/ui-web-cli

Usage

// ...
import ConsoleUI from "@infinilabs/ui-web-cli";
//...

//...
return (
  <ConsoleUI
    clusterList={clusterList}
    visible={false}
    minimize={true}
    onMinimizeClick={() => {
      setConsoleOpen(false);
      window.parent.postMessage(false, "*");
    }}
    clusterStatus={clusterStatus}
    resizeable={true}
    sendRequestToES={sendRequestPlay}
    fetchDataSource={fetchDataSource}
    SearchEngineIcon={SearchEngineIcon}
    LogoImg={PizzaImg}
  />
);
//...

Props

Here’s the English translation of the table:

| Property | Description | Type | Default | Version | | --------------------- | -------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | --------------------- | ------- | | minimize | Whether the component can be minimized | boolean | false | 1.0.0 | | resizeable | Whether the component can be resized | boolean | false | 1.0.0 | | height | Component height | string | "50vh" | 1.0.0 | | width | Component width | string | "100%" | 1.0.1 | | defaultCluster | Default cluster to use when initializing | object | null | 1.0.1 | | dragConfig | Drag and drop configuration options | object | {enabled: true, tabDraggable: true} | 1.0.1 | | DataSourceSelector | Data source component | DOM | - | 1.0.0 | | tabData | Data for the component | object | {activeKey: "", panes: []} | 1.0.0 | | renderTabBarItemIcon | Icon for the tab title component | DOM | - | 1.0.0 | | addTab | Method to add tab data | function | - | 1.0.0 | | onMinimizeClick | Event handler for minimize button click | function | - | 1.0.0 | | newTabClick | Event handler for adding a new data source | function | - | 1.0.0 | | updateTabData | Method to update the tabData | function | - | 1.0.0 | | sendRequestToES | Event handler for the execute button click | function | - | 1.0.0 |

Add New API Endpoint Spec

• Navigate to the directory src/components/vendor/console/server/lib/spec_definitions/json/overrides.

• Add a new file, for example, index_template.json. The file content is explained as follows:

  • index_template.put: Defines the API endpoint for the PUT method.
    • url_params: Defines the query parameters for the API endpoint
    • methods: Supported HTTP methods.
    • patterns: URL patterns for the API.
    • data_autocomplete_rules: Autocomplete rules for the request body.
    • documentation: Link to the relevant documentation.
  • index_template.get: Defines the API endpoint for the GET method.
  • index_template.delete: Defines the API endpoint for the DELETE method.

  Here is an example of index_template.json:

  {
    "index_template.put": {
      "url_params": {
      },
      "methods": [
        "PUT"
      ],
      "patterns": [
        "_index_template/{name}"
      ],
      "data_autocomplete_rules": {
        "index_patterns": "",
        "data_stream": {
          "timestamp_field": {
            "name": ""
          }
        },
        "priority": 200,
        "template": {
          "mappings": {
            "__scope_link": "put_mapping"
          },
          "settings": {
            "__scope_link": "put_settings"
          }
        }
      },
      "documentation": "https://docs.infinilabs.com/easysearch/main/docs/references/management/index-templates/"
    },
    "index_template.get": {
      "url_params": {
      },
      "methods": [
        "GET"
      ],
      "patterns": [
        "_index_template",
        "_index_template/{name}"
      ],
      "documentation": "https://docs.infinilabs.com/easysearch/main/docs/references/management/index-templates/"
    },
    "index_template.delete": {
      "url_params": {
      },
      "methods": [
        "DELETE"
      ],
      "patterns": [
        "_index_template/{name}"
      ],
      "documentation": "https://docs.infinilabs.com/easysearch/main/docs/references/management/index-templates/"
    }
  }

__scope_link is used to reuse existing data autocomplete rules