mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 09:48:58 -04:00
Move table-list-view to kibana-react (#50046)
* Move table-list-view to kibana-react * Pass ui/* import as props * Update i18n message ids * Fix TS * Fix unit tests
This commit is contained in:
parent
b9a43a1788
commit
3a8e65a816
10 changed files with 228 additions and 153 deletions
|
@ -1,7 +1,7 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`after fetch hideWriteControls 1`] = `
|
||||
<InjectIntl(TableListViewUi)
|
||||
<TableListView
|
||||
createItem={null}
|
||||
deleteItems={null}
|
||||
editItem={null}
|
||||
|
@ -43,11 +43,17 @@ exports[`after fetch hideWriteControls 1`] = `
|
|||
]
|
||||
}
|
||||
tableListTitle="Dashboards"
|
||||
toastNotifications={Object {}}
|
||||
uiSettings={
|
||||
Object {
|
||||
"get": [MockFunction],
|
||||
}
|
||||
}
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`after fetch initialFilter 1`] = `
|
||||
<InjectIntl(TableListViewUi)
|
||||
<TableListView
|
||||
createItem={[Function]}
|
||||
deleteItems={[Function]}
|
||||
editItem={[Function]}
|
||||
|
@ -133,11 +139,17 @@ exports[`after fetch initialFilter 1`] = `
|
|||
]
|
||||
}
|
||||
tableListTitle="Dashboards"
|
||||
toastNotifications={Object {}}
|
||||
uiSettings={
|
||||
Object {
|
||||
"get": [MockFunction],
|
||||
}
|
||||
}
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`after fetch renders call to action when no dashboards exist 1`] = `
|
||||
<InjectIntl(TableListViewUi)
|
||||
<TableListView
|
||||
createItem={[Function]}
|
||||
deleteItems={[Function]}
|
||||
editItem={[Function]}
|
||||
|
@ -223,11 +235,17 @@ exports[`after fetch renders call to action when no dashboards exist 1`] = `
|
|||
]
|
||||
}
|
||||
tableListTitle="Dashboards"
|
||||
toastNotifications={Object {}}
|
||||
uiSettings={
|
||||
Object {
|
||||
"get": [MockFunction],
|
||||
}
|
||||
}
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`after fetch renders table rows 1`] = `
|
||||
<InjectIntl(TableListViewUi)
|
||||
<TableListView
|
||||
createItem={[Function]}
|
||||
deleteItems={[Function]}
|
||||
editItem={[Function]}
|
||||
|
@ -313,11 +331,17 @@ exports[`after fetch renders table rows 1`] = `
|
|||
]
|
||||
}
|
||||
tableListTitle="Dashboards"
|
||||
toastNotifications={Object {}}
|
||||
uiSettings={
|
||||
Object {
|
||||
"get": [MockFunction],
|
||||
}
|
||||
}
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`after fetch renders warning when listingLimit is exceeded 1`] = `
|
||||
<InjectIntl(TableListViewUi)
|
||||
<TableListView
|
||||
createItem={[Function]}
|
||||
deleteItems={[Function]}
|
||||
editItem={[Function]}
|
||||
|
@ -403,11 +427,17 @@ exports[`after fetch renders warning when listingLimit is exceeded 1`] = `
|
|||
]
|
||||
}
|
||||
tableListTitle="Dashboards"
|
||||
toastNotifications={Object {}}
|
||||
uiSettings={
|
||||
Object {
|
||||
"get": [MockFunction],
|
||||
}
|
||||
}
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`renders empty page in before initial fetch to avoid flickering 1`] = `
|
||||
<InjectIntl(TableListViewUi)
|
||||
<TableListView
|
||||
createItem={[Function]}
|
||||
deleteItems={[Function]}
|
||||
editItem={[Function]}
|
||||
|
@ -493,5 +523,11 @@ exports[`renders empty page in before initial fetch to avoid flickering 1`] = `
|
|||
]
|
||||
}
|
||||
tableListTitle="Dashboards"
|
||||
toastNotifications={Object {}}
|
||||
uiSettings={
|
||||
Object {
|
||||
"get": [MockFunction],
|
||||
}
|
||||
}
|
||||
/>
|
||||
`;
|
||||
|
|
|
@ -23,8 +23,9 @@ import { FormattedMessage } from '@kbn/i18n/react';
|
|||
import { i18n } from '@kbn/i18n';
|
||||
|
||||
import { EuiLink, EuiButton, EuiEmptyPrompt } from '@elastic/eui';
|
||||
import { npStart } from 'ui/new_platform';
|
||||
|
||||
import { TableListView } from './../../table_list_view';
|
||||
import { TableListView } from '../../../../../../../src/plugins/kibana_react/public';
|
||||
|
||||
export const EMPTY_FILTER = '';
|
||||
|
||||
|
@ -58,6 +59,8 @@ export class DashboardListing extends React.Component {
|
|||
tableListTitle={i18n.translate('kbn.dashboard.listing.dashboardsTitle', {
|
||||
defaultMessage: 'Dashboards',
|
||||
})}
|
||||
toastNotifications={npStart.core.notifications.toasts}
|
||||
uiSettings={npStart.core.uiSettings}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -42,6 +42,17 @@ jest.mock(
|
|||
{ virtual: true }
|
||||
);
|
||||
|
||||
jest.mock('ui/new_platform', () => {
|
||||
return {
|
||||
npStart: {
|
||||
core: {
|
||||
notifications: { toasts: { } },
|
||||
uiSettings: { get: jest.fn(() => 10) },
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
|
|
|
@ -21,13 +21,13 @@ import React, { Component, Fragment } from 'react';
|
|||
import PropTypes from 'prop-types';
|
||||
import { FormattedMessage } from '@kbn/i18n/react';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { TableListView } from './../../table_list_view';
|
||||
import { TableListView } from '../../../../../../../src/plugins/kibana_react/public';
|
||||
|
||||
import { EuiIcon, EuiBetaBadge, EuiLink, EuiButton, EuiEmptyPrompt } from '@elastic/eui';
|
||||
|
||||
import { getServices } from '../kibana_services';
|
||||
|
||||
const { capabilities } = getServices();
|
||||
const { capabilities, toastNotifications, uiSettings } = getServices();
|
||||
|
||||
class VisualizeListingTable extends Component {
|
||||
constructor(props) {
|
||||
|
@ -57,6 +57,8 @@ class VisualizeListingTable extends Component {
|
|||
tableListTitle={i18n.translate('kbn.visualize.listing.table.listTitle', {
|
||||
defaultMessage: 'Visualizations',
|
||||
})}
|
||||
toastNotifications={toastNotifications}
|
||||
uiSettings={uiSettings}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -23,3 +23,4 @@ export * from './context';
|
|||
export * from './overlays';
|
||||
export * from './ui_settings';
|
||||
export * from './field_icon';
|
||||
export * from './table_list_view';
|
||||
|
|
|
@ -16,6 +16,4 @@
|
|||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
export { TableListView } from './table_list_view';
|
||||
|
||||
export * from './table_list_view';
|
|
@ -18,13 +18,12 @@
|
|||
*/
|
||||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
|
||||
import { FormattedMessage } from '@kbn/i18n/react';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import _ from 'lodash';
|
||||
import { toastNotifications } from 'ui/notify';
|
||||
import { debounce, indexBy, sortBy, uniq } from 'lodash';
|
||||
import {
|
||||
EuiTitle,
|
||||
// @ts-ignore
|
||||
EuiInMemoryTable,
|
||||
EuiPage,
|
||||
EuiPageBody,
|
||||
|
@ -38,26 +37,66 @@ import {
|
|||
EuiConfirmModal,
|
||||
EuiCallOut,
|
||||
} from '@elastic/eui';
|
||||
|
||||
import { npStart } from 'ui/new_platform';
|
||||
import { ToastsStart, UiSettingsClientContract } from 'kibana/public';
|
||||
|
||||
export const EMPTY_FILTER = '';
|
||||
|
||||
interface Column {
|
||||
name: string;
|
||||
width?: string;
|
||||
actions?: object[];
|
||||
}
|
||||
|
||||
interface Item {
|
||||
id?: string;
|
||||
}
|
||||
|
||||
export interface TableListViewProps {
|
||||
createItem?(): void;
|
||||
deleteItems?(items: object[]): Promise<void>;
|
||||
editItem?(item: object): void;
|
||||
entityName: string;
|
||||
entityNamePlural: string;
|
||||
findItems(query: string): Promise<{ total: number; hits: object[] }>;
|
||||
listingLimit: number;
|
||||
initialFilter: string;
|
||||
noItemsFragment: JSX.Element;
|
||||
// update possible column types to something like (FieldDataColumn | ComputedColumn | ActionsColumn)[] when they have been added to EUI
|
||||
tableColumns: Column[];
|
||||
tableListTitle: string;
|
||||
toastNotifications: ToastsStart;
|
||||
uiSettings: UiSettingsClientContract;
|
||||
}
|
||||
|
||||
export interface TableListViewState {
|
||||
items: object[];
|
||||
hasInitialFetchReturned: boolean;
|
||||
isFetchingItems: boolean;
|
||||
isDeletingItems: boolean;
|
||||
showDeleteModal: boolean;
|
||||
showLimitError: boolean;
|
||||
filter: string;
|
||||
selectedIds: string[];
|
||||
totalItems: number;
|
||||
}
|
||||
|
||||
// saved object client does not support sorting by title because title is only mapped as analyzed
|
||||
// the legacy implementation got around this by pulling `listingLimit` items and doing client side sorting
|
||||
// and not supporting server-side paging.
|
||||
// This component does not try to tackle these problems (yet) and is just feature matching the legacy component
|
||||
// TODO support server side sorting/paging once title and description are sortable on the server.
|
||||
class TableListViewUi extends React.Component {
|
||||
class TableListView extends React.Component<TableListViewProps, TableListViewState> {
|
||||
private pagination = {};
|
||||
private _isMounted = false;
|
||||
|
||||
constructor(props) {
|
||||
constructor(props: TableListViewProps) {
|
||||
super(props);
|
||||
|
||||
const initialPageSize = npStart.core.uiSettings.get('savedObjects:perPage');
|
||||
const initialPageSize = props.uiSettings.get('savedObjects:perPage');
|
||||
this.pagination = {
|
||||
initialPageIndex: 0,
|
||||
initialPageSize,
|
||||
pageSizeOptions: _.uniq([10, 20, 50, initialPageSize]).sort(),
|
||||
pageSizeOptions: uniq([10, 20, 50, initialPageSize]).sort(),
|
||||
};
|
||||
this.state = {
|
||||
items: [],
|
||||
|
@ -67,10 +106,9 @@ class TableListViewUi extends React.Component {
|
|||
isDeletingItems: false,
|
||||
showDeleteModal: false,
|
||||
showLimitError: false,
|
||||
filter: this.props.initialFilter,
|
||||
filter: props.initialFilter,
|
||||
selectedIds: [],
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
|
@ -86,7 +124,7 @@ class TableListViewUi extends React.Component {
|
|||
this.fetchItems();
|
||||
}
|
||||
|
||||
debouncedFetch = _.debounce(async (filter) => {
|
||||
debouncedFetch = debounce(async (filter: string) => {
|
||||
const response = await this.props.findItems(filter);
|
||||
|
||||
if (!this._isMounted) {
|
||||
|
@ -100,7 +138,7 @@ class TableListViewUi extends React.Component {
|
|||
this.setState({
|
||||
hasInitialFetchReturned: true,
|
||||
isFetchingItems: false,
|
||||
items: (!filter ? _.sortBy(response.hits, 'title') : response.hits),
|
||||
items: !filter ? sortBy(response.hits, 'title') : response.hits,
|
||||
totalItems: response.total,
|
||||
showLimitError: response.total > this.props.listingLimit,
|
||||
});
|
||||
|
@ -108,26 +146,29 @@ class TableListViewUi extends React.Component {
|
|||
}, 300);
|
||||
|
||||
fetchItems = () => {
|
||||
this.setState({
|
||||
isFetchingItems: true,
|
||||
}, this.debouncedFetch.bind(null, this.state.filter));
|
||||
}
|
||||
this.setState(
|
||||
{
|
||||
isFetchingItems: true,
|
||||
},
|
||||
this.debouncedFetch.bind(null, this.state.filter)
|
||||
);
|
||||
};
|
||||
|
||||
deleteSelectedItems = async () => {
|
||||
if (this.state.isDeletingItems) {
|
||||
if (this.state.isDeletingItems || !this.props.deleteItems) {
|
||||
return;
|
||||
}
|
||||
this.setState({
|
||||
isDeletingItems: true
|
||||
isDeletingItems: true,
|
||||
});
|
||||
try {
|
||||
const itemsById = _.indexBy(this.state.items, 'id');
|
||||
const itemsById = indexBy(this.state.items, 'id');
|
||||
await this.props.deleteItems(this.state.selectedIds.map(id => itemsById[id]));
|
||||
} catch (error) {
|
||||
toastNotifications.addDanger({
|
||||
this.props.toastNotifications.addDanger({
|
||||
title: (
|
||||
<FormattedMessage
|
||||
id="kbn.table_list_view.listing.unableToDeleteDangerMessage"
|
||||
id="kibana-react.tableListView.listing.unableToDeleteDangerMessage"
|
||||
defaultMessage="Unable to delete {entityName}(s)"
|
||||
values={{ entityName: this.props.entityName }}
|
||||
/>
|
||||
|
@ -138,25 +179,28 @@ class TableListViewUi extends React.Component {
|
|||
this.fetchItems();
|
||||
this.setState({
|
||||
isDeletingItems: false,
|
||||
selectedIds: []
|
||||
selectedIds: [],
|
||||
});
|
||||
this.closeDeleteModal();
|
||||
}
|
||||
};
|
||||
|
||||
closeDeleteModal = () => {
|
||||
this.setState({ showDeleteModal: false });
|
||||
}
|
||||
};
|
||||
|
||||
openDeleteModal = () => {
|
||||
this.setState({ showDeleteModal: true });
|
||||
}
|
||||
};
|
||||
|
||||
setFilter(filter) {
|
||||
setFilter({ queryText }: { queryText: string }) {
|
||||
// If the user is searching, we want to clear the sort order so that
|
||||
// results are ordered by Elasticsearch's relevance.
|
||||
this.setState({
|
||||
filter: filter.queryText,
|
||||
}, this.fetchItems);
|
||||
this.setState(
|
||||
{
|
||||
filter: queryText,
|
||||
},
|
||||
this.fetchItems
|
||||
);
|
||||
}
|
||||
|
||||
hasNoItems() {
|
||||
|
@ -170,14 +214,14 @@ class TableListViewUi extends React.Component {
|
|||
renderConfirmDeleteModal() {
|
||||
let deleteButton = (
|
||||
<FormattedMessage
|
||||
id="kbn.table_list_view.listing.deleteSelectedItemsConfirmModal.confirmButtonLabel"
|
||||
id="kibana-react.tableListView.listing.deleteSelectedItemsConfirmModal.confirmButtonLabel"
|
||||
defaultMessage="Delete"
|
||||
/>
|
||||
);
|
||||
if (this.state.isDeletingItems) {
|
||||
deleteButton = (
|
||||
<FormattedMessage
|
||||
id="kbn.table_list_view.listing.deleteSelectedItemsConfirmModal.confirmButtonLabelDeleting"
|
||||
id="kibana-react.tableListView.listing.deleteSelectedItemsConfirmModal.confirmButtonLabelDeleting"
|
||||
defaultMessage="Deleting"
|
||||
/>
|
||||
);
|
||||
|
@ -188,11 +232,14 @@ class TableListViewUi extends React.Component {
|
|||
<EuiConfirmModal
|
||||
title={
|
||||
<FormattedMessage
|
||||
id="kbn.table_list_view.listing.deleteSelectedConfirmModal.title"
|
||||
id="kibana-react.tableListView.listing.deleteSelectedConfirmModal.title"
|
||||
defaultMessage="Delete {itemCount} {entityName}?"
|
||||
values={{
|
||||
itemCount: this.state.selectedIds.length,
|
||||
entityName: (this.state.selectedIds.length === 1) ? this.props.entityName : this.props.entityNamePlural
|
||||
entityName:
|
||||
this.state.selectedIds.length === 1
|
||||
? this.props.entityName
|
||||
: this.props.entityNamePlural,
|
||||
}}
|
||||
/>
|
||||
}
|
||||
|
@ -201,7 +248,7 @@ class TableListViewUi extends React.Component {
|
|||
onConfirm={this.deleteSelectedItems}
|
||||
cancelButtonText={
|
||||
<FormattedMessage
|
||||
id="kbn.table_list_view.listing.deleteSelectedItemsConfirmModal.cancelButtonLabel"
|
||||
id="kibana-react.tableListView.listing.deleteSelectedItemsConfirmModal.cancelButtonLabel"
|
||||
defaultMessage="Cancel"
|
||||
/>
|
||||
}
|
||||
|
@ -210,7 +257,7 @@ class TableListViewUi extends React.Component {
|
|||
>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="kbn.table_list_view.listing.deleteConfirmModalDescription"
|
||||
id="kibana-react.tableListView.listing.deleteConfirmModalDescription"
|
||||
defaultMessage="You can't recover deleted {entityNamePlural}."
|
||||
values={{ entityNamePlural: this.props.entityNamePlural }}
|
||||
/>
|
||||
|
@ -227,7 +274,7 @@ class TableListViewUi extends React.Component {
|
|||
<EuiCallOut
|
||||
title={
|
||||
<FormattedMessage
|
||||
id="kbn.table_list_view.listing.listingLimitExceededTitle"
|
||||
id="kibana-react.tableListView.listing.listingLimitExceededTitle"
|
||||
defaultMessage="Listing limit exceeded"
|
||||
/>
|
||||
}
|
||||
|
@ -236,26 +283,22 @@ class TableListViewUi extends React.Component {
|
|||
>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="kbn.table_list_view.listing.listingLimitExceededDescription"
|
||||
id="kibana-react.tableListView.listing.listingLimitExceededDescription"
|
||||
defaultMessage="You have {totalItems} {entityNamePlural}, but your {listingLimitText} setting prevents
|
||||
the table below from displaying more than {listingLimitValue}. You can change this setting under {advancedSettingsLink}."
|
||||
values={{
|
||||
entityNamePlural: this.props.entityNamePlural,
|
||||
totalItems: this.state.totalItems,
|
||||
listingLimitValue: this.props.listingLimit,
|
||||
listingLimitText: (
|
||||
<strong>
|
||||
listingLimit
|
||||
</strong>
|
||||
),
|
||||
listingLimitText: <strong>listingLimit</strong>,
|
||||
advancedSettingsLink: (
|
||||
<EuiLink href="#/management/kibana/settings">
|
||||
<FormattedMessage
|
||||
id="kbn.table_list_view.listing.listingLimitExceeded.advancedSettingsLinkText"
|
||||
id="kibana-react.tableListView.listing.listingLimitExceeded.advancedSettingsLinkText"
|
||||
defaultMessage="Advanced Settings"
|
||||
/>
|
||||
</EuiLink>
|
||||
)
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
|
@ -268,18 +311,15 @@ class TableListViewUi extends React.Component {
|
|||
|
||||
renderNoItemsMessage() {
|
||||
if (this.props.noItemsFragment) {
|
||||
return (
|
||||
this.props.noItemsFragment
|
||||
);
|
||||
return this.props.noItemsFragment;
|
||||
} else {
|
||||
return (
|
||||
<FormattedMessage
|
||||
id="kbn.table_list_view.listing.noAvailableItemsMessage"
|
||||
id="kibana-react.tableListView.listing.noAvailableItemsMessage"
|
||||
defaultMessage="No {entityNamePlural} available."
|
||||
values={{ entityNamePlural: this.props.entityNamePlural }}
|
||||
/>
|
||||
);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -302,11 +342,12 @@ class TableListViewUi extends React.Component {
|
|||
data-test-subj="deleteSelectedItems"
|
||||
>
|
||||
<FormattedMessage
|
||||
id="kbn.table_list_view.listing.deleteButtonMessage"
|
||||
id="kibana-react.tableListView.listing.deleteButtonMessage"
|
||||
defaultMessage="Delete {itemCount} {entityName}"
|
||||
values={{
|
||||
itemCount: selection.length,
|
||||
entityName: (selection.length === 1) ? this.props.entityName : this.props.entityNamePlural
|
||||
entityName:
|
||||
selection.length === 1 ? this.props.entityName : this.props.entityNamePlural,
|
||||
}}
|
||||
/>
|
||||
</EuiButton>
|
||||
|
@ -314,25 +355,34 @@ class TableListViewUi extends React.Component {
|
|||
}
|
||||
|
||||
renderTable() {
|
||||
const selection = this.props.deleteItems ? {
|
||||
onSelectionChange: (selection) => {
|
||||
this.setState({
|
||||
selectedIds: selection.map(item => { return item.id; })
|
||||
});
|
||||
}
|
||||
} : null;
|
||||
const selection = this.props.deleteItems
|
||||
? {
|
||||
onSelectionChange: (obj: Item[]) => {
|
||||
this.setState({
|
||||
selectedIds: obj
|
||||
.map(item => item.id)
|
||||
.filter((id: undefined | string): id is string => Boolean(id)),
|
||||
});
|
||||
},
|
||||
}
|
||||
: null;
|
||||
|
||||
const actions = [{
|
||||
name: i18n.translate('kbn.table_list_view.listing.table.editActionName', {
|
||||
defaultMessage: 'Edit'
|
||||
}),
|
||||
description: i18n.translate('kbn.table_list_view.listing.table.editActionDescription', {
|
||||
defaultMessage: 'Edit'
|
||||
}),
|
||||
icon: 'pencil',
|
||||
type: 'icon',
|
||||
onClick: this.props.editItem
|
||||
}];
|
||||
const actions = [
|
||||
{
|
||||
name: i18n.translate('kibana-react.tableListView.listing.table.editActionName', {
|
||||
defaultMessage: 'Edit',
|
||||
}),
|
||||
description: i18n.translate(
|
||||
'kibana-react.tableListView.listing.table.editActionDescription',
|
||||
{
|
||||
defaultMessage: 'Edit',
|
||||
}
|
||||
),
|
||||
icon: 'pencil',
|
||||
type: 'icon',
|
||||
onClick: this.props.editItem,
|
||||
},
|
||||
];
|
||||
|
||||
const search = {
|
||||
onChange: this.setFilter.bind(this),
|
||||
|
@ -346,17 +396,17 @@ class TableListViewUi extends React.Component {
|
|||
const columns = this.props.tableColumns.slice();
|
||||
if (this.props.editItem) {
|
||||
columns.push({
|
||||
name: i18n.translate('kbn.table_list_view.listing.table.actionTitle', {
|
||||
defaultMessage: 'Actions'
|
||||
name: i18n.translate('kibana-react.tableListView.listing.table.actionTitle', {
|
||||
defaultMessage: 'Actions',
|
||||
}),
|
||||
width: '100px',
|
||||
actions
|
||||
actions,
|
||||
});
|
||||
}
|
||||
|
||||
const noItemsMessage = (
|
||||
<FormattedMessage
|
||||
id="kbn.table_list_view.listing.noMatchedItemsMessage"
|
||||
id="kibana-react.tableListView.listing.noMatchedItemsMessage"
|
||||
defaultMessage="No {entityNamePlural} matched your search."
|
||||
values={{ entityNamePlural: this.props.entityNamePlural }}
|
||||
/>
|
||||
|
@ -397,7 +447,7 @@ class TableListViewUi extends React.Component {
|
|||
fill
|
||||
>
|
||||
<FormattedMessage
|
||||
id="kbn.table_list_view.listing.createNewItemButtonLabel"
|
||||
id="kibana-react.tableListView.listing.createNewItemButtonLabel"
|
||||
defaultMessage="Create {entityName}"
|
||||
values={{ entityName: this.props.entityName }}
|
||||
/>
|
||||
|
@ -412,14 +462,11 @@ class TableListViewUi extends React.Component {
|
|||
<EuiFlexGroup justifyContent="spaceBetween" alignItems="flexEnd" data-test-subj="top-nav">
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiTitle size="l">
|
||||
<h1>
|
||||
{this.props.tableListTitle}
|
||||
</h1>
|
||||
<h1>{this.props.tableListTitle}</h1>
|
||||
</EuiTitle>
|
||||
</EuiFlexItem>
|
||||
|
||||
{createButton}
|
||||
|
||||
</EuiFlexGroup>
|
||||
|
||||
<EuiSpacer size="m" />
|
||||
|
@ -450,34 +497,10 @@ class TableListViewUi extends React.Component {
|
|||
className="itemListing__page"
|
||||
restrictWidth
|
||||
>
|
||||
<EuiPageBody>
|
||||
{this.renderPageContent()}
|
||||
</EuiPageBody>
|
||||
<EuiPageBody>{this.renderPageContent()}</EuiPageBody>
|
||||
</EuiPage>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
TableListViewUi.propTypes = {
|
||||
tableColumns: PropTypes.array.isRequired,
|
||||
|
||||
noItemsFragment: PropTypes.object,
|
||||
|
||||
findItems: PropTypes.func.isRequired,
|
||||
deleteItems: PropTypes.func,
|
||||
createItem: PropTypes.func,
|
||||
editItem: PropTypes.func,
|
||||
|
||||
listingLimit: PropTypes.number,
|
||||
initialFilter: PropTypes.string,
|
||||
|
||||
entityName: PropTypes.string.isRequired,
|
||||
entityNamePlural: PropTypes.string.isRequired,
|
||||
tableListTitle: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
TableListViewUi.defaultProps = {
|
||||
initialFilter: EMPTY_FILTER,
|
||||
};
|
||||
|
||||
export const TableListView = injectI18n(TableListViewUi);
|
||||
export { TableListView };
|
|
@ -10,15 +10,14 @@ import React, { Fragment } from 'react';
|
|||
import { EuiEmptyPrompt, EuiLink, EuiButton } from '@elastic/eui';
|
||||
|
||||
import { CoreStart, ApplicationStart } from 'kibana/public';
|
||||
// @ts-ignore
|
||||
import { TableListView } from '../../../../../../src/legacy/core_plugins/kibana/public/table_list_view/table_list_view';
|
||||
import { TableListView } from '../../../../../../src/plugins/kibana_react/public';
|
||||
import { GraphWorkspaceSavedObject } from '../types';
|
||||
|
||||
export interface ListingProps {
|
||||
coreStart: CoreStart;
|
||||
createItem: () => void;
|
||||
findItems: (query: string, limit: number) => Promise<GraphWorkspaceSavedObject[]>;
|
||||
deleteItems: (ids: string[]) => Promise<void>;
|
||||
findItems: (query: string) => Promise<{ total: number; hits: GraphWorkspaceSavedObject[] }>;
|
||||
deleteItems: (records: GraphWorkspaceSavedObject[]) => Promise<void>;
|
||||
editItem: (record: GraphWorkspaceSavedObject) => void;
|
||||
getViewUrl: (record: GraphWorkspaceSavedObject) => string;
|
||||
listingLimit: number;
|
||||
|
@ -31,10 +30,10 @@ export function Listing(props: ListingProps) {
|
|||
return (
|
||||
<I18nProvider>
|
||||
<TableListView
|
||||
createItem={props.capabilities.save ? props.createItem : null}
|
||||
createItem={props.capabilities.save ? props.createItem : undefined}
|
||||
findItems={props.findItems}
|
||||
deleteItems={props.capabilities.delete ? props.deleteItems : null}
|
||||
editItem={props.capabilities.save ? props.editItem : null}
|
||||
deleteItems={props.capabilities.delete ? props.deleteItems : undefined}
|
||||
editItem={props.capabilities.save ? props.editItem : undefined}
|
||||
tableColumns={getTableColumns(props.getViewUrl)}
|
||||
listingLimit={props.listingLimit}
|
||||
initialFilter={props.initialFilter}
|
||||
|
@ -43,6 +42,7 @@ export function Listing(props: ListingProps) {
|
|||
props.createItem,
|
||||
props.coreStart.application
|
||||
)}
|
||||
toastNotifications={props.coreStart.notifications.toasts}
|
||||
entityName={i18n.translate('xpack.graph.listing.table.entityName', {
|
||||
defaultMessage: 'graph',
|
||||
})}
|
||||
|
@ -52,6 +52,7 @@ export function Listing(props: ListingProps) {
|
|||
tableListTitle={i18n.translate('xpack.graph.listing.graphsTitle', {
|
||||
defaultMessage: 'Graphs',
|
||||
})}
|
||||
uiSettings={props.coreStart.uiSettings}
|
||||
/>
|
||||
</I18nProvider>
|
||||
);
|
||||
|
|
|
@ -656,6 +656,20 @@
|
|||
"core.euiSuperUpdateButton.refreshButtonLabel": "更新",
|
||||
"core.euiSuperUpdateButton.updateButtonLabel": "更新",
|
||||
"core.euiSuperUpdateButton.updatingButtonLabel": "更新中",
|
||||
"kibana-react.tableListView.listing.deleteButtonMessage": "{itemCount} 件の {entityName} を削除",
|
||||
"kibana-react.tableListView.listing.deleteConfirmModalDescription": "削除された {entityNamePlural} は復元できません。",
|
||||
"kibana-react.tableListView.listing.deleteSelectedItemsConfirmModal.cancelButtonLabel": "キャンセル",
|
||||
"kibana-react.tableListView.listing.deleteSelectedItemsConfirmModal.confirmButtonLabel": "削除",
|
||||
"kibana-react.tableListView.listing.deleteSelectedItemsConfirmModal.confirmButtonLabelDeleting": "削除中",
|
||||
"kibana-react.tableListView.listing.listingLimitExceeded.advancedSettingsLinkText": "高度な設定",
|
||||
"kibana-react.tableListView.listing.listingLimitExceededDescription": "{totalItems} 件の {entityNamePlural} がありますが、{listingLimitText} の設定により {listingLimitValue} 件までしか下の表に表示できません。この設定は {advancedSettingsLink} で変更できます。",
|
||||
"kibana-react.tableListView.listing.listingLimitExceededTitle": "リスティング制限超過",
|
||||
"kibana-react.tableListView.listing.noAvailableItemsMessage": "利用可能な {entityNamePlural} がありません。",
|
||||
"kibana-react.tableListView.listing.noMatchedItemsMessage": "検索条件に一致する {entityNamePlural} がありません。",
|
||||
"kibana-react.tableListView.listing.table.actionTitle": "アクション",
|
||||
"kibana-react.tableListView.listing.table.editActionDescription": "編集",
|
||||
"kibana-react.tableListView.listing.table.editActionName": "編集",
|
||||
"kibana-react.tableListView.listing.unableToDeleteDangerMessage": "{entityName} を削除できません",
|
||||
"kibana-react.exitFullScreenButton.exitFullScreenModeButtonAreaLabel": "全画面モードを終了",
|
||||
"kibana-react.exitFullScreenButton.exitFullScreenModeButtonLabel": "全画面を終了",
|
||||
"kibana-react.exitFullScreenButton.fullScreenModeDescription": "ESC キーで全画面モードを終了します。",
|
||||
|
@ -2371,20 +2385,6 @@
|
|||
"kbn.server.tutorials.zookeeperMetrics.nameTitle": "Zookeeper メトリック",
|
||||
"kbn.server.tutorials.zookeeperMetrics.shortDescription": "Zookeeper サーバーから内部メトリックを取得します。",
|
||||
"kbn.settings.advancedSettings.voiceAnnouncement.searchResultScreenReaderMessage": "{query} を検索しました。{sectionLenght, plural, one {# セクション} other {# セクション}}に{optionLenght, plural, one {# オプション} other { # オプション}}があります。",
|
||||
"kbn.table_list_view.listing.deleteButtonMessage": "{itemCount} 件の {entityName} を削除",
|
||||
"kbn.table_list_view.listing.deleteConfirmModalDescription": "削除された {entityNamePlural} は復元できません。",
|
||||
"kbn.table_list_view.listing.deleteSelectedItemsConfirmModal.cancelButtonLabel": "キャンセル",
|
||||
"kbn.table_list_view.listing.deleteSelectedItemsConfirmModal.confirmButtonLabel": "削除",
|
||||
"kbn.table_list_view.listing.deleteSelectedItemsConfirmModal.confirmButtonLabelDeleting": "削除中",
|
||||
"kbn.table_list_view.listing.listingLimitExceeded.advancedSettingsLinkText": "高度な設定",
|
||||
"kbn.table_list_view.listing.listingLimitExceededDescription": "{totalItems} 件の {entityNamePlural} がありますが、{listingLimitText} の設定により {listingLimitValue} 件までしか下の表に表示できません。この設定は {advancedSettingsLink} で変更できます。",
|
||||
"kbn.table_list_view.listing.listingLimitExceededTitle": "リスティング制限超過",
|
||||
"kbn.table_list_view.listing.noAvailableItemsMessage": "利用可能な {entityNamePlural} がありません。",
|
||||
"kbn.table_list_view.listing.noMatchedItemsMessage": "検索条件に一致する {entityNamePlural} がありません。",
|
||||
"kbn.table_list_view.listing.table.actionTitle": "アクション",
|
||||
"kbn.table_list_view.listing.table.editActionDescription": "編集",
|
||||
"kbn.table_list_view.listing.table.editActionName": "編集",
|
||||
"kbn.table_list_view.listing.unableToDeleteDangerMessage": "{entityName} を削除できません",
|
||||
"kbn.topNavMenu.openInspectorButtonLabel": "検査",
|
||||
"kbn.topNavMenu.refreshButtonLabel": "更新",
|
||||
"kbn.topNavMenu.saveVisualizationButtonLabel": "保存",
|
||||
|
|
|
@ -660,6 +660,20 @@
|
|||
"kibana-react.exitFullScreenButton.exitFullScreenModeButtonAreaLabel": "退出全屏模式",
|
||||
"kibana-react.exitFullScreenButton.exitFullScreenModeButtonLabel": "退出全屏",
|
||||
"kibana-react.exitFullScreenButton.fullScreenModeDescription": "在全屏模式下,按 ESC 键可退出。",
|
||||
"kibana-react.tableListView.listing.deleteButtonMessage": "删除 {itemCount} 个{entityName}",
|
||||
"kibana-react.tableListView.listing.deleteConfirmModalDescription": "您无法恢复删除的{entityNamePlural}。",
|
||||
"kibana-react.tableListView.listing.deleteSelectedItemsConfirmModal.cancelButtonLabel": "取消",
|
||||
"kibana-react.tableListView.listing.deleteSelectedItemsConfirmModal.confirmButtonLabel": "删除",
|
||||
"kibana-react.tableListView.listing.deleteSelectedItemsConfirmModal.confirmButtonLabelDeleting": "正在删除",
|
||||
"kibana-react.tableListView.listing.listingLimitExceeded.advancedSettingsLinkText": "高级设置",
|
||||
"kibana-react.tableListView.listing.listingLimitExceededDescription": "您有 {totalItems} 个{entityNamePlural},但您的“{listingLimitText}”设置阻止下表显示 {listingLimitValue} 个以上。您可以在“{advancedSettingsLink}”下更改此设置。",
|
||||
"kibana-react.tableListView.listing.listingLimitExceededTitle": "已超过列表限制",
|
||||
"kibana-react.tableListView.listing.noAvailableItemsMessage": "没有可用的{entityNamePlural}",
|
||||
"kibana-react.tableListView.listing.noMatchedItemsMessage": "没有任何{entityNamePlural}匹配您的搜索。",
|
||||
"kibana-react.tableListView.listing.table.actionTitle": "操作",
|
||||
"kibana-react.tableListView.listing.table.editActionDescription": "编辑",
|
||||
"kibana-react.tableListView.listing.table.editActionName": "编辑",
|
||||
"kibana-react.tableListView.listing.unableToDeleteDangerMessage": "无法删除{entityName}",
|
||||
"inspector.closeButton": "关闭检查器",
|
||||
"inspector.reqTimestampDescription": "记录请求启动的时间",
|
||||
"inspector.reqTimestampKey": "请求时间戳",
|
||||
|
@ -2372,20 +2386,6 @@
|
|||
"kbn.server.tutorials.zookeeperMetrics.nameTitle": "Zookeeper 指标",
|
||||
"kbn.server.tutorials.zookeeperMetrics.shortDescription": "从 Zookeeper 服务器提取内部指标。",
|
||||
"kbn.settings.advancedSettings.voiceAnnouncement.searchResultScreenReaderMessage": "您已搜索 {query}。{sectionLenght, plural, one {# 个部分} other {# 个部分}}中有 {optionLenght, plural, one {# 个选项} other {# 个选项}}",
|
||||
"kbn.table_list_view.listing.deleteButtonMessage": "删除 {itemCount} 个{entityName}",
|
||||
"kbn.table_list_view.listing.deleteConfirmModalDescription": "您无法恢复删除的{entityNamePlural}。",
|
||||
"kbn.table_list_view.listing.deleteSelectedItemsConfirmModal.cancelButtonLabel": "取消",
|
||||
"kbn.table_list_view.listing.deleteSelectedItemsConfirmModal.confirmButtonLabel": "删除",
|
||||
"kbn.table_list_view.listing.deleteSelectedItemsConfirmModal.confirmButtonLabelDeleting": "正在删除",
|
||||
"kbn.table_list_view.listing.listingLimitExceeded.advancedSettingsLinkText": "高级设置",
|
||||
"kbn.table_list_view.listing.listingLimitExceededDescription": "您有 {totalItems} 个{entityNamePlural},但您的“{listingLimitText}”设置阻止下表显示 {listingLimitValue} 个以上。您可以在“{advancedSettingsLink}”下更改此设置。",
|
||||
"kbn.table_list_view.listing.listingLimitExceededTitle": "已超过列表限制",
|
||||
"kbn.table_list_view.listing.noAvailableItemsMessage": "没有可用的{entityNamePlural}",
|
||||
"kbn.table_list_view.listing.noMatchedItemsMessage": "没有任何{entityNamePlural}匹配您的搜索。",
|
||||
"kbn.table_list_view.listing.table.actionTitle": "操作",
|
||||
"kbn.table_list_view.listing.table.editActionDescription": "编辑",
|
||||
"kbn.table_list_view.listing.table.editActionName": "编辑",
|
||||
"kbn.table_list_view.listing.unableToDeleteDangerMessage": "无法删除{entityName}",
|
||||
"kbn.topNavMenu.openInspectorButtonLabel": "检查",
|
||||
"kbn.topNavMenu.refreshButtonLabel": "刷新",
|
||||
"kbn.topNavMenu.saveVisualizationButtonLabel": "保存",
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue