dinocollab-core 1.0.0

package/src/lab/filter-bar/ui.units.tsx

@@ -0,0 +1,70 @@
+import React, { FC } from 'react'
+import { Box, Fade, IconButton, IconButtonProps, styled, Tooltip, Typography } from '@mui/material'
+import CloseIcon from '@mui/icons-material/Close'
+import HelpTooltip from '../../components/help-tooltip'
+
+interface ButtonClearProps {
+  visibled?: boolean
+  onClick: IconButtonProps['onClick']
+}
+
+export const ButtonClear: FC<ButtonClearProps> = (props) => (
+  <WrapIcon>
+    <Tooltip title='Remove filter'>
+      <Fade in={props.visibled} unmountOnExit>
+        <IconButton size='small' onClick={props.onClick}>
+          <CloseIcon fontSize='small' />
+        </IconButton>
+      </Fade>
+    </Tooltip>
+  </WrapIcon>
+)
+
+export interface FilterHelpNotesProps {
+  title?: string
+  items?: string[]
+}
+
+export const FilterHelpNotes: FC<FilterHelpNotesProps> = (props) => {
+  if (!props.items || props.items.length < 1) return <></>
+  return (
+    <WrapIcon>
+      <HelpTooltip small title={props.title ?? 'The search includes'}>
+        <WrapList>
+          {props.items.map((item, index) => (
+            <Typography key={index} component='li' variant='body2'>
+              {item}
+            </Typography>
+          ))}
+        </WrapList>
+      </HelpTooltip>
+    </WrapIcon>
+  )
+}
+
+const WrapIcon = styled(Box)({
+  display: 'flex',
+  flex: '0 0 auto',
+  width: '40px',
+  height: '40px',
+  justifyContent: 'center',
+  alignItems: 'center'
+})
+
+const WrapList = styled('ul')({
+  paddingLeft: '1.7rem',
+  marginBottom: 0,
+  li: {
+    position: 'relative',
+    textAlign: 'justify',
+    '&::before': {
+      content: '"►"',
+      display: 'block',
+      position: 'absolute',
+      top: '50%',
+      right: 'calc(100% + 6px)',
+      transform: 'translateY(-50%)',
+      fontSize: '0.9em'
+    }
+  }
+})

package/src/lab/grafana-dashboard/configs.ts

@@ -0,0 +1,43 @@
+import dayjs from 'dayjs'
+import { ITopBarInfo } from './top-bar.types'
+import { GetTopBarInfoQueryParam } from './helper'
+import { DTRHelper, IQuickRangeConfig } from './date-time-range'
+
+export const QuickRangeConfigs: IQuickRangeConfig[] = [
+  { title: 'Last 7 days', ...DTRHelper.dayRange(-7) },
+  { title: 'Last 28 days', ...DTRHelper.dayRange(-28) },
+  { title: 'Last 90 days', ...DTRHelper.dayRange(-90) },
+  { title: 'Last 365 days', ...DTRHelper.dayRange(-365) },
+  { title: DTRHelper.yearString(0), ...DTRHelper.yearRange(0), lineAbove: true },
+  { title: DTRHelper.yearString(-1), ...DTRHelper.yearRange(-1) },
+  { title: DTRHelper.monthString(0), ...DTRHelper.monthRange(0), lineAbove: true },
+  { title: DTRHelper.monthString(1), ...DTRHelper.monthRange(-1) },
+  { title: DTRHelper.monthString(2), ...DTRHelper.monthRange(-2) }
+]
+
+const GetDefaultSelected = (): IQuickRangeConfig | undefined => {
+  try {
+    const initial = GetTopBarInfoQueryParam()
+
+    const index = QuickRangeConfigs.findIndex((x) => x.from === initial.from && x.to === initial.to)
+    if (index > -1) return QuickRangeConfigs[index]
+
+    const from = initial.from ? dayjs(new Date(parseInt(initial.from))) : undefined
+    const to = initial.to ? dayjs(new Date(parseInt(initial.to))) : undefined
+
+    if (!from || !to) return QuickRangeConfigs[1]
+
+    return {
+      title: DTRHelper.getTitle(initial.from, initial.to),
+      from: from?.toDate().getTime().toString(),
+      to: to?.toDate().getTime().toString()
+    }
+  } catch (error) {
+    console.log(error)
+    return QuickRangeConfigs[1]
+  }
+}
+
+export const DefaultTopBarInfo: ITopBarInfo = {
+  QuickRange: GetDefaultSelected()
+}

package/src/lab/grafana-dashboard/date-time-range/absolute-time-rage.tsx

@@ -0,0 +1,137 @@
+import React, { Component } from 'react'
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
+import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers'
+import { alpha, Box, Button, Collapse, Typography } from '@mui/material'
+import dayjs from 'dayjs'
+import { DTRHelper } from './helpers'
+import { IQuickRangeConfig } from './types'
+import CreateFormBase from '../../../form/create.form-base'
+import { FormValidator, getErrorMessage, SingleRuleValidate } from '../../../form'
+
+const FormatString = 'MM/DD/YYYY'
+
+const ParseDayjs = (value?: string) => {
+  return value ? dayjs(value, FormatString) : undefined
+}
+
+const FormBaseInstance = CreateFormBase<IQuickRangeConfig>({
+  validate: new FormValidator({
+    from: {
+      Rules: [
+        { rule: SingleRuleValidate.Required },
+        {
+          rule: SingleRuleValidate.Custom,
+          message: 'DateFrom must precede DateTo',
+          Value: (value, model) => {
+            const from = ParseDayjs(model.from)
+            const to = ParseDayjs(model.to)
+            return !!to?.isBefore(from)
+          }
+        }
+      ]
+    },
+    to: { Rules: [{ rule: SingleRuleValidate.Required }] }
+  })
+})
+
+interface IProps {
+  data?: IQuickRangeConfig
+  onChangeRange?: (value: IQuickRangeConfig) => void
+}
+
+export default class AbsoluteTimeRage extends Component<IProps> {
+  render() {
+    return (
+      <Box sx={{ flex: 1 }}>
+        <FormBaseInstance.Form onSubmit={this.handleApply}>
+          <Typography variant='subtitle1' sx={{ fontWeight: 600, color: alpha('#000000', 0.7) }}>
+            Absolute time range
+          </Typography>
+          {this.dateTimeRangePickerRanges()}
+          {FormBaseInstance.contextMapping((context) => {
+            const eMessage = getErrorMessage(context.messageErrors, 'from')
+            const isDisabled = Object.keys(context.messageErrors).length > 0
+            return (
+              <>
+                <Collapse in={!!eMessage.error} unmountOnExit>
+                  <Box sx={{ pt: '6px' }}>
+                    <Typography variant='caption' sx={{ color: '#d32f2f', fontSize: '0.65rem' }}>
+                      {eMessage.message}
+                    </Typography>
+                  </Box>
+                </Collapse>
+                <Box sx={{ marginTop: '9px' }}>
+                  <Button
+                    disabled={isDisabled}
+                    size='small'
+                    variant='contained'
+                    color='primary'
+                    type='submit'
+                    sx={{ textTransform: 'unset !important' }}
+                  >
+                    Apply time range
+                  </Button>
+                </Box>
+              </>
+            )
+          })}
+        </FormBaseInstance.Form>
+      </Box>
+    )
+  }
+  date1Ref = React.createRef<HTMLInputElement>()
+  date2Ref = React.createRef<HTMLInputElement>()
+  dateTimeRangePickerRanges() {
+    return FormBaseInstance.contextMapping((context) => {
+      const from = DTRHelper.parseDayJS(this.props.data?.from)
+      const to = DTRHelper.parseDayJS(this.props.data?.to)
+      const eMessage = getErrorMessage(context.messageErrors, 'from')
+      return (
+        <LocalizationProvider dateAdapter={AdapterDayjs}>
+          <Typography variant='caption' sx={{ fontWeight: 600, color: alpha('#000000', 0.7), mt: '6px', display: 'block' }}>
+            from:
+          </Typography>
+          <DatePicker
+            name='from'
+            key={this.props.data?.from ? this.props.data.from : 'from'}
+            inputRef={this.date1Ref}
+            defaultValue={from}
+            maxDate={dayjs()}
+            slotProps={{ textField: { size: 'small', placeholder: FormatString, error: eMessage.error } }}
+            onChange={(d) => {
+              if (this.date1Ref.current && d) {
+                this.date1Ref.current.value = d.format(FormatString)
+                context.onBlur('from')
+              }
+            }}
+          />
+          <Typography variant='caption' sx={{ fontWeight: 600, color: alpha('#000000', 0.7), mt: '6px', display: 'block' }}>
+            to:
+          </Typography>
+          <DatePicker
+            name='to'
+            key={this.props.data?.to ? this.props.data.to : 'to'}
+            inputRef={this.date2Ref}
+            defaultValue={to}
+            maxDate={dayjs()}
+            slotProps={{ textField: { size: 'small', placeholder: FormatString, error: eMessage.error } }}
+            onChange={(d) => {
+              if (this.date2Ref.current && d) {
+                this.date2Ref.current.value = d.format(FormatString)
+                context.onBlur('to')
+                context.onBlur('from')
+              }
+            }}
+          />
+        </LocalizationProvider>
+      )
+    })
+  }
+
+  handleApply = async (value: Partial<IQuickRangeConfig>) => {
+    const from = ParseDayjs(value.from)?.startOf('day').toDate().getTime().toString()
+    const to = ParseDayjs(value.to)?.endOf('day').toDate().getTime().toString()
+    const item: IQuickRangeConfig = { from, to, title: DTRHelper.getTitle(from, to) }
+    this.props.onChangeRange && this.props.onChangeRange(item)
+  }
+}

package/src/lab/grafana-dashboard/date-time-range/helpers.ts

@@ -0,0 +1,126 @@
+import dayjs from 'dayjs'
+import { IQuickRangeConfig, IRange } from './types'
+
+type TDateTimeKetType = /** 'minute' | 'hour' | */ 'day' | 'month' | 'year'
+export const MapDateTimeKey = (count: number, type?: TDateTimeKetType) => {
+  if (count == 0) return 'now'
+  const value = count.toString()
+  switch (type) {
+    // case 'minute':
+    //   return `now${value}m`
+    // case 'hour':
+    //   return `now${value}h`
+    case 'day':
+      return `now${value}d`
+    case 'month':
+      return `now${value}M`
+    case 'year':
+      return `now${value}y`
+    default:
+      break
+  }
+}
+
+class DTRHelperBase {
+  formatString = 'MM/DD/YYYY'
+
+  /**
+   * getTitle generates a formatted date range string based on the input dates.
+   * @param from - Start date as a string in milliseconds.
+   * @param to - End date as a string in milliseconds.
+   * @param quickRanges - quickRanges as a ```QuickRangeConfig[]```.
+   * @returns Formatted date range or quick range title or fallback string for invalid/undefined values.
+   */
+  getTitle = (from?: string, to?: string, quickRanges?: IQuickRangeConfig[]) => {
+    const quickRangeItem = quickRanges?.find((x) => x.from === from && x.to === to)
+    if (!!quickRangeItem) {
+      return quickRangeItem.title
+    }
+
+    const fromDate = this.parseDayJS(from)?.format(this.formatString)
+    const toDate = this.parseDayJS(to)?.format(this.formatString)
+    if (fromDate && toDate) {
+      return `${fromDate} - ${toDate}`
+    } else if (!fromDate && toDate) {
+      return `Until ${toDate}`
+    } else if (fromDate && !toDate) {
+      return `Starting from ${fromDate}`
+    } else {
+      return 'Custom'
+    }
+  }
+
+  /**
+   * getTime converts a formatted date string into a timestamp in milliseconds.
+   * Returns the timestamp as a string or NaN if the date is invalid.
+   * @param value - Date string in the format 'MM/DD/YYYY'.
+   * @returns Timestamp in milliseconds as a string.
+   */
+  getTime = (value: string, options?: (d: dayjs.Dayjs) => dayjs.Dayjs) => {
+    let date = dayjs(value, this.formatString)
+    if (!!options) {
+      date = options(date)
+    }
+    return date.isValid() ? date.toDate().getTime().toString() : 'NaN' // Return 'NaN' if the date is invalid
+  }
+
+  /**
+   * parseDayJS parses a date in milliseconds into a dayjs object.
+   * Returns undefined if the date is invalid or if parsing fails.
+   * @param value - String representing a date in milliseconds or other formats.
+   * @returns A valid dayjs object or undefined if invalid.
+   */
+  parseDayJS = (value?: string) => {
+    if (!value || isNaN(parseInt(value))) return undefined // Return undefined for non-numeric or empty values
+    const parsedDate = dayjs(new Date(parseInt(value)))
+    return parsedDate.isValid() ? parsedDate : undefined // Return undefined if the date is invalid
+  }
+
+  dayRange = (range: number = 0): Required<IRange> => {
+    const currentDate = dayjs()
+    const targetDay = currentDate.subtract(Math.abs(range) - 1, 'day')
+    return {
+      from: targetDay.startOf('day').toDate().getTime().toString(),
+      to: currentDate.endOf('day').toDate().getTime().toString()
+    }
+  }
+
+  monthRange = (range: number = 0): Required<IRange> => {
+    const currentDate = dayjs()
+    const targetMonth = currentDate.subtract(Math.abs(range), 'month')
+    let to = targetMonth.endOf('month').toDate().getTime().toString()
+    if (currentDate.isSame(targetMonth, 'month')) {
+      to = currentDate.endOf('day').toDate().getTime().toString()
+    }
+    return {
+      from: targetMonth.startOf('month').toDate().getTime().toString(),
+      to
+    }
+  }
+
+  monthString = (range: number = 0) => {
+    const currentDate = dayjs()
+    const targetYear = currentDate.subtract(Math.abs(range), 'month')
+    if (currentDate.year() === targetYear.year()) return targetYear.format('MMMM')
+    return targetYear.format('MMMM YYYY')
+  }
+
+  yearRange = (range: number = 0): Required<IRange> => {
+    const currentDate = dayjs()
+    const targetYear = currentDate.subtract(Math.abs(range), 'years')
+    let to = targetYear.endOf('year')
+    if (currentDate.year() === targetYear.year()) {
+      to = currentDate.endOf('day')
+    }
+    return {
+      from: targetYear.startOf('year').toDate().getTime().toString(),
+      to: to.toDate().getTime().toString()
+    }
+  }
+
+  yearString = (range: number = 0) => {
+    const targetYear = dayjs().subtract(Math.abs(range), 'years')
+    return targetYear.year().toString()
+  }
+}
+export const DTRHelper = new DTRHelperBase()

package/src/lab/grafana-dashboard/date-time-range/index.tsx

@@ -0,0 +1,62 @@
+import React, { Component } from 'react'
+import { Box, Divider, Stack, styled } from '@mui/material'
+import { DTRHelper } from './helpers'
+import { IQuickRangeConfig } from './types'
+import MenuWrap, { IMenuWrap } from './menu-wrap'
+import { UTCTime } from './units'
+import QuickRanges from './quick-ranges'
+import AbsoluteTimeRage from './absolute-time-rage'
+
+interface IProps {
+  data: IQuickRangeConfig[]
+  defaultSelected?: IQuickRangeConfig
+  onChange?: (value: IQuickRangeConfig) => void
+}
+interface IState {
+  selected?: IQuickRangeConfig
+}
+export default class DateTimeRange extends Component<IProps, IState> {
+  configs: IQuickRangeConfig[]
+  constructor(props: IProps) {
+    super(props)
+    this.configs = props.data
+    this.state = { selected: props.defaultSelected }
+  }
+
+  refMenuWrap: IMenuWrap | null = null
+  render() {
+    const obj = this.getTitle()
+    return (
+      <MenuWrap title={obj.text} subTitle={obj.sub} ref={(ref) => (this.refMenuWrap = ref)}>
+        <Wrap>
+          <Box sx={{ display: 'flex', alignItems: 'stretch', flex: 1 }}>
+            <AbsoluteTimeRage data={this.state.selected} onChangeRange={this.handleSelectItem} />
+            <Divider flexItem orientation='vertical' sx={{ m: '0 6px 3px' }} />
+            <QuickRanges data={this.configs} onSelect={this.handleSelectItem} selectedValue={this.state.selected} />
+          </Box>
+          <Divider />
+          <UTCTime />
+        </Wrap>
+      </MenuWrap>
+    )
+  }
+  handleSelectItem = (item: IQuickRangeConfig) => {
+    this.props.onChange && this.props.onChange(item)
+    this.setState({ selected: item })
+    this.refMenuWrap?.close()
+  }
+
+  getTitle = () => ({
+    text: DTRHelper.getTitle(this.state.selected?.from, this.state.selected?.to, this.props.data),
+    sub: DTRHelper.getTitle(this.state.selected?.from, this.state.selected?.to)
+  })
+}
+
+const Wrap = styled(Stack)({
+  padding: '9px 9px 0',
+  height: '100%',
+  overflow: 'hidden'
+})
+
+export * from './types'
+export * from './helpers'

package/src/lab/grafana-dashboard/date-time-range/menu-wrap.tsx

@@ -0,0 +1,101 @@
+import React, { Component, PropsWithChildren } from 'react'
+import { Button, Menu, SxProps, Theme, Tooltip, styled } from '@mui/material'
+import AccessTimeIcon from '@mui/icons-material/AccessTime'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+
+interface IProps {
+  title?: string
+  subTitle?: string
+}
+
+interface IState {
+  anchorEl: null | HTMLElement
+}
+export interface IMenuWrap {
+  close: () => void
+}
+export default class MenuWrap extends Component<PropsWithChildren<IProps>, IState> implements IMenuWrap {
+  constructor(props: IProps) {
+    super(props)
+    this.state = { anchorEl: null }
+  }
+  render() {
+    const { anchorEl } = this.state
+    const isOpen = Boolean(anchorEl)
+
+    return (
+      <>
+        {this.renderTooltip(
+          <CustomButton
+            variant='text'
+            color='inherit'
+            onClick={this.onOpen}
+            startIcon={<AccessTimeIcon />}
+            endIcon={<ExpandMoreIcon sx={{ transition: 'linear 0.1s', transform: `rotate(${isOpen ? -180 : 0}deg)` }} />}
+            sx={isOpen ? { backgroundColor: 'rgba(0, 0, 0, 0.04)' } : {}}
+          >
+            {this.props.title || 'Date time range'}
+          </CustomButton>
+        )}
+        <Menu
+          keepMounted
+          anchorEl={anchorEl}
+          anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+          transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+          slotProps={{ paper: { elevation: 0, sx: sxPaperProps } }}
+          open={isOpen}
+          onClose={this.close}
+          MenuListProps={{ component: 'div', sx: { height: '100%', padding: 0 } }}
+        >
+          {this.props.children}
+        </Menu>
+      </>
+    )
+  }
+
+  renderTooltip = (child: JSX.Element) => {
+    const { title, subTitle } = this.props
+    const isTooltip = !!subTitle && title !== subTitle
+    if (!isTooltip) return child
+    return (
+      <Tooltip title={this.props.subTitle} placement='left' arrow>
+        {child}
+      </Tooltip>
+    )
+  }
+
+  onOpen = (event: React.MouseEvent<HTMLElement>) => this.setState({ ...this.state, anchorEl: event.currentTarget })
+  close = () => this.setState({ ...this.state, anchorEl: null })
+}
+
+const sxPaperProps: SxProps<Theme> = {
+  overflow: 'visible',
+  filter: 'drop-shadow(0px 2px 8px rgba(99, 99, 99, 0.2))',
+  marginTop: '10px',
+  width: 'calc(100vw - 24px)',
+  maxWidth: '550px',
+  height: 'calc(100vh - 24px)',
+  maxHeight: '420px',
+  '&:before': {
+    content: '""',
+    display: 'block',
+    position: 'absolute',
+    top: 0,
+    right: 14,
+    width: 10,
+    height: 10,
+    backgroundColor: 'background.paper',
+    transform: 'translateY(-50%) rotate(45deg)',
+    zIndex: 0
+  }
+}
+
+const CustomButton = styled(Button)({
+  textTransform: 'unset',
+  fontWeight: 600,
+  gap: '6px',
+  paddingLeft: '18px',
+  paddingRight: '18px',
+  minWidth: '220px',
+  justifyContent: 'space-between'
+})