Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 | 14x 14x 14x 14x 14x 14x 14x 14x 14x 8x 8x 105x 14x 14x 14x 9x 9x 9x 9x 9x 9x 45x 9x 9x 9x 9x 9x | /*
* Copyright 2021 Harness Inc. All rights reserved.
* Use of this source code is governed by the PolyForm Shield 1.0.0 license
* that can be found in the licenses directory at the root of this repository, also available at
* https://polyformproject.org/wp-content/uploads/2020/06/PolyForm-Shield-1.0.0.txt.
*/
import React, { useState } from 'react'
import moment from 'moment'
import cx from 'classnames'
import { Position } from '@blueprintjs/core'
import { DateRange, DateRangePicker, IDateRangeShortcut } from '@blueprintjs/datetime'
import { Button, Popover } from '@wings-software/uicore'
import { useStrings } from 'framework/strings'
import css from './TimeRangeSelector.module.scss'
// Todo - Jasmeet - change return values once API is fixed
export const getBucketSizeForTimeRange = (timeRange?: DateRange): number => {
if (timeRange) {
/**/
}
return 1
}
export const startOfDay = (time: moment.Moment): Date => time.utc().startOf('day').toDate()
export interface TimeRangeSelectorProps {
range: DateRange
label: string
}
const dateFormat = 'DD MMMM YYYY'
export const TimeRangeSelector: React.FC<{
timeRange?: DateRange
setTimeRange: (data: TimeRangeSelectorProps) => void
minimal?: boolean
}> = props => {
const { timeRange, setTimeRange, minimal = false } = props
const { getString } = useStrings()
const dateRangeShortcuts = [
{
dateRange: [startOfDay(moment().subtract(7, 'days').add(1, 'day')), startOfDay(moment())],
label: getString('common.last7days'),
includeTime: true
},
{
dateRange: [startOfDay(moment().subtract(1, 'month').add(1, 'day')), startOfDay(moment())],
label: getString('common.duration.month'),
includeTime: true
},
{
dateRange: [startOfDay(moment().subtract(3, 'month').add(1, 'day')), startOfDay(moment())],
label: getString('common.duration.3months'),
includeTime: true
},
{
dateRange: [startOfDay(moment().subtract(6, 'month').add(1, 'day')), startOfDay(moment())],
label: getString('common.duration.6months'),
includeTime: true
},
{
dateRange: [startOfDay(moment().subtract(1, 'year').add(1, 'day')), startOfDay(moment())],
label: getString('common.duration.year'),
includeTime: true
}
] as IDateRangeShortcut[]
const getLabel = (range?: DateRange): string => {
Iif (!range) {
return ''
}
const shortcutLabel = dateRangeShortcuts.filter(
dateRangeShortcut =>
dateRangeShortcut.dateRange[0]?.getTime() === range[0]?.getTime() &&
dateRangeShortcut.dateRange[1]?.getTime() === range[1]?.getTime()
)
Eif (shortcutLabel.length) {
return shortcutLabel[0].label
}
return `${moment(range[0]?.valueOf()).format(dateFormat)} - ${moment(range[1]?.valueOf()).format(dateFormat)}`
}
const [isDateRangePickerOpen, setIsDateRangePickerOpen] = useState<boolean>(false)
const [selectedRange, setSelectedRange] = useState<DateRange>(timeRange || dateRangeShortcuts[3].dateRange)
return (
<Popover
minimal
captureDismiss
className={cx(css.timeRangeSelector, { [css.nonMinimalStyles]: !minimal })}
position={Position.BOTTOM_RIGHT}
isOpen={isDateRangePickerOpen}
>
<Button
rightIcon="caret-down"
height={20}
text={getLabel(selectedRange)}
onClick={() => setIsDateRangePickerOpen(!isDateRangePickerOpen)}
minimal
className={css.timeRangeButton}
font={{ size: 'xsmall' }}
/>
<DateRangePicker
className={css.dateRangePicker}
maxDate={new Date()}
defaultValue={selectedRange}
shortcuts={dateRangeShortcuts}
onChange={range => {
if (range[0] && range[1]) {
const label = getLabel(range)
setSelectedRange(range)
setTimeRange({ range, label })
setIsDateRangePickerOpen(false)
}
}}
allowSingleDayRange
/>
</Popover>
)
}
|