Triggering useEffect() to on panel refresh

gordonturner · December 5, 2020, 4:36pm

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:

gist.github.com

https://gist.github.com/gordonturner/039abb1b6bdfcd071fcfa98953b92f2e

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';

This file has been truncated. show original

gordonturner · December 9, 2020, 5:05pm

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:

gordonturner · December 16, 2020, 7:09pm

Just to close this off, I ended up refactoring to using the same approach as the clock panel:

github.com

grafana/clock-panel/blob/master/src/ClockPanel.tsx

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> {

This file has been truncated. 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) });
  }

  [...]