github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

[ML] Moves custom URL editor Add button and form to top of flyout (#23326)

Browse source 
* [ML] Moves custom URL editor Add button and form to top of flyout

* [ML] Edits to custom URL editor class name
This commit is contained in:
Pete Harverson 2018-09-20 11:46:24 +01:00 • committed by GitHub
parent f1f157d524
commit 567ee416be
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 1547 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

883
x-pack/plugins/ml/public/jobs/components/custom_url_editor/__snapshots__/editor.test.js.snap Normal file
View file

@ -0,0 +1,883 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`CustomUrlEditor renders the editor for a dashboard type URL with a label 1`] = `
<React.Fragment>
<EuiTitle
size="xs"
>
<h4>
Create new custom URL
</h4>
</EuiTitle>
<EuiSpacer
size="m"
/>
<EuiForm
className="ml-edit-url-form"
>
<EuiFormRow
className="url-label"
compressed={true}
describedByIds={Array []}
error={Array []}
fullWidth={false}
hasEmptyLabelSpace={false}
isInvalid={false}
label="Label"
>
<EuiFieldText
compressed={true}
fullWidth={false}
isInvalid={false}
isLoading={false}
onChange={[Function]}
value="Open Dashboard 1"
/>
</EuiFormRow>
<EuiFormRow
compressed={true}
describedByIds={Array []}
fullWidth={false}
hasEmptyLabelSpace={false}
label="Link to"
>
<EuiRadioGroup
className="url-link-to-radio"
idSelected="KIBANA_DASHBOARD"
onChange={[Function]}
options={
Array [
Object {
"id": "KIBANA_DASHBOARD",
"label": "Kibana dashboard",
},
Object {
"id": "KIBANA_DISCOVER",
"label": "Discover",
},
Object {
"id": "OTHER",
"label": "Other",
},
]
}
/>
</EuiFormRow>
<EuiFormRow
compressed={true}
describedByIds={Array []}
fullWidth={false}
hasEmptyLabelSpace={false}
label="Dashboard name"
>
<EuiSelect
compressed={true}
fullWidth={false}
hasNoInitialSelection={false}
isLoading={false}
onChange={[Function]}
options={
Array [
Object {
"text": "Dashboard 1",
"value": "dash1",
},
Object {
"text": "Dashboard 2",
"value": "dash2",
},
]
}
value="dash1"
/>
</EuiFormRow>
<EuiFormRow
describedByIds={Array []}
fullWidth={false}
hasEmptyLabelSpace={false}
label="Query entities"
>
<EuiComboBox
fullWidth={false}
isClearable={true}
onChange={[Function]}
options={
Array [
Object {
"label": "airline",
},
]
}
placeholder="Select entities"
selectedOptions={Array []}
singleSelection={false}
/>
</EuiFormRow>
<EuiFlexGroup
alignItems="stretch"
component="div"
direction="row"
gutterSize="l"
justifyContent="flexStart"
responsive={true}
wrap={false}
>
<EuiFlexItem
component="div"
grow={false}
>
<EuiFormRow
className="url-time-range"
compressed={true}
describedByIds={Array []}
fullWidth={false}
hasEmptyLabelSpace={false}
label="Time range"
>
<EuiSelect
compressed={true}
fullWidth={false}
hasNoInitialSelection={false}
isLoading={false}
onChange={[Function]}
options={
Array [
Object {
"text": "auto",
"value": "auto",
},
Object {
"text": "interval",
"value": "interval",
},
]
}
value="auto"
/>
</EuiFormRow>
</EuiFlexItem>
</EuiFlexGroup>
</EuiForm>
</React.Fragment>
`;
exports[`CustomUrlEditor renders the editor for a discover type URL with an entity and empty time range interval 1`] = `
<React.Fragment>
<EuiTitle
size="xs"
>
<h4>
Create new custom URL
</h4>
</EuiTitle>
<EuiSpacer
size="m"
/>
<EuiForm
className="ml-edit-url-form"
>
<EuiFormRow
className="url-label"
compressed={true}
describedByIds={Array []}
error={Array []}
fullWidth={false}
hasEmptyLabelSpace={false}
isInvalid={false}
label="Label"
>
<EuiFieldText
compressed={true}
fullWidth={false}
isInvalid={false}
isLoading={false}
onChange={[Function]}
value="Open Discover"
/>
</EuiFormRow>
<EuiFormRow
compressed={true}
describedByIds={Array []}
fullWidth={false}
hasEmptyLabelSpace={false}
label="Link to"
>
<EuiRadioGroup
className="url-link-to-radio"
idSelected="KIBANA_DISCOVER"
onChange={[Function]}
options={
Array [
Object {
"id": "KIBANA_DASHBOARD",
"label": "Kibana dashboard",
},
Object {
"id": "KIBANA_DISCOVER",
"label": "Discover",
},
Object {
"id": "OTHER",
"label": "Other",
},
]
}
/>
</EuiFormRow>
<EuiFormRow
compressed={true}
describedByIds={Array []}
fullWidth={false}
hasEmptyLabelSpace={false}
label="Index pattern"
>
<EuiSelect
compressed={true}
fullWidth={false}
hasNoInitialSelection={false}
isLoading={false}
onChange={[Function]}
options={
Array [
Object {
"text": "Index Pattern 1",
"value": "pattern1",
},
Object {
"text": "Index Pattern 2",
"value": "pattern2",
},
]
}
value="pattern1"
/>
</EuiFormRow>
<EuiFormRow
describedByIds={Array []}
fullWidth={false}
hasEmptyLabelSpace={false}
label="Query entities"
>
<EuiComboBox
fullWidth={false}
isClearable={true}
onChange={[Function]}
options={
Array [
Object {
"label": "airline",
},
]
}
placeholder="Select entities"
selectedOptions={
Array [
Object {
"label": "airline",
},
]
}
singleSelection={false}
/>
</EuiFormRow>
<EuiFlexGroup
alignItems="stretch"
component="div"
direction="row"
gutterSize="l"
justifyContent="flexStart"
responsive={true}
wrap={false}
>
<EuiFlexItem
component="div"
grow={false}
>
<EuiFormRow
className="url-time-range"
compressed={true}
describedByIds={Array []}
fullWidth={false}
hasEmptyLabelSpace={false}
label="Time range"
>
<EuiSelect
compressed={true}
fullWidth={false}
hasNoInitialSelection={false}
isLoading={false}
onChange={[Function]}
options={
Array [
Object {
"text": "auto",
"value": "auto",
},
Object {
"text": "interval",
"value": "interval",
},
]
}
value="interval"
/>
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem
component="div"
grow={true}
>
<EuiFormRow
className="url-time-range"
compressed={true}
describedByIds={Array []}
error={
Array [
"Invalid interval format",
]
}
fullWidth={false}
hasEmptyLabelSpace={false}
isInvalid={true}
label="Interval"
>
<EuiFieldText
compressed={true}
fullWidth={false}
isInvalid={true}
isLoading={false}
onChange={[Function]}
value=""
/>
</EuiFormRow>
</EuiFlexItem>
</EuiFlexGroup>
</EuiForm>
</React.Fragment>
`;
exports[`CustomUrlEditor renders the editor for a discover type URL with valid time range interval 1`] = `
<React.Fragment>
<EuiTitle
size="xs"
>
<h4>
Create new custom URL
</h4>
</EuiTitle>
<EuiSpacer
size="m"
/>
<EuiForm
className="ml-edit-url-form"
>
<EuiFormRow
className="url-label"
compressed={true}
describedByIds={Array []}
error={Array []}
fullWidth={false}
hasEmptyLabelSpace={false}
isInvalid={false}
label="Label"
>
<EuiFieldText
compressed={true}
fullWidth={false}
isInvalid={false}
isLoading={false}
onChange={[Function]}
value="Open Discover"
/>
</EuiFormRow>
<EuiFormRow
compressed={true}
describedByIds={Array []}
fullWidth={false}
hasEmptyLabelSpace={false}
label="Link to"
>
<EuiRadioGroup
className="url-link-to-radio"
idSelected="KIBANA_DISCOVER"
onChange={[Function]}
options={
Array [
Object {
"id": "KIBANA_DASHBOARD",
"label": "Kibana dashboard",
},
Object {
"id": "KIBANA_DISCOVER",
"label": "Discover",
},
Object {
"id": "OTHER",
"label": "Other",
},
]
}
/>
</EuiFormRow>
<EuiFormRow
compressed={true}
describedByIds={Array []}
fullWidth={false}
hasEmptyLabelSpace={false}
label="Index pattern"
>
<EuiSelect
compressed={true}
fullWidth={false}
hasNoInitialSelection={false}
isLoading={false}
onChange={[Function]}
options={
Array [
Object {
"text": "Index Pattern 1",
"value": "pattern1",
},
Object {
"text": "Index Pattern 2",
"value": "pattern2",
},
]
}
value="pattern1"
/>
</EuiFormRow>
<EuiFormRow
describedByIds={Array []}
fullWidth={false}
hasEmptyLabelSpace={false}
label="Query entities"
>
<EuiComboBox
fullWidth={false}
isClearable={true}
onChange={[Function]}
options={
Array [
Object {
"label": "airline",
},
]
}
placeholder="Select entities"
selectedOptions={
Array [
Object {
"label": "airline",
},
]
}
singleSelection={false}
/>
</EuiFormRow>
<EuiFlexGroup
alignItems="stretch"
component="div"
direction="row"
gutterSize="l"
justifyContent="flexStart"
responsive={true}
wrap={false}
>
<EuiFlexItem
component="div"
grow={false}
>
<EuiFormRow
className="url-time-range"
compressed={true}
describedByIds={Array []}
fullWidth={false}
hasEmptyLabelSpace={false}
label="Time range"
>
<EuiSelect
compressed={true}
fullWidth={false}
hasNoInitialSelection={false}
isLoading={false}
onChange={[Function]}
options={
Array [
Object {
"text": "auto",
"value": "auto",
},
Object {
"text": "interval",
"value": "interval",
},
]
}
value="interval"
/>
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem
component="div"
grow={true}
>
<EuiFormRow
className="url-time-range"
compressed={true}
describedByIds={Array []}
error={Array []}
fullWidth={false}
hasEmptyLabelSpace={false}
isInvalid={false}
label="Interval"
>
<EuiFieldText
compressed={true}
fullWidth={false}
isInvalid={false}
isLoading={false}
onChange={[Function]}
value="1h"
/>
</EuiFormRow>
</EuiFlexItem>
</EuiFlexGroup>
</EuiForm>
</React.Fragment>
`;
exports[`CustomUrlEditor renders the editor for a new dashboard type URL with no label 1`] = `
<React.Fragment>
<EuiTitle
size="xs"
>
<h4>
Create new custom URL
</h4>
</EuiTitle>
<EuiSpacer
size="m"
/>
<EuiForm
className="ml-edit-url-form"
>
<EuiFormRow
className="url-label"
compressed={true}
describedByIds={Array []}
error={
Array [
"A unique label must be supplied",
]
}
fullWidth={false}
hasEmptyLabelSpace={false}
isInvalid={true}
label="Label"
>
<EuiFieldText
compressed={true}
fullWidth={false}
isInvalid={true}
isLoading={false}
onChange={[Function]}
value=""
/>
</EuiFormRow>
<EuiFormRow
compressed={true}
describedByIds={Array []}
fullWidth={false}
hasEmptyLabelSpace={false}
label="Link to"
>
<EuiRadioGroup
className="url-link-to-radio"
idSelected="KIBANA_DASHBOARD"
onChange={[Function]}
options={
Array [
Object {
"id": "KIBANA_DASHBOARD",
"label": "Kibana dashboard",
},
Object {
"id": "KIBANA_DISCOVER",
"label": "Discover",
},
Object {
"id": "OTHER",
"label": "Other",
},
]
}
/>
</EuiFormRow>
<EuiFormRow
compressed={true}
describedByIds={Array []}
fullWidth={false}
hasEmptyLabelSpace={false}
label="Dashboard name"
>
<EuiSelect
compressed={true}
fullWidth={false}
hasNoInitialSelection={false}
isLoading={false}
onChange={[Function]}
options={
Array [
Object {
"text": "Dashboard 1",
"value": "dash1",
},
Object {
"text": "Dashboard 2",
"value": "dash2",
},
]
}
value="dash1"
/>
</EuiFormRow>
<EuiFormRow
describedByIds={Array []}
fullWidth={false}
hasEmptyLabelSpace={false}
label="Query entities"
>
<EuiComboBox
fullWidth={false}
isClearable={true}
onChange={[Function]}
options={
Array [
Object {
"label": "airline",
},
]
}
placeholder="Select entities"
selectedOptions={Array []}
singleSelection={false}
/>
</EuiFormRow>
<EuiFlexGroup
alignItems="stretch"
component="div"
direction="row"
gutterSize="l"
justifyContent="flexStart"
responsive={true}
wrap={false}
>
<EuiFlexItem
component="div"
grow={false}
>
<EuiFormRow
className="url-time-range"
compressed={true}
describedByIds={Array []}
fullWidth={false}
hasEmptyLabelSpace={false}
label="Time range"
>
<EuiSelect
compressed={true}
fullWidth={false}
hasNoInitialSelection={false}
isLoading={false}
onChange={[Function]}
options={
Array [
Object {
"text": "auto",
"value": "auto",
},
Object {
"text": "interval",
"value": "interval",
},
]
}
value="auto"
/>
</EuiFormRow>
</EuiFlexItem>
</EuiFlexGroup>
</EuiForm>
</React.Fragment>
`;
exports[`CustomUrlEditor renders the editor for other type of URL with duplicate label 1`] = `
<React.Fragment>
<EuiTitle
size="xs"
>
<h4>
Create new custom URL
</h4>
</EuiTitle>
<EuiSpacer
size="m"
/>
<EuiForm
className="ml-edit-url-form"
>
<EuiFormRow
className="url-label"
compressed={true}
describedByIds={Array []}
error={
Array [
"A unique label must be supplied",
]
}
fullWidth={false}
hasEmptyLabelSpace={false}
isInvalid={true}
label="Label"
>
<EuiFieldText
compressed={true}
fullWidth={false}
isInvalid={true}
isLoading={false}
onChange={[Function]}
value="Show airline"
/>
</EuiFormRow>
<EuiFormRow
compressed={true}
describedByIds={Array []}
fullWidth={false}
hasEmptyLabelSpace={false}
label="Link to"
>
<EuiRadioGroup
className="url-link-to-radio"
idSelected="OTHER"
onChange={[Function]}
options={
Array [
Object {
"id": "KIBANA_DASHBOARD",
"label": "Kibana dashboard",
},
Object {
"id": "KIBANA_DISCOVER",
"label": "Discover",
},
Object {
"id": "OTHER",
"label": "Other",
},
]
}
/>
</EuiFormRow>
<EuiFormRow
compressed={true}
describedByIds={Array []}
fullWidth={true}
hasEmptyLabelSpace={false}
label="URL"
>
<EuiTextArea
compressed={true}
fullWidth={true}
onChange={[Function]}
resize="vertical"
rows={2}
value="https://www.google.co.uk/search?q=airline+code+$airline$"
/>
</EuiFormRow>
</EuiForm>
</React.Fragment>
`;
exports[`CustomUrlEditor renders the editor for other type of URL with unique label 1`] = `
<React.Fragment>
<EuiTitle
size="xs"
>
<h4>
Create new custom URL
</h4>
</EuiTitle>
<EuiSpacer
size="m"
/>
<EuiForm
className="ml-edit-url-form"
>
<EuiFormRow
className="url-label"
compressed={true}
describedByIds={Array []}
error={Array []}
fullWidth={false}
hasEmptyLabelSpace={false}
isInvalid={false}
label="Label"
>
<EuiFieldText
compressed={true}
fullWidth={false}
isInvalid={false}
isLoading={false}
onChange={[Function]}
value="View airline"
/>
</EuiFormRow>
<EuiFormRow
compressed={true}
describedByIds={Array []}
fullWidth={false}
hasEmptyLabelSpace={false}
label="Link to"
>
<EuiRadioGroup
className="url-link-to-radio"
idSelected="OTHER"
onChange={[Function]}
options={
Array [
Object {
"id": "KIBANA_DASHBOARD",
"label": "Kibana dashboard",
},
Object {
"id": "KIBANA_DISCOVER",
"label": "Discover",
},
Object {
"id": "OTHER",
"label": "Other",
},
]
}
/>
</EuiFormRow>
<EuiFormRow
compressed={true}
describedByIds={Array []}
fullWidth={true}
hasEmptyLabelSpace={false}
label="URL"
>
<EuiTextArea
compressed={true}
fullWidth={true}
onChange={[Function]}
resize="vertical"
rows={2}
value="https://www.google.co.uk/search?q=airline+code+$airline$"
/>
</EuiFormRow>
</EuiForm>
</React.Fragment>
`;

387
x-pack/plugins/ml/public/jobs/components/custom_url_editor/__snapshots__/list.test.js.snap Normal file
View file

@ -0,0 +1,387 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`CustomUrlList renders a list of custom URLs 1`] = `
<React.Fragment>
<EuiFlexGroup
alignItems="stretch"
component="div"
direction="row"
gutterSize="l"
justifyContent="flexStart"
key="url_0"
responsive={true}
wrap={false}
>
<EuiFlexItem
component="div"
grow={false}
>
<EuiFormRow
describedByIds={Array []}
error={Array []}
fullWidth={false}
hasEmptyLabelSpace={false}
isInvalid={false}
label="Label"
>
<EuiFieldText
compressed={false}
fullWidth={false}
isInvalid={false}
isLoading={false}
onChange={[Function]}
value="Show data"
/>
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem
component="div"
grow={true}
>
<EuiFormRow
describedByIds={Array []}
fullWidth={false}
hasEmptyLabelSpace={false}
label="URL"
>
<EuiFieldText
compressed={false}
fullWidth={false}
isLoading={false}
onChange={[Function]}
value="kibana#/discover?_g=(time:(from:'$earliest$',mode:absolute,to:'$latest$'))&_a=(index:e532ba80-b76f-11e8-a9dc-37914a458883,query:(language:lucene,query:'airline:\\"$airline$\\"'))"
/>
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem
component="div"
grow={false}
>
<EuiFormRow
describedByIds={Array []}
error={Array []}
fullWidth={false}
hasEmptyLabelSpace={false}
isInvalid={false}
label="Time range"
>
<EuiFieldText
compressed={false}
fullWidth={false}
isInvalid={false}
isLoading={false}
onChange={[Function]}
placeholder="auto"
value="auto"
/>
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem
component="div"
grow={false}
>
<EuiFormRow
describedByIds={Array []}
fullWidth={false}
hasEmptyLabelSpace={true}
>
<EuiToolTip
content="Test custom URL"
delay="regular"
position="top"
>
<EuiButtonIcon
aria-label="Test custom URL"
color="primary"
iconSize="m"
iconType="popout"
onClick={[Function]}
size="s"
type="button"
/>
</EuiToolTip>
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem
component="div"
grow={false}
>
<EuiFormRow
describedByIds={Array []}
fullWidth={false}
hasEmptyLabelSpace={true}
>
<EuiToolTip
content="Delete custom URL"
delay="regular"
position="top"
>
<EuiButtonIcon
aria-label="Delete custom URL"
color="danger"
iconSize="m"
iconType="trash"
onClick={[Function]}
size="s"
type="button"
/>
</EuiToolTip>
</EuiFormRow>
</EuiFlexItem>
</EuiFlexGroup>
<EuiFlexGroup
alignItems="stretch"
component="div"
direction="row"
gutterSize="l"
justifyContent="flexStart"
key="url_1"
responsive={true}
wrap={false}
>
<EuiFlexItem
component="div"
grow={false}
>
<EuiFormRow
describedByIds={Array []}
error={Array []}
fullWidth={false}
hasEmptyLabelSpace={false}
isInvalid={false}
label="Label"
>
<EuiFieldText
compressed={false}
fullWidth={false}
isInvalid={false}
isLoading={false}
onChange={[Function]}
value="Show dashboard"
/>
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem
component="div"
grow={true}
>
<EuiFormRow
describedByIds={Array []}
fullWidth={false}
hasEmptyLabelSpace={false}
label="URL"
>
<EuiFieldText
compressed={false}
fullWidth={false}
isLoading={false}
onChange={[Function]}
value="kibana#/dashboard/52ea8840-bbef-11e8-a04d-b1701b2b977e?_g=(time:(from:'$earliest$',mode:absolute,to:'$latest$'))&_a=(filters:!(),query:(language:lucene,query:'airline:\\"$airline$\\"'))"
/>
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem
component="div"
grow={false}
>
<EuiFormRow
describedByIds={Array []}
error={Array []}
fullWidth={false}
hasEmptyLabelSpace={false}
isInvalid={false}
label="Time range"
>
<EuiFieldText
compressed={false}
fullWidth={false}
isInvalid={false}
isLoading={false}
onChange={[Function]}
placeholder="auto"
value="1h"
/>
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem
component="div"
grow={false}
>
<EuiFormRow
describedByIds={Array []}
fullWidth={false}
hasEmptyLabelSpace={true}
>
<EuiToolTip
content="Test custom URL"
delay="regular"
position="top"
>
<EuiButtonIcon
aria-label="Test custom URL"
color="primary"
iconSize="m"
iconType="popout"
onClick={[Function]}
size="s"
type="button"
/>
</EuiToolTip>
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem
component="div"
grow={false}
>
<EuiFormRow
describedByIds={Array []}
fullWidth={false}
hasEmptyLabelSpace={true}
>
<EuiToolTip
content="Delete custom URL"
delay="regular"
position="top"
>
<EuiButtonIcon
aria-label="Delete custom URL"
color="danger"
iconSize="m"
iconType="trash"
onClick={[Function]}
size="s"
type="button"
/>
</EuiToolTip>
</EuiFormRow>
</EuiFlexItem>
</EuiFlexGroup>
<EuiFlexGroup
alignItems="stretch"
component="div"
direction="row"
gutterSize="l"
justifyContent="flexStart"
key="url_2"
responsive={true}
wrap={false}
>
<EuiFlexItem
component="div"
grow={false}
>
<EuiFormRow
describedByIds={Array []}
error={Array []}
fullWidth={false}
hasEmptyLabelSpace={false}
isInvalid={false}
label="Label"
>
<EuiFieldText
compressed={false}
fullWidth={false}
isInvalid={false}
isLoading={false}
onChange={[Function]}
value="Show airline"
/>
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem
component="div"
grow={true}
>
<EuiFormRow
describedByIds={Array []}
fullWidth={false}
hasEmptyLabelSpace={false}
label="URL"
>
<EuiFieldText
compressed={false}
fullWidth={false}
isLoading={false}
onChange={[Function]}
value="http://airlinecodes.info/airline-code-$airline$"
/>
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem
component="div"
grow={false}
>
<EuiFormRow
describedByIds={Array []}
error={Array []}
fullWidth={false}
hasEmptyLabelSpace={false}
isInvalid={false}
label="Time range"
>
<EuiFieldText
compressed={false}
fullWidth={false}
isInvalid={false}
isLoading={false}
onChange={[Function]}
placeholder="auto"
value="auto"
/>
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem
component="div"
grow={false}
>
<EuiFormRow
describedByIds={Array []}
fullWidth={false}
hasEmptyLabelSpace={true}
>
<EuiToolTip
content="Test custom URL"
delay="regular"
position="top"
>
<EuiButtonIcon
aria-label="Test custom URL"
color="primary"
iconSize="m"
iconType="popout"
onClick={[Function]}
size="s"
type="button"
/>
</EuiToolTip>
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem
component="div"
grow={false}
>
<EuiFormRow
describedByIds={Array []}
fullWidth={false}
hasEmptyLabelSpace={true}
>
<EuiToolTip
content="Delete custom URL"
delay="regular"
position="top"
>
<EuiButtonIcon
aria-label="Delete custom URL"
color="danger"
iconSize="m"
iconType="trash"
onClick={[Function]}
size="s"
type="button"
/>
</EuiToolTip>
</EuiFormRow>
</EuiFlexItem>
</EuiFlexGroup>
</React.Fragment>
`;

6
x-pack/plugins/ml/public/jobs/components/custom_url_editor/editor.js
View file

@ -175,9 +175,9 @@ export class CustomUrlEditor extends Component {
});
const entityOptions = queryEntityFieldNames.map(fieldName => ({ label: fieldName }));
const queryFieldNames = kibanaSettings.queryFieldNames;
let selectedEntityOptions = [];
if (queryFieldNames !== undefined) {
if (kibanaSettings !== undefined && kibanaSettings.queryFieldNames !== undefined) {
const queryFieldNames = kibanaSettings.queryFieldNames;
selectedEntityOptions = queryFieldNames.map(fieldName => ({ label: fieldName }));
}
@ -197,7 +197,7 @@ export class CustomUrlEditor extends Component {
<h4>Create new custom URL</h4>
</EuiTitle>
<EuiSpacer size="m" />
<EuiForm>
<EuiForm className="ml-edit-url-form">
<EuiFormRow
label="Label"
className="url-label"

166
x-pack/plugins/ml/public/jobs/components/custom_url_editor/editor.test.js Normal file
View file

@ -0,0 +1,166 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
// Mock the mlJobService that is used for testing custom URLs.
jest.mock('../../../services/job_service.js', () => 'mlJobService');
import { shallow } from 'enzyme';
import React from 'react';
import { CustomUrlEditor } from './editor';
import {
TIME_RANGE_TYPE,
URL_TYPE
} from './constants';
function prepareTest(customUrl, setEditCustomUrlFn) {
const savedCustomUrls = [
{
url_name: 'Show data',
time_range: 'auto',
url_value: 'kibana#/discover?_g=(time:(from:\'$earliest$\',mode:absolute,to:\'$latest$\'))&_a=' +
'(index:e532ba80-b76f-11e8-a9dc-37914a458883,query:(language:lucene,query:\'airline:"$airline$"\'))'
},
{
url_name: 'Show dashboard',
time_range: '1h',
url_value: 'kibana#/dashboard/52ea8840-bbef-11e8-a04d-b1701b2b977e?_g=' +
'(time:(from:\'$earliest$\',mode:absolute,to:\'$latest$\'))&' +
'_a=(filters:!(),query:(language:lucene,query:\'airline:"$airline$"\'))'
},
{
url_name: 'Show airline',
time_range: 'auto',
url_value: 'http://airlinecodes.info/airline-code-$airline$'
},
];
const dashboards = [
{ id: 'dash1', title: 'Dashboard 1' },
{ id: 'dash2', title: 'Dashboard 2' },
];
const indexPatterns = [
{ id: 'pattern1', title: 'Index Pattern 1' },
{ id: 'pattern2', title: 'Index Pattern 2' },
];
const queryEntityFieldNames = ['airline'];
const props = {
customUrl,
setEditCustomUrl: setEditCustomUrlFn,
savedCustomUrls,
dashboards,
indexPatterns,
queryEntityFieldNames,
};
const wrapper = shallow(
<CustomUrlEditor {...props} />
);
return wrapper;
}
describe('CustomUrlEditor', () => {
const setEditCustomUrl = jest.fn(() => {});
const dashboardUrl = {
label: '',
timeRange: {
type: TIME_RANGE_TYPE.AUTO,
interval: ''
},
type: URL_TYPE.KIBANA_DASHBOARD,
kibanaSettings: {
queryFieldNames: [],
dashboardId: 'dash1',
},
};
const discoverUrl = {
label: 'Open Discover',
timeRange: {
type: TIME_RANGE_TYPE.INTERVAL,
interval: ''
},
type: URL_TYPE.KIBANA_DISCOVER,
kibanaSettings: {
queryFieldNames: ['airline'],
discoverIndexPatternId: 'pattern1',
},
};
const otherUrl = {
label: 'Show airline',
timeRange: {
type: TIME_RANGE_TYPE.AUTO,
interval: ''
},
type: URL_TYPE.OTHER,
otherUrlSettings: {
urlValue: 'https://www.google.co.uk/search?q=airline+code+$airline$'
}
};
test('renders the editor for a new dashboard type URL with no label', () => {
const wrapper = prepareTest(dashboardUrl, setEditCustomUrl);
expect(wrapper).toMatchSnapshot();
});
test('renders the editor for a dashboard type URL with a label', () => {
const dashboardUrlEdit = {
...dashboardUrl,
label: 'Open Dashboard 1'
};
const wrapper = prepareTest(dashboardUrlEdit, setEditCustomUrl);
expect(wrapper).toMatchSnapshot();
});
test('renders the editor for a discover type URL with an entity and empty time range interval', () => {
const wrapper = prepareTest(discoverUrl, setEditCustomUrl);
expect(wrapper).toMatchSnapshot();
});
test('renders the editor for a discover type URL with valid time range interval', () => {
const discoverUrlEdit = {
...discoverUrl,
timeRange: {
type: TIME_RANGE_TYPE.INTERVAL,
interval: '1h'
}
};
const wrapper = prepareTest(discoverUrlEdit, setEditCustomUrl);
expect(wrapper).toMatchSnapshot();
});
test('renders the editor for other type of URL with duplicate label', () => {
const wrapper = prepareTest(otherUrl, setEditCustomUrl);
expect(wrapper).toMatchSnapshot();
});
test('renders the editor for other type of URL with unique label', () => {
const otherUrlEdit = {
...otherUrl,
label: 'View airline'
};
const wrapper = prepareTest(otherUrlEdit, setEditCustomUrl);
expect(wrapper).toMatchSnapshot();
});
test('calls setEditCustomUrl on updating a custom URL field', () => {
const wrapper = prepareTest(dashboardUrl, setEditCustomUrl);
const labelInput = wrapper.find('EuiFieldText').first();
labelInput.simulate('change', { target: { value: 'Edit' } });
wrapper.update();
expect(setEditCustomUrl).toHaveBeenCalled();
});
});

70
x-pack/plugins/ml/public/jobs/components/custom_url_editor/list.test.js Normal file
View file

@ -0,0 +1,70 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
// Mock the mlJobService that is used for testing custom URLs.
jest.mock('../../../services/job_service.js', () => 'mlJobService');
import { shallow } from 'enzyme';
import React from 'react';
import { CustomUrlList } from './list';
function prepareTest(setCustomUrlsFn) {
const customUrls = [
{
url_name: 'Show data',
time_range: 'auto',
url_value: 'kibana#/discover?_g=(time:(from:\'$earliest$\',mode:absolute,to:\'$latest$\'))&_a=' +
'(index:e532ba80-b76f-11e8-a9dc-37914a458883,query:(language:lucene,query:\'airline:"$airline$"\'))'
},
{
url_name: 'Show dashboard',
time_range: '1h',
url_value: 'kibana#/dashboard/52ea8840-bbef-11e8-a04d-b1701b2b977e?_g=' +
'(time:(from:\'$earliest$\',mode:absolute,to:\'$latest$\'))&' +
'_a=(filters:!(),query:(language:lucene,query:\'airline:"$airline$"\'))'
},
{
url_name: 'Show airline',
time_range: 'auto',
url_value: 'http://airlinecodes.info/airline-code-$airline$'
},
];
const props = {
job: {},
customUrls,
setCustomUrls: setCustomUrlsFn,
};
const wrapper = shallow(
<CustomUrlList {...props} />
);
return wrapper;
}
describe('CustomUrlList', () => {
const setCustomUrls = jest.fn(() => {});
test('renders a list of custom URLs', () => {
const wrapper = prepareTest(setCustomUrls);
expect(wrapper).toMatchSnapshot();
});
test('calls setCustomUrls on updating a custom URL field', () => {
const wrapper = prepareTest(setCustomUrls);
const url1LabelInput = wrapper.find('EuiFieldText').first();
url1LabelInput.simulate('change', { target: { value: 'Edit' } });
wrapper.update();
expect(setCustomUrls).toHaveBeenCalled();
});
});

2
x-pack/plugins/ml/public/jobs/components/custom_url_editor/styles/main.less
View file

@ -1,4 +1,4 @@
.ml-custom-url-editor {
.ml-edit-url-form {
.url-label {
width: 250px;
}

2
x-pack/plugins/ml/public/jobs/jobs_list/components/edit_job_flyout/edit_job_flyout.js
View file

@ -23,6 +23,8 @@ import {
EuiTabbedContent,
} from '@elastic/eui';
import './styles/main.less';
import { JobDetails, Detectors, Datafeed, CustomUrls } from './tabs';
import { saveJob } from './edit_utils';
import { loadFullJob } from '../utils';

8
x-pack/plugins/ml/public/jobs/jobs_list/components/edit_job_flyout/styles/main.less
View file

@ -0,0 +1,8 @@
.edit-custom-url-panel {
.close-editor-button {
position: relative;
float: right;
top: -5px;
right: 0px;
}
}

40
x-pack/plugins/ml/public/jobs/jobs_list/components/edit_job_flyout/tabs/custom_urls.js
View file

@ -12,6 +12,7 @@ import React, {
import {
EuiButton,
EuiButtonEmpty,
EuiButtonIcon,
EuiFlexGroup,
EuiFlexItem,
EuiPanel,
@ -135,6 +136,10 @@ export class CustomUrls extends Component {
});
}
closeEditor = () => {
this.setState({ editorOpen: false });
}
render() {
const {
customUrls,
@ -151,22 +156,25 @@ export class CustomUrls extends Component {
return (
<React.Fragment>
<EuiSpacer size="m" />
<CustomUrlList
job={this.props.job}
customUrls={customUrls}
setCustomUrls={this.setCustomUrls}
/>
{editorOpen === false ? (
<EuiButtonEmpty
onClick={() => this.editNewCustomUrl()}
>
Add custom URL
</EuiButtonEmpty>
<React.Fragment>
<EuiButton
size="s"
onClick={() => this.editNewCustomUrl()}
>
Add custom URL
</EuiButton>
</React.Fragment>
) : (
<React.Fragment>
<EuiSpacer size="l" />
<EuiPanel className="ml-custom-url-editor">
<EuiPanel className="edit-custom-url-panel">
<EuiButtonIcon
color="text"
onClick={() => this.closeEditor()}
iconType="cross"
aria-label="Close custom URL editor"
className="close-editor-button"
/>
<CustomUrlEditor
customUrl={editorSettings}
setEditCustomUrl={this.setEditCustomUrl}
@ -200,6 +208,12 @@ export class CustomUrls extends Component {
</EuiPanel>
</React.Fragment>
)}
<EuiSpacer size="l" />
<CustomUrlList
job={this.props.job}
customUrls={customUrls}
setCustomUrls={this.setCustomUrls}
/>
</React.Fragment>
);