mirror of
https://github.com/grafana/grafana.git
synced 2024-12-01 13:09:22 -06:00
1e74037eae
* refactor aliasBy and PopoverCtrl components * refactor Aggregations component * refactor MetricSelect component * refactor UserProvider * popoverCtr: remove redundant logic * simplified the MetricsSelect a bit. * skipping testing of internal component logic. * changed to componentWillMount. * changed elapsed time to a functional component. * rewrote the tests. * fixed missing test title. * fixed a tiny issue with elapsed time. * rename of field. Co-authored-by: Marcus Andersson <marcus.andersson@grafana.com>
23 lines
945 B
TypeScript
23 lines
945 B
TypeScript
import React, { FC, useState, useEffect } from 'react';
|
|
import { useInterval } from 'react-use';
|
|
import { Time, TimeProps } from './Time';
|
|
|
|
const INTERVAL = 150;
|
|
|
|
export interface ElapsedTimeProps extends Omit<TimeProps, 'timeInMs'> {
|
|
// Use this to reset the timer. Any value is allowed just need to be !== from the previous.
|
|
// Keep in mind things like [] !== [] or {} !== {}.
|
|
resetKey?: any;
|
|
}
|
|
|
|
export const ElapsedTime: FC<ElapsedTimeProps> = ({ resetKey, humanize, className }) => {
|
|
const [elapsed, setElapsed] = useState(0); // the current value of elapsed
|
|
|
|
// hook that will schedule a interval and then update the elapsed value on every tick.
|
|
useInterval(() => setElapsed(elapsed + INTERVAL), INTERVAL);
|
|
// this effect will only be run when resetKey changes. This will reset the elapsed to 0.
|
|
useEffect(() => setElapsed(0), [resetKey]);
|
|
|
|
return <Time timeInMs={elapsed} className={className} humanize={humanize} />;
|
|
};
|