IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-16 18:34:52 -06:00
Code Issues Packages Projects Releases Wiki Activity

TimeZonePicker: added possibility to toggle if internal time zones should be included or not. (#25934)

Browse Source 
* made some small adjustments after feedback.

* made the flag optional.
This commit is contained in:
Marcus Andersson 2020-06-30 13:30:18 +02:00 committed by GitHub
parent a47fac72bf
commit 8e36a15968
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 21 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerFooter.tsx
View File

@ -47,6 +47,7 @@ export const TimePickerFooter: FC<Props> = props => {
<div className={cx(style.container, style.editContainer)}>
<div className={style.timeZoneContainer}>
<TimeZonePicker
includeInternal={true}
onChange={timeZone => {
onToggleChangeTz();

1
packages/grafana-ui/src/components/TimePicker/TimeZonePicker.story.tsx
View File

@ -21,6 +21,7 @@ export const basic = () => {
{(value, updateValue) => {
return (
<TimeZonePicker
includeInternal={true}
value={value.value}
onChange={newValue => {
if (!newValue) {

21
packages/grafana-ui/src/components/TimePicker/TimeZonePicker.tsx
View File

@ -15,16 +15,17 @@ import { TimeZoneGroup } from './TimeZonePicker/TimeZoneGroup';
import { formatUtcOffset } from './TimeZonePicker/TimeZoneOffset';
export interface Props {
onChange: (timeZone: TimeZone | undefined) => void;
value?: TimeZone;
width?: number;
autoFocus?: boolean;
onChange: (timeZone: TimeZone | undefined) => void;
onBlur?: () => void;
includeInternal?: boolean;
}
export const TimeZonePicker: React.FC<Props> = props => {
const { onChange, width, autoFocus = false, onBlur, value } = props;
const groupedTimeZones = useTimeZones();
const { onChange, width, autoFocus = false, onBlur, value, includeInternal = false } = props;
const groupedTimeZones = useTimeZones(includeInternal);
const selected = useSelectedTimeZone(groupedTimeZones, value);
const filterBySearchIndex = useFilterBySearchIndex();
const TimeZoneOption = width && width <= 45 ? CompactTimeZoneOption : WideTimeZoneOption;
@ -59,10 +60,10 @@ interface SelectableZoneGroup extends SelectableValue<string> {
options: SelectableZone[];
}
const useTimeZones = (): SelectableZoneGroup[] => {
const useTimeZones = (includeInternal: boolean): SelectableZoneGroup[] => {
const now = Date.now();
return getTimeZoneGroups(true).map((group: GroupedTimeZones) => {
return getTimeZoneGroups(includeInternal).map((group: GroupedTimeZones) => {
const options = group.zones.reduce((options: SelectableZone[], zone) => {
const info = getTimeZoneInfo(zone, now);
@ -95,18 +96,20 @@ const useSelectedTimeZone = (
return undefined;
}
const tz = toLower(timeZone);
const group = groups.find(group => {
if (!group.label) {
return isInternal(timeZone);
return isInternal(tz);
}
return timeZone.startsWith(group.label);
return tz.startsWith(toLower(group.label));
});
return group?.options.find(option => {
if (isEmpty(timeZone)) {
if (isEmpty(tz)) {
return option.value === InternalTimeZones.default;
}
return toLower(option.value) === timeZone;
return toLower(option.value) === tz;
});
}, [groups, timeZone]);
};

2
public/app/core/components/SharedPreferences/SharedPreferences.tsx
View File

@ -157,7 +157,7 @@ export class SharedPreferences extends PureComponent<Props, State> {
</Field>
<Field label="Timezone" aria-label={selectors.components.TimeZonePicker.container}>
<TimeZonePicker value={timezone} onChange={this.onTimeZoneChanged} />
<TimeZonePicker includeInternal={true} value={timezone} onChange={this.onTimeZoneChanged} />
</Field>
<div className="gf-form-button-row">
<Button variant="primary">Save</Button>

7
public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx
View File

@ -102,7 +102,12 @@ export class TimePickerSettings extends PureComponent<Props, State> {
<div className="gf-form-group">
<div className="gf-form" aria-label={selectors.components.TimeZonePicker.container}>
<label className="gf-form-label width-7">Timezone</label>
<TimeZonePicker value={dashboard.timezone} onChange={this.onTimeZoneChange} width={40} />
<TimeZonePicker
includeInternal={true}
value={dashboard.timezone}
onChange={this.onTimeZoneChange}
width={40}
/>
</div>
<div className="gf-form">