Skip to content

Commit

Permalink
feat: panel edit icon button
Browse files Browse the repository at this point in the history
  • Loading branch information
@Germiniku
Germiniku committed Oct 19, 2023
1 parent 3f09c1c commit fa2daa6
Show file tree
Hide file tree
Showing 2 changed files with 118 additions and 24 deletions.
6 changes: 3 additions & 3 deletions ui/src/views/dashboard/components/PanelDatePicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,17 +90,17 @@ const PanelDatePicker = ({id, timeRange, showTime = true, showRealTime = false,
<Box>
{/* <Tooltip label={`${value && dateTimeFormat(value.start)} - ${value && dateTimeFormat(value.end)}`}> */}
<HStack spacing={0} onClick={onOpen} cursor="pointer" className="hover-text">
{showIcon && <IconButton variant="ghost" _hover={{ bg: null }}>
{showIcon && <IconButton variant="ghost" _hover={{ bg: null }} fontSize={"sm"}>
<FaRegClock />
</IconButton>}
{
showTime && <>
<Box>
{!isMobileScreen && <Text layerStyle="textSecondary" fontSize="0.9rem" fontWeight="500">
{!isMobileScreen && <Text layerStyle="textSecondary" fontSize="sm" fontWeight="500">
{value.startRaw.toString().startsWith('now') ? value.startRaw : dateTimeFormat(value.start)} to {value.endRaw.toString().startsWith('now') ? value.endRaw : dateTimeFormat(value.end)}
</Text>}
{ isLargeScreen && showRealTime && value.startRaw.toString().startsWith('now') &&
<Text layerStyle="textSecondary" fontSize="0.9rem" fontWeight="500">
<Text layerStyle="textSecondary" fontSize="sm" fontWeight="500">
{dateTimeFormat(value.start)} - {dateTimeFormat(value.end)}
</Text>}
</Box>
Expand Down
136 changes: 115 additions & 21 deletions ui/src/views/dashboard/grid/PanelGrid/PanelGrid.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@
// See the License for the specific language governing permissions and
// limitations under the License.
import { Dashboard, Panel, PanelProps, PanelQuery } from "types/dashboard"
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";
import { FaBook, FaBug, FaEdit, FaRegClock, FaRegClone, FaRegCopy, FaRegEye, FaRegEyeSlash, FaTrashAlt } from "react-icons/fa";
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";
import { FaBook, FaBug, FaEdit, FaEllipsisV, FaRegClock, FaRegClone, FaRegCopy, FaRegEye, FaRegEyeSlash, FaTrashAlt } from "react-icons/fa";
import { IoMdInformation } from "react-icons/io";
import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
import { DatasourceMaxDataPoints, DatasourceMinInterval, PANEL_HEADER_HEIGHT } from "src/data/constants";
Expand Down Expand Up @@ -56,6 +56,8 @@ import { PanelTypeGraph } from "../../plugins/built-in/panel/graph/types";
import { DatasourceTypeTestData } from "../../plugins/built-in/datasource/testdata/types";
import PanelDatePicker from "../../components/PanelDatePicker";
import useEmbed from "hooks/useEmbed";
import { css } from "@emotion/react";
import customColors from "theme/colors";

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

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

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

</Box>}
{loading && <Box position="absolute" top="0" right="0"><Loading size="sm" /></Box>}
{!loading && panel.enableScopeTime && <Popover trigger="hover">

{/* {!loading && panel.enableScopeTime && <Popover trigger="hover">
<PopoverTrigger>
<Box position="absolute" top="5px" right="5px" opacity="0.5" fontSize="0.8rem" zIndex={1000} cursor="pointer"><FaRegClock /></Box>
</PopoverTrigger>
<PopoverContent>
<PopoverArrow />
<PopoverArrow />
<PopoverBody>
<PanelDatePicker id={panel.id.toString()} timeRange={panel.scopeTime} onChange={tr => {
panel.scopeTime = tr
dispatch({
type: UpdatePanelEvent,
data: cloneDeep(panel)
})
}} showIcon/>
}} showIcon />
<Text opacity={0.7} mt="2" ml="3" fontSize="0.9rem">Panel time range</Text>
</PopoverBody>
</PopoverContent>
</Popover>}
</Popover>} */}
<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>
</Box>
}
Expand Down Expand Up @@ -425,24 +434,109 @@ const PanelHeader = ({ dashboardId, queryError, panel, onCopyPanel, onRemovePane
</Tooltip>
</Box>}
<Center width="100%">
<Menu placement="bottom">
<MenuButton
transition='all 0.2s'
_focus={{ border: null }}
onClick={e => e.stopPropagation()}
disabled={embed}
>
<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>
</MenuButton>
<Portal>
<MenuList p="1" zIndex={1500}>
{
panel.enableScopeTime && (
<>
<Popover
isLazy
returnFocusOnClose={false}
placement='left'
closeOnBlur={false}
size="sm"
trigger="hover"

>
<PopoverTrigger>
<Box position="absolute" top="5px" left="5px" opacity="0.5" fontSize="0.8rem" zIndex={1000} cursor="pointer"><FaRegClock /></Box>
</PopoverTrigger>
<PopoverContent width="10rem">
<PanelDatePicker id={panel.id.toString()} timeRange={panel.scopeTime} onChange={tr => {
panel.scopeTime = tr
dispatch({
type: UpdatePanelEvent,
data: cloneDeep(panel)
})
}} showIcon />
</PopoverContent>
</Popover>
</>
)
}
<Center width="100%">
{!isEmpty(title) ?
<Box
display={'flex'}
justifyContent={'center'}
// cursor="pointer"
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>
<Box visibility={'hidden'} className="show-on-hover">
<Menu placement="bottom" isLazy>
<MenuButton
background={useColorModeValue(customColors.bodyBg.light, customColors.bodyBg.dark)}
transition='all 0.2s'
_focus={{ border: null }}
onClick={e => e.stopPropagation()}
disabled={embed}
cursor={'pointer'}
as={IconButton}
aria-label='Options'
icon={
<Box
fontSize={panel.styles.title.fontSize}
fontWeight={panel.styles.title.fontWeight}
color={paletteColorNameToHex(panel.styles.title.color, colorMode)}
>
<FaEllipsisV />
</Box>}
size={'sm'}
variant={'none'}
>
<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>
</MenuButton>

<MenuList p="1" zIndex={1500} rootProps={{ fontSize: "sm" }}>
<MenuItem icon={<FaEdit />} onClick={() => addParamToUrl({ edit: panel.id })}>{t.edit}</MenuItem>
<MenuItem icon={<FaRegCopy />} onClick={() => onCopyPanel(panel, "copy")}>{t.copy}</MenuItem>
<MenuItem icon={<FaRegClone />} onClick={() => onCopyPanel(panel, "clone")}>{t.clone}</MenuItem>
<MenuDivider my="1" />
<MenuItem icon={<FaBug />} onClick={onOpen}>{t1.debugPanel}</MenuItem>
<MenuItem icon={<FaRegEye />} onClick={() => addParamToUrl({ viewPanel: viewPanel ? null : panel.id })}>{viewPanel ? t1.exitlView : t1.viewPanel}</MenuItem>

{!viewPanel && <>
<MenuDivider my="1" />
<MenuItem icon={<FaRegEyeSlash />} onClick={() => onHidePanel(panel)}>{t1.hidePanel}</MenuItem>
Expand All @@ -451,8 +545,8 @@ const PanelHeader = ({ dashboardId, queryError, panel, onCopyPanel, onRemovePane

</>}
</MenuList>
</Portal>
</Menu>
</Menu>
</Box>
</Center>
{/* <Box display="none"><FaBook className="grid-drag-handle" /></Box> */}
</HStack>
Expand Down

0 comments on commit fa2daa6

Please sign in to comment.