Hey All, I have what I hope is a simple question.
I have a custom panel plugin making a REST call using useEffect().
As expected, on first render, everything works, but I am struggling on how to get the dashboard refresh to make a new REST call.
For example, setting the page dashboard refresh to 30s, I see the console log I have fire, but how do I correctly get useEffect() to run to get an update?
Please note : I currently have a dirty hack that increments a counter on a timer, which of course ignores the grafana refresh period.
Gist of the code here:
ListlistPanel.tsx
import React, { useEffect } from 'react';
import { PanelProps } from '@grafana/data';
import { stylesFactory } from '@grafana/ui';
import { css, cx, injectGlobal } from 'emotion';
import glyphiconWoff from './fonts/glyphicons-halflings-regular.woff';
import { DEFAULT_API_URL, DEFAULT_API_KEY } from './constants';
import { ListlistData, ListlistItem, ListlistOptions } from './types';
import { DateTime } from 'luxon';
import axios, { AxiosRequestConfig } from 'axios';
show original
I have created a new plugin that gets the public IP address via REST call.
It uses the same approach that I was having an issue with, but this is a clearer PoC:
Just to close this off, I ended up refactoring to using the same approach as the clock panel:
import React, { PureComponent } from 'react';
import { PanelProps } from '@grafana/data';
import { ClockOptions, ClockType, ZoneFormat, ClockMode } from './types';
import { css } from 'emotion';
// eslint-disable-next-line
import moment, { Moment } from 'moment';
import './external/moment-duration-format';
interface Props extends PanelProps<ClockOptions> {}
interface State {
// eslint-disable-next-line
now: Moment;
}
export function getTimeZoneNames(): string[] {
return (moment as any).tz.names();
}
export class ClockPanel extends PureComponent<Props, State> {
show original
export class ClockPanel extends PureComponent<Props, State> {
timerID?: any;
state = { now: this.getTZ(), timezone: '' };
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000 // 1 second
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
const { timezone } = this.props.options;
this.setState({ now: this.getTZ(timezone) });
}
[...]
