Skip to content

Commit 5c220b8

Browse files
GerminikuGerminiku
committed
feat: panel edit icon button
1 parent 3f09c1c commit 5c220b8

File tree

2 files changed

+119
-24
lines changed

2 files changed

+119
-24
lines changed

‎ui/src/views/dashboard/components/PanelDatePicker.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -90,17 +90,17 @@ const PanelDatePicker = ({id, timeRange, showTime = true, showRealTime = false,
9090
<Box>
9191
{/* <Tooltip label={`${value && dateTimeFormat(value.start)} - ${value && dateTimeFormat(value.end)}`}> */}
9292
<HStack spacing={0} onClick={onOpen} cursor="pointer" className="hover-text">
93-
{showIcon && <IconButton variant="ghost" _hover={{ bg: null }}>
93+
{showIcon && <IconButton variant="ghost" _hover={{ bg: null }} fontSize={"sm"}>
9494
<FaRegClock />
9595
</IconButton>}
9696
{
9797
showTime && <>
9898
<Box>
99-
{!isMobileScreen && <Text layerStyle="textSecondary" fontSize="0.9rem" fontWeight="500">
99+
{!isMobileScreen && <Text layerStyle="textSecondary" fontSize="sm" fontWeight="500">
100100
{value.startRaw.toString().startsWith('now') ? value.startRaw : dateTimeFormat(value.start)} to {value.endRaw.toString().startsWith('now') ? value.endRaw : dateTimeFormat(value.end)}
101101
</Text>}
102102
{ isLargeScreen && showRealTime && value.startRaw.toString().startsWith('now') &&
103-
<Text layerStyle="textSecondary" fontSize="0.9rem" fontWeight="500">
103+
<Text layerStyle="textSecondary" fontSize="sm" fontWeight="500">
104104
{dateTimeFormat(value.start)} - {dateTimeFormat(value.end)}
105105
</Text>}
106106
</Box>

‎ui/src/views/dashboard/grid/PanelGrid/PanelGrid.tsx‎

Lines changed: 116 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
// See the License for the specific language governing permissions and
1212
// limitations under the License.
1313
import { Dashboard, Panel, PanelProps, PanelQuery } from "types/dashboard"
14-
import { Box, Center, HStack, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Popover, PopoverArrow, PopoverBody, PopoverContent, PopoverTrigger, Portal, Text, Tooltip, useColorMode, useColorModeValue, useDisclosure, useToast } from "@chakra-ui/react";
15-
import { FaBook, FaBug, FaEdit, FaRegClock, FaRegClone, FaRegCopy, FaRegEye, FaRegEyeSlash, FaTrashAlt } from "react-icons/fa";
14+
import { Box, Center, HStack, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Popover, PopoverArrow, PopoverBody, PopoverContent, PopoverTrigger, Portal, Text, Tooltip, useColorMode, useColorModeValue, useDisclosure, useToast, IconButton } from "@chakra-ui/react";
15+
import { FaBook, FaBug, FaEdit, FaEllipsisV, FaRegClock, FaRegClone, FaRegCopy, FaRegEye, FaRegEyeSlash, FaTrashAlt } from "react-icons/fa";
1616
import { IoMdInformation } from "react-icons/io";
1717
import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
1818
import { DatasourceMaxDataPoints, DatasourceMinInterval, PANEL_HEADER_HEIGHT } from "src/data/constants";
@@ -56,6 +56,8 @@ import { PanelTypeGraph } from "../../plugins/built-in/panel/graph/types";
5656
import { DatasourceTypeTestData } from "../../plugins/built-in/datasource/testdata/types";
5757
import PanelDatePicker from "../../components/PanelDatePicker";
5858
import useEmbed from "hooks/useEmbed";
59+
import { css } from "@emotion/react";
60+
import customColors from "theme/colors";
5961

6062
interface PanelGridProps {
6163
dashboard: Dashboard
@@ -347,7 +349,13 @@ export const PanelComponent = ({ dashboard, panel, variables, onRemovePanel, onH
347349
return res
348350
}, [panel.transform, panel.enableTransform, panelData])
349351

350-
return <Box height={height} width={width} className={(panel.styles.border == "Normal" && "bordered") + (dashboard.data.styles.bgEnabled ? " panel-bg-alpha" : " panel-bg")} position="relative">
352+
return <Box height={height} width={width} className={(panel.styles.border == "Normal" && "bordered") + (dashboard.data.styles.bgEnabled ? " panel-bg-alpha" : " panel-bg")} position="relative"
353+
css={css`
354+
&: hover .show-on-hover {
355+
visibility: visible
356+
}
357+
`}
358+
>
351359

352360
{data && <Box overflow="hidden">
353361
<PanelHeader dashboardId={dashboard.id} panel={panel} data={panelData} queryError={queryError} onCopyPanel={onCopyPanel} onRemovePanel={onRemovePanel} onHidePanel={onHidePanel} />
@@ -364,24 +372,25 @@ export const PanelComponent = ({ dashboard, panel, variables, onRemovePanel, onH
364372

365373
</Box>}
366374
{loading && <Box position="absolute" top="0" right="0"><Loading size="sm" /></Box>}
367-
{!loading && panel.enableScopeTime && <Popover trigger="hover">
375+
376+
{/* {!loading && panel.enableScopeTime && <Popover trigger="hover">
368377
<PopoverTrigger>
369378
<Box position="absolute" top="5px" right="5px" opacity="0.5" fontSize="0.8rem" zIndex={1000} cursor="pointer"><FaRegClock /></Box>
370379
</PopoverTrigger>
371380
<PopoverContent>
372-
<PopoverArrow />
381+
<PopoverArrow />
373382
<PopoverBody>
374383
<PanelDatePicker id={panel.id.toString()} timeRange={panel.scopeTime} onChange={tr => {
375384
panel.scopeTime = tr
376385
dispatch({
377386
type: UpdatePanelEvent,
378387
data: cloneDeep(panel)
379388
})
380-
}} showIcon/>
389+
}} showIcon />
381390
<Text opacity={0.7} mt="2" ml="3" fontSize="0.9rem">Panel time range</Text>
382391
</PopoverBody>
383392
</PopoverContent>
384-
</Popover>}
393+
</Popover>} */}
385394
<Box position="absolute" top="0" left="0" right="0" bottom="0" zIndex={-1} overflow="hidden"><PanelBorder width={width} height={height} border={panel.styles?.border} > <Box></Box></PanelBorder></Box>
386395
</Box>
387396
}
@@ -425,24 +434,110 @@ const PanelHeader = ({ dashboardId, queryError, panel, onCopyPanel, onRemovePane
425434
</Tooltip>
426435
</Box>}
427436
<Center width="100%">
428-
<Menu placement="bottom">
429-
<MenuButton
430-
transition='all 0.2s'
431-
_focus={{ border: null }}
432-
onClick={e => e.stopPropagation()}
433-
disabled={embed}
434-
>
435-
<Center width="100%">{!isEmpty(title) ? <Box cursor="pointer" className="hover-bordered" paddingTop={panel.styles.title.paddingTop} paddingBottom={panel.styles.title.paddingBottom} paddingLeft={panel.styles.title.paddingLeft} paddingRight={panel.styles.title.paddingRight} width="100%" fontSize={panel.styles.title.fontSize} fontWeight={panel.styles.title.fontWeight} color={paletteColorNameToHex(panel.styles.title.color, colorMode)}><TitleDecoration styles={panel.styles}><Text noOfLines={1}>{title}</Text></TitleDecoration></Box> : <Box width="100px">&nbsp;</Box>}</Center>
436-
</MenuButton>
437-
<Portal>
438-
<MenuList p="1" zIndex={1500}>
437+
{
438+
panel.enableScopeTime && (
439+
<>
440+
<Popover
441+
isLazy
442+
returnFocusOnClose={false}
443+
placement='left'
444+
closeOnBlur={false}
445+
size="sm"
446+
isOpen={true}
447+
trigger="hover"
448+
449+
>
450+
<PopoverTrigger>
451+
<Box position="absolute" top="5px" left="5px" opacity="0.5" fontSize="0.8rem" zIndex={1000} cursor="pointer"><FaRegClock /></Box>
452+
</PopoverTrigger>
453+
<PopoverContent width="10rem">
454+
<PanelDatePicker id={panel.id.toString()} timeRange={panel.scopeTime} onChange={tr => {
455+
panel.scopeTime = tr
456+
dispatch({
457+
type: UpdatePanelEvent,
458+
data: cloneDeep(panel)
459+
})
460+
}} showIcon />
461+
</PopoverContent>
462+
</Popover>
463+
</>
464+
)
465+
}
466+
<Center width="100%">
467+
{!isEmpty(title) ?
468+
<Box
469+
display={'flex'}
470+
justifyContent={'center'}
471+
// cursor="pointer"
472+
paddingTop={panel.styles.title.paddingTop}
473+
paddingBottom={panel.styles.title.paddingBottom}
474+
paddingLeft={panel.styles.title.paddingLeft}
475+
paddingRight={panel.styles.title.paddingRight}
476+
width="100%"
477+
fontSize={panel.styles.title.fontSize}
478+
fontWeight={panel.styles.title.fontWeight}
479+
color={paletteColorNameToHex(panel.styles.title.color, colorMode)}>
480+
<TitleDecoration styles={panel.styles}>
481+
<Text noOfLines={1}>
482+
{title}
483+
</Text>
484+
</TitleDecoration>
485+
</Box> : <Box width="100px">&nbsp;</Box>}
486+
</Center>
487+
<Box visibility={'hidden'} className="show-on-hover">
488+
<Menu placement="bottom" isLazy>
489+
<MenuButton
490+
background={useColorModeValue(customColors.bodyBg.light, customColors.bodyBg.dark)}
491+
transition='all 0.2s'
492+
_focus={{ border: null }}
493+
onClick={e => e.stopPropagation()}
494+
disabled={embed}
495+
cursor={'pointer'}
496+
as={IconButton}
497+
aria-label='Options'
498+
icon={
499+
<Box
500+
fontSize={panel.styles.title.fontSize}
501+
fontWeight={panel.styles.title.fontWeight}
502+
color={paletteColorNameToHex(panel.styles.title.color, colorMode)}
503+
>
504+
<FaEllipsisV />
505+
</Box>}
506+
size={'sm'}
507+
variant={'none'}
508+
>
509+
<Center width="100%">
510+
{
511+
!isEmpty(title)
512+
?
513+
<Box
514+
cursor="pointer"
515+
className="hover-bordered"
516+
paddingTop={panel.styles.title.paddingTop}
517+
paddingBottom={panel.styles.title.paddingBottom}
518+
paddingLeft={panel.styles.title.paddingLeft}
519+
paddingRight={panel.styles.title.paddingRight} width="100%"
520+
fontSize={panel.styles.title.fontSize}
521+
fontWeight={panel.styles.title.fontWeight}
522+
color={paletteColorNameToHex(panel.styles.title.color, colorMode)}
523+
>
524+
<TitleDecoration styles={panel.styles}>
525+
<Text noOfLines={1}>{title}</Text>
526+
</TitleDecoration>
527+
</Box>
528+
:
529+
<Box width="100px">&nbsp;</Box>
530+
}
531+
</Center>
532+
</MenuButton>
533+
534+
<MenuList p="1" zIndex={1500} rootProps={{ fontSize: "sm" }}>
439535
<MenuItem icon={<FaEdit />} onClick={() => addParamToUrl({ edit: panel.id })}>{t.edit}</MenuItem>
440536
<MenuItem icon={<FaRegCopy />} onClick={() => onCopyPanel(panel, "copy")}>{t.copy}</MenuItem>
441537
<MenuItem icon={<FaRegClone />} onClick={() => onCopyPanel(panel, "clone")}>{t.clone}</MenuItem>
442538
<MenuDivider my="1" />
443539
<MenuItem icon={<FaBug />} onClick={onOpen}>{t1.debugPanel}</MenuItem>
444540
<MenuItem icon={<FaRegEye />} onClick={() => addParamToUrl({ viewPanel: viewPanel ? null : panel.id })}>{viewPanel ? t1.exitlView : t1.viewPanel}</MenuItem>
445-
446541
{!viewPanel && <>
447542
<MenuDivider my="1" />
448543
<MenuItem icon={<FaRegEyeSlash />} onClick={() => onHidePanel(panel)}>{t1.hidePanel}</MenuItem>
@@ -451,8 +546,8 @@ const PanelHeader = ({ dashboardId, queryError, panel, onCopyPanel, onRemovePane
451546

452547
</>}
453548
</MenuList>
454-
</Portal>
455-
</Menu>
549+
</Menu>
550+
</Box>
456551
</Center>
457552
{/* <Box display="none"><FaBook className="grid-drag-handle" /></Box> */}
458553
</HStack>

0 commit comments

Comments
 (0)