@grafana/data#isDateTime TypeScript Examples
The following examples show how to use
@grafana/data#isDateTime.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: TimePickerContent.tsx From grafana-chinese with Apache License 2.0 | 6 votes |
NarrowScreenForm: React.FC<FormProps> = props => {
if (!props.visible) {
return null;
}
const theme = useTheme();
const styles = getNarrowScreenStyles(theme);
const isAbsolute = isDateTime(props.value.raw.from) || isDateTime(props.value.raw.to);
const [collapsed, setCollapsed] = useState(isAbsolute);
return (
<>
<div className={styles.header} onClick={() => setCollapsed(!collapsed)}>
<TimePickerTitle>绝对时间范围</TimePickerTitle>
{collapsed ? <i className="fa fa-caret-up" /> : <i className="fa fa-caret-down" />}
</div>
{collapsed && (
<div className={styles.body}>
<div className={styles.form}>
<TimeRangeForm
value={props.value}
onApply={props.onChange}
timeZone={props.timeZone}
isFullscreen={false}
/>
</div>
<TimeRangeList
title="Recently used absolute ranges"
options={props.historyOptions || []}
onSelect={props.onChange}
value={props.value}
placeholderEmpty={null}
timeZone={props.timeZone}
/>
</div>
)}
</>
);
}
Example #2
Source File: mapper.ts From grafana-chinese with Apache License 2.0 | 6 votes |
stringToDateTime = (value: string | DateTime, roundUp?: boolean, timeZone?: TimeZone): DateTime => {
if (isDateTime(value)) {
if (timeZone === 'utc') {
return value.utc();
}
return value;
}
if (value.indexOf('now') !== -1) {
if (!dateMath.isValid(value)) {
return dateTime();
}
const parsed = dateMath.parse(value, roundUp, timeZone);
return parsed || dateTime();
}
return dateTimeForTimeZone(timeZone, value, TIME_FORMAT);
}
Example #3
Source File: mapper.ts From grafana-chinese with Apache License 2.0 | 6 votes |
dateTimeToString = (value: DateTime, timeZone?: TimeZone): string => {
if (!isDateTime(value)) {
return value;
}
const isUtc = timeZone === 'utc';
if (isUtc) {
return value.utc().format(TIME_FORMAT);
}
return value.format(TIME_FORMAT);
}
Example #4
Source File: time.ts From grafana-chinese with Apache License 2.0 | 6 votes |
stringToDateTimeType = (value: string | DateTime, roundUp?: boolean, timeZone?: TimeZone): DateTime => {
if (isDateTime(value)) {
return value;
}
if (value.indexOf('now') !== -1) {
if (!dateMath.isValid(value)) {
return dateTime();
}
const parsed = dateMath.parse(value, roundUp, timeZone);
return parsed || dateTime();
}
return dateTimeForTimeZone(timeZone, value, TIME_FORMAT);
}
Example #5
Source File: TimePickerWithHistory.tsx From grafana-chinese with Apache License 2.0 | 6 votes |
function convertIfJson(history: TimeRange[]): TimeRange[] {
return history.map(time => {
if (isDateTime(time.from)) {
return time;
}
return {
from: dateTime(time.from),
to: dateTime(time.to),
raw: time.raw,
};
});
}
Example #6
Source File: ApiKeysPage.tsx From grafana-chinese with Apache License 2.0 | 6 votes |
formatDate(date: any, format?: string) {
if (!date) {
return 'No expiration date';
}
date = isDateTime(date) ? date : dateTime(date);
format = format || 'YYYY-MM-DD HH:mm:ss';
const timezone = getTimeZone(store.getState().user);
return timezone === 'utc' ? date.utc().format(format) : date.format(format);
}
Example #7
Source File: TimeSrv.ts From grafana-chinese with Apache License 2.0 | 6 votes |
setTime(time: RawTimeRange, fromRouteUpdate?: boolean) {
_.extend(this.time, time);
// disable refresh if zoom in or zoom out
if (isDateTime(time.to)) {
this.oldRefresh = this.dashboard.refresh || this.oldRefresh;
this.setAutoRefresh(false);
} else if (this.oldRefresh && this.oldRefresh !== this.dashboard.refresh) {
this.setAutoRefresh(this.oldRefresh);
this.oldRefresh = null;
}
// update url
if (fromRouteUpdate !== true) {
const urlRange = this.timeRangeForUrl();
const urlParams = this.$location.search();
urlParams.from = urlRange.from;
urlParams.to = urlRange.to;
this.$location.search(urlParams);
}
this.$timeout(this.refreshDashboard.bind(this), 0);
}
Example #8
Source File: TimeSrv.ts From grafana-chinese with Apache License 2.0 | 6 votes |
timeRangeForUrl() {
const range = this.timeRange().raw;
if (isDateTime(range.from)) {
range.from = range.from.valueOf().toString();
}
if (isDateTime(range.to)) {
range.to = range.to.valueOf().toString();
}
return range;
}
Example #9
Source File: TimeSrv.ts From grafana-chinese with Apache License 2.0 | 6 votes |
timeRange(): TimeRange {
// make copies if they are moment (do not want to return out internal moment, because they are mutable!)
const raw = {
from: isDateTime(this.time.from) ? dateTime(this.time.from) : this.time.from,
to: isDateTime(this.time.to) ? dateTime(this.time.to) : this.time.to,
};
const timezone: TimeZone = this.dashboard ? this.dashboard.getTimezone() : undefined;
return {
from: dateMath.parse(raw.from, false, timezone),
to: dateMath.parse(raw.to, true, timezone),
raw: raw,
};
}
Example #10
Source File: actions.ts From grafana-chinese with Apache License 2.0 | 6 votes |
toRawTimeRange = (range: TimeRange): RawTimeRange => {
let from = range.raw.from;
if (isDateTime(from)) {
from = from.valueOf().toString(10);
}
let to = range.raw.to;
if (isDateTime(to)) {
to = to.valueOf().toString(10);
}
return {
from,
to,
};
}
Example #11
Source File: TimePicker.tsx From grafana-chinese with Apache License 2.0 | 5 votes |
render() {
const {
value,
onMoveBackward,
onMoveForward,
onZoom,
timeZone,
timeSyncButton,
isSynced,
theme,
history,
} = this.props;
const { isOpen } = this.state;
const styles = getStyles(theme);
const hasAbsolute = isDateTime(value.raw.from) || isDateTime(value.raw.to);
const syncedTimePicker = timeSyncButton && isSynced;
const timePickerIconClass = cx('fa fa-clock-o fa-fw', { ['icon-brand-gradient']: syncedTimePicker });
const timePickerButtonClass = cx('btn navbar-button navbar-button--tight', {
[`btn--radius-right-0 ${styles.noRightBorderStyle}`]: !!timeSyncButton,
[`explore-active-button`]: syncedTimePicker,
});
return (
<div className={styles.container}>
<div className={styles.buttons}>
{hasAbsolute && (
<button className="btn navbar-button navbar-button--tight" onClick={onMoveBackward}>
<i className="fa fa-chevron-left" />
</button>
)}
<div>
<Tooltip content={<TimePickerTooltip timeRange={value} />} placement="bottom">
<button aria-label="TimePicker Open Button" className={timePickerButtonClass} onClick={this.onOpen}>
<i className={timePickerIconClass} />
<TimePickerButtonLabel {...this.props} />
<span className={styles.caretIcon}>
{isOpen ? <i className="fa fa-caret-up fa-fw" /> : <i className="fa fa-caret-down fa-fw" />}
</span>
</button>
</Tooltip>
{isOpen && (
<ClickOutsideWrapper onClick={this.onClose}>
<TimePickerContent
timeZone={timeZone}
value={value}
onChange={this.onChange}
otherOptions={otherOptions}
quickOptions={quickOptions}
history={history}
/>
</ClickOutsideWrapper>
)}
</div>
{timeSyncButton}
{hasAbsolute && (
<button className="btn navbar-button navbar-button--tight" onClick={onMoveForward}>
<i className="fa fa-chevron-right" />
</button>
)}
<Tooltip content={ZoomOutTooltip} placement="bottom">
<button className="btn navbar-button navbar-button--zoom" onClick={onZoom}>
<i className="fa fa-search-minus" />
</button>
</Tooltip>
</div>
</div>
);
}
Example #12
Source File: TimeRangeForm.tsx From grafana-chinese with Apache License 2.0 | 5 votes |
function valueAsString(value: DateTime | string): string {
if (isDateTime(value)) {
return value.format(TIME_FORMAT);
}
return value;
}
Example #13
Source File: TimePickerWithHistory.tsx From grafana-chinese with Apache License 2.0 | 5 votes |
function isAbsolute(value: TimeRange): boolean {
return isDateTime(value.raw.from) || isDateTime(value.raw.to);
}
Example #14
Source File: DashboardModel.ts From grafana-chinese with Apache License 2.0 | 5 votes |
formatDate(date: DateTimeInput, format?: string) {
date = isDateTime(date) ? date : dateTime(date);
format = format || 'YYYY-MM-DD HH:mm:ss';
const timezone = this.getTimezone();
return timezone === 'browser' ? dateTime(date).format(format) : toUtc(date).format(format);
}
Example #15
Source File: DashboardModel.ts From grafana-chinese with Apache License 2.0 | 5 votes |
getRelativeTime(date: DateTimeInput) {
date = isDateTime(date) ? date : dateTime(date);
return this.timezone === 'browser' ? dateTime(date).fromNow() : toUtc(date).fromNow();
}
Example #16
Source File: TimeSrv.test.ts From grafana-chinese with Apache License 2.0 | 4 votes |
describe('timeSrv', () => {
const rootScope = {
$on: jest.fn(),
onAppEvent: jest.fn(),
appEvent: jest.fn(),
};
const timer = {
register: jest.fn(),
cancel: jest.fn(),
cancelAll: jest.fn(),
};
let location = {
search: jest.fn(() => ({})),
};
let timeSrv: TimeSrv;
const _dashboard: any = {
time: { from: 'now-6h', to: 'now' },
getTimezone: jest.fn(() => 'browser'),
};
beforeEach(() => {
timeSrv = new TimeSrv(rootScope as any, jest.fn() as any, location as any, timer, new ContextSrvStub() as any);
timeSrv.init(_dashboard);
_dashboard.refresh = false;
});
describe('timeRange', () => {
it('should return unparsed when parse is false', () => {
timeSrv.setTime({ from: 'now', to: 'now-1h' });
const time = timeSrv.timeRange();
expect(time.raw.from).toBe('now');
expect(time.raw.to).toBe('now-1h');
});
it('should return parsed when parse is true', () => {
timeSrv.setTime({ from: 'now', to: 'now-1h' });
const time = timeSrv.timeRange();
expect(isDateTime(time.from)).toBe(true);
expect(isDateTime(time.to)).toBe(true);
});
});
describe('init time from url', () => {
it('should handle relative times', () => {
location = {
search: jest.fn(() => ({
from: 'now-2d',
to: 'now',
})),
};
timeSrv = new TimeSrv(rootScope as any, jest.fn() as any, location as any, timer, new ContextSrvStub() as any);
timeSrv.init(_dashboard);
const time = timeSrv.timeRange();
expect(time.raw.from).toBe('now-2d');
expect(time.raw.to).toBe('now');
});
it('should handle formatted dates', () => {
location = {
search: jest.fn(() => ({
from: '20140410T052010',
to: '20140520T031022',
})),
};
timeSrv = new TimeSrv(rootScope as any, jest.fn() as any, location as any, timer, new ContextSrvStub() as any);
timeSrv.init(_dashboard);
const time = timeSrv.timeRange();
expect(time.from.valueOf()).toEqual(new Date('2014-04-10T05:20:10Z').getTime());
expect(time.to.valueOf()).toEqual(new Date('2014-05-20T03:10:22Z').getTime());
});
it('should ignore refresh if time absolute', () => {
location = {
search: jest.fn(() => ({
from: '20140410T052010',
to: '20140520T031022',
})),
};
timeSrv = new TimeSrv(rootScope as any, jest.fn() as any, location as any, timer, new ContextSrvStub() as any);
// dashboard saved with refresh on
_dashboard.refresh = true;
timeSrv.init(_dashboard);
expect(timeSrv.refresh).toBe(false);
});
it('should handle formatted dates without time', () => {
location = {
search: jest.fn(() => ({
from: '20140410',
to: '20140520',
})),
};
timeSrv = new TimeSrv(rootScope as any, jest.fn() as any, location as any, timer, new ContextSrvStub() as any);
timeSrv.init(_dashboard);
const time = timeSrv.timeRange();
expect(time.from.valueOf()).toEqual(new Date('2014-04-10T00:00:00Z').getTime());
expect(time.to.valueOf()).toEqual(new Date('2014-05-20T00:00:00Z').getTime());
});
it('should handle epochs', () => {
location = {
search: jest.fn(() => ({
from: '1410337646373',
to: '1410337665699',
})),
};
timeSrv = new TimeSrv(rootScope as any, jest.fn() as any, location as any, timer, new ContextSrvStub() as any);
timeSrv.init(_dashboard);
const time = timeSrv.timeRange();
expect(time.from.valueOf()).toEqual(1410337646373);
expect(time.to.valueOf()).toEqual(1410337665699);
});
it('should handle epochs that look like formatted date without time', () => {
location = {
search: jest.fn(() => ({
from: '20149999',
to: '20159999',
})),
};
timeSrv = new TimeSrv(rootScope as any, jest.fn() as any, location as any, timer, new ContextSrvStub() as any);
timeSrv.init(_dashboard);
const time = timeSrv.timeRange();
expect(time.from.valueOf()).toEqual(20149999);
expect(time.to.valueOf()).toEqual(20159999);
});
it('should handle epochs that look like formatted date', () => {
location = {
search: jest.fn(() => ({
from: '201499991234567',
to: '201599991234567',
})),
};
timeSrv = new TimeSrv(rootScope as any, jest.fn() as any, location as any, timer, new ContextSrvStub() as any);
timeSrv.init(_dashboard);
const time = timeSrv.timeRange();
expect(time.from.valueOf()).toEqual(201499991234567);
expect(time.to.valueOf()).toEqual(201599991234567);
});
it('should handle bad dates', () => {
location = {
search: jest.fn(() => ({
from: '20151126T00010%3C%2Fp%3E%3Cspan%20class',
to: 'now',
})),
};
timeSrv = new TimeSrv(rootScope as any, jest.fn() as any, location as any, timer, new ContextSrvStub() as any);
_dashboard.time.from = 'now-6h';
timeSrv.init(_dashboard);
expect(timeSrv.time.from).toEqual('now-6h');
expect(timeSrv.time.to).toEqual('now');
});
describe('data point windowing', () => {
it('handles time window specfied as interval string', () => {
location = {
search: jest.fn(() => ({
time: '1410337645000',
'time.window': '10s',
})),
};
timeSrv = new TimeSrv(rootScope as any, jest.fn() as any, location as any, timer, new ContextSrvStub() as any);
timeSrv.init(_dashboard);
const time = timeSrv.timeRange();
expect(time.from.valueOf()).toEqual(1410337640000);
expect(time.to.valueOf()).toEqual(1410337650000);
});
it('handles time window specified in ms', () => {
location = {
search: jest.fn(() => ({
time: '1410337645000',
'time.window': '10000',
})),
};
timeSrv = new TimeSrv(rootScope as any, jest.fn() as any, location as any, timer, new ContextSrvStub() as any);
timeSrv.init(_dashboard);
const time = timeSrv.timeRange();
expect(time.from.valueOf()).toEqual(1410337640000);
expect(time.to.valueOf()).toEqual(1410337650000);
});
});
});
describe('setTime', () => {
it('should return disable refresh if refresh is disabled for any range', () => {
_dashboard.refresh = false;
timeSrv.setTime({ from: '2011-01-01', to: '2015-01-01' });
expect(_dashboard.refresh).toBe(false);
});
it('should restore refresh for absolute time range', () => {
_dashboard.refresh = '30s';
timeSrv.setTime({ from: '2011-01-01', to: '2015-01-01' });
expect(_dashboard.refresh).toBe('30s');
});
it('should restore refresh after relative time range is set', () => {
_dashboard.refresh = '10s';
timeSrv.setTime({
from: dateTime([2011, 1, 1]),
to: dateTime([2015, 1, 1]),
});
expect(_dashboard.refresh).toBe(false);
timeSrv.setTime({ from: '2011-01-01', to: 'now' });
expect(_dashboard.refresh).toBe('10s');
});
it('should keep refresh after relative time range is changed and now delay exists', () => {
_dashboard.refresh = '10s';
timeSrv.setTime({ from: 'now-1h', to: 'now-10s' });
expect(_dashboard.refresh).toBe('10s');
});
});
});