Skip to content

Inherited datepicker format from settings #164

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

Merged
ps48 merged 1 commit into from
Oct 28, 2021
+82 −51
Merged

Inherited datepicker format from settings #164

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1 change: 1 addition & 0 deletions dashboards-observability/common/utils/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,4 @@
*/

export { getIndexPatternFromRawQuery, insertDateRangeToQuery } from './query_utils';
export { uiSettingsService } from './settings_service';
23 changes: 23 additions & 0 deletions dashboards-observability/common/utils/settings_service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
/*
* SPDX-License-Identifier: Apache-2.0
*
* The OpenSearch Contributors require contributions made to
* this file be licensed under the Apache-2.0 license or a
* compatible open source license.
*
* Modifications Copyright OpenSearch Contributors. See
* GitHub history for details.
*/

import { IUiSettingsClient } from '../../../../src/core/public';

let uiSettings: IUiSettingsClient;

export const uiSettingsService = {
Copy link
Member

@joshuali925 joshuali925 Oct 28, 2021

Choose a reason for hiding this comment

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

I used a global object in reporting because some code will run outside of the plugin in discover. Observability components should be all inside the plugin, is there a better way to share the IUiSettingsClient like http? maybe through redux or context?

Not familiar with observability setup, if there is no existing setup to expose a variable to all child components then this is fine for now.

Copy link
Member Author

@ps48 ps48 Oct 28, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

We can send it through the App page as well, so all the modules have it passed through props. This will mean, we'll need to pass props to all the child pages as well.

Copy link
Member

@joshuali925 joshuali925 Oct 28, 2021

Choose a reason for hiding this comment

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

That sounds more difficult, i thought there's some service that's accessible in the whole observability plugin.. current implementation is fine then

init: (client: IUiSettingsClient) => {
uiSettings = client;
},
get: (key: string, defaultOverride?: any) => {
return uiSettings?.get(key, defaultOverride) || '';
},
};
3 changes: 2 additions & 1 deletion dashboards-observability/public/components/common/search/date_picker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {
import {
IDatePickerProps
} from './search';
import { uiSettingsService } from '../../../../common/utils';

export function DatePicker(props: IDatePickerProps) {

Expand Down Expand Up @@ -66,7 +67,7 @@ export function DatePicker(props: IDatePickerProps) {
start={ startTime }
end={ endTime }
showUpdateButton={ false }
dateFormat="MM/DD/YYYY hh:mm:ss A"
dateFormat={uiSettingsService.get('dateFormat')}
onTimeChange={(e) => {
const start = e.start;
const end = e.start === e.end ? 'now' : e.end;
Expand Down
3 changes: 2 additions & 1 deletion dashboards-observability/public/components/custom_panels/custom_panel_view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ import { UI_DATE_FORMAT } from '../../../common/constants/shared';
import { ChangeEvent } from 'react';
import moment from 'moment';
import { VisaulizationFlyout } from './panel_modules/visualization_flyout';
import { uiSettingsService } from '../../../common/utils';

/*
* "CustomPanelsView" module used to render an Operational Panel
Expand Down Expand Up @@ -537,7 +538,7 @@ export const CustomPanelView = ({
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiSuperDatePicker
dateFormat={UI_DATE_FORMAT}
dateFormat={uiSettingsService.get('dateFormat')}
start={start}
end={end}
onTimeChange={onDatePickerChange}
Expand Down
4 changes: 2 additions & 2 deletions ...blic/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,7 @@ export const VisaulizationFlyout = ({
endDate={endDate}
isInvalid={startDate > endDate}
aria-label="Start date"
dateFormat={UI_DATE_FORMAT}
dateFormat={uiSettingsService.get('dateFormat')}
/>
}
endDateControl={
Expand All @@ -215,7 +215,7 @@ export const VisaulizationFlyout = ({
endDate={endDate}
isInvalid={startDate > endDate}
aria-label="End date"
dateFormat={UI_DATE_FORMAT}
dateFormat={uiSettingsService.get('dateFormat')}
/>
}
/>
Expand Down
3 changes: 2 additions & 1 deletion ...-observability/public/components/notebooks/components/paragraph_components/para_input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ import {
EuiTextArea,
} from '@elastic/eui';
import { Input, Prompt, Source } from '@nteract/presentational-components';
import { uiSettingsService } from '../../../../../common/utils';
import React, { useState } from 'react';
import { ParaType } from '../../../../../common/types/notebooks';

Expand Down Expand Up @@ -169,7 +170,7 @@ export const ParaInput = (props: {
start={props.startTime}
end={props.endTime}
showUpdateButton={false}
dateFormat="MM/DD/YYYY hh:mm:ss A"
dateFormat={uiSettingsService.get('dateFormat')}
onTimeChange={(e) => {
props.setStartTime(e.start);
props.setEndTime(e.end);
Expand Down
12 changes: 6 additions & 6 deletions ...onents/trace_analytics/components/common/__tests__/__snapshots__/search_bar.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ exports[`Search bar components renders date picker 1`] = `
},
]
}
dateFormat="MMM D, YYYY @ HH:mm:ss.SSS"
dateFormat=""
end="now"
isAutoRefreshOnly={false}
isDisabled={false}
Expand Down Expand Up @@ -120,7 +120,7 @@ exports[`Search bar components renders date picker 1`] = `
},
]
}
dateFormat="MMM D, YYYY @ HH:mm:ss.SSS"
dateFormat=""
end="now"
isAutoRefreshOnly={false}
isDisabled={false}
Expand Down Expand Up @@ -181,7 +181,7 @@ exports[`Search bar components renders date picker 1`] = `
},
]
}
dateFormat="MMM D, YYYY @ HH:mm:ss.SSS"
dateFormat=""
end="now"
isAutoRefreshOnly={false}
isDisabled={false}
Expand Down Expand Up @@ -537,7 +537,7 @@ exports[`Search bar components renders search bar 1`] = `
},
]
}
dateFormat="MMM D, YYYY @ HH:mm:ss.SSS"
dateFormat=""
end="now"
isAutoRefreshOnly={false}
isDisabled={false}
Expand Down Expand Up @@ -611,7 +611,7 @@ exports[`Search bar components renders search bar 1`] = `
},
]
}
dateFormat="MMM D, YYYY @ HH:mm:ss.SSS"
dateFormat=""
end="now"
isAutoRefreshOnly={false}
isDisabled={false}
Expand Down Expand Up @@ -672,7 +672,7 @@ exports[`Search bar components renders search bar 1`] = `
},
]
}
dateFormat="MMM D, YYYY @ HH:mm:ss.SSS"
dateFormat=""
end="now"
isAutoRefreshOnly={false}
isDisabled={false}
Expand Down
2 changes: 2 additions & 0 deletions dashboards-observability/public/components/trace_analytics/components/common/search_bar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import {
EuiSpacer,
EuiSuperDatePicker,
} from '@elastic/eui';
import { uiSettingsService } from '../../../../../common/utils';
import _ from 'lodash';
import React, { useState } from 'react';
import { Filters, FiltersProps } from './filters/filters';
Expand All @@ -46,6 +47,7 @@ export const renderDatePicker = (
<EuiSuperDatePicker
start={startTime}
end={endTime}
dateFormat={uiSettingsService.get('dateFormat')}
showUpdateButton={false}
onTimeChange={(e) => {
setStartTime(e.start);
Expand Down
82 changes: 42 additions & 40 deletions dashboards-observability/public/plugin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,48 +21,50 @@ import TimestampUtils from './services/timestamp/timestamp';
import SavedObjects from './services/saved_objects/event_analytics/saved_objects';
import { AppPluginStartDependencies, ObservabilitySetup, ObservabilityStart } from './types';
import { convertLegacyNotebooksUrl } from './components/notebooks/components/helpers/legacy_route_helpers';
import { uiSettingsService } from '../common/utils';

export class ObservabilityPlugin implements Plugin<ObservabilitySetup, ObservabilityStart> {
public setup(core: CoreSetup): ObservabilitySetup {
uiSettingsService.init(core.uiSettings);

public setup(core: CoreSetup): ObservabilitySetup {
// redirect legacy notebooks URL to current URL under observability
if (window.location.pathname.includes('notebooks-dashboards')) {
window.location.assign(convertLegacyNotebooksUrl(window.location));
}

core.application.register({
id: observabilityID,
title: observabilityTitle,
category: {
id: 'opensearch',
label: 'OpenSearch Plugins',
order: 2000,
},
order: observabilityPluginOrder,
async mount(params: AppMountParameters) {
const { Observability } = await import('./components/index');
const [ coreStart, depsStart ] = await core.getStartServices();
const pplService = new PPLService(coreStart.http);
const dslService = new DSLService(coreStart.http);
const savedObjects = new SavedObjects(coreStart.http);
const timestampUtils = new TimestampUtils(dslService);
return Observability(
coreStart,
depsStart as AppPluginStartDependencies,
params,
pplService,
dslService,
savedObjects,
timestampUtils
);
},
});

// Return methods that should be available to other plugins
return {};
}
public start(core: CoreStart): ObservabilityStart {
return {};
// redirect legacy notebooks URL to current URL under observability
if (window.location.pathname.includes('notebooks-dashboards')) {
window.location.assign(convertLegacyNotebooksUrl(window.location));
}
public stop() {}

core.application.register({
id: observabilityID,
title: observabilityTitle,
category: {
id: 'opensearch',
label: 'OpenSearch Plugins',
order: 2000,
},
order: observabilityPluginOrder,
async mount(params: AppMountParameters) {
const { Observability } = await import('./components/index');
const [coreStart, depsStart] = await core.getStartServices();
const pplService = new PPLService(coreStart.http);
const dslService = new DSLService(coreStart.http);
const savedObjects = new SavedObjects(coreStart.http);
const timestampUtils = new TimestampUtils(dslService);
return Observability(
coreStart,
depsStart as AppPluginStartDependencies,
params,
pplService,
dslService,
savedObjects,
timestampUtils
);
},
});

// Return methods that should be available to other plugins
return {};
}
public start(core: CoreStart): ObservabilityStart {
return {};
}
public stop() {}
}