Skip to content

Commit 84f3199

Browse files
Update Console page with new Monaco UI (#59)
* update console page with new ui * remove unused image * remove persistent console ss
1 parent 946b536 commit 84f3199

File tree

5 files changed

+66
-40
lines changed

5 files changed

+66
-40
lines changed
-211 KB
Binary file not shown.
-70.3 KB
Binary file not shown.

serverless/images/console.png

500 KB
Loading

serverless/images/variables.png

65.2 KB
Loading

serverless/pages/run-api-requests-in-the-console.mdx

Lines changed: 66 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,16 @@ tags: [ 'serverless', 'dev tools', 'how-to' ]
88
<DocBadge template="technical preview" />
99
This content applies to: <DocBadge template="elasticsearch" slug="/serverless/elasticsearch/what-is-elasticsearch-serverless" /> <DocBadge template="observability" slug="/serverless/observability/what-is-observability-serverless" /> <DocBadge template="security" slug="/serverless/security/what-is-security-serverless" />
1010

11-
{/* TODO: This content is copied verbatim from the serverless ES docs. We need to decide whether to
12-
transclude this content so that we don't have to maintain to copies of identical content. */}
13-
14-
Use **Console** to run API requests against ((es)), and view the responses.
15-
Console is available in your Elastic UI under **Dev Tools**.
11+
**Console** lets you interact with [Elasticsearch and Kibana serverless APIs](https://www.elastic.co/docs/api) from your project.
1612

1713
Requests are made in the left pane, and responses are displayed in the right pane.
1814

19-
![Console request/response pair](../images/console-request-response.png)
15+
![Console request/response pair](../images/console.png)
16+
17+
To go to **Console**, find **Dev Tools** in the navigation menu or use the global search bar.
18+
19+
You can also find Console directly on your Elasticsearch serverless project pages, where you can expand it from the footer. This Console, called **Persistent Console**, has the same capabilities and shares the same history as the Console in **Dev Tools**.
2020

21-
Console keeps a request history, making it easy to find and repeat requests.
22-
It also provides links to API documentation.
2321

2422
## Write requests
2523

@@ -49,15 +47,12 @@ curl "${ES_URL}/_search" \
4947
}'
5048
```
5149

52-
When you paste a cURL command into **Console**, it is automatically converted to **Console** syntax.
53-
To convert **Console** syntax into cURL syntax, select the action icon (<DocIcon type="wrench" title="Wrench" />) and choose **Copy as cURL**.
54-
Once copied, an API key will need to be provided for the calls to work from external environments.
55-
5650
### Autocomplete
5751

5852
When you're typing a command, **Console** makes context-sensitive suggestions.
5953
These suggestions show you the parameters for each API and speed up your typing.
60-
To configure your preferences for autocomplete, go to [Settings](#configure-console-settings).
54+
55+
You can configure your preferences for autocomplete in the [Console settings](#configure-console-settings).
6156

6257
### Comments
6358

@@ -93,7 +88,7 @@ GET /_search
9388

9489
Select **Variables** to create, edit, and delete variables.
9590

96-
![Variables](../images/console-variables.png)
91+
![Variables](../images/variables.png)
9792

9893
You can refer to these variables in the paths and bodies of your requests.
9994
Each variable can be referenced multiple times.
@@ -109,53 +104,84 @@ GET ${pathVariable}
109104
}
110105
```
111106

107+
By default, variables in the body may be substituted as a boolean, number, array, or
108+
object by removing nearby quotes instead of a string with surrounding quotes. Triple
109+
quotes overwrite this default behavior and enforce simple replacement as a string.
110+
112111
### Auto-formatting
113112

114113
The auto-formatting
115-
capability can help you format requests. Select one or more requests that you
116-
want to format, select the action icon (<DocIcon type="wrench" title="Wrench" />),
117-
and then select **Auto indent**.
114+
capability can help you format requests to be more readable. Select one or more requests that you
115+
want to format, open the contextual menu, and then select **Auto indent**.
116+
117+
### Keyboard shortcuts
118+
119+
**Go to line number**: `Ctrl/Cmd` + `L`
120+
121+
**Auto-indent current request**: `Ctrl/Cmd` + `I`
122+
123+
**Jump to next request end**: `Ctrl/Cmd` + ``
124+
125+
**Jump to previous request end**: `Ctrl/Cmd` + ``
126+
127+
**Open documentation for current request**: `Ctrl/Cmd` + `/`
118128

119-
For example, you might have a request formatted like this:
129+
**Run current request**: `Ctrl/Cmd` + `Enter`
120130

121-
![Unformatted request](../images/console-unformatted-request.png)
131+
**Apply current or topmost term in autocomplete menu**: `Enter` or `Tab`
122132

123-
**Console** adjusts the JSON body of the request to apply the indents.
133+
**Close autocomplete menu**: `Esc`
124134

125-
![Formatted request](../images/console-formatted-request.png)
135+
**Navigate items in autocomplete menu**: `` + ``
126136

127-
If you select **Auto indent** on a request that is already well formatted,
128-
**Console** collapses the request body to a single line per document.
129-
This is helpful when working with the ((es)) [bulk APIs](((ref))/docs-bulk.html).
130137

131-
## Submit requests
138+
### View API docs
139+
140+
To view the documentation for an API endpoint, select the request, then open the contextual menu and select
141+
*Open API reference*.
142+
143+
## Run requests
144+
145+
When you're ready to submit the request, select the play button.
146+
147+
The result of the request execution is displayed in the response panel, where you can see:
148+
149+
- the JSON response
150+
- the HTTP status code corresponding to the request
151+
- The execution time, in ms.
132152

133-
When you're ready to submit the request to ((es)), select the green triangle.
134153

135154
You can select multiple requests and submit them together.
136-
**Console** sends the requests to ((es)) one by one and shows the output
137-
in the response pane. Submitting multiple requests is helpful
155+
**Console** executes the requests one by one. Submitting multiple requests is helpful
138156
when you're debugging an issue or trying query
139157
combinations in multiple scenarios.
140158

141-
## View API docs
142159

143-
To view the documentation for an API endpoint, select
144-
the action icon (<DocIcon type="wrench" title="Wrench" />) and select
145-
**Open documentation**.
160+
## Import and export requests
161+
162+
You can export requests:
163+
164+
- **to a TXT file**, by using the **Export requests** button. When using this method, all content of the input panel is copied, including comments, requests, and payloads. All of the formatting is preserved and allows you to re-import the file later, or to a different environment, using the **Import requests** button.
165+
166+
<DocCallOut title="Tip">
167+
When importing a TXT file containing Console requests, the current content of the input panel is replaced. Export it first if you don't want to lose it, or find it in the **History** tab if you already ran the requests.
168+
</DocCallOut>
169+
170+
- by copying them individually as **curl**, **JavaScript**, or **Python**. To do this, select a request, then open the contextual menu and select **Copy as**. When using this action, requests are copied individually to your clipboard. You can save your favorite language to make the copy action faster the next time you use it.
171+
172+
When running copied requests from an external environment, you'll need to add [authentication information](https://www.elastic.co/docs/api/doc/serverless/authentication) to the request.
146173

147174
## Get your request history
148175

149-
**Console** maintains a list of the last 500 requests that ((es)) successfully executed.
150-
To view your most recent requests, select **History**.
151-
If you select a request and select **Apply**, it is added to the editor at the current cursor position.
176+
*Console* maintains a list of the last 500 requests that you tried to execute.
177+
To view them, open the *History* tab.
152178

153-
## Configure Console settings
179+
You can run a request from your history again by selecting the request and clicking **Add and run**. If you want to add it back to the Console input panel without running it yet, click **Add** instead. It is added to the editor at the current cursor position.
154180

155-
You can configure the **Console** font size, JSON syntax, and autocomplete suggestions in **Settings**.
181+
## Configure Console settings
156182

157-
<DocImage size="l" url="../images/console-settings.png" alt="Console Settings" />
183+
Go to the **Config** tab of **Console** to customize its display, autocomplete, and accessibility settings.
158184

159-
## Get keyboard shortcuts
185+
## Disable Console
160186

161-
For a list of available keyboard shortcuts, select **Help**.
187+
You can disable the persistent console that shows in the footer of your ((es)) project pages. To do that, go to **Management** > **Advanced Settings**, and turn off the `devTools:enablePersistentConsole` setting.

0 commit comments

Comments
 (0)