UI-WEB-CLI

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

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

//...
return (
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