mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 09:48:58 -04:00
[Console] Improve text in Welcome screen (#149569)
This commit is contained in:
Muhammad Ibragimov
GitHub
parent
8968b74762
commit
447de664fa
10 changed files with 187 additions and 98 deletions
60
src/plugins/console/common/constants/welcome_panel.ts
Normal file
60
src/plugins/console/common/constants/welcome_panel.ts
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
||||
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
||||
* Side Public License, v 1.
|
||||
*/
|
||||
|
||||
export const kibanaApiExample = `
|
||||
# retrieve sets of saved objects
|
||||
POST kbn:api/saved_objects/_export
|
||||
`;
|
||||
|
||||
export const multipleRequestsExample = `
|
||||
# POST test_index/_doc/test_doc 200 OK
|
||||
{
|
||||
"_index": "test_index",
|
||||
"_id": "test_doc",
|
||||
"_version": 3,
|
||||
"result": "updated",
|
||||
"_shards": {
|
||||
"total": 2,
|
||||
"successful": 1,
|
||||
"failed": 0
|
||||
},
|
||||
"_seq_no": 2,
|
||||
"_primary_term": 1
|
||||
}
|
||||
# POST notAnEndpoint 405 Method Not Allowed
|
||||
{
|
||||
"error": "Incorrect HTTP method for uri [/notAnEndpoint?pretty=true] and method [POST], allowed: [HEAD, GET, PUT, DELETE]",
|
||||
"status": 405
|
||||
}
|
||||
`;
|
||||
|
||||
export const commentsExample = `
|
||||
# This request searches all of your indices.
|
||||
GET _search
|
||||
{
|
||||
// The query parameter indicates query context.
|
||||
"query": {
|
||||
// Matches all documents.
|
||||
/*"match_all": {
|
||||
"boost": 1.2
|
||||
}*/
|
||||
"match_none": {} // Matches no document.
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const variablesExample = `
|
||||
GET $\{pathVariable}
|
||||
{
|
||||
"query": {
|
||||
"match": {
|
||||
"$\{bodyNameVariable}": "$\{bodyValueVariable}"
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
|
@ -6,30 +6,40 @@
|
|||
* Side Public License, v 1.
|
||||
*/
|
||||
|
||||
import { EuiScreenReaderOnly } from '@elastic/eui';
|
||||
import { EuiScreenReaderOnly, withEuiTheme } from '@elastic/eui';
|
||||
import type { WithEuiThemeProps } from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { createReadOnlyAceEditor, CustomAceEditor } from '../models/sense_editor';
|
||||
// @ts-ignore
|
||||
import { Mode } from '../models/legacy_core_editor/mode/input';
|
||||
import { Mode as InputMode } from '../models/legacy_core_editor/mode/input';
|
||||
import { Mode as OutputMode } from '../models/legacy_core_editor/mode/output';
|
||||
|
||||
interface EditorExampleProps {
|
||||
panel: string;
|
||||
example?: string;
|
||||
theme: WithEuiThemeProps['theme'];
|
||||
linesOfExampleCode?: number;
|
||||
mode?: string;
|
||||
}
|
||||
|
||||
const exampleText = `
|
||||
# index a doc
|
||||
PUT index/_doc/1
|
||||
GET _search
|
||||
{
|
||||
"body": "here"
|
||||
"query": {
|
||||
"match_all": {}
|
||||
}
|
||||
}
|
||||
|
||||
# and get it ...
|
||||
GET index/_doc/1
|
||||
`;
|
||||
|
||||
export function EditorExample(props: EditorExampleProps) {
|
||||
const inputId = `help-example-${props.panel}-input`;
|
||||
const EditorExample = ({
|
||||
panel,
|
||||
example,
|
||||
theme,
|
||||
linesOfExampleCode = 6,
|
||||
mode = 'input',
|
||||
}: EditorExampleProps) => {
|
||||
const inputId = `help-example-${panel}-input`;
|
||||
const wrapperDivRef = useRef<HTMLDivElement | null>(null);
|
||||
const editorRef = useRef<CustomAceEditor>();
|
||||
|
||||
|
|
@ -38,8 +48,8 @@ export function EditorExample(props: EditorExampleProps) {
|
|||
editorRef.current = createReadOnlyAceEditor(wrapperDivRef.current);
|
||||
|
||||
const editor = editorRef.current;
|
||||
editor.update(exampleText.trim());
|
||||
editor.session.setMode(new Mode());
|
||||
const editorMode = mode === 'input' ? new InputMode() : new OutputMode();
|
||||
editor.update((example || exampleText).trim(), editorMode);
|
||||
editor.session.setUseWorker(false);
|
||||
editor.setHighlightActiveLine(false);
|
||||
|
||||
|
|
@ -55,7 +65,12 @@ export function EditorExample(props: EditorExampleProps) {
|
|||
editorRef.current.destroy();
|
||||
}
|
||||
};
|
||||
}, [inputId]);
|
||||
}, [example, inputId, mode]);
|
||||
|
||||
const wrapperDivStyle = {
|
||||
height: `${parseInt(theme.euiTheme.size.base, 10) * linesOfExampleCode}px`,
|
||||
margin: `${theme.euiTheme.size.base} 0`,
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -66,7 +81,10 @@ export function EditorExample(props: EditorExampleProps) {
|
|||
})}
|
||||
</label>
|
||||
</EuiScreenReaderOnly>
|
||||
<div ref={wrapperDivRef} className="conHelp__example" />
|
||||
<div ref={wrapperDivRef} className="conApp_example" css={wrapperDivStyle} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// eslint-disable-next-line import/no-default-export
|
||||
export default withEuiTheme(EditorExample);
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ import {
|
|||
EuiSpacer,
|
||||
EuiLink,
|
||||
} from '@elastic/eui';
|
||||
import { EditorExample } from './editor_example';
|
||||
import EditorExample from './editor_example';
|
||||
import { useServicesContext } from '../contexts';
|
||||
|
||||
interface Props {
|
||||
|
|
|
|||
|
|
@ -18,8 +18,10 @@ import {
|
|||
EuiButton,
|
||||
EuiText,
|
||||
EuiFlyoutFooter,
|
||||
EuiCode,
|
||||
} from '@elastic/eui';
|
||||
import { EditorExample } from './editor_example';
|
||||
import EditorExample from './editor_example';
|
||||
import * as examples from '../../../common/constants/welcome_panel';
|
||||
|
||||
interface Props {
|
||||
onDismiss: () => void;
|
||||
|
|
@ -27,85 +29,127 @@ interface Props {
|
|||
|
||||
export function WelcomePanel(props: Props) {
|
||||
return (
|
||||
<EuiFlyout onClose={props.onDismiss} data-test-subj="welcomePanel" size="s" ownFocus={false}>
|
||||
<EuiFlyout
|
||||
onClose={props.onDismiss}
|
||||
data-test-subj="welcomePanel"
|
||||
size="m"
|
||||
maxWidth={0}
|
||||
ownFocus={false}
|
||||
>
|
||||
<EuiFlyoutHeader hasBorder>
|
||||
<EuiTitle size="m">
|
||||
<h2>
|
||||
<FormattedMessage
|
||||
id="console.welcomePage.pageTitle"
|
||||
defaultMessage="Welcome to Console"
|
||||
defaultMessage="Send requests with Console"
|
||||
/>
|
||||
</h2>
|
||||
</EuiTitle>
|
||||
</EuiFlyoutHeader>
|
||||
<EuiFlyoutBody>
|
||||
<EuiText>
|
||||
<h4>
|
||||
<FormattedMessage
|
||||
id="console.welcomePage.quickIntroTitle"
|
||||
defaultMessage="Quick intro to the UI"
|
||||
/>
|
||||
</h4>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="console.welcomePage.quickIntroDescription"
|
||||
defaultMessage="The Console UI is split into two panes: an editor pane (left) and a response pane (right).
|
||||
Use the editor to type requests and submit them to Elasticsearch. The results will be displayed in
|
||||
the response pane on the right side."
|
||||
defaultMessage="Console understands commands in a cURL-like syntax. Here is a request to the Elasticsearch _search API."
|
||||
/>
|
||||
</p>
|
||||
<EditorExample panel="welcome-example-1" />
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="console.welcomePage.supportedRequestFormatTitle"
|
||||
defaultMessage="Console understands requests in a compact format, similar to cURL:"
|
||||
/>
|
||||
</p>
|
||||
<EditorExample panel="welcome" />
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="console.welcomePage.supportedRequestFormatDescription"
|
||||
defaultMessage="While typing a request, Console will make suggestions which you can then accept by hitting Enter/Tab.
|
||||
These suggestions are made based on the request structure as well as your indices and types."
|
||||
id="console.welcomePage.kibanaAPIsDescription"
|
||||
defaultMessage="To send a request to a Kibana API, prefix the path with {kibanaApiPrefix}."
|
||||
values={{
|
||||
kibanaApiPrefix: <EuiCode>kbn:</EuiCode>,
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
<EditorExample
|
||||
panel="welcome-example-2"
|
||||
example={examples.kibanaApiExample}
|
||||
linesOfExampleCode={2}
|
||||
/>
|
||||
<h4>
|
||||
<FormattedMessage
|
||||
id="console.welcomePage.quickTipsTitle"
|
||||
defaultMessage="A few quick tips, while I have your attention"
|
||||
id="console.welcomePage.sendMultipleRequestsTitle"
|
||||
defaultMessage="Send multiple requests"
|
||||
/>
|
||||
</h4>
|
||||
<ul>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="console.welcomePage.sendMultipleRequestsDescription"
|
||||
defaultMessage="Select multiple requests and send them together. You'll get responses to all your requests, regardless of whether they succeed or fail."
|
||||
/>
|
||||
</p>
|
||||
<EditorExample
|
||||
panel="welcome-example-3"
|
||||
example={examples.multipleRequestsExample}
|
||||
linesOfExampleCode={22}
|
||||
mode="output"
|
||||
/>
|
||||
|
||||
<h4>
|
||||
<FormattedMessage
|
||||
id="console.welcomePage.addCommentsTitle"
|
||||
defaultMessage="Add comments in request bodies"
|
||||
/>
|
||||
</h4>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="console.welcomePage.addCommentsDescription"
|
||||
defaultMessage="To add a single-line comment, use {hash} or {doubleSlash}. For a multiline comment, mark the beginning with {slashAsterisk} and the end with {asteriskSlash}."
|
||||
values={{
|
||||
hash: <EuiCode>#</EuiCode>,
|
||||
doubleSlash: <EuiCode>//</EuiCode>,
|
||||
slashAsterisk: <EuiCode>/*</EuiCode>,
|
||||
asteriskSlash: <EuiCode>*/</EuiCode>,
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
<EditorExample
|
||||
panel="welcome-example-4"
|
||||
example={examples.commentsExample}
|
||||
linesOfExampleCode={14}
|
||||
/>
|
||||
<h4>
|
||||
<FormattedMessage
|
||||
id="console.welcomePage.useVariablesTitle"
|
||||
defaultMessage="Reuse values with variables"
|
||||
/>
|
||||
</h4>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="console.welcomePage.useVariablesDescription"
|
||||
defaultMessage="Define variables in Console, and then use them in your requests in the form of {variableName}."
|
||||
values={{
|
||||
// use html tags to render the curly braces
|
||||
variableName: <EuiCode>${variableName}</EuiCode>,
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
|
||||
<ol>
|
||||
<li>
|
||||
<FormattedMessage
|
||||
id="console.welcomePage.quickTips.submitRequestDescription"
|
||||
defaultMessage="Submit requests to ES using the green triangle button."
|
||||
id="console.welcomePage.useVariables.step1"
|
||||
defaultMessage="Click {variableText}, and then enter the variable name and value."
|
||||
values={{
|
||||
variableText: <strong>Variables</strong>,
|
||||
}}
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<FormattedMessage
|
||||
id="console.welcomePage.quickTips.useWrenchMenuDescription"
|
||||
defaultMessage="Use the wrench menu for other useful things."
|
||||
id="console.welcomePage.useVariables.step2"
|
||||
defaultMessage="Refer to variables in the paths and bodies of your requests as many times as you like."
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<FormattedMessage
|
||||
id="console.welcomePage.quickTips.cUrlFormatForRequestsDescription"
|
||||
defaultMessage="You can paste requests in cURL format and they will be translated to the Console syntax."
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<FormattedMessage
|
||||
id="console.welcomePage.quickTips.resizeEditorDescription"
|
||||
defaultMessage="You can resize the editor and output panes by dragging the separator between them."
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<FormattedMessage
|
||||
id="console.welcomePage.quickTips.keyboardShortcutsDescription"
|
||||
defaultMessage="Study the keyboard shortcuts under the Help button. Good stuff in there!"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</ol>
|
||||
<EditorExample
|
||||
panel="welcome-example-5"
|
||||
example={examples.variablesExample}
|
||||
linesOfExampleCode={9}
|
||||
/>
|
||||
</EuiText>
|
||||
</EuiFlyoutBody>
|
||||
<EuiFlyoutFooter>
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.conApp__output {
|
||||
.conApp__output, .conApp_example {
|
||||
display: flex;
|
||||
flex: 1 1 1px;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
.conHelp__example {
|
||||
display: block;
|
||||
height: $euiSize * 8; // 8 lines of code
|
||||
margin: $euiSize 0;
|
||||
}
|
||||
|
|
@ -1,2 +1 @@
|
|||
@import 'help';
|
||||
@import 'history';
|
||||
|
|
|
|||
|
|
@ -316,15 +316,6 @@
|
|||
"console.welcomePage.closeButtonLabel": "Rejeter",
|
||||
"console.welcomePage.pageTitle": "Bienvenue dans la console",
|
||||
"console.welcomePage.quickIntroDescription": "L'interface utilisateur de la console est divisée en deux volets : un volet éditeur (à gauche) et un volet de réponse (à droite). L'éditeur permet de saisir des requêtes et de les envoyer à Elasticsearch, tandis que le volet de réponse affiche les résultats.",
|
||||
"console.welcomePage.quickIntroTitle": "Introduction rapide à l'interface utilisateur",
|
||||
"console.welcomePage.quickTips.cUrlFormatForRequestsDescription": "Vous pouvez coller des requêtes au format cURL ; elles seront automatiquement traduites dans la syntaxe de la console.",
|
||||
"console.welcomePage.quickTips.keyboardShortcutsDescription": "N’hésitez pas à jeter un œil aux raccourcis clavier sous le bouton Aide. Vous pourriez y trouver des choses utiles.",
|
||||
"console.welcomePage.quickTips.resizeEditorDescription": "Vous pouvez redimensionner les volets de l'éditeur et de réponse en faisant glisser le séparateur situé entre les deux.",
|
||||
"console.welcomePage.quickTips.submitRequestDescription": "Utilisez l’icône de triangle vert pour envoyer vos requêtes à ES.",
|
||||
"console.welcomePage.quickTips.useWrenchMenuDescription": "Cliquez sur l’icône en forme de clé pour découvrir d'autres éléments utiles.",
|
||||
"console.welcomePage.quickTipsTitle": "Quelques brèves astuces, pendant que j'ai toute votre attention :",
|
||||
"console.welcomePage.supportedRequestFormatDescription": "Lors de la saisie d'une requête, la console fera des suggestions que vous pourrez accepter en appuyant sur Entrée/Tab. Ces suggestions sont faites en fonction de la structure de la requête, des index et des types.",
|
||||
"console.welcomePage.supportedRequestFormatTitle": "La console prend en charge les requêtes dans un format compact, tel que le format cURL :",
|
||||
"contentManagement.inspector.metadataForm.unableToSaveDangerMessage": "Impossible d'enregistrer {entityName}",
|
||||
"contentManagement.tableList.listing.createNewItemButtonLabel": "Créer {entityName}",
|
||||
"contentManagement.tableList.listing.deleteButtonMessage": "Supprimer {itemCount} {entityName}",
|
||||
|
|
|
|||
|
|
@ -316,15 +316,6 @@
|
|||
"console.welcomePage.closeButtonLabel": "閉じる",
|
||||
"console.welcomePage.pageTitle": "コンソールへようこそ",
|
||||
"console.welcomePage.quickIntroDescription": "コンソール UI は、エディターペイン（左）と応答ペイン（右）の 2 つのペインに分かれています。エディターでリクエストを入力し、Elasticsearch に送信します。結果が右側の応答ペインに表示されます。",
|
||||
"console.welcomePage.quickIntroTitle": "UI の簡単な説明",
|
||||
"console.welcomePage.quickTips.cUrlFormatForRequestsDescription": "cURL フォーマットのリクエストを貼り付けると、Console 構文に変換されます。",
|
||||
"console.welcomePage.quickTips.keyboardShortcutsDescription": "ヘルプボタンでキーボードショートカットが学べます。便利な情報が揃っています！",
|
||||
"console.welcomePage.quickTips.resizeEditorDescription": "間の区切りをドラッグすることで、エディターとアウトプットペインのサイズを変更できます。",
|
||||
"console.welcomePage.quickTips.submitRequestDescription": "緑の三角形のボタンをクリックして ES にリクエストを送信します。",
|
||||
"console.welcomePage.quickTips.useWrenchMenuDescription": "レンチメニューで他の便利な機能が使えます。",
|
||||
"console.welcomePage.quickTipsTitle": "今のうちにいくつか簡単なコツをお教えします",
|
||||
"console.welcomePage.supportedRequestFormatDescription": "リクエストの入力中、コンソールが候補を提案するので、Enter/Tabを押して確定できます。これらの候補はリクエストの構造、およびインデックス、タイプに基づくものです。",
|
||||
"console.welcomePage.supportedRequestFormatTitle": "コンソールは cURL と同様に、コンパクトなフォーマットのリクエストを理解できます。",
|
||||
"contentManagement.inspector.metadataForm.unableToSaveDangerMessage": "{entityName}を保存できません",
|
||||
"contentManagement.tableList.listing.createNewItemButtonLabel": "Create {entityName}",
|
||||
"contentManagement.tableList.listing.deleteButtonMessage": "{itemCount} 件の {entityName} を削除",
|
||||
|
|
|
|||
|
|
@ -316,15 +316,6 @@
|
|||
"console.welcomePage.closeButtonLabel": "关闭",
|
||||
"console.welcomePage.pageTitle": "欢迎使用 Console",
|
||||
"console.welcomePage.quickIntroDescription": "Console UI 分为两个窗格：编辑器窗格（左）和响应窗格（右）。使用编辑器键入请求并将它们提交到 Elasticsearch。结果将显示在右侧的响应窗格中。",
|
||||
"console.welcomePage.quickIntroTitle": "UI 简介",
|
||||
"console.welcomePage.quickTips.cUrlFormatForRequestsDescription": "您可以粘贴 cURL 格式的请求，这些请求将转换成 Console 语法格式。",
|
||||
"console.welcomePage.quickTips.keyboardShortcutsDescription": "学习“帮助”按钮下的键盘快捷方式。那里有非常实用的信息！",
|
||||
"console.welcomePage.quickTips.resizeEditorDescription": "您可以通过拖动编辑器和输出窗格之间的分隔条来调整它们的大小。",
|
||||
"console.welcomePage.quickTips.submitRequestDescription": "使用绿色三角按钮将请求提交到 ES。",
|
||||
"console.welcomePage.quickTips.useWrenchMenuDescription": "使用扳手菜单执行其他有用的操作。",
|
||||
"console.welcomePage.quickTipsTitle": "有几个需要您注意的有用提示",
|
||||
"console.welcomePage.supportedRequestFormatDescription": "键入请求时，控制台将提供建议，您可以通过按 Enter/Tab 键来接受建议。这些建议基于请求结构以及索引和类型进行提供。",
|
||||
"console.welcomePage.supportedRequestFormatTitle": "Console 理解紧凑格式的请求，类似于 cURL：",
|
||||
"contentManagement.inspector.metadataForm.unableToSaveDangerMessage": "无法保存 {entityName}",
|
||||
"contentManagement.tableList.listing.createNewItemButtonLabel": "创建 {entityName}",
|
||||
"contentManagement.tableList.listing.deleteButtonMessage": "删除 {itemCount} 个 {entityName}",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue