Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use commonlyUsedRanges from Kibana Settings instead of a constant value #352 #49

Closed
wants to merge 4 commits into from
Closed

Use commonlyUsedRanges from Kibana Settings instead of a constant value #352 #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
eccf1e3
Remove unnecessary dependencies and add uiSettings as dependency
iget-esoares May 14, 2021
4cfc9e6
Update time_range component to use `commonlyUsedRanges`from uiSettings
iget-esoares May 14, 2021
f9d3e0f
Remove unused notifications dependency
iget-esoares May 14, 2021
bbf5604
Test if time_range uses `uiSettings` to get `commonlyUsedRanges`
iget-esoares May 14, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions dashboards-reports/public/application.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,16 +31,14 @@ import { AppPluginStartDependencies } from './types';
import { ReportsDashboardsApp } from './components/app';

export const renderApp = (
{ notifications, http, chrome }: CoreStart,
{ navigation }: AppPluginStartDependencies,
{ http, chrome, uiSettings }: CoreStart,
{ appBasePath, element }: AppMountParameters
) => {
ReactDOM.render(
<ReportsDashboardsApp
basename={appBasePath}
notifications={notifications}
http={http}
navigation={navigation}
uiSettings={uiSettings}
chrome={chrome}
/>,
element
Expand Down
8 changes: 3 additions & 5 deletions dashboards-reports/public/components/app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,6 @@ import {
ChromeBreadcrumb,
IUiSettingsClient,
} from '../../../../src/core/public';
import { NavigationPublicPluginStart } from '../../../../src/plugins/navigation/public';

import { CreateReport } from './report_definitions/create/create_report_definition';
import { Main } from './main/main';
Expand All @@ -58,10 +57,9 @@ export interface CoreInterface {

interface ReportsDashboardsAppDeps {
basename: string;
notifications: CoreStart['notifications'];
http: CoreStart['http'];
navigation: NavigationPublicPluginStart;
chrome: CoreStart['chrome'];
uiSettings: IUiSettingsClient
}

const styles: CSS.Properties = {
Expand All @@ -72,10 +70,9 @@ const styles: CSS.Properties = {

export const ReportsDashboardsApp = ({
basename,
notifications,
http,
navigation,
chrome,
uiSettings
}: ReportsDashboardsAppDeps) => {
// Render the application DOM.
return (
Expand Down Expand Up @@ -128,6 +125,7 @@ export const ReportsDashboardsApp = ({
<EditReportDefinition
title="Edit Report Definition"
httpClient={http}
uiSettings={uiSettings}
{...props}
setBreadcrumbs={chrome.setBreadcrumbs}
/>
Expand Down
2 changes: 2 additions & 0 deletions dashboards-reports/public/components/report_definitions/create/create_report_definition.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,7 @@ export function CreateReport(props) {
const [toasts, setToasts] = useState([]);
const [comingFromError, setComingFromError] = useState(false);
const [preErrorData, setPreErrorData] = useState({});
const {uiSettings} = props;

const [
showSettingsReportNameError,
Expand Down Expand Up @@ -322,6 +323,7 @@ export function CreateReport(props) {
<EuiSpacer />
<ReportSettings
edit={false}
uiSettings={uiSettings}
reportDefinitionRequest={createReportDefinitionRequest}
httpClientProps={props['httpClient']}
timeRange={timeRange}
Expand Down
4 changes: 3 additions & 1 deletion dashboards-reports/public/components/report_definitions/edit/edit_report_definition.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ export function EditReportDefinition(props) {
const [toasts, setToasts] = useState([]);
const [comingFromError, setComingFromError] = useState(false);
const [preErrorData, setPreErrorData] = useState({});
const { uiSettings } = props

const [
showSettingsReportNameError,
Expand All @@ -74,7 +75,7 @@ export function EditReportDefinition(props) {
] = useState(false);
const [showCronError, setShowCronError] = useState(false);
const [
showEmailRecipientsError,
showEmailRecipientsError,
setShowEmailRecipientsError
] = useState(false);
const [
Expand Down Expand Up @@ -309,6 +310,7 @@ export function EditReportDefinition(props) {
<EuiSpacer />
<ReportSettings
edit={true}
uiSettings={uiSettings}
editDefinitionId={reportDefinitionId}
reportDefinitionRequest={editReportDefinitionRequest}
httpClientProps={props['httpClient']}
Expand Down
58 changes: 56 additions & 2 deletions ...s/public/components/report_definitions/report_settings/__tests__/report_settings.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import { ReportSettings } from '../report_settings';
import 'babel-polyfill';
import 'regenerator-runtime';
import httpClientMock from '../../../../../test/httpMockClient';
import uiSettingsMock from '../../../../../test/uiSettingsMock';
import { configure, mount, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import { act } from 'react-dom/test-utils';
Expand Down Expand Up @@ -114,6 +115,7 @@ describe('<ReportSettings /> panel', () => {
const { container } = render(
<ReportSettings
edit={false}
uiSettings={uiSettingsMock}
reportDefinitionRequest={emptyRequest}
httpClientProps={httpClientMock}
timeRange={timeRange}
Expand Down Expand Up @@ -158,6 +160,7 @@ describe('<ReportSettings /> panel', () => {
const { container } = render(
<ReportSettings
edit={true}
uiSettings={uiSettingsMock}
reportDefinitionRequest={emptyRequest}
httpClientProps={httpClientMock}
timeRange={timeRange}
Expand Down Expand Up @@ -203,6 +206,7 @@ describe('<ReportSettings /> panel', () => {
const { container } = render(
<ReportSettings
edit={true}
uiSettings={uiSettingsMock}
reportDefinitionRequest={emptyRequest}
httpClientProps={httpClientMock}
timeRange={timeRange}
Expand Down Expand Up @@ -251,6 +255,7 @@ describe('<ReportSettings /> panel', () => {
const { container } = render(
<ReportSettings
edit={true}
uiSettings={uiSettingsMock}
reportDefinitionRequest={emptyRequest}
httpClientProps={httpClientMock}
timeRange={timeRange}
Expand Down Expand Up @@ -299,6 +304,7 @@ describe('<ReportSettings /> panel', () => {
const { container } = render(
<ReportSettings
edit={true}
uiSettings={uiSettingsMock}
reportDefinitionRequest={emptyRequest}
httpClientProps={httpClientMock}
timeRange={timeRange}
Expand Down Expand Up @@ -347,6 +353,7 @@ describe('<ReportSettings /> panel', () => {
const { container } = render(
<ReportSettings
edit={true}
uiSettings={uiSettingsMock}
reportDefinitionRequest={emptyRequest}
httpClientProps={httpClientMock}
timeRange={timeRange}
Expand All @@ -358,7 +365,6 @@ describe('<ReportSettings /> panel', () => {
expect(container.firstChild).toMatchSnapshot();
await act(() => promise);
});


test('dashboard create from in-context', async () => {
window = Object.create(window);
Expand Down Expand Up @@ -403,6 +409,7 @@ describe('<ReportSettings /> panel', () => {
const { container } = render(
<ReportSettings
edit={false}
uiSettings={uiSettingsMock}
reportDefinitionRequest={emptyRequest}
httpClientProps={httpClientMock}
timeRange={timeRange}
Expand Down Expand Up @@ -461,6 +468,7 @@ describe('<ReportSettings /> panel', () => {
const { container } = render(
<ReportSettings
edit={false}
uiSettings={uiSettingsMock}
reportDefinitionRequest={emptyRequest}
httpClientProps={httpClientMock}
timeRange={timeRange}
Expand Down Expand Up @@ -521,6 +529,7 @@ describe('<ReportSettings /> panel', () => {
const { container } = render(
<ReportSettings
edit={false}
uiSettings={uiSettingsMock}
reportDefinitionRequest={emptyRequest}
httpClientProps={httpClientMock}
timeRange={timeRange}
Expand Down Expand Up @@ -569,6 +578,7 @@ describe('<ReportSettings /> panel', () => {
const component = shallow(
<ReportSettings
edit={false}
uiSettings={uiSettingsMock}
reportDefinitionRequest={emptyRequest}
httpClientProps={httpClientMock}
timeRange={timeRange}
Expand Down Expand Up @@ -617,6 +627,7 @@ describe('<ReportSettings /> panel', () => {
const component = mount(
<ReportSettings
edit={false}
uiSettings={uiSettingsMock}
reportDefinitionRequest={emptyRequest}
httpClientProps={httpClientMock}
timeRange={timeRange}
Expand All @@ -635,7 +646,7 @@ describe('<ReportSettings /> panel', () => {

act(() => {
comboBox.props().onChange([{ value: 'test', label: 'test' }]);
});
});
component.update();

await act(() => promise);
Expand Down Expand Up @@ -674,6 +685,7 @@ describe('<ReportSettings /> panel', () => {
const component = mount(
<ReportSettings
edit={false}
uiSettings={uiSettingsMock}
reportDefinitionRequest={emptyRequest}
httpClientProps={httpClientMock}
timeRange={timeRange}
Expand Down Expand Up @@ -703,6 +715,7 @@ describe('<ReportSettings /> panel', () => {
const { container } = render(
<ReportSettings
edit={false}
uiSettings={uiSettingsMock}
reportDefinitionRequest={emptyRequest}
httpClientProps={httpClientMock}
timeRange={timeRange}
Expand All @@ -714,4 +727,45 @@ describe('<ReportSettings /> panel', () => {
expect(container.firstChild).toMatchSnapshot();
await act(() => promise);
});

test('load commonlyUsedRanges from uiSettings service', async () => {
const promise = Promise.resolve();
uiSettingsMock.get = jest.fn((key) => [
{
from: 'now/d',
to: 'now/d',
display: 'Foo'
}
]);

const component = mount(
<ReportSettings
edit={false}
uiSettings={uiSettingsMock}
reportDefinitionRequest={emptyRequest}
httpClientProps={httpClientMock}
timeRange={timeRange}
showSettingsReportNameError={true}
showTimeRangeError={true}
/>
);
await act(() => promise);

const superDatePicker = component.find('EuiSuperDatePicker').at(0);

expect(superDatePicker.prop('commonlyUsedRanges')).toEqual(
[
{
start: 'now/d',
end: 'now/d',
label: 'Foo'
}
]
);

expect(uiSettingsMock.get.mock.calls.length).toBeGreaterThan(0);
expect(uiSettingsMock.get.mock.calls[0][0]).toBe('timepicker:quickRanges');

await act(() => promise);
});
});
3 changes: 3 additions & 0 deletions dashboards-reports/public/components/report_definitions/report_settings/report_settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ type ReportSettingProps = {
showSettingsReportSourceError: boolean;
settingsReportSourceErrorMessage: string;
showTimeRangeError: boolean;
uiSettings: any;
};

export function ReportSettings(props: ReportSettingProps) {
Expand All @@ -95,6 +96,7 @@ export function ReportSettings(props: ReportSettingProps) {
showSettingsReportSourceError,
settingsReportSourceErrorMessage,
showTimeRangeError,
uiSettings,
} = props;

const [reportName, setReportName] = useState('');
Expand Down Expand Up @@ -738,6 +740,7 @@ export function ReportSettings(props: ReportSettingProps) {
{displaySavedSearchSelect}
<TimeRangeSelect
timeRange={timeRange}
uiSettings={uiSettings}
reportDefinitionRequest={reportDefinitionRequest}
edit={edit}
id={editDefinitionId}
Expand Down
23 changes: 0 additions & 23 deletions ...eports/public/components/report_definitions/report_settings/report_settings_constants.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,26 +76,3 @@ export const REPORT_SOURCE_TYPES = {
visualization: 'Visualization',
savedSearch: 'Saved search',
};

export const commonTimeRanges = [
{
start: 'now/d',
end: 'now',
label: 'Today so far'
},
{
start: 'now/w',
end: 'now',
label: 'Week to date'
},
{
start: 'now/M',
end: 'now',
label: 'Month to date'
},
{
start: 'now/y',
end: 'now',
label: 'Year to date'
}
]
13 changes: 11 additions & 2 deletions dashboards-reports/public/components/report_definitions/report_settings/time_range.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@ import {
EuiGlobalToastList,
EuiSuperDatePicker,
} from '@elastic/eui';
import { commonTimeRanges } from './report_settings_constants';

export function TimeRangeSelect(props) {
const {
Expand All @@ -43,6 +42,7 @@ export function TimeRangeSelect(props) {
id,
httpClientProps,
showTimeRangeError,
uiSettings
} = props;

const [recentlyUsedRanges, setRecentlyUsedRanges] = useState([]);
Expand Down Expand Up @@ -203,6 +203,15 @@ export function TimeRangeSelect(props) {
setIsLoading(false);
};

const commonlyUsedRanges = uiSettings!
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@iget-master thanks for the PR. We recently added support for dateFormat in uiSettings. There is a module (not a prop since some code will run in discover) to expose the ui settings client https://github.com/opensearch-project/dashboards-reports/blob/93d885c641c8c7fc8beeb081bee6ffd30b44f73b/dashboards-reports/public/components/utils/settings_service.ts#L16-L23

I believe the only change needed is here, and uiSettings can be called this way
https://github.com/opensearch-project/dashboards-reports/blob/93d885c641c8c7fc8beeb081bee6ffd30b44f73b/dashboards-reports/public/components/main/main_utils.tsx#L199

Could you update the PR please? thanks

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@iget-master any thoughts?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that's ok. I'm a little busy next days, but asap i can update the pr

.get('timepicker:quickRanges')
.map(({ from, to, display }: { from: string; to: string; display: string }) => {
return {
start: from,
end: to,
label: display,
};
});

return (
<div>
Expand All @@ -220,7 +229,7 @@ export function TimeRangeSelect(props) {
end={end}
onTimeChange={onTimeChange}
showUpdateButton={false}
commonlyUsedRanges={commonTimeRanges}
commonlyUsedRanges={commonlyUsedRanges}
/>
</EuiFormRow>
</div>
Expand Down
4 changes: 3 additions & 1 deletion dashboards-reports/public/plugin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,9 @@ export class ReportsDashboardsPlugin
implements
Plugin<
ReportsDashboardsPluginSetup,
ReportsDashboardsPluginStart
ReportsDashboardsPluginStart,
AppPluginStartDependencies,
any
> {
public setup(core: CoreSetup): ReportsDashboardsPluginSetup {
// Register an application into the side navigation menu
Expand Down
4 changes: 2 additions & 2 deletions dashboards-reports/public/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,13 @@
* permissions and limitations under the License.
*/

import { NavigationPublicPluginStart } from '../../../src/plugins/navigation/public';
import { DataPublicPluginStart } from '../../../src/plugins/data/public';

export interface ReportsDashboardsPluginSetup {}

// eslint-disable-next-line @typescript-eslint/no-empty-interface
export interface ReportsDashboardsPluginStart {}

export interface AppPluginStartDependencies {
navigation: NavigationPublicPluginStart;
data: DataPublicPluginStart;
}
Loading