npm package: @infinilabs/ui-web-cli
Description: <h1 align="center">UI-WEB-CLI</h1>
Author: Rain9
Latest version: 0.0.44

<h1 align="center">UI-WEB-CLI</h1>

English | [简体中文](./README-zh_CN.md)

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

```jsx
// ...
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`:
  ```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