maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Management core Less to Sass (#23596)

Browse source 
Converts management's less to sass. Makes minor adjustments to those pages for some design cleanup.
This commit is contained in:
dave.snider@gmail.com 2018-10-04 22:33:49 -07:00 committed by GitHub
parent 03202be64a
commit 57b1a6ce71
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
51 changed files with 954 additions and 1165 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/core_plugins/kibana/public/index.scss
View file

@ -16,6 +16,9 @@
@import './visualize/index'; @import './visualize/index';
@import 'ui/public/vis/index'; @import 'ui/public/vis/index';
// Management styles
@import './management/index';
// Dashboard styles // Dashboard styles
// MUST STAY AT THE BOTTOM BECAUSE OF DARK THEME IMPORTS // MUST STAY AT THE BOTTOM BECAUSE OF DARK THEME IMPORTS
@import './dashboard/index'; @import './dashboard/index';

46
src/core_plugins/kibana/public/management/_hacks.scss Normal file
View file

@ -0,0 +1,46 @@
// SASSTODO: figure out why this is needed
kbn-management-app,
kbn-management-landing,
kbn-management-indices,
kbn-management-indices-edit,
kbn-management-indices-create,
kbn-management-advanced,
kbn-management-objects,
kbn-management-objects-view {
display: block;
}
// SASSTODO: Remove when Kibana has a proper background color
.tab-account, .tab-management {
background-color: $euiColorEmptyShade;
}
// SASSTODO: Remove when Kibana has a proper background color
kbn-management-objects, kbn-management-app {
background: $euiColorLightestShade;
min-height: 100vh;
}
.kbn-management-tab:first-letter {
text-transform: capitalize;
}
// SASSTODO: Remove when this is replaced with EuiCode
kbn-management-objects-view {
.ace_editor { height: 300px; }
}
// SASSTODO: These are some dragula settings.
.gu-handle {
cursor: move;
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
.gu-mirror,
.gu-mirror .gu-handle {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}

55
src/core_plugins/kibana/public/management/_management_app.scss Normal file
View file

@ -0,0 +1,55 @@
.mgtPanel {
margin-bottom: $euiSize;
background: $euiColorEmptyShade;
}
// SASSTODO: Remove when this is replaced by the side nav
.mgtPanel__link {
@include euiFontSizeL;
line-height: 2; // Give some buffer for when they wrap
&.mgtPanel__link--disabled {
opacity: $euiColorDarkShade;
cursor: default;
&:hover, &:visited {
color: $euiColorPrimary;
}
}
}
// SASSTODO: Remove when this form is replaced by EUI
kbn-management-objects {
form {
margin-bottom: $euiSize;
}
.list-unstyled {
li {
border-bottom: $euiBorderThin;
padding: $euiSizeS;
}
}
.empty {
color: $euiColorDarkShade;
}
.item {
padding: $euiSizeM;
.item-title {
margin-left: $euiSizeL;
}
.actions {
margin-top: $euiSizeXS;
}
}
.header {
.title, .controls {
padding-right: 1em;
display: inline-block;
}
}
}

1
src/core_plugins/kibana/public/management/index.js
View file

@ -18,7 +18,6 @@
*/ */
import './sections'; import './sections';
import './styles/main.less';
import 'ui/filters/start_from'; import 'ui/filters/start_from';
import 'ui/field_editor'; import 'ui/field_editor';
import uiRoutes from 'ui/routes'; import uiRoutes from 'ui/routes';

14
src/core_plugins/kibana/public/management/index.scss Normal file
View file

@ -0,0 +1,14 @@
// This file is imported into src/core_plugings/kibana/publix/index.scss
// Prefix all styles with "dsh" to avoid conflicts.
// Examples
// mgtChart
// mgtChart__legend
// mgtChart__legend--small
// mgtChart__legend-isLoading
@import 'hacks';
// Core
@import 'management_app';
@import 'sections/settings/advanced_settings';

10
src/core_plugins/kibana/public/management/landing.html
View file

@ -11,12 +11,10 @@
ng-repeat="section in sections" ng-repeat="section in sections"
class="page-row" class="page-row"
> >
<div class="kuiPanel management-panel" role="group"> <div class="kuiPanel mgtPanel" role="group">
<div class="kuiPanelHeader"> <div class="kuiPanelHeader">
<div class="kuiPanelHeaderSection"> <div class="kuiPanelHeaderSection">
<div <icon type="'{{::section.icon}}'" size="'l'"></icon>
class="management-panel__heading-icon management-panel__heading-icon--{{::section.id}}"
></div>
<h3 class="kuiPanelHeader__title"> <h3 class="kuiPanelHeader__title">
{{::section.display}} {{::section.display}}
</h3> </h3>
@ -32,8 +30,8 @@
> >
<a <a
data-test-subj="{{::item.id}}" data-test-subj="{{::item.id}}"
class="euiLink euiLink--primary management-panel__link" class="euiLink euiLink--primary mgtPanel__link"
ng-class="{ 'management-panel__link--disabled': item.disabled || !item.url }" ng-class="{ 'mgtPanel__link--disabled': item.disabled || !item.url }"
kbn-href="{{::item.disabled ? '' : item.url}}" kbn-href="{{::item.disabled ? '' : item.url}}"
tooltip="{{::item.tooltip}}" tooltip="{{::item.tooltip}}"
tooltip-placement="bottom" tooltip-placement="bottom"

102
src/core_plugins/kibana/public/management/sections/indices/index.html
View file

@ -1,52 +1,58 @@
<div class="col-md-2 sidebar-container" role="region" aria-label="{{'kbn.management.editIndexPatternAria' | i18n: { defaultMessage: 'Index patterns' } }}"> <div class="euiPage">
<div class="sidebar-list"> <div class="col-md-2 sidebar-container" role="region" aria-label="{{'kbn.management.editIndexPatternAria' | i18n: { defaultMessage: 'Index patterns' } }}">
<div class="sidebar-item-title full-title"> <div class="sidebar-list">
<h5 data-test-subj="createIndexPatternParent"> <div class="sidebar-item-title full-title">
<a <h5 data-test-subj="createIndexPatternParent">
ng-if="editingId" <a
href="#/management/kibana/index" ng-if="editingId"
class="kuiButton kuiButton--primary kuiButton--small" href="#/management/kibana/index"
data-test-subj="createIndexPatternButton" class="kuiButton kuiButton--primary kuiButton--small"
data-test-subj="createIndexPatternButton"
>
<span aria-hidden="true" class="kuiIcon fa-plus"></span>
<span i18n-id="kbn.management.editIndexPattern.createIndexButton"
i18n-default-message="Create Index Pattern"></span>
</a>
</h5>
</div>
<ul class="list-unstyled">
<li
ng-if="!defaultIndex"
class="sidebar-item"
> >
<span aria-hidden="true" class="kuiIcon fa-plus"></span> <div class="sidebar-item-title full-title">
<span i18n-id="kbn.management.editIndexPattern.createIndexButton" <div class="euiText euiText--extraSmall">
i18n-default-message="Create Index Pattern"></span> <div class="euiBadge euiBadge--warning"
</a> i18n-id="kbn.management.editIndexPattern.createIndex.warningHeader"
</h5> i18n-default-message="Warning"></div>
<p i18n-id="kbn.management.editIndexPattern.createIndex.warningLabel"
i18n-default-message="No default index pattern. You must select or create one to continue."></p>
</div>
</div>
</li>
<li
ng-repeat="pattern in indexPatternList | orderBy:['-default','title'] track by pattern.id"
class="sidebar-item"
>
<a
href="{{::pattern.url}}"
class="euiLink euiLink--primary show"
data-test-subj="indexPatternLink"
>
<div class="{{::pattern.class}}">
<i aria-hidden="true" ng-if="pattern.default" class="fa fa-star"></i>
<span ng-bind="::pattern.title"></span>
</div>
</a>
</li>
</ul>
</div> </div>
<ul class="list-unstyled">
<li
ng-if="!defaultIndex"
class="sidebar-item"
>
<div class="sidebar-item-title full-title">
<div class="euiText euiText--extraSmall">
<div class="euiBadge euiBadge--warning"
i18n-id="kbn.management.editIndexPattern.createIndex.warningHeader"
i18n-default-message="Warning"></div>
<p i18n-id="kbn.management.editIndexPattern.createIndex.warningLabel"
i18n-default-message="No default index pattern. You must select or create one to continue."></p>
</div>
</div>
</li>
<li
ng-repeat="pattern in indexPatternList | orderBy:['-default','title'] track by pattern.id"
class="sidebar-item"
>
<a
href="{{::pattern.url}}"
class="euiLink euiLink--primary show"
data-test-subj="indexPatternLink"
>
<div class="{{::pattern.class}}">
<i aria-hidden="true" ng-if="pattern.default" class="fa fa-star"></i>
<span ng-bind="::pattern.title"></span>
</div>
</a>
</li>
</ul>
</div> </div>
</div>
<div class="col-md-10" ng-transclude></div> <div class="col-md-10">
<div class="euiPanel euiPanel--paddingLarge">
<div ng-transclude></div>
</div>
</div>
</div>

136
src/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/relationships/__jest__/__snapshots__/relationships.test.js.snap
View file

@ -65,8 +65,8 @@ exports[`Relationships should render dashboards normally 1`] = `
columns={ columns={
Array [ Array [
Object { Object {
"name": "Type",
"render": [Function], "render": [Function],
"width": 24,
}, },
Object { Object {
"field": "title", "field": "title",
@ -183,131 +183,9 @@ exports[`Relationships should render index patterns normally 1`] = `
</EuiTitle> </EuiTitle>
</EuiFlyoutHeader> </EuiFlyoutHeader>
<EuiFlyoutBody> <EuiFlyoutBody>
<EuiDescriptionList <EuiLoadingKibana
align="left" size="xl"
compressed={false} />
textStyle="normal"
type="row"
>
<React.Fragment
key="searches"
>
<EuiDescriptionListTitle
style={
Object {
"marginBottom": "1rem",
}
}
>
<EuiCallOut
color="warning"
size="m"
title="Warning"
>
<p>
Here are some saved searches that use this index pattern. If
you delete this index pattern, these saved searches will not
longer work properly.
</p>
</EuiCallOut>
</EuiDescriptionListTitle>
<EuiInMemoryTable
columns={
Array [
Object {
"name": "Type",
"render": [Function],
},
Object {
"field": "title",
"name": "Title",
"render": [Function],
},
Object {
"actions": Array [
Object {
"description": "View this saved object within Kibana",
"icon": "eye",
"name": "In app",
"onClick": [Function],
},
],
"name": "Actions",
},
]
}
items={
Array [
Object {
"id": "1",
},
]
}
pagination={true}
responsive={true}
sorting={false}
/>
</React.Fragment>
<React.Fragment
key="visualizations"
>
<EuiDescriptionListTitle
style={
Object {
"marginBottom": "1rem",
}
}
>
<EuiCallOut
color="warning"
size="m"
title="Warning"
>
<p>
Here are some visualizations that use this index pattern. If
you delete this index pattern, these visualizations will not
longer work properly.
</p>
</EuiCallOut>
</EuiDescriptionListTitle>
<EuiInMemoryTable
columns={
Array [
Object {
"name": "Type",
"render": [Function],
},
Object {
"field": "title",
"name": "Title",
"render": [Function],
},
Object {
"actions": Array [
Object {
"description": "View this saved object within Kibana",
"icon": "eye",
"name": "In app",
"onClick": [Function],
},
],
"name": "Actions",
},
]
}
items={
Array [
Object {
"id": "2",
},
]
}
pagination={true}
responsive={true}
sorting={false}
/>
</React.Fragment>
</EuiDescriptionList>
</EuiFlyoutBody> </EuiFlyoutBody>
</EuiFlyout> </EuiFlyout>
`; `;
@ -375,8 +253,8 @@ exports[`Relationships should render searches normally 1`] = `
columns={ columns={
Array [ Array [
Object { Object {
"name": "Type",
"render": [Function], "render": [Function],
"width": 24,
}, },
Object { Object {
"field": "title", "field": "title",
@ -434,8 +312,8 @@ exports[`Relationships should render searches normally 1`] = `
columns={ columns={
Array [ Array [
Object { Object {
"name": "Type",
"render": [Function], "render": [Function],
"width": 24,
}, },
Object { Object {
"field": "title", "field": "title",
@ -537,8 +415,8 @@ exports[`Relationships should render visualizations normally 1`] = `
columns={ columns={
Array [ Array [
Object { Object {
"name": "Type",
"render": [Function], "render": [Function],
"width": 24,
}, },
Object { Object {
"field": "title", "field": "title",

2
src/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/relationships/relationships.js
View file

@ -169,7 +169,7 @@ export class Relationships extends Component {
items={list} items={list}
columns={[ columns={[
{ {
name: 'Type', width: 24,
render: () => ( render: () => (
<EuiToolTip <EuiToolTip
position="top" position="top"

926
src/core_plugins/kibana/public/management/sections/settings/__snapshots__/advanced_settings.test.js.snap
View file

@ -1,487 +1,495 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`AdvancedSettings should render normally 1`] = ` exports[`AdvancedSettings should render normally 1`] = `
<div <EuiPage
className="advancedSettings" restrictWidth={true}
> >
<EuiFlexGroup <div
alignItems="stretch" className="mgtAdvancedSettings"
component="div"
direction="row"
gutterSize="none"
justifyContent="flexStart"
responsive={true}
wrap={false}
> >
<EuiFlexItem <EuiFlexGroup
alignItems="stretch"
component="div" component="div"
grow={true} direction="row"
gutterSize="none"
justifyContent="flexStart"
responsive={true}
wrap={false}
> >
<advanced_settings_page_title /> <EuiFlexItem
</EuiFlexItem> component="div"
<EuiFlexItem grow={true}
component="div" >
grow={true} <advanced_settings_page_title />
> </EuiFlexItem>
<Search <EuiFlexItem
categories={ component="div"
Array [ grow={true}
"general", >
"elasticsearch", <Search
] categories={
} Array [
onQueryChange={[Function]} "general",
query={ "elasticsearch",
Query { ]
"ast": _AST {
"_clauses": Array [],
"_indexedClauses": Object {
"field": Object {},
"is": Object {},
"term": Array [],
},
},
"syntax": Object {
"parse": [Function],
"print": [Function],
},
"text": "",
} }
} onQueryChange={[Function]}
/> query={
</EuiFlexItem> Query {
</EuiFlexGroup> "ast": _AST {
<advanced_settings_page_subtitle /> "_clauses": Array [],
<EuiSpacer "_indexedClauses": Object {
size="m" "field": Object {},
/> "is": Object {},
<CallOuts /> "term": Array [],
<EuiSpacer },
size="m" },
/> "syntax": Object {
<Form "parse": [Function],
categories={ "print": [Function],
Array [ },
"general", "text": "",
"elasticsearch", }
] }
} />
categoryCounts={ </EuiFlexItem>
Object { </EuiFlexGroup>
"elasticsearch": 2, <advanced_settings_page_subtitle />
"general": 11, <EuiSpacer
size="m"
/>
<CallOuts />
<EuiSpacer
size="m"
/>
<Form
categories={
Array [
"general",
"elasticsearch",
]
} }
} categoryCounts={
clear={[Function]} Object {
clearQuery={[Function]} "elasticsearch": 2,
save={[Function]} "general": 11,
settings={ }
Object { }
"elasticsearch": Array [ clear={[Function]}
Object { clearQuery={[Function]}
"ariaName": "test array setting", save={[Function]}
"category": Array [ settings={
"elasticsearch", Object {
], "elasticsearch": Array [
"defVal": Array [ Object {
"default_value", "ariaName": "test array setting",
], "category": Array [
"description": "Description for Test array setting", "elasticsearch",
"displayName": "Test array setting", ],
"isCustom": undefined, "defVal": Array [
"isOverridden": false, "default_value",
"name": "test:array:setting", ],
"options": undefined, "description": "Description for Test array setting",
"readonly": false, "displayName": "Test array setting",
"type": "array", "isCustom": undefined,
"value": undefined, "isOverridden": false,
}, "name": "test:array:setting",
Object { "options": undefined,
"ariaName": "test boolean setting", "readonly": false,
"category": Array [ "type": "array",
"elasticsearch", "value": undefined,
], },
"defVal": true, Object {
"description": "Description for Test boolean setting", "ariaName": "test boolean setting",
"displayName": "Test boolean setting", "category": Array [
"isCustom": undefined, "elasticsearch",
"isOverridden": false, ],
"name": "test:boolean:setting", "defVal": true,
"options": undefined, "description": "Description for Test boolean setting",
"readonly": false, "displayName": "Test boolean setting",
"type": "boolean", "isCustom": undefined,
"value": undefined, "isOverridden": false,
}, "name": "test:boolean:setting",
], "options": undefined,
"general": Array [ "readonly": false,
Object { "type": "boolean",
"ariaName": "test customstring setting", "value": undefined,
"category": Array [ },
"general", ],
], "general": Array [
"defVal": null, Object {
"description": "Description for Test custom string setting", "ariaName": "test customstring setting",
"displayName": "Test custom string setting", "category": Array [
"isCustom": undefined, "general",
"isOverridden": false, ],
"name": "test:customstring:setting", "defVal": null,
"options": undefined, "description": "Description for Test custom string setting",
"readonly": false, "displayName": "Test custom string setting",
"type": "string", "isCustom": undefined,
"value": undefined, "isOverridden": false,
}, "name": "test:customstring:setting",
Object { "options": undefined,
"ariaName": "test image setting", "readonly": false,
"category": Array [ "type": "string",
"general", "value": undefined,
], },
"defVal": null, Object {
"description": "Description for Test image setting", "ariaName": "test image setting",
"displayName": "Test image setting", "category": Array [
"isCustom": undefined, "general",
"isOverridden": false, ],
"name": "test:image:setting", "defVal": null,
"options": undefined, "description": "Description for Test image setting",
"readonly": false, "displayName": "Test image setting",
"type": "image", "isCustom": undefined,
"value": undefined, "isOverridden": false,
}, "name": "test:image:setting",
Object { "options": undefined,
"ariaName": "test is overridden json", "readonly": false,
"category": Array [ "type": "image",
"general", "value": undefined,
], },
"defVal": "{ Object {
"ariaName": "test is overridden json",
"category": Array [
"general",
],
"defVal": "{
\\"foo\\": \\"bar\\" \\"foo\\": \\"bar\\"
}", }",
"description": "Description for overridden json", "description": "Description for overridden json",
"displayName": "An overridden json", "displayName": "An overridden json",
"isCustom": undefined, "isCustom": undefined,
"isOverridden": true, "isOverridden": true,
"name": "test:isOverridden:json", "name": "test:isOverridden:json",
"options": undefined, "options": undefined,
"readonly": false, "readonly": false,
"type": "json", "type": "json",
"value": undefined, "value": undefined,
}, },
Object { Object {
"ariaName": "test is overridden number", "ariaName": "test is overridden number",
"category": Array [ "category": Array [
"general", "general",
], ],
"defVal": 1234, "defVal": 1234,
"description": "Description for overridden number", "description": "Description for overridden number",
"displayName": "An overridden number", "displayName": "An overridden number",
"isCustom": undefined, "isCustom": undefined,
"isOverridden": true, "isOverridden": true,
"name": "test:isOverridden:number", "name": "test:isOverridden:number",
"options": undefined, "options": undefined,
"readonly": false, "readonly": false,
"type": "number", "type": "number",
"value": undefined, "value": undefined,
}, },
Object { Object {
"ariaName": "test is overridden select", "ariaName": "test is overridden select",
"category": Array [ "category": Array [
"general", "general",
], ],
"defVal": "orange", "defVal": "orange",
"description": "Description for overridden select setting", "description": "Description for overridden select setting",
"displayName": "Test overridden select setting", "displayName": "Test overridden select setting",
"isCustom": undefined, "isCustom": undefined,
"isOverridden": true, "isOverridden": true,
"name": "test:isOverridden:select", "name": "test:isOverridden:select",
"options": Array [ "options": Array [
"apple", "apple",
"orange", "orange",
"banana", "banana",
], ],
"readonly": false, "readonly": false,
"type": "select", "type": "select",
"value": undefined, "value": undefined,
}, },
Object { Object {
"ariaName": "test is overridden string", "ariaName": "test is overridden string",
"category": Array [ "category": Array [
"general", "general",
], ],
"defVal": "foo", "defVal": "foo",
"description": "Description for overridden string", "description": "Description for overridden string",
"displayName": "An overridden string", "displayName": "An overridden string",
"isCustom": undefined, "isCustom": undefined,
"isOverridden": true, "isOverridden": true,
"name": "test:isOverridden:string", "name": "test:isOverridden:string",
"options": undefined, "options": undefined,
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"value": undefined, "value": undefined,
}, },
Object { Object {
"ariaName": "test json setting", "ariaName": "test json setting",
"category": Array [ "category": Array [
"general", "general",
], ],
"defVal": "{\\"foo\\": \\"bar\\"}", "defVal": "{\\"foo\\": \\"bar\\"}",
"description": "Description for Test json setting", "description": "Description for Test json setting",
"displayName": "Test json setting", "displayName": "Test json setting",
"isCustom": undefined, "isCustom": undefined,
"isOverridden": false, "isOverridden": false,
"name": "test:json:setting", "name": "test:json:setting",
"options": undefined, "options": undefined,
"readonly": false, "readonly": false,
"type": "json", "type": "json",
"value": undefined, "value": undefined,
}, },
Object { Object {
"ariaName": "test markdown setting", "ariaName": "test markdown setting",
"category": Array [ "category": Array [
"general", "general",
], ],
"defVal": "", "defVal": "",
"description": "Description for Test markdown setting", "description": "Description for Test markdown setting",
"displayName": "Test markdown setting", "displayName": "Test markdown setting",
"isCustom": undefined, "isCustom": undefined,
"isOverridden": false, "isOverridden": false,
"name": "test:markdown:setting", "name": "test:markdown:setting",
"options": undefined, "options": undefined,
"readonly": false, "readonly": false,
"type": "markdown", "type": "markdown",
"value": undefined, "value": undefined,
}, },
Object { Object {
"ariaName": "test number setting", "ariaName": "test number setting",
"category": Array [ "category": Array [
"general", "general",
], ],
"defVal": 5, "defVal": 5,
"description": "Description for Test number setting", "description": "Description for Test number setting",
"displayName": "Test number setting", "displayName": "Test number setting",
"isCustom": undefined, "isCustom": undefined,
"isOverridden": false, "isOverridden": false,
"name": "test:number:setting", "name": "test:number:setting",
"options": undefined, "options": undefined,
"readonly": false, "readonly": false,
"type": "number", "type": "number",
"value": undefined, "value": undefined,
}, },
Object { Object {
"ariaName": "test select setting", "ariaName": "test select setting",
"category": Array [ "category": Array [
"general", "general",
], ],
"defVal": "orange", "defVal": "orange",
"description": "Description for Test select setting", "description": "Description for Test select setting",
"displayName": "Test select setting", "displayName": "Test select setting",
"isCustom": undefined, "isCustom": undefined,
"isOverridden": false, "isOverridden": false,
"name": "test:select:setting", "name": "test:select:setting",
"options": Array [ "options": Array [
"apple", "apple",
"orange", "orange",
"banana", "banana",
], ],
"readonly": false, "readonly": false,
"type": "select", "type": "select",
"value": undefined, "value": undefined,
}, },
Object { Object {
"ariaName": "test string setting", "ariaName": "test string setting",
"category": Array [ "category": Array [
"general", "general",
], ],
"defVal": null, "defVal": null,
"description": "Description for Test string setting", "description": "Description for Test string setting",
"displayName": "Test string setting", "displayName": "Test string setting",
"isCustom": undefined, "isCustom": undefined,
"isOverridden": false, "isOverridden": false,
"name": "test:string:setting", "name": "test:string:setting",
"options": undefined, "options": undefined,
"readonly": false, "readonly": false,
"type": "string", "type": "string",
"value": undefined, "value": undefined,
}, },
], ],
}
} }
} showNoResultsMessage={true}
showNoResultsMessage={true} />
/> <advanced_settings_page_footer
<advanced_settings_page_footer onQueryMatchChange={[Function]}
onQueryMatchChange={[Function]} query={
query={ Query {
Query { "ast": _AST {
"ast": _AST { "_clauses": Array [],
"_clauses": Array [], "_indexedClauses": Object {
"_indexedClauses": Object { "field": Object {},
"field": Object {}, "is": Object {},
"is": Object {}, "term": Array [],
"term": Array [], },
}, },
}, "syntax": Object {
"syntax": Object { "parse": [Function],
"parse": [Function], "print": [Function],
"print": [Function], },
}, "text": "",
"text": "", }
} }
} />
/> </div>
</div> </EuiPage>
`; `;
exports[`AdvancedSettings should render specific setting if given setting key 1`] = ` exports[`AdvancedSettings should render specific setting if given setting key 1`] = `
<div <EuiPage
className="advancedSettings" restrictWidth={true}
> >
<EuiFlexGroup <div
alignItems="stretch" className="mgtAdvancedSettings"
component="div"
direction="row"
gutterSize="none"
justifyContent="flexStart"
responsive={true}
wrap={false}
> >
<EuiFlexItem <EuiFlexGroup
alignItems="stretch"
component="div" component="div"
grow={true} direction="row"
gutterSize="none"
justifyContent="flexStart"
responsive={true}
wrap={false}
> >
<advanced_settings_page_title /> <EuiFlexItem
</EuiFlexItem> component="div"
<EuiFlexItem grow={true}
component="div" >
grow={true} <advanced_settings_page_title />
> </EuiFlexItem>
<Search <EuiFlexItem
categories={ component="div"
Array [ grow={true}
"general", >
"elasticsearch", <Search
] categories={
} Array [
onQueryChange={[Function]}
query={
Query {
"ast": _AST {
"_clauses": Array [
Object {
"field": "ariaName",
"match": "must",
"operator": "eq",
"type": "field",
"value": "test string setting",
},
],
"_indexedClauses": Object {
"field": Object {
"ariaName": Array [
Object {
"field": "ariaName",
"match": "must",
"operator": "eq",
"type": "field",
"value": "test string setting",
},
],
},
"is": Object {},
"term": Array [],
},
},
"syntax": Object {
"parse": [Function],
"print": [Function],
},
"text": "ariaName:\\"test string setting\\"",
}
}
/>
</EuiFlexItem>
</EuiFlexGroup>
<advanced_settings_page_subtitle />
<EuiSpacer
size="m"
/>
<CallOuts />
<EuiSpacer
size="m"
/>
<Form
categories={
Array [
"general",
"elasticsearch",
]
}
categoryCounts={
Object {
"elasticsearch": 2,
"general": 11,
}
}
clear={[Function]}
clearQuery={[Function]}
save={[Function]}
settings={
Object {
"general": Array [
Object {
"ariaName": "test string setting",
"category": Array [
"general", "general",
], "elasticsearch",
"defVal": null, ]
"description": "Description for Test string setting", }
"displayName": "Test string setting", onQueryChange={[Function]}
"isCustom": undefined, query={
"isOverridden": false, Query {
"name": "test:string:setting", "ast": _AST {
"options": undefined, "_clauses": Array [
"readonly": false, Object {
"type": "string", "field": "ariaName",
"value": undefined, "match": "must",
}, "operator": "eq",
], "type": "field",
"value": "test string setting",
},
],
"_indexedClauses": Object {
"field": Object {
"ariaName": Array [
Object {
"field": "ariaName",
"match": "must",
"operator": "eq",
"type": "field",
"value": "test string setting",
},
],
},
"is": Object {},
"term": Array [],
},
},
"syntax": Object {
"parse": [Function],
"print": [Function],
},
"text": "ariaName:\\"test string setting\\"",
}
}
/>
</EuiFlexItem>
</EuiFlexGroup>
<advanced_settings_page_subtitle />
<EuiSpacer
size="m"
/>
<CallOuts />
<EuiSpacer
size="m"
/>
<Form
categories={
Array [
"general",
"elasticsearch",
]
} }
} categoryCounts={
showNoResultsMessage={true} Object {
/> "elasticsearch": 2,
<advanced_settings_page_footer "general": 11,
onQueryMatchChange={[Function]} }
query={ }
Query { clear={[Function]}
"ast": _AST { clearQuery={[Function]}
"_clauses": Array [ save={[Function]}
settings={
Object {
"general": Array [
Object { Object {
"field": "ariaName", "ariaName": "test string setting",
"match": "must", "category": Array [
"operator": "eq", "general",
"type": "field", ],
"value": "test string setting", "defVal": null,
"description": "Description for Test string setting",
"displayName": "Test string setting",
"isCustom": undefined,
"isOverridden": false,
"name": "test:string:setting",
"options": undefined,
"readonly": false,
"type": "string",
"value": undefined,
}, },
], ],
"_indexedClauses": Object { }
"field": Object {
"ariaName": Array [
Object {
"field": "ariaName",
"match": "must",
"operator": "eq",
"type": "field",
"value": "test string setting",
},
],
},
"is": Object {},
"term": Array [],
},
},
"syntax": Object {
"parse": [Function],
"print": [Function],
},
"text": "ariaName:\\"test string setting\\"",
} }
} showNoResultsMessage={true}
/> />
</div> <advanced_settings_page_footer
onQueryMatchChange={[Function]}
query={
Query {
"ast": _AST {
"_clauses": Array [
Object {
"field": "ariaName",
"match": "must",
"operator": "eq",
"type": "field",
"value": "test string setting",
},
],
"_indexedClauses": Object {
"field": Object {
"ariaName": Array [
Object {
"field": "ariaName",
"match": "must",
"operator": "eq",
"type": "field",
"value": "test string setting",
},
],
},
"is": Object {},
"term": Array [],
},
},
"syntax": Object {
"parse": [Function],
"print": [Function],
},
"text": "ariaName:\\"test string setting\\"",
}
}
/>
</div>
</EuiPage>
`; `;

60
src/core_plugins/kibana/public/management/sections/settings/advanced_settings.js
View file

@ -25,6 +25,7 @@ import {
EuiFlexGroup, EuiFlexGroup,
EuiFlexItem, EuiFlexItem,
EuiSpacer, EuiSpacer,
EuiPage,
Query, Query,
} from '@elastic/eui'; } from '@elastic/eui';
@ -34,7 +35,6 @@ import { Form } from './components/form';
import { getAriaName, toEditableConfig, DEFAULT_CATEGORY } from './lib'; import { getAriaName, toEditableConfig, DEFAULT_CATEGORY } from './lib';
import './advanced_settings.less';
import { import {
registerDefaultComponents, registerDefaultComponents,
PAGE_TITLE_COMPONENT, PAGE_TITLE_COMPONENT,
@ -154,34 +154,36 @@ export class AdvancedSettings extends Component {
const PageFooter = getSettingsComponent(PAGE_FOOTER_COMPONENT); const PageFooter = getSettingsComponent(PAGE_FOOTER_COMPONENT);
return ( return (
<div className="advancedSettings"> <EuiPage restrictWidth>
<EuiFlexGroup gutterSize="none"> <div className="mgtAdvancedSettings">
<EuiFlexItem> <EuiFlexGroup gutterSize="none">
<PageTitle /> <EuiFlexItem>
</EuiFlexItem> <PageTitle />
<EuiFlexItem> </EuiFlexItem>
<Search <EuiFlexItem>
query={query} <Search
categories={this.categories} query={query}
onQueryChange={this.onQueryChange} categories={this.categories}
/> onQueryChange={this.onQueryChange}
</EuiFlexItem> />
</EuiFlexGroup> </EuiFlexItem>
<PageSubtitle /> </EuiFlexGroup>
<EuiSpacer size="m" /> <PageSubtitle />
<CallOuts /> <EuiSpacer size="m" />
<EuiSpacer size="m" /> <CallOuts />
<Form <EuiSpacer size="m" />
settings={filteredSettings} <Form
categories={this.categories} settings={filteredSettings}
categoryCounts={this.categoryCounts} categories={this.categories}
clearQuery={this.clearQuery} categoryCounts={this.categoryCounts}
save={this.saveConfig} clearQuery={this.clearQuery}
clear={this.clearConfig} save={this.saveConfig}
showNoResultsMessage={!footerQueryMatched} clear={this.clearConfig}
/> showNoResultsMessage={!footerQueryMatched}
<PageFooter query={query} onQueryMatchChange={this.onFooterQueryMatchChange} /> />
</div> <PageFooter query={query} onQueryMatchChange={this.onFooterQueryMatchChange} />
</div>
</EuiPage>
); );
} }
} }

30
src/core_plugins/kibana/public/management/sections/settings/advanced_settings.less
View file

@ -1,30 +0,0 @@
@import (reference) '~ui/styles/variables/colors';
.advancedSettings {
padding: 20px;
background: @globalColorLightestGray;
min-height: calc(~"100vh - 70px");
> div {
max-width: 1000px;
margin: 0 auto;
}
.advancedSettings__field {
+ * {
margin-top: 24px;
}
&__wrapper {
width: 720px;
}
&__actions {
padding-top: 30px;
}
.euiFormHelpText {
padding-bottom: 0;
}
}
}

19
src/core_plugins/kibana/public/management/sections/settings/advanced_settings.scss Normal file
View file

@ -0,0 +1,19 @@
.mgtAdvancedSettings {
padding: $euiSizeL;
background: $euiColorLightestShade;
min-height: calc(100vh - 70px);
.mgtAdvancedSettings__field {
+ * {
margin-top: $euiSize;
}
&Wrapper {
width: 640px;
}
&Actions {
padding-top: $euiSizeM;
}
}
}

128
src/core_plugins/kibana/public/management/sections/settings/components/field/__snapshots__/field.test.js.snap
View file

@ -3,7 +3,7 @@
exports[`Field for array setting should render as read only with help text if overridden 1`] = ` exports[`Field for array setting should render as read only with help text if overridden 1`] = `
<EuiFlexGroup <EuiFlexGroup
alignItems="stretch" alignItems="stretch"
className="advancedSettings__field" className="mgtAdvancedSettings__field"
component="div" component="div"
direction="row" direction="row"
gutterSize="l" gutterSize="l"
@ -16,7 +16,7 @@ exports[`Field for array setting should render as read only with help text if ov
grow={false} grow={false}
> >
<EuiDescribedFormGroup <EuiDescribedFormGroup
className="advancedSettings__field__wrapper" className="mgtAdvancedSettings__fieldWrapper"
description={ description={
<React.Fragment> <React.Fragment>
<div <div
@ -99,7 +99,7 @@ exports[`Field for array setting should render as read only with help text if ov
exports[`Field for array setting should render custom setting icon if it is custom 1`] = ` exports[`Field for array setting should render custom setting icon if it is custom 1`] = `
<EuiFlexGroup <EuiFlexGroup
alignItems="stretch" alignItems="stretch"
className="advancedSettings__field" className="mgtAdvancedSettings__field"
component="div" component="div"
direction="row" direction="row"
gutterSize="l" gutterSize="l"
@ -112,7 +112,7 @@ exports[`Field for array setting should render custom setting icon if it is cust
grow={false} grow={false}
> >
<EuiDescribedFormGroup <EuiDescribedFormGroup
className="advancedSettings__field__wrapper" className="mgtAdvancedSettings__fieldWrapper"
description={ description={
<React.Fragment> <React.Fragment>
<div <div
@ -177,7 +177,7 @@ exports[`Field for array setting should render custom setting icon if it is cust
exports[`Field for array setting should render default value if there is no user value set 1`] = ` exports[`Field for array setting should render default value if there is no user value set 1`] = `
<EuiFlexGroup <EuiFlexGroup
alignItems="stretch" alignItems="stretch"
className="advancedSettings__field" className="mgtAdvancedSettings__field"
component="div" component="div"
direction="row" direction="row"
gutterSize="l" gutterSize="l"
@ -190,7 +190,7 @@ exports[`Field for array setting should render default value if there is no user
grow={false} grow={false}
> >
<EuiDescribedFormGroup <EuiDescribedFormGroup
className="advancedSettings__field__wrapper" className="mgtAdvancedSettings__fieldWrapper"
description={ description={
<React.Fragment> <React.Fragment>
<div <div
@ -250,7 +250,7 @@ exports[`Field for array setting should render default value if there is no user
exports[`Field for array setting should render user value if there is user value is set 1`] = ` exports[`Field for array setting should render user value if there is user value is set 1`] = `
<EuiFlexGroup <EuiFlexGroup
alignItems="stretch" alignItems="stretch"
className="advancedSettings__field" className="mgtAdvancedSettings__field"
component="div" component="div"
direction="row" direction="row"
gutterSize="l" gutterSize="l"
@ -263,7 +263,7 @@ exports[`Field for array setting should render user value if there is user value
grow={false} grow={false}
> >
<EuiDescribedFormGroup <EuiDescribedFormGroup
className="advancedSettings__field__wrapper" className="mgtAdvancedSettings__fieldWrapper"
description={ description={
<React.Fragment> <React.Fragment>
<div <div
@ -354,7 +354,7 @@ exports[`Field for array setting should render user value if there is user value
exports[`Field for boolean setting should render as read only with help text if overridden 1`] = ` exports[`Field for boolean setting should render as read only with help text if overridden 1`] = `
<EuiFlexGroup <EuiFlexGroup
alignItems="stretch" alignItems="stretch"
className="advancedSettings__field" className="mgtAdvancedSettings__field"
component="div" component="div"
direction="row" direction="row"
gutterSize="l" gutterSize="l"
@ -367,7 +367,7 @@ exports[`Field for boolean setting should render as read only with help text if
grow={false} grow={false}
> >
<EuiDescribedFormGroup <EuiDescribedFormGroup
className="advancedSettings__field__wrapper" className="mgtAdvancedSettings__fieldWrapper"
description={ description={
<React.Fragment> <React.Fragment>
<div <div
@ -448,7 +448,7 @@ exports[`Field for boolean setting should render as read only with help text if
exports[`Field for boolean setting should render custom setting icon if it is custom 1`] = ` exports[`Field for boolean setting should render custom setting icon if it is custom 1`] = `
<EuiFlexGroup <EuiFlexGroup
alignItems="stretch" alignItems="stretch"
className="advancedSettings__field" className="mgtAdvancedSettings__field"
component="div" component="div"
direction="row" direction="row"
gutterSize="l" gutterSize="l"
@ -461,7 +461,7 @@ exports[`Field for boolean setting should render custom setting icon if it is cu
grow={false} grow={false}
> >
<EuiDescribedFormGroup <EuiDescribedFormGroup
className="advancedSettings__field__wrapper" className="mgtAdvancedSettings__fieldWrapper"
description={ description={
<React.Fragment> <React.Fragment>
<div <div
@ -524,7 +524,7 @@ exports[`Field for boolean setting should render custom setting icon if it is cu
exports[`Field for boolean setting should render default value if there is no user value set 1`] = ` exports[`Field for boolean setting should render default value if there is no user value set 1`] = `
<EuiFlexGroup <EuiFlexGroup
alignItems="stretch" alignItems="stretch"
className="advancedSettings__field" className="mgtAdvancedSettings__field"
component="div" component="div"
direction="row" direction="row"
gutterSize="l" gutterSize="l"
@ -537,7 +537,7 @@ exports[`Field for boolean setting should render default value if there is no us
grow={false} grow={false}
> >
<EuiDescribedFormGroup <EuiDescribedFormGroup
className="advancedSettings__field__wrapper" className="mgtAdvancedSettings__fieldWrapper"
description={ description={
<React.Fragment> <React.Fragment>
<div <div
@ -595,7 +595,7 @@ exports[`Field for boolean setting should render default value if there is no us
exports[`Field for boolean setting should render user value if there is user value is set 1`] = ` exports[`Field for boolean setting should render user value if there is user value is set 1`] = `
<EuiFlexGroup <EuiFlexGroup
alignItems="stretch" alignItems="stretch"
className="advancedSettings__field" className="mgtAdvancedSettings__field"
component="div" component="div"
direction="row" direction="row"
gutterSize="l" gutterSize="l"
@ -608,7 +608,7 @@ exports[`Field for boolean setting should render user value if there is user val
grow={false} grow={false}
> >
<EuiDescribedFormGroup <EuiDescribedFormGroup
className="advancedSettings__field__wrapper" className="mgtAdvancedSettings__fieldWrapper"
description={ description={
<React.Fragment> <React.Fragment>
<div <div
@ -697,7 +697,7 @@ exports[`Field for boolean setting should render user value if there is user val
exports[`Field for image setting should render as read only with help text if overridden 1`] = ` exports[`Field for image setting should render as read only with help text if overridden 1`] = `
<EuiFlexGroup <EuiFlexGroup
alignItems="stretch" alignItems="stretch"
className="advancedSettings__field" className="mgtAdvancedSettings__field"
component="div" component="div"
direction="row" direction="row"
gutterSize="l" gutterSize="l"
@ -710,7 +710,7 @@ exports[`Field for image setting should render as read only with help text if ov
grow={false} grow={false}
> >
<EuiDescribedFormGroup <EuiDescribedFormGroup
className="advancedSettings__field__wrapper" className="mgtAdvancedSettings__fieldWrapper"
description={ description={
<React.Fragment> <React.Fragment>
<div <div
@ -790,7 +790,7 @@ exports[`Field for image setting should render as read only with help text if ov
exports[`Field for image setting should render custom setting icon if it is custom 1`] = ` exports[`Field for image setting should render custom setting icon if it is custom 1`] = `
<EuiFlexGroup <EuiFlexGroup
alignItems="stretch" alignItems="stretch"
className="advancedSettings__field" className="mgtAdvancedSettings__field"
component="div" component="div"
direction="row" direction="row"
gutterSize="l" gutterSize="l"
@ -803,7 +803,7 @@ exports[`Field for image setting should render custom setting icon if it is cust
grow={false} grow={false}
> >
<EuiDescribedFormGroup <EuiDescribedFormGroup
className="advancedSettings__field__wrapper" className="mgtAdvancedSettings__fieldWrapper"
description={ description={
<React.Fragment> <React.Fragment>
<div <div
@ -866,7 +866,7 @@ exports[`Field for image setting should render custom setting icon if it is cust
exports[`Field for image setting should render default value if there is no user value set 1`] = ` exports[`Field for image setting should render default value if there is no user value set 1`] = `
<EuiFlexGroup <EuiFlexGroup
alignItems="stretch" alignItems="stretch"
className="advancedSettings__field" className="mgtAdvancedSettings__field"
component="div" component="div"
direction="row" direction="row"
gutterSize="l" gutterSize="l"
@ -879,7 +879,7 @@ exports[`Field for image setting should render default value if there is no user
grow={false} grow={false}
> >
<EuiDescribedFormGroup <EuiDescribedFormGroup
className="advancedSettings__field__wrapper" className="mgtAdvancedSettings__fieldWrapper"
description={ description={
<React.Fragment> <React.Fragment>
<div <div
@ -937,7 +937,7 @@ exports[`Field for image setting should render default value if there is no user
exports[`Field for image setting should render user value if there is user value is set 1`] = ` exports[`Field for image setting should render user value if there is user value is set 1`] = `
<EuiFlexGroup <EuiFlexGroup
alignItems="stretch" alignItems="stretch"
className="advancedSettings__field" className="mgtAdvancedSettings__field"
component="div" component="div"
direction="row" direction="row"
gutterSize="l" gutterSize="l"
@ -950,7 +950,7 @@ exports[`Field for image setting should render user value if there is user value
grow={false} grow={false}
> >
<EuiDescribedFormGroup <EuiDescribedFormGroup
className="advancedSettings__field__wrapper" className="mgtAdvancedSettings__fieldWrapper"
description={ description={
<React.Fragment> <React.Fragment>
<div <div
@ -1049,7 +1049,7 @@ exports[`Field for image setting should render user value if there is user value
exports[`Field for json setting should render as read only with help text if overridden 1`] = ` exports[`Field for json setting should render as read only with help text if overridden 1`] = `
<EuiFlexGroup <EuiFlexGroup
alignItems="stretch" alignItems="stretch"
className="advancedSettings__field" className="mgtAdvancedSettings__field"
component="div" component="div"
direction="row" direction="row"
gutterSize="l" gutterSize="l"
@ -1062,7 +1062,7 @@ exports[`Field for json setting should render as read only with help text if ove
grow={false} grow={false}
> >
<EuiDescribedFormGroup <EuiDescribedFormGroup
className="advancedSettings__field__wrapper" className="mgtAdvancedSettings__fieldWrapper"
description={ description={
<React.Fragment> <React.Fragment>
<div <div
@ -1165,7 +1165,7 @@ exports[`Field for json setting should render as read only with help text if ove
exports[`Field for json setting should render custom setting icon if it is custom 1`] = ` exports[`Field for json setting should render custom setting icon if it is custom 1`] = `
<EuiFlexGroup <EuiFlexGroup
alignItems="stretch" alignItems="stretch"
className="advancedSettings__field" className="mgtAdvancedSettings__field"
component="div" component="div"
direction="row" direction="row"
gutterSize="l" gutterSize="l"
@ -1178,7 +1178,7 @@ exports[`Field for json setting should render custom setting icon if it is custo
grow={false} grow={false}
> >
<EuiDescribedFormGroup <EuiDescribedFormGroup
className="advancedSettings__field__wrapper" className="mgtAdvancedSettings__fieldWrapper"
description={ description={
<React.Fragment> <React.Fragment>
<div <div
@ -1259,7 +1259,7 @@ exports[`Field for json setting should render custom setting icon if it is custo
exports[`Field for json setting should render default value if there is no user value set 1`] = ` exports[`Field for json setting should render default value if there is no user value set 1`] = `
<EuiFlexGroup <EuiFlexGroup
alignItems="stretch" alignItems="stretch"
className="advancedSettings__field" className="mgtAdvancedSettings__field"
component="div" component="div"
direction="row" direction="row"
gutterSize="l" gutterSize="l"
@ -1272,7 +1272,7 @@ exports[`Field for json setting should render default value if there is no user
grow={false} grow={false}
> >
<EuiDescribedFormGroup <EuiDescribedFormGroup
className="advancedSettings__field__wrapper" className="mgtAdvancedSettings__fieldWrapper"
description={ description={
<React.Fragment> <React.Fragment>
<div <div
@ -1383,7 +1383,7 @@ exports[`Field for json setting should render default value if there is no user
exports[`Field for json setting should render user value if there is user value is set 1`] = ` exports[`Field for json setting should render user value if there is user value is set 1`] = `
<EuiFlexGroup <EuiFlexGroup
alignItems="stretch" alignItems="stretch"
className="advancedSettings__field" className="mgtAdvancedSettings__field"
component="div" component="div"
direction="row" direction="row"
gutterSize="l" gutterSize="l"
@ -1396,7 +1396,7 @@ exports[`Field for json setting should render user value if there is user value
grow={false} grow={false}
> >
<EuiDescribedFormGroup <EuiDescribedFormGroup
className="advancedSettings__field__wrapper" className="mgtAdvancedSettings__fieldWrapper"
description={ description={
<React.Fragment> <React.Fragment>
<div <div
@ -1507,7 +1507,7 @@ exports[`Field for json setting should render user value if there is user value
exports[`Field for markdown setting should render as read only with help text if overridden 1`] = ` exports[`Field for markdown setting should render as read only with help text if overridden 1`] = `
<EuiFlexGroup <EuiFlexGroup
alignItems="stretch" alignItems="stretch"
className="advancedSettings__field" className="mgtAdvancedSettings__field"
component="div" component="div"
direction="row" direction="row"
gutterSize="l" gutterSize="l"
@ -1520,7 +1520,7 @@ exports[`Field for markdown setting should render as read only with help text if
grow={false} grow={false}
> >
<EuiDescribedFormGroup <EuiDescribedFormGroup
className="advancedSettings__field__wrapper" className="mgtAdvancedSettings__fieldWrapper"
description={ description={
<React.Fragment> <React.Fragment>
<div <div
@ -1619,7 +1619,7 @@ exports[`Field for markdown setting should render as read only with help text if
exports[`Field for markdown setting should render custom setting icon if it is custom 1`] = ` exports[`Field for markdown setting should render custom setting icon if it is custom 1`] = `
<EuiFlexGroup <EuiFlexGroup
alignItems="stretch" alignItems="stretch"
className="advancedSettings__field" className="mgtAdvancedSettings__field"
component="div" component="div"
direction="row" direction="row"
gutterSize="l" gutterSize="l"
@ -1632,7 +1632,7 @@ exports[`Field for markdown setting should render custom setting icon if it is c
grow={false} grow={false}
> >
<EuiDescribedFormGroup <EuiDescribedFormGroup
className="advancedSettings__field__wrapper" className="mgtAdvancedSettings__fieldWrapper"
description={ description={
<React.Fragment> <React.Fragment>
<div <div
@ -1713,7 +1713,7 @@ exports[`Field for markdown setting should render custom setting icon if it is c
exports[`Field for markdown setting should render default value if there is no user value set 1`] = ` exports[`Field for markdown setting should render default value if there is no user value set 1`] = `
<EuiFlexGroup <EuiFlexGroup
alignItems="stretch" alignItems="stretch"
className="advancedSettings__field" className="mgtAdvancedSettings__field"
component="div" component="div"
direction="row" direction="row"
gutterSize="l" gutterSize="l"
@ -1726,7 +1726,7 @@ exports[`Field for markdown setting should render default value if there is no u
grow={false} grow={false}
> >
<EuiDescribedFormGroup <EuiDescribedFormGroup
className="advancedSettings__field__wrapper" className="mgtAdvancedSettings__fieldWrapper"
description={ description={
<React.Fragment> <React.Fragment>
<div <div
@ -1802,7 +1802,7 @@ exports[`Field for markdown setting should render default value if there is no u
exports[`Field for markdown setting should render user value if there is user value is set 1`] = ` exports[`Field for markdown setting should render user value if there is user value is set 1`] = `
<EuiFlexGroup <EuiFlexGroup
alignItems="stretch" alignItems="stretch"
className="advancedSettings__field" className="mgtAdvancedSettings__field"
component="div" component="div"
direction="row" direction="row"
gutterSize="l" gutterSize="l"
@ -1815,7 +1815,7 @@ exports[`Field for markdown setting should render user value if there is user va
grow={false} grow={false}
> >
<EuiDescribedFormGroup <EuiDescribedFormGroup
className="advancedSettings__field__wrapper" className="mgtAdvancedSettings__fieldWrapper"
description={ description={
<React.Fragment> <React.Fragment>
<div <div
@ -1922,7 +1922,7 @@ exports[`Field for markdown setting should render user value if there is user va
exports[`Field for number setting should render as read only with help text if overridden 1`] = ` exports[`Field for number setting should render as read only with help text if overridden 1`] = `
<EuiFlexGroup <EuiFlexGroup
alignItems="stretch" alignItems="stretch"
className="advancedSettings__field" className="mgtAdvancedSettings__field"
component="div" component="div"
direction="row" direction="row"
gutterSize="l" gutterSize="l"
@ -1935,7 +1935,7 @@ exports[`Field for number setting should render as read only with help text if o
grow={false} grow={false}
> >
<EuiDescribedFormGroup <EuiDescribedFormGroup
className="advancedSettings__field__wrapper" className="mgtAdvancedSettings__fieldWrapper"
description={ description={
<React.Fragment> <React.Fragment>
<div <div
@ -2018,7 +2018,7 @@ exports[`Field for number setting should render as read only with help text if o
exports[`Field for number setting should render custom setting icon if it is custom 1`] = ` exports[`Field for number setting should render custom setting icon if it is custom 1`] = `
<EuiFlexGroup <EuiFlexGroup
alignItems="stretch" alignItems="stretch"
className="advancedSettings__field" className="mgtAdvancedSettings__field"
component="div" component="div"
direction="row" direction="row"
gutterSize="l" gutterSize="l"
@ -2031,7 +2031,7 @@ exports[`Field for number setting should render custom setting icon if it is cus
grow={false} grow={false}
> >
<EuiDescribedFormGroup <EuiDescribedFormGroup
className="advancedSettings__field__wrapper" className="mgtAdvancedSettings__fieldWrapper"
description={ description={
<React.Fragment> <React.Fragment>
<div <div
@ -2096,7 +2096,7 @@ exports[`Field for number setting should render custom setting icon if it is cus
exports[`Field for number setting should render default value if there is no user value set 1`] = ` exports[`Field for number setting should render default value if there is no user value set 1`] = `
<EuiFlexGroup <EuiFlexGroup
alignItems="stretch" alignItems="stretch"
className="advancedSettings__field" className="mgtAdvancedSettings__field"
component="div" component="div"
direction="row" direction="row"
gutterSize="l" gutterSize="l"
@ -2109,7 +2109,7 @@ exports[`Field for number setting should render default value if there is no use
grow={false} grow={false}
> >
<EuiDescribedFormGroup <EuiDescribedFormGroup
className="advancedSettings__field__wrapper" className="mgtAdvancedSettings__fieldWrapper"
description={ description={
<React.Fragment> <React.Fragment>
<div <div
@ -2169,7 +2169,7 @@ exports[`Field for number setting should render default value if there is no use
exports[`Field for number setting should render user value if there is user value is set 1`] = ` exports[`Field for number setting should render user value if there is user value is set 1`] = `
<EuiFlexGroup <EuiFlexGroup
alignItems="stretch" alignItems="stretch"
className="advancedSettings__field" className="mgtAdvancedSettings__field"
component="div" component="div"
direction="row" direction="row"
gutterSize="l" gutterSize="l"
@ -2182,7 +2182,7 @@ exports[`Field for number setting should render user value if there is user valu
grow={false} grow={false}
> >
<EuiDescribedFormGroup <EuiDescribedFormGroup
className="advancedSettings__field__wrapper" className="mgtAdvancedSettings__fieldWrapper"
description={ description={
<React.Fragment> <React.Fragment>
<div <div
@ -2273,7 +2273,7 @@ exports[`Field for number setting should render user value if there is user valu
exports[`Field for select setting should render as read only with help text if overridden 1`] = ` exports[`Field for select setting should render as read only with help text if overridden 1`] = `
<EuiFlexGroup <EuiFlexGroup
alignItems="stretch" alignItems="stretch"
className="advancedSettings__field" className="mgtAdvancedSettings__field"
component="div" component="div"
direction="row" direction="row"
gutterSize="l" gutterSize="l"
@ -2286,7 +2286,7 @@ exports[`Field for select setting should render as read only with help text if o
grow={false} grow={false}
> >
<EuiDescribedFormGroup <EuiDescribedFormGroup
className="advancedSettings__field__wrapper" className="mgtAdvancedSettings__fieldWrapper"
description={ description={
<React.Fragment> <React.Fragment>
<div <div
@ -2386,7 +2386,7 @@ exports[`Field for select setting should render as read only with help text if o
exports[`Field for select setting should render custom setting icon if it is custom 1`] = ` exports[`Field for select setting should render custom setting icon if it is custom 1`] = `
<EuiFlexGroup <EuiFlexGroup
alignItems="stretch" alignItems="stretch"
className="advancedSettings__field" className="mgtAdvancedSettings__field"
component="div" component="div"
direction="row" direction="row"
gutterSize="l" gutterSize="l"
@ -2399,7 +2399,7 @@ exports[`Field for select setting should render custom setting icon if it is cus
grow={false} grow={false}
> >
<EuiDescribedFormGroup <EuiDescribedFormGroup
className="advancedSettings__field__wrapper" className="mgtAdvancedSettings__fieldWrapper"
description={ description={
<React.Fragment> <React.Fragment>
<div <div
@ -2481,7 +2481,7 @@ exports[`Field for select setting should render custom setting icon if it is cus
exports[`Field for select setting should render default value if there is no user value set 1`] = ` exports[`Field for select setting should render default value if there is no user value set 1`] = `
<EuiFlexGroup <EuiFlexGroup
alignItems="stretch" alignItems="stretch"
className="advancedSettings__field" className="mgtAdvancedSettings__field"
component="div" component="div"
direction="row" direction="row"
gutterSize="l" gutterSize="l"
@ -2494,7 +2494,7 @@ exports[`Field for select setting should render default value if there is no use
grow={false} grow={false}
> >
<EuiDescribedFormGroup <EuiDescribedFormGroup
className="advancedSettings__field__wrapper" className="mgtAdvancedSettings__fieldWrapper"
description={ description={
<React.Fragment> <React.Fragment>
<div <div
@ -2571,7 +2571,7 @@ exports[`Field for select setting should render default value if there is no use
exports[`Field for select setting should render user value if there is user value is set 1`] = ` exports[`Field for select setting should render user value if there is user value is set 1`] = `
<EuiFlexGroup <EuiFlexGroup
alignItems="stretch" alignItems="stretch"
className="advancedSettings__field" className="mgtAdvancedSettings__field"
component="div" component="div"
direction="row" direction="row"
gutterSize="l" gutterSize="l"
@ -2584,7 +2584,7 @@ exports[`Field for select setting should render user value if there is user valu
grow={false} grow={false}
> >
<EuiDescribedFormGroup <EuiDescribedFormGroup
className="advancedSettings__field__wrapper" className="mgtAdvancedSettings__fieldWrapper"
description={ description={
<React.Fragment> <React.Fragment>
<div <div
@ -2692,7 +2692,7 @@ exports[`Field for select setting should render user value if there is user valu
exports[`Field for string setting should render as read only with help text if overridden 1`] = ` exports[`Field for string setting should render as read only with help text if overridden 1`] = `
<EuiFlexGroup <EuiFlexGroup
alignItems="stretch" alignItems="stretch"
className="advancedSettings__field" className="mgtAdvancedSettings__field"
component="div" component="div"
direction="row" direction="row"
gutterSize="l" gutterSize="l"
@ -2705,7 +2705,7 @@ exports[`Field for string setting should render as read only with help text if o
grow={false} grow={false}
> >
<EuiDescribedFormGroup <EuiDescribedFormGroup
className="advancedSettings__field__wrapper" className="mgtAdvancedSettings__fieldWrapper"
description={ description={
<React.Fragment> <React.Fragment>
<div <div
@ -2788,7 +2788,7 @@ exports[`Field for string setting should render as read only with help text if o
exports[`Field for string setting should render custom setting icon if it is custom 1`] = ` exports[`Field for string setting should render custom setting icon if it is custom 1`] = `
<EuiFlexGroup <EuiFlexGroup
alignItems="stretch" alignItems="stretch"
className="advancedSettings__field" className="mgtAdvancedSettings__field"
component="div" component="div"
direction="row" direction="row"
gutterSize="l" gutterSize="l"
@ -2801,7 +2801,7 @@ exports[`Field for string setting should render custom setting icon if it is cus
grow={false} grow={false}
> >
<EuiDescribedFormGroup <EuiDescribedFormGroup
className="advancedSettings__field__wrapper" className="mgtAdvancedSettings__fieldWrapper"
description={ description={
<React.Fragment> <React.Fragment>
<div <div
@ -2866,7 +2866,7 @@ exports[`Field for string setting should render custom setting icon if it is cus
exports[`Field for string setting should render default value if there is no user value set 1`] = ` exports[`Field for string setting should render default value if there is no user value set 1`] = `
<EuiFlexGroup <EuiFlexGroup
alignItems="stretch" alignItems="stretch"
className="advancedSettings__field" className="mgtAdvancedSettings__field"
component="div" component="div"
direction="row" direction="row"
gutterSize="l" gutterSize="l"
@ -2879,7 +2879,7 @@ exports[`Field for string setting should render default value if there is no use
grow={false} grow={false}
> >
<EuiDescribedFormGroup <EuiDescribedFormGroup
className="advancedSettings__field__wrapper" className="mgtAdvancedSettings__fieldWrapper"
description={ description={
<React.Fragment> <React.Fragment>
<div <div
@ -2939,7 +2939,7 @@ exports[`Field for string setting should render default value if there is no use
exports[`Field for string setting should render user value if there is user value is set 1`] = ` exports[`Field for string setting should render user value if there is user value is set 1`] = `
<EuiFlexGroup <EuiFlexGroup
alignItems="stretch" alignItems="stretch"
className="advancedSettings__field" className="mgtAdvancedSettings__field"
component="div" component="div"
direction="row" direction="row"
gutterSize="l" gutterSize="l"
@ -2952,7 +2952,7 @@ exports[`Field for string setting should render user value if there is user valu
grow={false} grow={false}
> >
<EuiDescribedFormGroup <EuiDescribedFormGroup
className="advancedSettings__field__wrapper" className="mgtAdvancedSettings__fieldWrapper"
description={ description={
<React.Fragment> <React.Fragment>
<div <div

6
src/core_plugins/kibana/public/management/sections/settings/components/field/field.js
View file

@ -566,7 +566,7 @@ export class Field extends PureComponent {
} }
return ( return (
<EuiFormRow className="advancedSettings__field__actions"> <EuiFormRow className="mgtAdvancedSettings__fieldActions" hasEmptyLabelSpace>
<EuiFlexGroup> <EuiFlexGroup>
<EuiFlexItem grow={false}> <EuiFlexItem grow={false}>
<EuiButton <EuiButton
@ -599,10 +599,10 @@ export class Field extends PureComponent {
const { error, isInvalid } = this.state; const { error, isInvalid } = this.state;
return ( return (
<EuiFlexGroup className="advancedSettings__field"> <EuiFlexGroup className="mgtAdvancedSettings__field">
<EuiFlexItem grow={false}> <EuiFlexItem grow={false}>
<EuiDescribedFormGroup <EuiDescribedFormGroup
className="advancedSettings__field__wrapper" className="mgtAdvancedSettings__fieldWrapper"
title={this.renderTitle(setting)} title={this.renderTitle(setting)}
description={this.renderDescription(setting)} description={this.renderDescription(setting)}
idAria={`${setting.name}-aria`} idAria={`${setting.name}-aria`}

228
src/core_plugins/kibana/public/management/styles/main.less
View file

@ -1,228 +0,0 @@
@import (reference) "~ui/styles/theme";
@import (reference) "~ui/styles/variables";
kbn-management-app,
kbn-management-landing,
kbn-management-indices,
kbn-management-indices-edit,
kbn-management-indices-create,
kbn-management-advanced,
kbn-management-objects,
kbn-management-objects-view {
display: block;
}
.tab-account {
background-color: #FFFFFF;
}
.tab-management {
background-color: #FFFFFF;
}
.kbn-management-tab:first-letter {
text-transform: capitalize;
}
kbn-management-objects {
background: @globalColorLightestGray;
min-height: 100vh;
}
kbn-management-app {
li.current-page {
font-size: 1.5em;
margin: 0 10px;
}
min-height: 100vh;
}
kbn-management-landing {
.management-panel {
margin-bottom: 10px;
}
.management-panel__link {
font-size: 17px;
line-height: 32px;
&.management-panel__link--disabled {
opacity: 0.5;
cursor: default;
&:hover, &:visited {
color: @kibanaBlue2;
}
}
}
/**
* 1. Set icon size.
* 2. Hack the panel title to move to the left a bit.
*/
.management-panel__heading-icon {
width: 20px; /* 1 */
height: 20px; /* 1 */
background-position: center;
background-repeat: no-repeat;
background-size: contain; /* 1 */
margin-right: -3px; /* 2 */
}
.management-panel__heading-icon--security {
background-image: url("~ui/icons/security-gray.svg");
}
.management-panel__heading-icon--elasticsearch {
background-image: url("~ui/icons/elasticsearch-gray.svg");
}
.management-panel__heading-icon--kibana {
background-image: url("~ui/icons/kibana-gray.svg");
}
.management-panel__heading-icon--beats {
background-image: url("~ui/icons/beats-gray.svg");
}
.management-panel__heading-icon--logstash {
background-image: url("~ui/icons/logstash-gray.svg");
}
}
kbn-management-objects {
form {
margin-bottom: @line-height-computed;
}
.list-unstyled {
li {
border-bottom: 1px solid;
border-bottom-color: @management-objects-list-border;
padding: 8px;
}
}
.empty {
color: @management-objects-empty-color;
}
.item {
padding: 12px;
.item-title {
margin-left: 30px;
}
.actions {
margin-top: -6px;
}
}
.header {
.title, .controls {
padding-right: 1em;
display: inline-block;
}
}
}
.managementChangeIndexModal {
width: 800px;
overflow: auto;
max-height: 89vh;
}
kbn-management-advanced {
// super specific rule to override bootstrap's equally specific rule
// https://github.com/twbs/bootstrap/blob/1f329f8f17aa989eabc6e94bdcab93e69ef0e463/less/tables.less#L35
.table {
table-layout: fixed;
tbody > tr > td {
vertical-align: middle;
}
}
.advancedSettingsTableRowImage {
height: 3em;
width: auto;
}
.advancedSettingsTableRowActionsCell {
max-width: 300px;
}
}
kbn-management-objects-view {
.ace_editor { height: 300px; }
}
.advanced-settings {
overflow-x: scroll;
table {
width: 100%;
tr.default td.value {
color: @management-advanced-table-default-color;
}
td {
font-family: @font-family-monospace;
&.actions {
width: 150px;
}
}
}
}
.indices-settings {
i.active {
color: @management-indices-active-color;
}
tr.field-settings {
.field-popularize {
margin-left: 5px;
display: none;
}
&:hover .field-popularize {
display: inline;
}
}
}
kbn-management-indices {
.fields {
display: block;
table {
.table-striped()
}
th:last-child,
td:last-child {
text-align: right;
}
}
.indexed-fields {
th:first-child,
td:first-child {
width: 35%;
}
}
.scripted-fields header {
margin: 5px 0;
text-align: right;
}
p.text-center {
padding-top: 1em;
}
}
@import "~ui/dragula/gu-dragula.less";

1
src/dev/precommit_hook/casing_check_config.js
View file

@ -161,7 +161,6 @@ export const TEMPORARILY_IGNORED_PATHS = [
'src/ui/public/assets/favicons/mstile-150x150.png', 'src/ui/public/assets/favicons/mstile-150x150.png',
'src/ui/public/assets/favicons/safari-pinned-tab.svg', 'src/ui/public/assets/favicons/safari-pinned-tab.svg',
'src/ui/public/directives/__tests__/confirm-click.js', 'src/ui/public/directives/__tests__/confirm-click.js',
'src/ui/public/dragula/gu-dragula.less',
'src/ui/public/field_format_editor/editors/url/icons/flag-icon.LICENSE', 'src/ui/public/field_format_editor/editors/url/icons/flag-icon.LICENSE',
'src/ui/public/icons/beats-color.svg', 'src/ui/public/icons/beats-color.svg',
'src/ui/public/icons/beats-gray.svg', 'src/ui/public/icons/beats-gray.svg',

13
src/ui/public/dragula/gu-dragula.less
View file

@ -1,13 +0,0 @@
.gu-handle {
cursor: move;
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
.gu-mirror,
.gu-mirror .gu-handle {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}

5
src/ui/public/management/index.js
View file

@ -41,15 +41,18 @@ management.register('data', {
management.register('elasticsearch', { management.register('elasticsearch', {
display: 'Elasticsearch', display: 'Elasticsearch',
order: 20 order: 20,
icon: 'logoElasticsearch'
}); });
management.register('kibana', { management.register('kibana', {
display: 'Kibana', display: 'Kibana',
order: 30, order: 30,
icon: 'logoKibana',
}); });
management.register('logstash', { management.register('logstash', {
display: 'Logstash', display: 'Logstash',
order: 30, order: 30,
icon: 'logoLogstash',
}); });

2
src/ui/public/management/section.js
View file

@ -31,6 +31,7 @@ export class ManagementSection {
* @param {boolean|null} options.visible - defaults to true * @param {boolean|null} options.visible - defaults to true
* @param {boolean|null} options.disabled - defaults to false * @param {boolean|null} options.disabled - defaults to false
* @param {string|null} options.tooltip - defaults to '' * @param {string|null} options.tooltip - defaults to ''
* @param {string|null} options.icon - defaults to ''
* @returns {ManagementSection} * @returns {ManagementSection}
*/ */
@ -44,6 +45,7 @@ export class ManagementSection {
this.visible = true; this.visible = true;
this.disabled = false; this.disabled = false;
this.tooltip = ''; this.tooltip = '';
this.icon = '';
this.url = ''; this.url = '';
assign(this, options); assign(this, options);

1
x-pack/plugins/index_management/index.js
View file

@ -18,6 +18,7 @@ export function indexManagement(kibana) {
publicDir: resolve(__dirname, 'public'), publicDir: resolve(__dirname, 'public'),
require: ['kibana', 'elasticsearch', 'xpack_main'], require: ['kibana', 'elasticsearch', 'xpack_main'],
uiExports: { uiExports: {
styleSheetPaths: `${__dirname}/public/index.scss`,
managementSections: [ managementSections: [
'plugins/index_management', 'plugins/index_management',
] ]

17
x-pack/plugins/index_management/public/_index_management.scss Normal file
View file

@ -0,0 +1,17 @@
#indReactRoot {
background-color: $euiColorLightestShade;
}
.indTable__link {
text-align: left;
}
.indTable__horizontalScrollContainer {
overflow-x: auto;
max-width: 100%;
height: 100vh;
}
.indTable__horizontalScroll {
min-width: 800px;
width: 100%;
}

13
x-pack/plugins/index_management/public/index.scss Normal file
View file

@ -0,0 +1,13 @@
// Import the EUI global scope so we can use EUI constants
@import 'ui/public/styles/_styling_constants';
// Index management plugin styles
// Prefix all styles with "ind" to avoid conflicts.
// Examples
// indChart
// indChart__legend
// indChart__legend--small
// indChart__legend-isLoading
@import 'index_management';

2
x-pack/plugins/index_management/public/main.html
View file

@ -1,3 +1,3 @@
<kbn-management-app section="elasticsearch/index_management"> <kbn-management-app section="elasticsearch/index_management">
<div id="indexManagementReactRoot" class="indexTableHorizontalScrollContainer"></div> <div id="indexManagementReactRoot" class="indTable__horizontalScrollContainer"></div>
</kbn-management-app> </kbn-management-app>

2
x-pack/plugins/index_management/public/sections/index_list/components/index_list/index_list.js
View file

@ -29,7 +29,7 @@ export class IndexList extends React.PureComponent {
render() { render() {
return ( return (
<div className="indexTableHorizontalScroll im-snapshotTestSubject"> <div className="indTable__horizontalScroll im-snapshotTestSubject">
<IndexTable /> <IndexTable />
<DetailPanel /> <DetailPanel />
</div> </div>

2
x-pack/plugins/index_management/public/sections/index_list/components/index_table/index_table.js
View file

@ -168,7 +168,7 @@ export class IndexTableUi extends Component {
} else if (fieldName === 'name') { } else if (fieldName === 'name') {
return ( return (
<EuiLink <EuiLink
className="indexTable__link" className="indTable__link"
data-test-subj="indexTableIndexNameLink" data-test-subj="indexTableIndexNameLink"
onClick={() => { onClick={() => {
openDetailPanel(value); openDetailPanel(value);

8
x-pack/plugins/index_management/public/styles/table.less
View file

@ -2,23 +2,23 @@
background-color: #F5F5F5; background-color: #F5F5F5;
} }
.indexTable__link { .indTable__link {
text-align: left; text-align: left;
} }
.indexTable__header--name { .indexTable__header--name {
width: 25%; width: 25%;
} }
.indexTableHorizontalScrollContainer { .indTable__horizontalScrollContainer {
overflow-x: auto; overflow-x: auto;
max-width: 100%; max-width: 100%;
height: 100vh; height: 100vh;
} }
.indexTableHorizontalScroll { .indTable__horizontalScroll {
min-width: 800px; min-width: 800px;
width: 100%; width: 100%;
} }
.indexDetail__codeBlock { .indDetail__codeBlock {
background: transparent; background: transparent;
} }

4
x-pack/plugins/license_management/__jest__/__snapshots__/add_license.test.js.snap
View file

@ -1,5 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`AddLicense component when license is active should display correct verbiage 1`] = `"<div class=\\"euiCard euiCard--centerAligned\\"><span class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--medium euiCard__title\\">Update your license</span><div class=\\"euiText euiText--small euiCard__description\\"><p>If you already have a new license, upload it now.</p></div></span><span class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary licenseManagement__marginTop\\" href=\\"#/management/elasticsearch/license_management/upload_license\\" data-test-subj=\\"updateLicenseButton\\"><span class=\\"euiButton__content\\"><span class=\\"euiButton__text\\">Update license</span></span></a></span></div>"`; exports[`AddLicense component when license is active should display correct verbiage 1`] = `"<div class=\\"euiCard euiCard--centerAligned\\"><span class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--medium euiCard__title\\">Update your license</span><div class=\\"euiText euiText--small euiCard__description\\"><p>If you already have a new license, upload it now.</p></div></span><span class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary\\" href=\\"#/management/elasticsearch/license_management/upload_license\\" data-test-subj=\\"updateLicenseButton\\"><span class=\\"euiButton__content\\"><span class=\\"euiButton__text\\">Update license</span></span></a></span></div>"`;
exports[`AddLicense component when license is expired should display with correct verbiage 1`] = `"<div class=\\"euiCard euiCard--centerAligned\\"><span class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--medium euiCard__title\\">Update your license</span><div class=\\"euiText euiText--small euiCard__description\\"><p>If you already have a new license, upload it now.</p></div></span><span class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary licenseManagement__marginTop\\" href=\\"#/management/elasticsearch/license_management/upload_license\\" data-test-subj=\\"updateLicenseButton\\"><span class=\\"euiButton__content\\"><span class=\\"euiButton__text\\">Update license</span></span></a></span></div>"`; exports[`AddLicense component when license is expired should display with correct verbiage 1`] = `"<div class=\\"euiCard euiCard--centerAligned\\"><span class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--medium euiCard__title\\">Update your license</span><div class=\\"euiText euiText--small euiCard__description\\"><p>If you already have a new license, upload it now.</p></div></span><span class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary\\" href=\\"#/management/elasticsearch/license_management/upload_license\\" data-test-subj=\\"updateLicenseButton\\"><span class=\\"euiButton__content\\"><span class=\\"euiButton__text\\">Update license</span></span></a></span></div>"`;

6
x-pack/plugins/license_management/__jest__/__snapshots__/request_trial_extension.test.js.snap
View file

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`RequestTrialExtension component should display when license is active and trial has been used 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--centerAligned\\"><span class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--medium euiCard__title\\">Extend your trial</span><div class=\\"euiText euiText--small euiCard__description\\"><p><span>If you’d like to continuing using security, machine learning, and our other awesome <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions/xpack\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">Platinum features</a>, request an extension now.</span></p></div></span><span class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary licenseManagement__marginTop\\" href=\\"https://www.elastic.co/trialextension\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\" data-test-subj=\\"extendTrialButton\\"><span class=\\"euiButton__content\\"><span class=\\"euiButton__text\\">Extend trial</span></span></a></span></div></div>"`; exports[`RequestTrialExtension component should display when license is active and trial has been used 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--centerAligned\\"><span class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--medium euiCard__title\\">Extend your trial</span><div class=\\"euiText euiText--small euiCard__description\\"><p><span>If you’d like to continuing using security, machine learning, and our other awesome <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions/xpack\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">Platinum features</a>, request an extension now.</span></p></div></span><span class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary\\" href=\\"https://www.elastic.co/trialextension\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\" data-test-subj=\\"extendTrialButton\\"><span class=\\"euiButton__content\\"><span class=\\"euiButton__text\\">Extend trial</span></span></a></span></div></div>"`;
exports[`RequestTrialExtension component should display when license is not active and trial has been used 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--centerAligned\\"><span class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--medium euiCard__title\\">Extend your trial</span><div class=\\"euiText euiText--small euiCard__description\\"><p><span>If you’d like to continuing using security, machine learning, and our other awesome <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions/xpack\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">Platinum features</a>, request an extension now.</span></p></div></span><span class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary licenseManagement__marginTop\\" href=\\"https://www.elastic.co/trialextension\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\" data-test-subj=\\"extendTrialButton\\"><span class=\\"euiButton__content\\"><span class=\\"euiButton__text\\">Extend trial</span></span></a></span></div></div>"`; exports[`RequestTrialExtension component should display when license is not active and trial has been used 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--centerAligned\\"><span class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--medium euiCard__title\\">Extend your trial</span><div class=\\"euiText euiText--small euiCard__description\\"><p><span>If you’d like to continuing using security, machine learning, and our other awesome <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions/xpack\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">Platinum features</a>, request an extension now.</span></p></div></span><span class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary\\" href=\\"https://www.elastic.co/trialextension\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\" data-test-subj=\\"extendTrialButton\\"><span class=\\"euiButton__content\\"><span class=\\"euiButton__text\\">Extend trial</span></span></a></span></div></div>"`;
exports[`RequestTrialExtension component should display when platinum license is not active and trial has been used 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--centerAligned\\"><span class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--medium euiCard__title\\">Extend your trial</span><div class=\\"euiText euiText--small euiCard__description\\"><p><span>If you’d like to continuing using security, machine learning, and our other awesome <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions/xpack\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">Platinum features</a>, request an extension now.</span></p></div></span><span class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary licenseManagement__marginTop\\" href=\\"https://www.elastic.co/trialextension\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\" data-test-subj=\\"extendTrialButton\\"><span class=\\"euiButton__content\\"><span class=\\"euiButton__text\\">Extend trial</span></span></a></span></div></div>"`; exports[`RequestTrialExtension component should display when platinum license is not active and trial has been used 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--centerAligned\\"><span class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--medium euiCard__title\\">Extend your trial</span><div class=\\"euiText euiText--small euiCard__description\\"><p><span>If you’d like to continuing using security, machine learning, and our other awesome <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions/xpack\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">Platinum features</a>, request an extension now.</span></p></div></span><span class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary\\" href=\\"https://www.elastic.co/trialextension\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\" data-test-subj=\\"extendTrialButton\\"><span class=\\"euiButton__content\\"><span class=\\"euiButton__text\\">Extend trial</span></span></a></span></div></div>"`;

8
x-pack/plugins/license_management/__jest__/__snapshots__/telemetry_opt_in.test.js.snap
View file

@ -40,7 +40,7 @@ exports[`TelemetryOptIn should display when telemetry not opted in 1`] = `
Read more Read more
</EuiLink> </EuiLink>
} }
className="licenseManagement__baseline" className="eui-AlignBaseline"
closePopover={[Function]} closePopover={[Function]}
hasArrow={true} hasArrow={true}
id="readMorePopover" id="readMorePopover"
@ -49,7 +49,7 @@ exports[`TelemetryOptIn should display when telemetry not opted in 1`] = `
panelPaddingSize="m" panelPaddingSize="m"
> >
<EuiText <EuiText
className="licenseManagement__narrowText" className="licManagement__narrowText"
grow={true} grow={true}
> >
<p> <p>
@ -111,7 +111,7 @@ exports[`TelemetryOptIn should display when telemetry not opted in 1`] = `
Read more Read more
</EuiLink> </EuiLink>
} }
className="licenseManagement__baseline" className="eui-AlignBaseline"
closePopover={[Function]} closePopover={[Function]}
hasArrow={true} hasArrow={true}
id="readMorePopover" id="readMorePopover"
@ -123,7 +123,7 @@ exports[`TelemetryOptIn should display when telemetry not opted in 1`] = `
onOutsideClick={[Function]} onOutsideClick={[Function]}
> >
<div <div
className="euiPopover euiPopover--anchorDownCenter licenseManagement__baseline" className="euiPopover euiPopover--anchorDownCenter eui-AlignBaseline"
id="readMorePopover" id="readMorePopover"
onClick={[Function]} onClick={[Function]}
onKeyDown={[Function]} onKeyDown={[Function]}

1
x-pack/plugins/license_management/index.js
View file

@ -14,6 +14,7 @@ export function licenseManagement(kibana) {
publicDir: resolve(__dirname, 'public'), publicDir: resolve(__dirname, 'public'),
require: ['kibana', 'elasticsearch'], require: ['kibana', 'elasticsearch'],
uiExports: { uiExports: {
styleSheetPaths: `${__dirname}/public/index.scss`,
managementSections: [ managementSections: [
'plugins/license_management', 'plugins/license_management',
] ]

23
x-pack/plugins/license_management/public/_license_management.scss Normal file
View file

@ -0,0 +1,23 @@
.licFeature {
flex-grow: 1;
background: $euiColorLightestShade;
min-height: 100vh;
}
.licManagement__pageBody {
padding-top: $euiSizeL;
min-height: auto;
}
// EUITODO: Fix modal width/max-width
.licManagement__modal {
width: 70vw;
}
.licManagement__narrowText {
width: 240px;
}
.licManagement__ieFlex {
flex-shrink: 0;
}

4
x-pack/plugins/license_management/public/app.js
View file

@ -14,8 +14,8 @@ import {
} from '@elastic/eui'; } from '@elastic/eui';
export default () => ( export default () => (
<EuiPage className="licenseManagement"> <EuiPage restrictWidth>
<EuiPageBody className="licenseManagement__pageBody"> <EuiPageBody className="licManagement__pageBody">
<Switch> <Switch>
<Route path={`${BASE_PATH}upload_license`} component={UploadLicense}/> <Route path={`${BASE_PATH}upload_license`} component={UploadLicense}/>
<Route path={`${BASE_PATH}`} component={LicenseDashboard}/> <Route path={`${BASE_PATH}`} component={LicenseDashboard}/>

4
x-pack/plugins/license_management/public/components/telemetry_opt_in/telemetry_opt_in.js
View file

@ -80,9 +80,9 @@ export class TelemetryOptIn extends React.Component {
button={readMoreButton} button={readMoreButton}
isOpen={showMoreTelemetryInfo} isOpen={showMoreTelemetryInfo}
closePopover={this.closeReadMorePopover} closePopover={this.closeReadMorePopover}
className="licenseManagement__baseline" className="eui-AlignBaseline"
> >
<EuiText className="licenseManagement__narrowText" > <EuiText className="licManagement__narrowText" >
<p> <p>
This feature periodically sends basic feature usage statistics. This feature periodically sends basic feature usage statistics.
This information will not be shared outside of Elastic. This information will not be shared outside of Elastic.

3
x-pack/plugins/license_management/public/index.js
View file

@ -5,5 +5,4 @@
*/ */
import './management_section'; import './management_section';
import './register_route'; import './register_route';
import './styles/main.less';

13
x-pack/plugins/license_management/public/index.scss Normal file
View file

@ -0,0 +1,13 @@
// EUI globals
@import 'ui/public/styles/styling_constants';
// License amnagement plugin styles
// Prefix all styles with "lic" to avoid conflicts.
// Examples
// licChart
// licChart__legend
// licChart__legend--small
// licChart__legend-isLoading
@import 'license_management';

2
x-pack/plugins/license_management/public/main.html
View file

@ -1,3 +1,3 @@
<kbn-management-app section="elasticsearch/license_management"> <kbn-management-app section="elasticsearch/license_management">
<div id="licenseReactRoot" class="licenseFeature"></div> <div id="licenseReactRoot"></div>
</kbn-management-app> </kbn-management-app>

1
x-pack/plugins/license_management/public/sections/license_dashboard/add_license/add_license.js
View file

@ -17,7 +17,6 @@ export const AddLicense = ({ uploadPath = `#${BASE_PATH}upload_license` }) => {
footer={ footer={
<EuiButton <EuiButton
data-test-subj="updateLicenseButton" data-test-subj="updateLicenseButton"
className="licenseManagement__marginTop"
href={uploadPath} href={uploadPath}
> >
Update license Update license

2
x-pack/plugins/license_management/public/sections/license_dashboard/license_dashboard.js
View file

@ -20,7 +20,7 @@ import {
export const LicenseDashboard = () => { export const LicenseDashboard = () => {
return ( return (
<div className="licenseManagement__contain"> <div className="licManagement__contain">
<EuiFlexGroup justifyContent="spaceAround"> <EuiFlexGroup justifyContent="spaceAround">
<LicenseStatus /> <LicenseStatus />
</EuiFlexGroup> </EuiFlexGroup>

1
x-pack/plugins/license_management/public/sections/license_dashboard/request_trial_extension/request_trial_extension.js
View file

@ -32,7 +32,6 @@ export const RequestTrialExtension = ({ shouldShowRequestTrialExtension }) => {
footer={ footer={
<EuiButton <EuiButton
data-test-subj="extendTrialButton" data-test-subj="extendTrialButton"
className="licenseManagement__marginTop"
target="_blank" target="_blank"
href="https://www.elastic.co/trialextension" href="https://www.elastic.co/trialextension"
> >

8
x-pack/plugins/license_management/public/sections/license_dashboard/start_trial/start_trial.js
View file

@ -56,7 +56,7 @@ export class StartTrial extends React.PureComponent {
return ( return (
<EuiOverlayMask> <EuiOverlayMask>
<EuiModal <EuiModal
className="licenseManagement__modal" className="licManagement__modal"
onClose={this.cancel} onClose={this.cancel}
> >
<EuiModalHeader> <EuiModalHeader>
@ -114,9 +114,9 @@ export class StartTrial extends React.PureComponent {
<EuiFlexItem grow={false}> <EuiFlexItem grow={false}>
<TelemetryOptIn isStartTrial={true} ref={(ref) => {this.telemetryOptIn = ref; }}/> <TelemetryOptIn isStartTrial={true} ref={(ref) => {this.telemetryOptIn = ref; }}/>
</EuiFlexItem> </EuiFlexItem>
<EuiFlexItem grow={false} className="licenseManagement__ieFlex"> <EuiFlexItem grow={false} className="licManagement__ieFlex">
<EuiFlexGroup responsive={false}> <EuiFlexGroup responsive={false}>
<EuiFlexItem grow={false} className="licenseManagement__ieFlex"> <EuiFlexItem grow={false} className="licManagement__ieFlex">
<EuiButtonEmpty <EuiButtonEmpty
data-test-subj="confirmModalCancelButton" data-test-subj="confirmModalCancelButton"
onClick={this.cancel} onClick={this.cancel}
@ -125,7 +125,7 @@ export class StartTrial extends React.PureComponent {
Cancel Cancel
</EuiButtonEmpty> </EuiButtonEmpty>
</EuiFlexItem> </EuiFlexItem>
<EuiFlexItem grow={false} className="licenseManagement__ieFlex"> <EuiFlexItem grow={false} className="licManagement__ieFlex">
<EuiButton <EuiButton
data-test-subj="confirmModalConfirmButton" data-test-subj="confirmModalConfirmButton"
onClick={this.startLicenseTrial} onClick={this.startLicenseTrial}

33
x-pack/plugins/license_management/public/styles/main.less
View file

@ -1,33 +0,0 @@
@import (reference) '~ui/styles/variables/colors';
.licenseFeature {
flex-grow: 1;
background: @globalColorLightestGray;
min-height: 100vh;
}
.licenseManagement__pageBody {
padding-top: 24px;
min-height: auto;
}
// EUITODO: Fix modal width/max-width
.licenseManagement__modal {
width: 70vw;
@media only screen and (max-width: 767px) {
width: ~"calc(100vw + 2px)";
}
}
.licenseManagement__baseline {
vertical-align: baseline;
}
.licenseManagement__narrowText {
width: 240px;
}
.licenseManagement__marginTop {
margin-top: auto;
}
.licenseManagement__ieFlex {
flex-shrink: 0;
}

2
x-pack/plugins/logstash/public/components/pipeline_list/pipeline_list.js
View file

@ -203,7 +203,7 @@ export class PipelineList extends React.Component {
const { clonePipeline, createPipeline, isReadOnly, openPipeline } = this.props; const { clonePipeline, createPipeline, isReadOnly, openPipeline } = this.props;
const { isSelectable, message, pipelines, selection, showConfirmDeleteModal } = this.state; const { isSelectable, message, pipelines, selection, showConfirmDeleteModal } = this.state;
return ( return (
<EuiPage style={{ minHeight: '100vh' }} data-test-subj="pipelineList"> <EuiPage data-test-subj="pipelineList">
<EuiPageContent horizontalPosition="center"> <EuiPageContent horizontalPosition="center">
{this.renderNoPermissionCallOut()} {this.renderNoPermissionCallOut()}
<PipelinesTable <PipelinesTable

11
x-pack/plugins/ml/public/settings/settings.html
View file

@ -3,23 +3,22 @@
<div class="page-row"> <div class="page-row">
<div class="kuiPanel management-panel"> <div class="kuiPanel mgtPanel">
<div class="kuiPanelHeader"> <div class="kuiPanelHeader">
<div class="kuiPanelHeaderSection"> <div class="kuiPanelHeaderSection">
<div class="management-panel__heading-icon management-panel__heading-icon--elasticsearch"></div>
<div class="kuiPanelHeader__title ng-binding"> <div class="kuiPanelHeader__title ng-binding">
Job Management Job Management
</div> </div>
</div> </div>
</div> </div>
<div class="kuiPanelBody management-panel__body"> <div class="kuiPanelBody mgtPanel__body">
<div class="row"> <div class="row">
<ul class="list-unstyled"> <ul class="list-unstyled">
<li class="col-xs-4 col-md-3 ng-scope"> <li class="col-xs-4 col-md-3 ng-scope">
<a <a
data-test-subj="" data-test-subj=""
class="management-panel__link ng-binding" class="mgtPanel__link ng-binding"
tooltip="" tooltip=""
tooltip-placement="bottom" tooltip-placement="bottom"
tooltip-popup-delay="400" tooltip-popup-delay="400"
@ -32,7 +31,7 @@
<a <a
ng-if="(canCreateFilter === true)" ng-if="(canCreateFilter === true)"
data-test-subj="" data-test-subj=""
class="management-panel__link ng-binding" class="mgtPanel__link ng-binding"
tooltip="" tooltip=""
tooltip-placement="bottom" tooltip-placement="bottom"
tooltip-popup-delay="400" tooltip-popup-delay="400"
@ -42,7 +41,7 @@
</a> </a>
<span <span
ng-if="(canCreateFilter === false)" ng-if="(canCreateFilter === false)"
class="management-panel__link disabled ng-binding" class="mgtPanel__link disabled ng-binding"
tooltip="You do not have permission to manage filter lists" tooltip="You do not have permission to manage filter lists"
tooltip-placement="bottom" tooltip-placement="bottom"
tooltip-popup-delay="400" tooltip-popup-delay="400"

4
x-pack/plugins/ml/public/settings/styles/main.less
View file

@ -7,8 +7,8 @@
} }
ml-settings { ml-settings {
.management-panel { .mgtPanel {
.management-panel__link { .mgtPanel__link {
font-size: 17px; font-size: 17px;
line-height: 32px; line-height: 32px;
margin-left: 6px; margin-left: 6px;

4
x-pack/plugins/monitoring/public/components/license/index.js
View file

@ -47,8 +47,8 @@ export function License(props) {
const { status, type, isExpired, expiryDate } = props; const { status, type, isExpired, expiryDate } = props;
return ( return (
<EuiPage className="licenseManagement"> <EuiPage className="licenseManagement">
<EuiPageBody className="licenseManagement__pageBody"> <EuiPageBody className="licManagement__pageBody">
<div className="licenseManagement__contain"> <div className="licManagement__contain">
<LicenseStatus <LicenseStatus
isExpired={isExpired} isExpired={isExpired}
status={status} status={status}

2
x-pack/plugins/monitoring/public/views/license/index.html
View file

@ -1,3 +1,3 @@
<monitoring-main data-test-subj="xpackLicensePage"> <monitoring-main data-test-subj="xpackLicensePage">
<div id="licenseReact" class="licenseFeature"></div> <div id="licenseReact" class="licFeature"></div>
</monitoring-main> </monitoring-main>

3
x-pack/plugins/security/public/views/management/management.js
View file

@ -31,7 +31,8 @@ routes.defaults(/\/management/, {
function ensureSecurityRegistered() { function ensureSecurityRegistered() {
const registerSecurity = () => management.register('security', { const registerSecurity = () => management.register('security', {
display: 'Security', display: 'Security',
order: 10 order: 10,
icon: 'securityApp',
}); });
const getSecurity = () => management.getSection('security'); const getSecurity = () => management.getSection('security');

13
x-pack/plugins/watcher/public/sections/watch_edit/components/json_watch_edit/json_watch_edit.html
View file

@ -3,8 +3,9 @@
omit-breadcrumb-pages="{{ jsonWatchEdit.omitBreadcrumbPages }}" omit-breadcrumb-pages="{{ jsonWatchEdit.omitBreadcrumbPages }}"
page-title="jsonWatchEdit.breadcrumb" page-title="jsonWatchEdit.breadcrumb"
> >
<div class="kuiViewContent kuiViewContent--constrainedWidth"> <div class="euiSpacer euiSpacer--l"></div>
<div class="kuiViewContentItem kuiVerticalRhythm"> <div class="kuiViewContent euiPanel euiPanel--paddingLarge kuiViewContent--constrainedWidth">
<div class="kuiVerticalRhythm">
<watch-edit-title-bar <watch-edit-title-bar
xpack-watch="jsonWatchEdit.watch" xpack-watch="jsonWatchEdit.watch"
is-watch-valid="jsonWatchEdit.isValid" is-watch-valid="jsonWatchEdit.isValid"
@ -14,7 +15,7 @@
></watch-edit-title-bar> ></watch-edit-title-bar>
</div> </div>
<div class="kuiViewContentItem kuiVerticalRhythm"> <div class="kuiVerticalRhythm">
<kbn-tabs <kbn-tabs
selected-tab-id="jsonWatchEdit.selectedTabId" selected-tab-id="jsonWatchEdit.selectedTabId"
on-tab-select="jsonWatchEdit.onTabSelect" on-tab-select="jsonWatchEdit.onTabSelect"
@ -42,7 +43,7 @@
</div> </div>
<div <div
class="kuiViewContentItem kuiVerticalRhythm" class="kuiVerticalRhythm"
ng-show="jsonWatchEdit.selectedTabId === 'edit-watch'" ng-show="jsonWatchEdit.selectedTabId === 'edit-watch'"
> >
<watch-edit-detail <watch-edit-detail
@ -54,7 +55,7 @@
</div> </div>
<div <div
class="kuiViewContentItem kuiVerticalRhythm" class="kuiVerticalRhythm"
ng-show="jsonWatchEdit.selectedTabId === 'watch-simulate'" ng-show="jsonWatchEdit.selectedTabId === 'watch-simulate'"
> >
<div class="kuiVerticalRhythm"> <div class="kuiVerticalRhythm">
@ -85,7 +86,7 @@
</div> </div>
<div <div
class="kuiViewContentItem kuiVerticalRhythm" class="kuiVerticalRhythm"
ng-show="jsonWatchEdit.selectedTabId === 'simulate-results'" ng-show="jsonWatchEdit.selectedTabId === 'simulate-results'"
> >
<div class="kuiVerticalRhythm"> <div class="kuiVerticalRhythm">

132
x-pack/plugins/watcher/public/sections/watch_edit/components/threshold_watch_edit/threshold_watch_edit.html
View file

@ -6,95 +6,87 @@
> >
<div class="thresholdWatchEditContent"> <div class="thresholdWatchEditContent">
<div class="kuiPanel kuiVerticalRhythm thresholdWatchEditSectionPanel"> <div class="euiPanel euiPanel--paddingLarge kuiVerticalRhythm">
<div class="kuiPanelBody"> <watch-edit-title-panel
<watch-edit-title-panel fields="thresholdWatchEdit.fields"
fields="thresholdWatchEdit.fields" xpack-watch="thresholdWatchEdit.watch"
xpack-watch="thresholdWatchEdit.watch" on-change="thresholdWatchEdit.onChange"
on-change="thresholdWatchEdit.onChange" on-valid="thresholdWatchEdit.onTitlePanelValid"
on-valid="thresholdWatchEdit.onTitlePanelValid" on-invalid="thresholdWatchEdit.onTitlePanelInvalid"
on-invalid="thresholdWatchEdit.onTitlePanelInvalid" ></watch-edit-title-panel>
></watch-edit-title-panel>
</div>
</div> </div>
<div <div
class="kuiPanel kuiVerticalRhythm thresholdWatchEditSectionPanel" class="kuiPanel kuiVerticalRhythm euiPanel euiPanel--paddingLarge"
ng-show="thresholdWatchEdit.titlePanelValid" ng-show="thresholdWatchEdit.titlePanelValid"
> >
<div class="kuiPanelBody"> <section class="kuiVerticalRhythm">
<section class="kuiVerticalRhythm"> <header>
<header> <h2 class="kuiSubTitle">
<h2 class="kuiSubTitle"> Matching the following condition
Matching the following condition </h2>
</h2> </header>
</header> </section>
</section>
<div class="kuiVerticalRhythm" style="margin-bottom:30px;"> <div class="kuiVerticalRhythm" style="margin-bottom:30px;">
<threshold-watch-expression <threshold-watch-expression
threshold-watch="thresholdWatchEdit.watch" threshold-watch="thresholdWatchEdit.watch"
fields="thresholdWatchEdit.fields" fields="thresholdWatchEdit.fields"
on-change="thresholdWatchEdit.onChange" on-change="thresholdWatchEdit.onChange"
on-valid="thresholdWatchEdit.onConditionPanelValid" on-valid="thresholdWatchEdit.onConditionPanelValid"
on-invalid="thresholdWatchEdit.onConditionPanelInvalid" on-invalid="thresholdWatchEdit.onConditionPanelInvalid"
></threshold-watch-expression> ></threshold-watch-expression>
</div>
<div class="kuiPanel kuiVerticalRhythm">
<div
class="kuiPanelHeader"
ng-show="thresholdWatchEdit.visualizeDataPageCount > 1"
>
<div class="kuiPanelHeaderSection">
<div class="kuiPanelHeader__title">
{{ thresholdWatchEdit.visualizeDataTitle }}
</div>
</div>
</div> </div>
<div class="kuiPanelBody">
<div class="kuiPanel kuiVerticalRhythm">
<div <div
class="kuiPanelHeader" class="kuiVerticalRhythm kuiWatchVisualization"
ng-show="thresholdWatchEdit.visualizeDataPageCount > 1" ng-class="{ kuiWatchVisualizationMulti: thresholdWatchEdit.visualizeDataPageCount > 1 }">
> <threshold-preview-chart
<div class="kuiPanelHeaderSection"> series="thresholdWatchEdit.chartSeries"
<div class="kuiPanelHeader__title"> threshold-value="thresholdWatchEdit.watch.threshold"
{{ thresholdWatchEdit.visualizeDataTitle }} start-date="thresholdWatchEdit.visualizeTimeWindowFrom"
</div> end-date="thresholdWatchEdit.visualizeTimeWindowTo"
</div> ></threshold-preview-chart>
</div> </div>
<div class="kuiPanelBody">
<div
class="kuiVerticalRhythm kuiWatchVisualization"
ng-class="{ kuiWatchVisualizationMulti: thresholdWatchEdit.visualizeDataPageCount > 1 }">
<threshold-preview-chart
series="thresholdWatchEdit.chartSeries"
threshold-value="thresholdWatchEdit.watch.threshold"
start-date="thresholdWatchEdit.visualizeTimeWindowFrom"
end-date="thresholdWatchEdit.visualizeTimeWindowTo"
></threshold-preview-chart>
</div>
</div>
<panel-pager
on-next-page="thresholdWatchEdit.onVisualizationNextPage"
on-previous-page="thresholdWatchEdit.onVisualizationPreviousPage"
ng-show="thresholdWatchEdit.visualizeDataPageCount > 1"
></panel-pager>
</div> </div>
<panel-pager
on-next-page="thresholdWatchEdit.onVisualizationNextPage"
on-previous-page="thresholdWatchEdit.onVisualizationPreviousPage"
ng-show="thresholdWatchEdit.visualizeDataPageCount > 1"
></panel-pager>
</div> </div>
</div> </div>
<div <div
class="kuiPanel kuiVerticalRhythm thresholdWatchEditSectionPanel" class="kuiPanel kuiVerticalRhythm euiPanel euiPanel--paddingLarge"
ng-show="thresholdWatchEdit.titlePanelValid && thresholdWatchEdit.conditionPanelValid" ng-show="thresholdWatchEdit.titlePanelValid && thresholdWatchEdit.conditionPanelValid"
> >
<div class="kuiPanelBody"> <watch-actions
actions="thresholdWatchEdit.watch.actions"
<watch-actions on-action-add="thresholdWatchEdit.onActionAdd"
actions="thresholdWatchEdit.watch.actions" on-action-change="thresholdWatchEdit.onActionChange"
on-action-add="thresholdWatchEdit.onActionAdd" on-action-simulate="thresholdWatchEdit.onActionSimulate"
on-action-change="thresholdWatchEdit.onActionChange" on-action-delete="thresholdWatchEdit.onActionDelete"
on-action-simulate="thresholdWatchEdit.onActionSimulate" on-valid="thresholdWatchEdit.onActionsValid"
on-action-delete="thresholdWatchEdit.onActionDelete" on-invalid="thresholdWatchEdit.onActionsInvalid"
on-valid="thresholdWatchEdit.onActionsValid" ></watch-actions>
on-invalid="thresholdWatchEdit.onActionsInvalid"
></watch-actions>
</div>
</div> </div>
<div class="kuiButtonGroup kuiVerticalRhythm thresholdWatchEditSectionPanel thresholdWatchEditButtons"> <div class="kuiButtonGroup kuiVerticalRhythm euiPanel euiPanel--paddingLarge thresholdWatchEditButtons">
<button <button
class="kuiButton kuiButton--primary" class="kuiButton kuiButton--primary"

3
x-pack/plugins/watcher/public/sections/watch_edit/components/watch_edit_title_bar/watch_edit_title_bar.html
View file

@ -1,4 +1,7 @@
<div class="kuiBar"> <div class="kuiBar">
<div class="kuiBarSection">
<h2 class="euiTitle euiTitle--medium">New watch</h2>
</div>
<div class="kuiBarSection"> <div class="kuiBarSection">
<div class="kuiButtonGroup"> <div class="kuiButtonGroup">
<button <button