The open and composable observability and data visualization platform. Visualize metrics, logs, and traces from multiple sources like Prometheus, Loki, Elasticsearch, InfluxDB, Postgres and many more.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
grafana/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/mapper.ts

17 lines
551 B

import { TimeOption, TimeRange, TimeZone, rangeUtil, dateTimeFormat } from '@grafana/data';
Dashboard: new updated time picker (#20931) * Dashboard: started to implement new time picker. * TimePicker: working in full screen (except calendar). * TimePicker: first draft on narrow screen variant. * TimePicker: small adjustments to the narrow design. * TimePicker: enabled range selection and started to style calendar. * TimePicker: applied some more styling. * Calendar: added so the calendar range selection is styled properly. * Calendar: added styling for timepicker calendar in narrow screen. * TimePicker: made it possible to select range from calendar. * TimePicker: made the calendar have previous selected value. * TimePicker: moved calendar to be able to update form state. * TimePicker: calendar is now displayed onFocus or onClick. * TimePicker: calendar will be closed if click outside input. * Calendar: fixed the styling of the calendar in narrow screen. * Calendar: made it work properly with narrow screen. * TimePicker: connected recent to absolute time range. * TimePicker: changed the label on recent ranges. * TimePicker: cleaned up the range list and options. * TimePicker: some more cleaning up. * TimePicker: cleaned up the calendar a bit. * TimePicker: some more refactorings. * TimePicker: refactorings. * TimePicker: styled modal properly. * TimePicker: empty recent list. * TimePicker: width when calendar in full screen. * TimePicker: will validate input value. * TimePicker: removed unused code. * TimePicker: positioning with emotion instead of sass. * Calendar: Made sure we send the dates in the correct order to the calendar. * TimePicker: fixed theme. * TimePicker: fixed positioning of the content. * TimePicker: positioning of narrow. * TimePicker: added some simple tets. * TimePicker: fixed issue with invalid and added error message. * TimePicker: added history. * TimePicker: cleaned up snapshot data. * TimePicker: fixed so we keep the quick values in the input. * TimePicker: fixed the missing styling on UTC. * TimePicker: added missing caret icon. * TimePicker: fixed formatting on recent time ranges. * TimePicker: added missing -. * TimePicker: refactorings after feedback. * TimePicker: renamed reserved prop name. * TimePicker: added missing onChange call. * TimePicker: removed alternative return type. * TimePicker: fixed the sorting order on the recent list. * TimePicker: added useCallback for the onEvent functions. * TimePicker: moving away from default export. * TimePicker: used the isMathString instead of private function. * TimePicker: minor refactoring simplify the code. * TimePicker: Added empty container that will expand when less then 4 recent searches. * TimePicker: changed the top to be absolute relative to the container. * TimePicker: updated snapshots for failing tests. * Fixed shadow * Move it down a bit * added some more tests. * Fixed so we change the anchor point of the time picker in really small screens. * removed memo. * fixed snapshot. * Make sure that we always use the correct timeZone when formatting output. * Fixed form background. * Some minor fixes after demo. * Making sure that empty info box is centered. * updated snapshots for timepicker after css changes. * fixed so we don't overflow when input validation error. * adjusted final things on the time picker. Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
6 years ago
export const mapOptionToTimeRange = (option: TimeOption, timeZone?: TimeZone): TimeRange => {
return rangeUtil.convertRawToRange({ from: option.from, to: option.to }, timeZone);
Dashboard: new updated time picker (#20931) * Dashboard: started to implement new time picker. * TimePicker: working in full screen (except calendar). * TimePicker: first draft on narrow screen variant. * TimePicker: small adjustments to the narrow design. * TimePicker: enabled range selection and started to style calendar. * TimePicker: applied some more styling. * Calendar: added so the calendar range selection is styled properly. * Calendar: added styling for timepicker calendar in narrow screen. * TimePicker: made it possible to select range from calendar. * TimePicker: made the calendar have previous selected value. * TimePicker: moved calendar to be able to update form state. * TimePicker: calendar is now displayed onFocus or onClick. * TimePicker: calendar will be closed if click outside input. * Calendar: fixed the styling of the calendar in narrow screen. * Calendar: made it work properly with narrow screen. * TimePicker: connected recent to absolute time range. * TimePicker: changed the label on recent ranges. * TimePicker: cleaned up the range list and options. * TimePicker: some more cleaning up. * TimePicker: cleaned up the calendar a bit. * TimePicker: some more refactorings. * TimePicker: refactorings. * TimePicker: styled modal properly. * TimePicker: empty recent list. * TimePicker: width when calendar in full screen. * TimePicker: will validate input value. * TimePicker: removed unused code. * TimePicker: positioning with emotion instead of sass. * Calendar: Made sure we send the dates in the correct order to the calendar. * TimePicker: fixed theme. * TimePicker: fixed positioning of the content. * TimePicker: positioning of narrow. * TimePicker: added some simple tets. * TimePicker: fixed issue with invalid and added error message. * TimePicker: added history. * TimePicker: cleaned up snapshot data. * TimePicker: fixed so we keep the quick values in the input. * TimePicker: fixed the missing styling on UTC. * TimePicker: added missing caret icon. * TimePicker: fixed formatting on recent time ranges. * TimePicker: added missing -. * TimePicker: refactorings after feedback. * TimePicker: renamed reserved prop name. * TimePicker: added missing onChange call. * TimePicker: removed alternative return type. * TimePicker: fixed the sorting order on the recent list. * TimePicker: added useCallback for the onEvent functions. * TimePicker: moving away from default export. * TimePicker: used the isMathString instead of private function. * TimePicker: minor refactoring simplify the code. * TimePicker: Added empty container that will expand when less then 4 recent searches. * TimePicker: changed the top to be absolute relative to the container. * TimePicker: updated snapshots for failing tests. * Fixed shadow * Move it down a bit * added some more tests. * Fixed so we change the anchor point of the time picker in really small screens. * removed memo. * fixed snapshot. * Make sure that we always use the correct timeZone when formatting output. * Fixed form background. * Some minor fixes after demo. * Making sure that empty info box is centered. * updated snapshots for timepicker after css changes. * fixed so we don't overflow when input validation error. * adjusted final things on the time picker. Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
6 years ago
};
export const mapRangeToTimeOption = (range: TimeRange, timeZone?: TimeZone): TimeOption => {
DateTime: adding support to select preferred timezone for presentation of date and time values. (#23586) * added moment timezone package. * added a qnd way of selecting timezone. * added a first draft to display how it can be used. * fixed failing tests. * made moment.local to be in utc when running tests. * added tests to verify that the timeZone support works as expected. * Fixed so we use the formatter in the graph context menu. * changed so we will format d3 according to timeZone. * changed from class base to function based for easier consumption. * fixed so tests got green. * renamed to make it shorter. * fixed formatting in logRow. * removed unused value. * added time formatter to flot. * fixed failing tests. * changed so history will use the formatting with support for timezone. * added todo. * added so we append the correct abbrivation behind time. * added time zone abbrevation in timepicker. * adding timezone in rangeutil tool. * will use timezone when formatting range. * changed so we use new functions to format date so timezone is respected. * wip - dashboard settings. * changed so the time picker settings is in react. * added force update. * wip to get the react graph to work. * fixed formatting and parsing on the timepicker. * updated snap to be correct. * fixed so we format values properly in time picker. * make sure we pass timezone on all the proper places. * fixed so we use correct timeZone in explore. * fixed failing tests. * fixed so we always parse from local to selected timezone. * removed unused variable. * reverted back. * trying to fix issue with directive. * fixed issue. * fixed strict null errors. * fixed so we still can select default. * make sure we reads the time zone from getTimezone
6 years ago
const from = dateTimeFormat(range.from, { timeZone });
const to = dateTimeFormat(range.to, { timeZone });
Dashboard: new updated time picker (#20931) * Dashboard: started to implement new time picker. * TimePicker: working in full screen (except calendar). * TimePicker: first draft on narrow screen variant. * TimePicker: small adjustments to the narrow design. * TimePicker: enabled range selection and started to style calendar. * TimePicker: applied some more styling. * Calendar: added so the calendar range selection is styled properly. * Calendar: added styling for timepicker calendar in narrow screen. * TimePicker: made it possible to select range from calendar. * TimePicker: made the calendar have previous selected value. * TimePicker: moved calendar to be able to update form state. * TimePicker: calendar is now displayed onFocus or onClick. * TimePicker: calendar will be closed if click outside input. * Calendar: fixed the styling of the calendar in narrow screen. * Calendar: made it work properly with narrow screen. * TimePicker: connected recent to absolute time range. * TimePicker: changed the label on recent ranges. * TimePicker: cleaned up the range list and options. * TimePicker: some more cleaning up. * TimePicker: cleaned up the calendar a bit. * TimePicker: some more refactorings. * TimePicker: refactorings. * TimePicker: styled modal properly. * TimePicker: empty recent list. * TimePicker: width when calendar in full screen. * TimePicker: will validate input value. * TimePicker: removed unused code. * TimePicker: positioning with emotion instead of sass. * Calendar: Made sure we send the dates in the correct order to the calendar. * TimePicker: fixed theme. * TimePicker: fixed positioning of the content. * TimePicker: positioning of narrow. * TimePicker: added some simple tets. * TimePicker: fixed issue with invalid and added error message. * TimePicker: added history. * TimePicker: cleaned up snapshot data. * TimePicker: fixed so we keep the quick values in the input. * TimePicker: fixed the missing styling on UTC. * TimePicker: added missing caret icon. * TimePicker: fixed formatting on recent time ranges. * TimePicker: added missing -. * TimePicker: refactorings after feedback. * TimePicker: renamed reserved prop name. * TimePicker: added missing onChange call. * TimePicker: removed alternative return type. * TimePicker: fixed the sorting order on the recent list. * TimePicker: added useCallback for the onEvent functions. * TimePicker: moving away from default export. * TimePicker: used the isMathString instead of private function. * TimePicker: minor refactoring simplify the code. * TimePicker: Added empty container that will expand when less then 4 recent searches. * TimePicker: changed the top to be absolute relative to the container. * TimePicker: updated snapshots for failing tests. * Fixed shadow * Move it down a bit * added some more tests. * Fixed so we change the anchor point of the time picker in really small screens. * removed memo. * fixed snapshot. * Make sure that we always use the correct timeZone when formatting output. * Fixed form background. * Some minor fixes after demo. * Making sure that empty info box is centered. * updated snapshots for timepicker after css changes. * fixed so we don't overflow when input validation error. * adjusted final things on the time picker. Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
6 years ago
return {
from,
to,
DateTime: adding support to select preferred timezone for presentation of date and time values. (#23586) * added moment timezone package. * added a qnd way of selecting timezone. * added a first draft to display how it can be used. * fixed failing tests. * made moment.local to be in utc when running tests. * added tests to verify that the timeZone support works as expected. * Fixed so we use the formatter in the graph context menu. * changed so we will format d3 according to timeZone. * changed from class base to function based for easier consumption. * fixed so tests got green. * renamed to make it shorter. * fixed formatting in logRow. * removed unused value. * added time formatter to flot. * fixed failing tests. * changed so history will use the formatting with support for timezone. * added todo. * added so we append the correct abbrivation behind time. * added time zone abbrevation in timepicker. * adding timezone in rangeutil tool. * will use timezone when formatting range. * changed so we use new functions to format date so timezone is respected. * wip - dashboard settings. * changed so the time picker settings is in react. * added force update. * wip to get the react graph to work. * fixed formatting and parsing on the timepicker. * updated snap to be correct. * fixed so we format values properly in time picker. * make sure we pass timezone on all the proper places. * fixed so we use correct timeZone in explore. * fixed failing tests. * fixed so we always parse from local to selected timezone. * removed unused variable. * reverted back. * trying to fix issue with directive. * fixed issue. * fixed strict null errors. * fixed so we still can select default. * make sure we reads the time zone from getTimezone
6 years ago
display: `${from} to ${to}`,
Dashboard: new updated time picker (#20931) * Dashboard: started to implement new time picker. * TimePicker: working in full screen (except calendar). * TimePicker: first draft on narrow screen variant. * TimePicker: small adjustments to the narrow design. * TimePicker: enabled range selection and started to style calendar. * TimePicker: applied some more styling. * Calendar: added so the calendar range selection is styled properly. * Calendar: added styling for timepicker calendar in narrow screen. * TimePicker: made it possible to select range from calendar. * TimePicker: made the calendar have previous selected value. * TimePicker: moved calendar to be able to update form state. * TimePicker: calendar is now displayed onFocus or onClick. * TimePicker: calendar will be closed if click outside input. * Calendar: fixed the styling of the calendar in narrow screen. * Calendar: made it work properly with narrow screen. * TimePicker: connected recent to absolute time range. * TimePicker: changed the label on recent ranges. * TimePicker: cleaned up the range list and options. * TimePicker: some more cleaning up. * TimePicker: cleaned up the calendar a bit. * TimePicker: some more refactorings. * TimePicker: refactorings. * TimePicker: styled modal properly. * TimePicker: empty recent list. * TimePicker: width when calendar in full screen. * TimePicker: will validate input value. * TimePicker: removed unused code. * TimePicker: positioning with emotion instead of sass. * Calendar: Made sure we send the dates in the correct order to the calendar. * TimePicker: fixed theme. * TimePicker: fixed positioning of the content. * TimePicker: positioning of narrow. * TimePicker: added some simple tets. * TimePicker: fixed issue with invalid and added error message. * TimePicker: added history. * TimePicker: cleaned up snapshot data. * TimePicker: fixed so we keep the quick values in the input. * TimePicker: fixed the missing styling on UTC. * TimePicker: added missing caret icon. * TimePicker: fixed formatting on recent time ranges. * TimePicker: added missing -. * TimePicker: refactorings after feedback. * TimePicker: renamed reserved prop name. * TimePicker: added missing onChange call. * TimePicker: removed alternative return type. * TimePicker: fixed the sorting order on the recent list. * TimePicker: added useCallback for the onEvent functions. * TimePicker: moving away from default export. * TimePicker: used the isMathString instead of private function. * TimePicker: minor refactoring simplify the code. * TimePicker: Added empty container that will expand when less then 4 recent searches. * TimePicker: changed the top to be absolute relative to the container. * TimePicker: updated snapshots for failing tests. * Fixed shadow * Move it down a bit * added some more tests. * Fixed so we change the anchor point of the time picker in really small screens. * removed memo. * fixed snapshot. * Make sure that we always use the correct timeZone when formatting output. * Fixed form background. * Some minor fixes after demo. * Making sure that empty info box is centered. * updated snapshots for timepicker after css changes. * fixed so we don't overflow when input validation error. * adjusted final things on the time picker. Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
6 years ago
};
};