dinocollab-core 1.0.0

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

@@ -0,0 +1,161 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,79 @@
+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

@@ -0,0 +1,67 @@
+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

@@ -0,0 +1,120 @@
+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

@@ -0,0 +1,62 @@
+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

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

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

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