Visual cleanup of saved objects page (#19434)
* clean up the design of saved objects * minor responsive fixes * up the saved object per page setting to something reasonable
This commit is contained in:
parent
93cf017b62
commit
b9675ccbca
|
@ -1,5 +1,5 @@
|
|||
<kbn-management-app section="kibana" class="kuiView">
|
||||
<kbn-management-objects class="kuiViewContent kuiViewContent--constrainedWidth">
|
||||
<kbn-management-objects>
|
||||
<div id="reactSavedObjectsTable"></div>
|
||||
</kbn-management-objects>
|
||||
</kbn-management-app>
|
||||
|
|
|
@ -123,93 +123,100 @@ exports[`ObjectsTable relationships should show the flyout 1`] = `
|
|||
`;
|
||||
|
||||
exports[`ObjectsTable should render normally 1`] = `
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"padding": "0 1rem",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Header
|
||||
onExportAll={[Function]}
|
||||
onImport={[Function]}
|
||||
onRefresh={[Function]}
|
||||
totalCount={4}
|
||||
/>
|
||||
<EuiSpacer
|
||||
size="xs"
|
||||
/>
|
||||
<Table
|
||||
filterOptions={
|
||||
Array [
|
||||
Object {
|
||||
"name": "index-pattern",
|
||||
"value": "index-pattern",
|
||||
"view": "index-pattern (0)",
|
||||
},
|
||||
Object {
|
||||
"name": "visualization",
|
||||
"value": "visualization",
|
||||
"view": "visualization (0)",
|
||||
},
|
||||
Object {
|
||||
"name": "dashboard",
|
||||
"value": "dashboard",
|
||||
"view": "dashboard (0)",
|
||||
},
|
||||
Object {
|
||||
"name": "search",
|
||||
"value": "search",
|
||||
"view": "search (0)",
|
||||
},
|
||||
]
|
||||
}
|
||||
getEditUrl={[Function]}
|
||||
goInApp={[Function]}
|
||||
isSearching={false}
|
||||
itemId="id"
|
||||
items={
|
||||
Array [
|
||||
Object {
|
||||
"icon": "indexPatternApp",
|
||||
"id": "1",
|
||||
"title": "MyIndexPattern*",
|
||||
"type": "index-pattern",
|
||||
},
|
||||
Object {
|
||||
"icon": "search",
|
||||
"id": "2",
|
||||
"title": "MySearch",
|
||||
"type": "search",
|
||||
},
|
||||
Object {
|
||||
"icon": "dashboardApp",
|
||||
"id": "3",
|
||||
"title": "MyDashboard",
|
||||
"type": "dashboard",
|
||||
},
|
||||
Object {
|
||||
"icon": "visualizeApp",
|
||||
"id": "4",
|
||||
"title": "MyViz",
|
||||
"type": "visualization",
|
||||
},
|
||||
]
|
||||
}
|
||||
onDelete={[Function]}
|
||||
onExport={[Function]}
|
||||
onQueryChange={[Function]}
|
||||
onShowRelationships={[Function]}
|
||||
onTableChange={[Function]}
|
||||
pageIndex={0}
|
||||
pageSize={15}
|
||||
selectedSavedObjects={Array []}
|
||||
selectionConfig={
|
||||
<EuiPage>
|
||||
<EuiPageContent
|
||||
horizontalPosition="center"
|
||||
panelPaddingSize="l"
|
||||
style={
|
||||
Object {
|
||||
"onSelectionChange": [Function],
|
||||
"marginBottom": 16,
|
||||
"marginTop": 16,
|
||||
"maxWidth": 1000,
|
||||
}
|
||||
}
|
||||
totalItemCount={4}
|
||||
/>
|
||||
</div>
|
||||
verticalPosition="center"
|
||||
>
|
||||
<Header
|
||||
onExportAll={[Function]}
|
||||
onImport={[Function]}
|
||||
onRefresh={[Function]}
|
||||
totalCount={4}
|
||||
/>
|
||||
<EuiSpacer
|
||||
size="xs"
|
||||
/>
|
||||
<Table
|
||||
filterOptions={
|
||||
Array [
|
||||
Object {
|
||||
"name": "index-pattern",
|
||||
"value": "index-pattern",
|
||||
"view": "index-pattern (0)",
|
||||
},
|
||||
Object {
|
||||
"name": "visualization",
|
||||
"value": "visualization",
|
||||
"view": "visualization (0)",
|
||||
},
|
||||
Object {
|
||||
"name": "dashboard",
|
||||
"value": "dashboard",
|
||||
"view": "dashboard (0)",
|
||||
},
|
||||
Object {
|
||||
"name": "search",
|
||||
"value": "search",
|
||||
"view": "search (0)",
|
||||
},
|
||||
]
|
||||
}
|
||||
getEditUrl={[Function]}
|
||||
goInApp={[Function]}
|
||||
isSearching={false}
|
||||
itemId="id"
|
||||
items={
|
||||
Array [
|
||||
Object {
|
||||
"icon": "indexPatternApp",
|
||||
"id": "1",
|
||||
"title": "MyIndexPattern*",
|
||||
"type": "index-pattern",
|
||||
},
|
||||
Object {
|
||||
"icon": "search",
|
||||
"id": "2",
|
||||
"title": "MySearch",
|
||||
"type": "search",
|
||||
},
|
||||
Object {
|
||||
"icon": "dashboardApp",
|
||||
"id": "3",
|
||||
"title": "MyDashboard",
|
||||
"type": "dashboard",
|
||||
},
|
||||
Object {
|
||||
"icon": "visualizeApp",
|
||||
"id": "4",
|
||||
"title": "MyViz",
|
||||
"type": "visualization",
|
||||
},
|
||||
]
|
||||
}
|
||||
onDelete={[Function]}
|
||||
onExport={[Function]}
|
||||
onQueryChange={[Function]}
|
||||
onShowRelationships={[Function]}
|
||||
onTableChange={[Function]}
|
||||
pageIndex={0}
|
||||
pageSize={15}
|
||||
selectedSavedObjects={Array []}
|
||||
selectionConfig={
|
||||
Object {
|
||||
"onSelectionChange": [Function],
|
||||
}
|
||||
}
|
||||
totalItemCount={4}
|
||||
/>
|
||||
</EuiPageContent>
|
||||
</EuiPage>
|
||||
`;
|
||||
|
|
|
@ -2,11 +2,8 @@
|
|||
|
||||
exports[`Header should render normally 1`] = `
|
||||
<React.Fragment>
|
||||
<EuiSpacer
|
||||
size="m"
|
||||
/>
|
||||
<EuiFlexGroup
|
||||
alignItems="flexEnd"
|
||||
alignItems="baseline"
|
||||
component="div"
|
||||
direction="row"
|
||||
gutterSize="l"
|
||||
|
@ -14,41 +11,66 @@ exports[`Header should render normally 1`] = `
|
|||
responsive={true}
|
||||
wrap={false}
|
||||
>
|
||||
<EuiFlexItem
|
||||
component="div"
|
||||
grow={false}
|
||||
>
|
||||
<EuiTitle
|
||||
size="m"
|
||||
>
|
||||
<h1>
|
||||
Edit Saved Objects (Found
|
||||
4
|
||||
)
|
||||
</h1>
|
||||
</EuiTitle>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem
|
||||
component="div"
|
||||
grow={false}
|
||||
>
|
||||
<EuiFlexGroup
|
||||
alignItems="flexEnd"
|
||||
alignItems="baseline"
|
||||
component="div"
|
||||
direction="row"
|
||||
gutterSize="l"
|
||||
justifyContent="spaceBetween"
|
||||
responsive={true}
|
||||
gutterSize="m"
|
||||
justifyContent="flexStart"
|
||||
responsive={false}
|
||||
wrap={false}
|
||||
>
|
||||
<EuiFlexItem
|
||||
component="div"
|
||||
grow={false}
|
||||
>
|
||||
<EuiButton
|
||||
<EuiTitle
|
||||
size="m"
|
||||
>
|
||||
<h1>
|
||||
Saved Objects
|
||||
</h1>
|
||||
</EuiTitle>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem
|
||||
component="div"
|
||||
grow={true}
|
||||
>
|
||||
<EuiTextColor
|
||||
color="subdued"
|
||||
>
|
||||
<p>
|
||||
4
|
||||
in total
|
||||
</p>
|
||||
</EuiTextColor>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem
|
||||
component="div"
|
||||
grow={false}
|
||||
>
|
||||
<EuiFlexGroup
|
||||
alignItems="baseline"
|
||||
component="div"
|
||||
direction="row"
|
||||
gutterSize="m"
|
||||
justifyContent="flexStart"
|
||||
responsive={false}
|
||||
wrap={false}
|
||||
>
|
||||
<EuiFlexItem
|
||||
component="div"
|
||||
grow={false}
|
||||
>
|
||||
<EuiButtonEmpty
|
||||
color="primary"
|
||||
data-test-subj="exportAllObjects"
|
||||
fill={false}
|
||||
iconSide="left"
|
||||
iconType="exportAction"
|
||||
onClick={[Function]}
|
||||
|
@ -56,16 +78,15 @@ exports[`Header should render normally 1`] = `
|
|||
type="button"
|
||||
>
|
||||
Export Everything
|
||||
</EuiButton>
|
||||
</EuiButtonEmpty>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem
|
||||
component="div"
|
||||
grow={false}
|
||||
>
|
||||
<EuiButton
|
||||
<EuiButtonEmpty
|
||||
color="primary"
|
||||
data-test-subj="importObjects"
|
||||
fill={false}
|
||||
iconSide="left"
|
||||
iconType="importAction"
|
||||
onClick={[Function]}
|
||||
|
@ -73,15 +94,14 @@ exports[`Header should render normally 1`] = `
|
|||
type="button"
|
||||
>
|
||||
Import
|
||||
</EuiButton>
|
||||
</EuiButtonEmpty>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem
|
||||
component="div"
|
||||
grow={false}
|
||||
>
|
||||
<EuiButton
|
||||
<EuiButtonEmpty
|
||||
color="primary"
|
||||
fill={false}
|
||||
iconSide="left"
|
||||
iconType="refresh"
|
||||
onClick={[Function]}
|
||||
|
@ -89,13 +109,13 @@ exports[`Header should render normally 1`] = `
|
|||
type="button"
|
||||
>
|
||||
Refresh
|
||||
</EuiButton>
|
||||
</EuiButtonEmpty>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
<EuiSpacer
|
||||
size="s"
|
||||
size="m"
|
||||
/>
|
||||
<EuiText
|
||||
grow={true}
|
||||
|
|
|
@ -26,7 +26,7 @@ import {
|
|||
EuiFlexItem,
|
||||
EuiText,
|
||||
EuiTextColor,
|
||||
EuiButton,
|
||||
EuiButtonEmpty,
|
||||
} from '@elastic/eui';
|
||||
|
||||
export const Header = ({
|
||||
|
@ -36,48 +36,56 @@ export const Header = ({
|
|||
totalCount,
|
||||
}) => (
|
||||
<Fragment>
|
||||
<EuiSpacer size="m"/>
|
||||
<EuiFlexGroup justifyContent="spaceBetween" alignItems="flexEnd">
|
||||
<EuiFlexGroup justifyContent="spaceBetween" alignItems="baseline">
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiTitle>
|
||||
<h1>Edit Saved Objects (Found {totalCount})</h1>
|
||||
</EuiTitle>
|
||||
<EuiFlexGroup alignItems="baseline" gutterSize="m" responsive={false}>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiTitle>
|
||||
<h1>Saved Objects</h1>
|
||||
</EuiTitle>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiTextColor color="subdued">
|
||||
<p>{totalCount} in total</p>
|
||||
</EuiTextColor>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiFlexGroup justifyContent="spaceBetween" alignItems="flexEnd">
|
||||
<EuiFlexGroup alignItems="baseline" gutterSize="m" responsive={false}>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiButton
|
||||
<EuiButtonEmpty
|
||||
size="s"
|
||||
iconType="exportAction"
|
||||
data-test-subj="exportAllObjects"
|
||||
onClick={onExportAll}
|
||||
>
|
||||
Export Everything
|
||||
</EuiButton>
|
||||
</EuiButtonEmpty>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiButton
|
||||
<EuiButtonEmpty
|
||||
size="s"
|
||||
iconType="importAction"
|
||||
data-test-subj="importObjects"
|
||||
onClick={onImport}
|
||||
>
|
||||
Import
|
||||
</EuiButton>
|
||||
</EuiButtonEmpty>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiButton
|
||||
<EuiButtonEmpty
|
||||
size="s"
|
||||
iconType="refresh"
|
||||
onClick={onRefresh}
|
||||
>
|
||||
Refresh
|
||||
</EuiButton>
|
||||
</EuiButtonEmpty>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
<EuiSpacer size="s"/>
|
||||
<EuiSpacer size="m"/>
|
||||
<EuiText>
|
||||
<p>
|
||||
<EuiTextColor color="subdued">
|
||||
|
|
|
@ -26,7 +26,6 @@ exports[`Table should render normally 1`] = `
|
|||
iconType="trash"
|
||||
isDisabled={false}
|
||||
onClick={[Function]}
|
||||
size="s"
|
||||
type="button"
|
||||
>
|
||||
Delete
|
||||
|
@ -38,7 +37,6 @@ exports[`Table should render normally 1`] = `
|
|||
iconType="exportAction"
|
||||
isDisabled={false}
|
||||
onClick={[Function]}
|
||||
size="s"
|
||||
type="button"
|
||||
>
|
||||
Export
|
||||
|
|
|
@ -170,7 +170,6 @@ export class Table extends PureComponent {
|
|||
key="deleteSO"
|
||||
iconType="trash"
|
||||
color="danger"
|
||||
size="s"
|
||||
onClick={onDelete}
|
||||
isDisabled={selectedSavedObjects.length === 0}
|
||||
>
|
||||
|
@ -179,7 +178,6 @@ export class Table extends PureComponent {
|
|||
<EuiButton
|
||||
key="exportSO"
|
||||
iconType="exportAction"
|
||||
size="s"
|
||||
onClick={onExport}
|
||||
isDisabled={selectedSavedObjects.length === 0}
|
||||
>
|
||||
|
|
|
@ -34,7 +34,9 @@ import {
|
|||
EuiOverlayMask,
|
||||
EUI_MODAL_CONFIRM_BUTTON,
|
||||
EuiCheckboxGroup,
|
||||
EuiToolTip
|
||||
EuiToolTip,
|
||||
EuiPage,
|
||||
EuiPageContent,
|
||||
} from '@elastic/eui';
|
||||
import {
|
||||
retrieveAndExportDocs,
|
||||
|
@ -75,7 +77,7 @@ export class ObjectsTable extends Component {
|
|||
this.state = {
|
||||
totalCount: 0,
|
||||
page: 0,
|
||||
perPage: props.perPageConfig || 10,
|
||||
perPage: props.perPageConfig || 50,
|
||||
savedObjects: [],
|
||||
savedObjectCounts: INCLUDED_TYPES.reduce((accum, type) => {
|
||||
accum[type] = 0;
|
||||
|
@ -464,39 +466,41 @@ export class ObjectsTable extends Component {
|
|||
}));
|
||||
|
||||
return (
|
||||
<div style={{ padding: '0 1rem' }}>
|
||||
{this.renderFlyout()}
|
||||
{this.renderRelationships()}
|
||||
{this.renderDeleteConfirmModal()}
|
||||
{this.renderExportAllOptionsModal()}
|
||||
<Header
|
||||
onExportAll={() =>
|
||||
this.setState({ isShowingExportAllOptionsModal: true })
|
||||
}
|
||||
onImport={this.showImportFlyout}
|
||||
onRefresh={this.refreshData}
|
||||
totalCount={totalItemCount}
|
||||
/>
|
||||
<EuiSpacer size="xs" />
|
||||
<Table
|
||||
itemId={'id'}
|
||||
selectionConfig={selectionConfig}
|
||||
selectedSavedObjects={selectedSavedObjects}
|
||||
onQueryChange={this.onQueryChange}
|
||||
onTableChange={this.onTableChange}
|
||||
filterOptions={filterOptions}
|
||||
onExport={this.onExport}
|
||||
onDelete={this.onDelete}
|
||||
getEditUrl={this.props.getEditUrl}
|
||||
goInApp={this.props.goInApp}
|
||||
pageIndex={page}
|
||||
pageSize={perPage}
|
||||
items={savedObjects}
|
||||
totalItemCount={totalItemCount}
|
||||
isSearching={isSearching}
|
||||
onShowRelationships={this.onShowRelationships}
|
||||
/>
|
||||
</div>
|
||||
<EuiPage>
|
||||
<EuiPageContent verticalPosition="center" horizontalPosition="center" style={{ maxWidth: 1000, marginTop: 16, marginBottom: 16 }}>
|
||||
{this.renderFlyout()}
|
||||
{this.renderRelationships()}
|
||||
{this.renderDeleteConfirmModal()}
|
||||
{this.renderExportAllOptionsModal()}
|
||||
<Header
|
||||
onExportAll={() =>
|
||||
this.setState({ isShowingExportAllOptionsModal: true })
|
||||
}
|
||||
onImport={this.showImportFlyout}
|
||||
onRefresh={this.refreshData}
|
||||
totalCount={totalItemCount}
|
||||
/>
|
||||
<EuiSpacer size="xs" />
|
||||
<Table
|
||||
itemId={'id'}
|
||||
selectionConfig={selectionConfig}
|
||||
selectedSavedObjects={selectedSavedObjects}
|
||||
onQueryChange={this.onQueryChange}
|
||||
onTableChange={this.onTableChange}
|
||||
filterOptions={filterOptions}
|
||||
onExport={this.onExport}
|
||||
onDelete={this.onDelete}
|
||||
getEditUrl={this.props.getEditUrl}
|
||||
goInApp={this.props.goInApp}
|
||||
pageIndex={page}
|
||||
pageSize={perPage}
|
||||
items={savedObjects}
|
||||
totalItemCount={totalItemCount}
|
||||
isSearching={isSearching}
|
||||
onShowRelationships={this.onShowRelationships}
|
||||
/>
|
||||
</EuiPageContent>
|
||||
</EuiPage>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -24,6 +24,11 @@ kbn-management-objects-view {
|
|||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
kbn-management-objects {
|
||||
background: @globalColorLightestGray;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
kbn-management-app {
|
||||
li.current-page {
|
||||
font-size: 1.5em;
|
||||
|
|
|
@ -54,7 +54,7 @@ export function getUiSettingDefaults() {
|
|||
'sort:options': {
|
||||
name: 'Sort options',
|
||||
value: '{ "unmapped_type": "boolean" }',
|
||||
description: `<a href="https://www.elastic.co/guide/en/elasticsearch/reference/current/search-request-sort.html"
|
||||
description: `<a href="https://www.elastic.co/guide/en/elasticsearch/reference/current/search-request-sort.html"
|
||||
target="_blank" rel="noopener noreferrer">Options</a> for the Elasticsearch sort parameter`,
|
||||
type: 'json'
|
||||
},
|
||||
|
@ -210,8 +210,8 @@ export function getUiSettingDefaults() {
|
|||
'visualization:tileMap:maxPrecision': {
|
||||
name: 'Maximum tile map precision',
|
||||
value: 7,
|
||||
description: `The maximum geoHash precision displayed on tile maps: 7 is high, 10 is very high, 12 is the max.
|
||||
<a href="http://www.elastic.co/guide/en/elasticsearch/reference/current/search-aggregations-bucket-geohashgrid-aggregation.html#_cell_dimensions_at_the_equator"
|
||||
description: `The maximum geoHash precision displayed on tile maps: 7 is high, 10 is very high, 12 is the max.
|
||||
<a href="http://www.elastic.co/guide/en/elasticsearch/reference/current/search-aggregations-bucket-geohashgrid-aggregation.html#_cell_dimensions_at_the_equator"
|
||||
target="_blank" rel="noopener noreferrer">Explanation of cell dimensions</a>`,
|
||||
category: ['visualization'],
|
||||
},
|
||||
|
@ -349,7 +349,7 @@ export function getUiSettingDefaults() {
|
|||
},
|
||||
'savedObjects:perPage': {
|
||||
name: 'Objects per page',
|
||||
value: 5,
|
||||
value: 20,
|
||||
type: 'number',
|
||||
description: `Number of objects to show per page in the load dialog`
|
||||
},
|
||||
|
@ -414,7 +414,7 @@ export function getUiSettingDefaults() {
|
|||
description: `The list of ranges to show in the Quick section of the time picker.
|
||||
This should be an array of objects, with each object containing "from", "to" (see
|
||||
<a href="https://www.elastic.co/guide/en/elasticsearch/reference/current/common-options.html#date-math"
|
||||
target="_blank" rel="noopener noreferrer">accepted formats</a>),
|
||||
target="_blank" rel="noopener noreferrer">accepted formats</a>),
|
||||
"display" (the title to be displayed), and "section" (which column to put the option in).`
|
||||
},
|
||||
'dashboard:defaultDarkTheme': {
|
||||
|
|
Loading…
Reference in a new issue