dinocollab-core 1.0.1 → 1.0.3

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

@@ -1,101 +0,0 @@
-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'
-})

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

@@ -1,161 +0,0 @@
-import React, { Component } from 'react'
-import { alpha, Box, BoxProps, Button, Collapse, Divider, Fade } from '@mui/material'
-import { IconButton, InputAdornment, Stack, styled, TextField, Typography } from '@mui/material'
-import ClearIcon from '@mui/icons-material/Clear'
-import SearchIcon from '@mui/icons-material/Search'
-import { IQuickRangeConfig } from './types'
-
-interface IProps {
-  selectedValue?: IQuickRangeConfig
-  data: IQuickRangeConfig[]
-  onSelect: (item: IQuickRangeConfig) => void
-}
-
-interface IState {
-  searchKey: string
-}
-
-export default class QuickRanges extends Component<IProps, IState> {
-  constructor(props: IProps) {
-    super(props)
-    this.state = { searchKey: '' }
-  }
-  render = () => {
-    const data = this.getData()
-    return (
-      <Stack sx={{ padding: '2px 0', width: '235px', gap: '2px' }}>
-        <TextField
-          placeholder='Search quick ranges'
-          size='small'
-          name='search-pick-ranges'
-          value={this.state.searchKey}
-          onChange={this.handleChangeSearch}
-          InputProps={{
-            startAdornment: (
-              <InputAdornment position='start'>
-                <SearchIcon fontSize='small' />
-              </InputAdornment>
-            ),
-            endAdornment: (
-              <Fade in={!!this.state.searchKey}>
-                <InputAdornment position='end' sx={{ mr: '-8px' }}>
-                  <IconButton size='small' onClick={() => this.setState({ searchKey: '' })}>
-                    <ClearIcon fontSize='small' />
-                  </IconButton>
-                </InputAdornment>
-              </Fade>
-            )
-          }}
-        />
-        <Collapse in={data.length < 1} unmountOnExit>
-          <TypographyNotFoundWrap>
-            <Typography variant='caption' sx={{ fontWeight: 600, color: alpha('#000000', 0.6) }}>
-              Not found
-            </Typography>
-          </TypographyNotFoundWrap>
-        </Collapse>
-        {this.renderQuickRanges(data)}
-      </Stack>
-    )
-  }
-  renderQuickRanges = (items: IQuickRangeConfig[]) => (
-    <QuickRangeWrap>
-      {this.renderQuickRangeCustom(items, this.props.selectedValue)}
-      {items.map((item, index) => (
-        <React.Fragment key={item.title?.toString() + index}>
-          {item.lineAbove && <Divider sx={{ my: '2px' }} />}
-          <QuickRangeItem
-            {...{ component: 'div', className: this.getClassNameItem(item) }}
-            color='inherit'
-            size='small'
-            onClick={() => this.props.onSelect(item)}
-          >
-            <Typography variant='subtitle2' sx={{ fontWeight: 600, color: alpha('#000000', 0.6) }}>
-              {item.title}
-            </Typography>
-          </QuickRangeItem>
-        </React.Fragment>
-      ))}
-      <Box sx={{ height: '2rem' }} />
-    </QuickRangeWrap>
-  )
-  renderQuickRangeCustom = (items: IQuickRangeConfig[], selected?: IQuickRangeConfig) => {
-    const check = !items.some((x) => x.from === selected?.from && x.to === selected?.to)
-    return (
-      <Collapse in={check} sx={{ transitionDelay: '500ms' }}>
-        <Box>
-          <QuickRangeItem {...{ component: 'div', className: QuickRangeItemActivatedName }} color='inherit' size='small'>
-            <Typography variant='subtitle2' sx={{ fontWeight: 600, color: alpha('#000000', 0.6) }}>
-              Custom
-            </Typography>
-          </QuickRangeItem>
-          <Divider sx={{ my: '2px' }} />
-        </Box>
-      </Collapse>
-    )
-  }
-
-  handleChangeSearch: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> = (e) => {
-    this.setState({ searchKey: e.currentTarget.value })
-  }
-
-  getClassNameItem = (item: IQuickRangeConfig) => {
-    const selected = this.props.selectedValue
-    const check = !!selected && selected?.from === item?.from && selected?.to === item?.to
-    return check ? QuickRangeItemActivatedName : ''
-  }
-  getData = () => {
-    if (!!this.state.searchKey) {
-      return this.props.data.filter((x) => {
-        const t1 = x.title.trim().toLocaleLowerCase()
-        const t2 = this.state.searchKey.trim().toLocaleLowerCase()
-        return t1.includes(t2)
-      })
-    }
-    return this.props.data
-  }
-}
-
-const QuickRangeWrap = styled(({ children, ...p }: BoxProps) => (
-  <Box {...p}>
-    <Box>{children}</Box>
-  </Box>
-))({
-  flex: 1,
-  position: 'relative',
-  marginRight: '-7px',
-  '& > div': {
-    overflow: 'auto',
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-    height: '100%',
-    padding: '3px 3px 0 0 '
-  }
-})
-const QuickRangeItemActivatedName = 'activated'
-const QuickRangeItem = styled(Button)({
-  display: 'block',
-  padding: '7px 9px',
-  textTransform: 'unset',
-  justifyContent: 'flex-start',
-  '&.hover': {
-    backgroundColor: 'rgba(204, 204, 220, 0.16)!important',
-    cursor: 'pointer'
-  },
-  [`&.${QuickRangeItemActivatedName}`]: {
-    backgroundColor: 'rgba(204, 204, 220, 0.13)',
-    pointerEvents: 'none',
-    '& .MuiTypography-root': {
-      color: '#397ce0'
-    }
-  }
-})
-
-const TypographyNotFoundWrap = styled(Box)({
-  margin: '6px 0',
-  backgroundColor: alpha('#000000', 0.05),
-  borderRadius: '6px',
-  padding: '5px 9px'
-})

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

@@ -1,9 +0,0 @@
-export interface IRange {
-  from?: string
-  to?: string
-}
-
-export interface IQuickRangeConfig extends IRange {
-  title: string
-  lineAbove?: boolean
-}

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

@@ -1,18 +0,0 @@
-import React, { FC } from 'react'
-import { alpha, Box, Typography } from '@mui/material'
-
-//#region UTCTime
-export const UTCTime: FC = () => (
-  <Box sx={{ display: 'flex', alignItems: 'center', gap: '6px', padding: '6px 0' }}>
-    <Typography variant='subtitle2' sx={{ fontWeight: 600, lineHeight: 1, color: alpha('#000000', 0.7) }}>
-      Date and time ranges
-    </Typography>
-    {/* <Typography variant='subtitle2' sx={{ fontWeight: 600, lineHeight: 1, color: alpha('#000000', 0.7) }}>
-      Browser Time
-    </Typography>
-    <Typography variant='caption' sx={{ lineHeight: 1 }}>
-      Ha Noi, VietNam
-    </Typography> */}
-  </Box>
-)
-//#endregion

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

@@ -1,25 +0,0 @@
-import queryString from 'query-string'
-import { ITopBarInfo } from './top-bar.types'
-import { IGrafanaDashBoardOptions } from './types'
-import { QueryParam } from '../../utils'
-
-interface IOptions extends ITopBarInfo, Omit<IGrafanaDashBoardOptions, 'from' | 'to'> {}
-
-export const TopBarInfoToQueryParam = (urlBase: string, options?: IOptions) => {
-  const obj: IGrafanaDashBoardOptions = {}
-  if (!!options?.orgId) obj.orgId = options.orgId
-  if (!!options?.QuickRange) {
-    obj.from = options.QuickRange.from
-    obj.to = options.QuickRange.to
-  }
-  return `${urlBase}?${queryString.stringify(obj)}`
-}
-
-export const GetTopBarInfoQueryParam = (): IGrafanaDashBoardOptions => {
-  try {
-    const obj = QueryParam.Gets<IGrafanaDashBoardOptions>('from', 'to')
-    return obj as IGrafanaDashBoardOptions
-  } catch (error) {
-    return {}
-  }
-}

package/src/lab/grafana-dashboard/hooks.tsx

@@ -1,79 +0,0 @@
-import React from 'react'
-import { ITopBarInfo } from './top-bar.types'
-import { DefaultTopBarInfo } from './configs'
-import { IGrafanaDashBoardOptions } from './types'
-import { IQuickRangeConfig } from './date-time-range'
-import { QueryParam } from '../../utils'
-
-const useQueryParam = (data: ITopBarInfo, activated?: boolean) => {
-  React.useEffect(() => {
-    if (activated === true) {
-      const { QuickRange } = data
-      QueryParam.Patch<IGrafanaDashBoardOptions>({ from: QuickRange?.from, to: QuickRange?.to })
-    }
-  }, [data, activated])
-}
-
-const useLoading = () => {
-  const [isLoading, setIsLoading] = React.useState(true)
-  const loading = () => setIsLoading(true)
-  const unloading = () => setIsLoading(false)
-  return [isLoading, loading, unloading] as [boolean, () => void, () => void]
-}
-
-const useTopBarInfo = () => {
-  const [topBarInfo, setTopBarInfo] = React.useState<ITopBarInfo>(DefaultTopBarInfo)
-  const topBarInfoChange = (value?: IQuickRangeConfig) => {
-    const obj = { ...topBarInfo }
-    obj.QuickRange = value
-    setTopBarInfo(obj)
-  }
-  return [topBarInfo, topBarInfoChange] as [ITopBarInfo, (value?: IQuickRangeConfig, callback?: () => void) => void]
-}
-
-const ScrollBarCustom = `
-/* width */
-::-webkit-scrollbar {
-  width: 8px;
-}
-/* Track */
-::-webkit-scrollbar-track {
-  border-radius: 4px;
-  background: transparent;
-}
-:hover::-webkit-scrollbar-track {
-  background: #f1f1f1;
-}
-/* Handle */
-::-webkit-scrollbar-thumb {
-  border-radius: 4px;
-  background: rgba(135, 135, 135, 0.15);
-}
-:hover::-webkit-scrollbar-thumb {
-  background: #878787;
-}
-/* Handle on hover */
-::-webkit-scrollbar-thumb:hover {
-  background: #606060;
-}
-`
-
-const useCustomScrollBar = (iframeRef: React.RefObject<HTMLIFrameElement>) => {
-  React.useEffect(() => {
-    const doc = iframeRef.current?.contentWindow?.document
-    if (!!doc) {
-      const st = doc.createElement('style')
-      st.innerHTML = ScrollBarCustom
-      doc.head.append(st)
-    }
-    return () => {}
-  }, [iframeRef])
-}
-
-const GrafanaDashboardHooks = {
-  useQueryParam,
-  useLoading,
-  useTopBarInfo,
-  useCustomScrollBar
-}
-export default GrafanaDashboardHooks

package/src/lab/grafana-dashboard/icons.tsx

@@ -1,67 +0,0 @@
-import * as React from 'react'
-import { SvgIcon, SvgIconProps } from '@mui/material'
-
-export const SvgLoading: React.FC<SvgIconProps & { fill?: string }> = (props) => {
-  return (
-    <SvgIcon {...props}>
-      {/* credit: plus icon from https://heroicons.com/ */}
-      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'>
-        <circle fill={props.fill} stroke={props.fill} strokeWidth='15' r='15' cx='35' cy='100'>
-          <animate
-            attributeName='cx'
-            calcMode='spline'
-            dur='2'
-            values='35;165;165;35;35'
-            keySplines='0 .1 .5 1;0 .1 .5 1;0 .1 .5 1;0 .1 .5 1'
-            repeatCount='indefinite'
-            begin='0'
-          ></animate>
-        </circle>
-        <circle fill={props.fill} stroke={props.fill} strokeWidth='15' opacity='.8' r='15' cx='35' cy='100'>
-          <animate
-            attributeName='cx'
-            calcMode='spline'
-            dur='2'
-            values='35;165;165;35;35'
-            keySplines='0 .1 .5 1;0 .1 .5 1;0 .1 .5 1;0 .1 .5 1'
-            repeatCount='indefinite'
-            begin='0.05'
-          ></animate>
-        </circle>
-        <circle fill={props.fill} stroke={props.fill} strokeWidth='15' opacity='.6' r='15' cx='35' cy='100'>
-          <animate
-            attributeName='cx'
-            calcMode='spline'
-            dur='2'
-            values='35;165;165;35;35'
-            keySplines='0 .1 .5 1;0 .1 .5 1;0 .1 .5 1;0 .1 .5 1'
-            repeatCount='indefinite'
-            begin='.1'
-          ></animate>
-        </circle>
-        <circle fill={props.fill} stroke={props.fill} strokeWidth='15' opacity='.4' r='15' cx='35' cy='100'>
-          <animate
-            attributeName='cx'
-            calcMode='spline'
-            dur='2'
-            values='35;165;165;35;35'
-            keySplines='0 .1 .5 1;0 .1 .5 1;0 .1 .5 1;0 .1 .5 1'
-            repeatCount='indefinite'
-            begin='.15'
-          ></animate>
-        </circle>
-        <circle fill={props.fill} stroke={props.fill} strokeWidth='15' opacity='.2' r='15' cx='35' cy='100'>
-          <animate
-            attributeName='cx'
-            calcMode='spline'
-            dur='2'
-            values='35;165;165;35;35'
-            keySplines='0 .1 .5 1;0 .1 .5 1;0 .1 .5 1;0 .1 .5 1'
-            repeatCount='indefinite'
-            begin='.2'
-          ></animate>
-        </circle>
-      </svg>
-    </SvgIcon>
-  )
-}

package/src/lab/grafana-dashboard/index.tsx

@@ -1,120 +0,0 @@
-import React, { FC, useEffect } from 'react'
-import { Box, Fade, Stack, styled, Typography } from '@mui/material'
-import { SvgLoading } from './icons'
-import { QuickRangeConfigs } from './configs'
-import { TopBarInfoToQueryParam } from './helper'
-import { IGrafanaDashBoardOptions } from './types'
-import TopBar from './top-bar'
-import GrafanaDashboardHooks from './hooks'
-
-interface IGrafanaDashboardProps {
-  url: string
-  title?: string
-  options?: IGrafanaDashBoardOptions
-  topBar?: boolean
-  queryParam?: boolean
-  onLoadComplete?: () => void
-}
-export const GrafanaDashboard: FC<IGrafanaDashboardProps> = (props) => {
-  const iframeRef = React.useRef<HTMLIFrameElement>(null)
-  const [isLoading, loading, unloading] = GrafanaDashboardHooks.useLoading()
-  const [topBarInfo, topBarInfoChange] = GrafanaDashboardHooks.useTopBarInfo()
-
-  GrafanaDashboardHooks.useQueryParam(topBarInfo, props?.queryParam)
-  GrafanaDashboardHooks.useCustomScrollBar(iframeRef)
-
-  // ========= ========= ========= Events ========= ========= =========
-  const handleRefresh = () => {
-    if (iframeRef.current) {
-      loading()
-      iframeRef.current.src = iframeRef.current.src
-    }
-  }
-
-  // ========= ========= ========= Main ========= ========= =========
-  const createUrl = () => {
-    const a = document.createElement('a')
-    a.href = TopBarInfoToQueryParam(props.url, { ...topBarInfo })
-    const url = new URL(a.href)
-    const params = new URLSearchParams(url.search)
-    // Add or update query parameters
-    if (!props.options || !props.options.kiosk) {
-      params.set('kiosk', 'true')
-    }
-    const option = props.options
-    if (option) {
-      Object.keys(option).forEach((key) => params.set(key, (option as any)[key]))
-    }
-    // Rebuild the URL with the new parameters
-    url.search = params.toString()
-    return url
-  }
-  const url = createUrl()
-
-  useEffect(() => {
-    loading()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [url.toString()])
-
-  React.useEffect(() => {
-    const iframe = iframeRef.current
-    const onComplete = () => {
-      unloading()
-      props.onLoadComplete && props.onLoadComplete()
-    }
-    if (iframe) iframe.addEventListener('load', onComplete)
-    return () => {
-      // Clean up event
-      if (iframe) iframe.removeEventListener('load', onComplete)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props, props.onLoadComplete])
-
-  return (
-    <Wrap>
-      {props?.topBar === true && (
-        <TopBar
-          dateTimeRanges={{ data: QuickRangeConfigs, defaultValue: topBarInfo.QuickRange }}
-          onDateTimeRangeChange={(x) => {
-            topBarInfoChange(x)
-          }}
-          onRefresh={handleRefresh}
-        />
-      )}
-      <Box sx={{ flex: 1, position: 'relative' }}>
-        <Box sx={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}>
-          <IFrame ref={iframeRef} src={url.toString()} title={props.title} />
-        </Box>
-      </Box>
-      <Fade in={isLoading} unmountOnExit>
-        <Backdrop>
-          <SvgLoading sx={{ fontSize: '6.5rem' }} fill='#fb8c1e' />
-          <Typography variant='subtitle2'>Loading . . .</Typography>
-        </Backdrop>
-      </Fade>
-    </Wrap>
-  )
-}
-
-const IFrame = styled('iframe')({
-  border: 0,
-  width: '100%',
-  height: '100%'
-})
-const Wrap = styled(Stack)({
-  flex: 1,
-  position: 'relative',
-  justifyContent: 'stretch'
-})
-const Backdrop = styled(Box)({
-  position: 'absolute',
-  top: 0,
-  bottom: 0,
-  width: '100%',
-  height: '100%',
-  background: '#fff',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  flexDirection: 'column'
-})

package/src/lab/grafana-dashboard/top-bar.tsx

@@ -1,62 +0,0 @@
-import React, { Component } from 'react'
-import { Box, Divider, IconButton, styled, Tooltip } from '@mui/material'
-import SyncIcon from '@mui/icons-material/Sync'
-import DateTimeRange, { IQuickRangeConfig } from './date-time-range'
-
-export interface ITopBar {
-  onRefresh?: () => void
-  onDateTimeRangeChange?: (value?: IQuickRangeConfig) => void
-}
-
-interface IProps extends ITopBar {
-  dateTimeRanges: {
-    data: IQuickRangeConfig[]
-    defaultValue?: IQuickRangeConfig
-  }
-  after?: JSX.Element
-  before?: JSX.Element
-}
-
-export default class TopBar extends Component<IProps> {
-  render() {
-    return (
-      <Wrap>
-        {this.props?.after && this.props.after}
-        {!!this.props.onDateTimeRangeChange && (
-          <DateTimeRange
-            data={this.props.dateTimeRanges.data}
-            defaultSelected={this.props.dateTimeRanges.defaultValue}
-            onChange={this.props.onDateTimeRangeChange}
-          />
-        )}
-        {!!this.props.onRefresh && (
-          <>
-            <Divider flexItem orientation='vertical' sx={{ m: '6px 0' }} />
-            <Tooltip title='Refresh dashboard' arrow>
-              <IconButton onClick={this.props.onRefresh}>
-                <SyncIcon fontSize='small' />
-              </IconButton>
-            </Tooltip>
-          </>
-        )}
-        {this.props?.before && this.props.before}
-        <Box sx={{ width: '36px' }} />
-      </Wrap>
-    )
-  }
-}
-
-export const TopBarheight = 43
-const Wrap = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  justifyContent: 'end',
-  padding: '3px 12px',
-  margin: '0 -10px',
-  gap: '6px',
-  boxShadow: theme.app.boxShadow[1],
-  position: 'relative',
-  zIndex: 1,
-  height: `${TopBarheight}px`,
-  alignItems: 'center',
-  flex: '0 0 auto'
-}))

package/src/lab/grafana-dashboard/top-bar.types.ts

@@ -1,5 +0,0 @@
-import { IQuickRangeConfig } from './date-time-range'
-
-export interface ITopBarInfo {
-  QuickRange?: IQuickRangeConfig
-}

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

@@ -1,8 +0,0 @@
-export interface IGrafanaDashBoardOptions {
-  from?: string
-  to?: string
-  refresh?: string
-  kiosk?: 'tv' | 'true' | 'false'
-  theme?: 'light' | 'dark'
-  orgId?: number
-}