Hi! I am working on developing a datepicker plugin, and I have encountered a problem. Everything works correctly in the local environment, but on the server, part of the functionality is not executing. For example, no console.log statements are outputting on the server, even though everything works locally.
Here is the component code:
import React, { useState, useEffect } from 'react';
import { PanelProps } from '@grafana/data';
import { SimpleOptions } from 'types';
import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
import { Box } from '@mui/material';
import moment, { Moment } from 'moment';
import { useHistory } from 'react-router-dom';
import StyledDatePicker from './StyledDatePicker';
import { IconButton, Tooltip } from '@mui/material';
import CheckIcon from '@mui/icons-material/Check';
import CloseIcon from '@mui/icons-material/Close';
interface Props extends PanelProps<SimpleOptions> {}
export const DateRangePicker: React.FC<Props> = ({ timeRange, onChangeTimeRange, options, height }) => {
console.log('DateRangePicker rendered');
const history = useHistory();
const { timeRangeData } = options;
const [startDate, setStartDate] = useState<Moment | null>(moment(timeRange.from.toISOString()));
const [endDate, setEndDate] = useState<Moment | null>(moment(timeRange.to.toISOString()));
const [applyClicked, setApplyClicked] = useState<boolean>(false);
const [isChangeDate, setIsChangeDate] = useState<boolean>(false);
const DATE_CONSTANT = {
'5m': 'now-5m',
'15m': 'now-15m',
'30m': 'now-30m',
'1h': 'now-1h',
'3h': 'now-3h',
'6h': 'now-6h',
'12h': 'now-12h',
'24h': 'now-24h',
'2d': 'now-2d',
'7d': 'now-7d',
'30d': 'now-30d',
'90d': 'now-90d',
'6M': 'now-6M',
'1y': 'now-1y',
};
useEffect(() => {
const params = new URLSearchParams(window.location.search);
const toParam = params.get('to');
if (!applyClicked && toParam === 'now' && !isChangeDate) {
setStartDate(moment(timeRange.from.toISOString()));
setEndDate(moment(timeRange.to.toISOString()));
}
}, [timeRange, applyClicked]);
const applyDateRange = () => {
if (startDate && endDate) {
onChangeTimeRange({
from: moment(startDate).valueOf(),
to: moment(endDate).valueOf(),
});
}
setApplyClicked(true);
};
const resetDateTime = () => {
const currentUrl = new URL(window.location.href);
const params = new URLSearchParams(currentUrl.search);
params.set('from', DATE_CONSTANT[timeRangeData as keyof typeof DATE_CONSTANT]);
params.set('to', 'now');
const newUrl = `${currentUrl.pathname}?${params.toString()}`;
history.push(newUrl);
setApplyClicked(false);
setIsChangeDate(false);
};
return (
<LocalizationProvider dateAdapter={AdapterMoment}>
<Box display="flex" flexDirection="column" gap={2}>
<Box display="flex" width="100%" gap={2}>
<Box flex="1">
<StyledDatePicker
height={height}
label={'Start date'}
value={startDate}
onChange={(newDate) => {
setStartDate(newDate);
setIsChangeDate(true);
}}
maxDateTime={endDate || undefined}
onOpen={() => setApplyClicked(true)}
onClose={() => setApplyClicked(false)}
/>
</Box>
<Box flex="1">
<StyledDatePicker
height={height}
label={'End Date'}
value={endDate}
onChange={(newDate) => {
setEndDate(newDate);
setIsChangeDate(true);
}}
minDateTime={startDate || undefined}
onOpen={() => setApplyClicked(true)}
onClose={() => setApplyClicked(false)}
/>
</Box>
<Box
display="flex"
flexDirection="row"
alignItems="center"
justifyContent="space-between"
sx={{ pt: 0, mt: 0 }}
>
<Tooltip title={'Query'}>
<IconButton onClick={applyDateRange}>
<CheckIcon sx={{ color: 'green' }} />
</IconButton>
</Tooltip>
<Tooltip title={'Reset'}>
<IconButton onClick={resetDateTime}>
<CloseIcon sx={{ color: 'red' }} />
</IconButton>
</Tooltip>
</Box>
</Box>
</Box>
</LocalizationProvider>
);
};
Here are the steps I take to deploy the code on the server:
- I build the project.
- I sign the plugin.
- I copy the
distfolder into the Grafana plugins directory on the server. - I restart the Grafana service.
Could you please advise me on what the issue might be and how to resolve it?