mirror of
https://github.com/prometheus/prometheus.git
synced 2025-03-05 20:59:13 -08:00
specify the type returned for most of the function that is missing it
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
This commit is contained in:
parent
27bd8fef40
commit
5d29b7b6f7
|
@ -2,7 +2,7 @@ import React from 'react';
|
||||||
|
|
||||||
const PathPrefixContext = React.createContext('');
|
const PathPrefixContext = React.createContext('');
|
||||||
|
|
||||||
function usePathPrefix() {
|
function usePathPrefix(): string {
|
||||||
return React.useContext(PathPrefixContext);
|
return React.useContext(PathPrefixContext);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -17,6 +17,6 @@ export const ThemeContext = React.createContext<ThemeCtx>({
|
||||||
setTheme: (s: themeSetting) => {},
|
setTheme: (s: themeSetting) => {},
|
||||||
});
|
});
|
||||||
|
|
||||||
export const useTheme = () => {
|
export const useTheme = (): ThemeCtx => {
|
||||||
return React.useContext(ThemeContext);
|
return React.useContext(ThemeContext);
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
|
|
||||||
// A hook to determine whether a CSS media query finds any matches.
|
// A hook to determine whether a CSS media query finds any matches.
|
||||||
const useMedia = (query: string) => {
|
const useMedia = (query: string): boolean => {
|
||||||
const mediaQuery = window.matchMedia(query);
|
const mediaQuery = window.matchMedia(query);
|
||||||
const [matches, setMatches] = useState(mediaQuery.matches);
|
const [matches, setMatches] = useState(mediaQuery.matches);
|
||||||
|
|
||||||
|
|
|
@ -37,34 +37,34 @@ class ExpressionInput extends Component<ExpressionInputProps, ExpressionInputSta
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount(): void {
|
||||||
this.setHeight();
|
this.setHeight();
|
||||||
}
|
}
|
||||||
|
|
||||||
setHeight = () => {
|
setHeight = (): void => {
|
||||||
const { offsetHeight, clientHeight, scrollHeight } = this.exprInputRef.current!;
|
const { offsetHeight, clientHeight, scrollHeight } = this.exprInputRef.current!;
|
||||||
const offset = offsetHeight - clientHeight; // Needed in order for the height to be more accurate.
|
const offset = offsetHeight - clientHeight; // Needed in order for the height to be more accurate.
|
||||||
this.setState({ height: scrollHeight + offset });
|
this.setState({ height: scrollHeight + offset });
|
||||||
};
|
};
|
||||||
|
|
||||||
handleInput = () => {
|
handleInput = (): void => {
|
||||||
this.setValue(this.exprInputRef.current!.value);
|
this.setValue(this.exprInputRef.current!.value);
|
||||||
};
|
};
|
||||||
|
|
||||||
setValue = (value: string) => {
|
setValue = (value: string): void => {
|
||||||
const { onExpressionChange } = this.props;
|
const { onExpressionChange } = this.props;
|
||||||
onExpressionChange(value);
|
onExpressionChange(value);
|
||||||
this.setState({ height: 'auto' }, this.setHeight);
|
this.setState({ height: 'auto' }, this.setHeight);
|
||||||
};
|
};
|
||||||
|
|
||||||
componentDidUpdate(prevProps: ExpressionInputProps) {
|
componentDidUpdate(prevProps: ExpressionInputProps): void {
|
||||||
const { value } = this.props;
|
const { value } = this.props;
|
||||||
if (value !== prevProps.value) {
|
if (value !== prevProps.value) {
|
||||||
this.setValue(value);
|
this.setValue(value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
|
handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>): void => {
|
||||||
const { executeQuery } = this.props;
|
const { executeQuery } = this.props;
|
||||||
if (event.key === 'Enter' && !event.shiftKey) {
|
if (event.key === 'Enter' && !event.shiftKey) {
|
||||||
executeQuery();
|
executeQuery();
|
||||||
|
@ -72,7 +72,7 @@ class ExpressionInput extends Component<ExpressionInputProps, ExpressionInputSta
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
getSearchMatches = (input: string, expressions: string[]) => {
|
getSearchMatches = (input: string, expressions: string[]): FuzzyResult[] => {
|
||||||
return fuz.filter(input.replace(/ /g, ''), expressions);
|
return fuz.filter(input.replace(/ /g, ''), expressions);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -84,9 +84,9 @@ class ExpressionInput extends Component<ExpressionInputProps, ExpressionInputSta
|
||||||
};
|
};
|
||||||
let index = 0;
|
let index = 0;
|
||||||
const sections =
|
const sections =
|
||||||
inputValue!.length && this.props.enableAutocomplete
|
inputValue?.length && this.props.enableAutocomplete
|
||||||
? Object.entries(autocompleteSections).reduce((acc, [title, items]) => {
|
? Object.entries(autocompleteSections).reduce((acc, [title, items]) => {
|
||||||
const matches = this.getSearchMatches(inputValue!, items);
|
const matches = this.getSearchMatches(inputValue, items);
|
||||||
return !matches.length
|
return !matches.length
|
||||||
? acc
|
? acc
|
||||||
: [
|
: [
|
||||||
|
@ -131,19 +131,19 @@ class ExpressionInput extends Component<ExpressionInputProps, ExpressionInputSta
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
openMetricsExplorer = () => {
|
openMetricsExplorer = (): void => {
|
||||||
this.setState({
|
this.setState({
|
||||||
showMetricsExplorer: true,
|
showMetricsExplorer: true,
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
updateShowMetricsExplorer = (show: boolean) => {
|
updateShowMetricsExplorer = (show: boolean): void => {
|
||||||
this.setState({
|
this.setState({
|
||||||
showMetricsExplorer: show,
|
showMetricsExplorer: show,
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
insertAtCursor = (value: string) => {
|
insertAtCursor = (value: string): void => {
|
||||||
if (!this.exprInputRef.current) return;
|
if (!this.exprInputRef.current) return;
|
||||||
|
|
||||||
const startPosition = this.exprInputRef.current.selectionStart;
|
const startPosition = this.exprInputRef.current.selectionStart;
|
||||||
|
|
|
@ -102,7 +102,7 @@ class Graph extends PureComponent<GraphProps, GraphState> {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount(): void {
|
||||||
this.plot();
|
this.plot();
|
||||||
|
|
||||||
$(`.graph-${this.props.id}`).bind('plotclick', (event, pos, item) => {
|
$(`.graph-${this.props.id}`).bind('plotclick', (event, pos, item) => {
|
||||||
|
@ -130,7 +130,7 @@ class Graph extends PureComponent<GraphProps, GraphState> {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUnmount() {
|
componentWillUnmount(): void {
|
||||||
this.destroyPlot();
|
this.destroyPlot();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -143,7 +143,7 @@ class Graph extends PureComponent<GraphProps, GraphState> {
|
||||||
this.$chart = $.plot($(this.chartRef.current), data, getOptions(this.props.stacked, this.props.useLocalTime));
|
this.$chart = $.plot($(this.chartRef.current), data, getOptions(this.props.stacked, this.props.useLocalTime));
|
||||||
};
|
};
|
||||||
|
|
||||||
destroyPlot = () => {
|
destroyPlot = (): void => {
|
||||||
if (isPresent(this.$chart)) {
|
if (isPresent(this.$chart)) {
|
||||||
this.$chart.destroy();
|
this.$chart.destroy();
|
||||||
}
|
}
|
||||||
|
@ -151,14 +151,14 @@ class Graph extends PureComponent<GraphProps, GraphState> {
|
||||||
|
|
||||||
plotSetAndDraw(
|
plotSetAndDraw(
|
||||||
data: (GraphSeries | GraphExemplar)[] = [...this.state.chartData.series, ...this.state.chartData.exemplars]
|
data: (GraphSeries | GraphExemplar)[] = [...this.state.chartData.series, ...this.state.chartData.exemplars]
|
||||||
) {
|
): void {
|
||||||
if (isPresent(this.$chart)) {
|
if (isPresent(this.$chart)) {
|
||||||
this.$chart.setData(data);
|
this.$chart.setData(data);
|
||||||
this.$chart.draw();
|
this.$chart.draw();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
handleSeriesSelect = (selected: number[], selectedIndex: number) => {
|
handleSeriesSelect = (selected: number[], selectedIndex: number): void => {
|
||||||
const { chartData } = this.state;
|
const { chartData } = this.state;
|
||||||
this.plot(
|
this.plot(
|
||||||
this.selectedSeriesIndexes.length === 1 && this.selectedSeriesIndexes.includes(selectedIndex)
|
this.selectedSeriesIndexes.length === 1 && this.selectedSeriesIndexes.includes(selectedIndex)
|
||||||
|
@ -181,7 +181,7 @@ class Graph extends PureComponent<GraphProps, GraphState> {
|
||||||
this.selectedSeriesIndexes = selected;
|
this.selectedSeriesIndexes = selected;
|
||||||
};
|
};
|
||||||
|
|
||||||
handleSeriesHover = (index: number) => () => {
|
handleSeriesHover = (index: number) => (): void => {
|
||||||
if (this.rafID) {
|
if (this.rafID) {
|
||||||
cancelAnimationFrame(this.rafID);
|
cancelAnimationFrame(this.rafID);
|
||||||
}
|
}
|
||||||
|
@ -193,12 +193,12 @@ class Graph extends PureComponent<GraphProps, GraphState> {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
handleLegendMouseOut = () => {
|
handleLegendMouseOut = (): void => {
|
||||||
cancelAnimationFrame(this.rafID);
|
cancelAnimationFrame(this.rafID);
|
||||||
this.plotSetAndDraw();
|
this.plotSetAndDraw();
|
||||||
};
|
};
|
||||||
|
|
||||||
handleResize = () => {
|
handleResize = (): void => {
|
||||||
if (isPresent(this.$chart)) {
|
if (isPresent(this.$chart)) {
|
||||||
this.plot(this.$chart.getData() as (GraphSeries | GraphExemplar)[]);
|
this.plot(this.$chart.getData() as (GraphSeries | GraphExemplar)[]);
|
||||||
}
|
}
|
||||||
|
|
|
@ -84,7 +84,7 @@ class Panel extends Component<PanelProps, PanelState> {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidUpdate({ options: prevOpts }: PanelProps) {
|
componentDidUpdate({ options: prevOpts }: PanelProps): void {
|
||||||
const { endTime, range, resolution, showExemplars, type } = this.props.options;
|
const { endTime, range, resolution, showExemplars, type } = this.props.options;
|
||||||
if (
|
if (
|
||||||
prevOpts.endTime !== endTime ||
|
prevOpts.endTime !== endTime ||
|
||||||
|
@ -97,7 +97,7 @@ class Panel extends Component<PanelProps, PanelState> {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount(): void {
|
||||||
this.executeQuery();
|
this.executeQuery();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -230,15 +230,15 @@ class Panel extends Component<PanelProps, PanelState> {
|
||||||
return this.props.options.endTime;
|
return this.props.options.endTime;
|
||||||
};
|
};
|
||||||
|
|
||||||
handleChangeEndTime = (endTime: number | null) => {
|
handleChangeEndTime = (endTime: number | null): void => {
|
||||||
this.setOptions({ endTime: endTime });
|
this.setOptions({ endTime: endTime });
|
||||||
};
|
};
|
||||||
|
|
||||||
handleChangeResolution = (resolution: number | null) => {
|
handleChangeResolution = (resolution: number | null): void => {
|
||||||
this.setOptions({ resolution: resolution });
|
this.setOptions({ resolution: resolution });
|
||||||
};
|
};
|
||||||
|
|
||||||
handleChangeType = (type: PanelType) => {
|
handleChangeType = (type: PanelType): void => {
|
||||||
if (this.props.options.type === type) {
|
if (this.props.options.type === type) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
@ -247,15 +247,15 @@ class Panel extends Component<PanelProps, PanelState> {
|
||||||
this.setOptions({ type: type });
|
this.setOptions({ type: type });
|
||||||
};
|
};
|
||||||
|
|
||||||
handleChangeStacking = (stacked: boolean) => {
|
handleChangeStacking = (stacked: boolean): void => {
|
||||||
this.setOptions({ stacked: stacked });
|
this.setOptions({ stacked: stacked });
|
||||||
};
|
};
|
||||||
|
|
||||||
handleChangeShowExemplars = (show: boolean) => {
|
handleChangeShowExemplars = (show: boolean): void => {
|
||||||
this.setOptions({ showExemplars: show });
|
this.setOptions({ showExemplars: show });
|
||||||
};
|
};
|
||||||
|
|
||||||
handleTimeRangeSelection = (startTime: number, endTime: number) => {
|
handleTimeRangeSelection = (startTime: number, endTime: number): void => {
|
||||||
this.setOptions({ range: endTime - startTime, endTime: endTime });
|
this.setOptions({ range: endTime - startTime, endTime: endTime });
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -39,7 +39,7 @@ class TimeInput extends Component<TimeInputProps> {
|
||||||
return this.props.time || moment().valueOf();
|
return this.props.time || moment().valueOf();
|
||||||
};
|
};
|
||||||
|
|
||||||
calcShiftRange = () => this.props.range / 2;
|
calcShiftRange = (): number => this.props.range / 2;
|
||||||
|
|
||||||
increaseTime = (): void => {
|
increaseTime = (): void => {
|
||||||
const time = this.getBaseTime() + this.calcShiftRange();
|
const time = this.getBaseTime() + this.calcShiftRange();
|
||||||
|
@ -59,7 +59,7 @@ class TimeInput extends Component<TimeInputProps> {
|
||||||
return this.props.useLocalTime ? moment.tz.guess() : 'UTC';
|
return this.props.useLocalTime ? moment.tz.guess() : 'UTC';
|
||||||
};
|
};
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount(): void {
|
||||||
this.$time = $(this.timeInputRef.current!);
|
this.$time = $(this.timeInputRef.current!);
|
||||||
|
|
||||||
this.$time.datetimepicker({
|
this.$time.datetimepicker({
|
||||||
|
@ -87,11 +87,11 @@ class TimeInput extends Component<TimeInputProps> {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUnmount() {
|
componentWillUnmount(): void {
|
||||||
this.$time.datetimepicker('destroy');
|
this.$time.datetimepicker('destroy');
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidUpdate(prevProps: TimeInputProps) {
|
componentDidUpdate(prevProps: TimeInputProps): void {
|
||||||
const { time, useLocalTime } = this.props;
|
const { time, useLocalTime } = this.props;
|
||||||
if (prevProps.time !== time) {
|
if (prevProps.time !== time) {
|
||||||
this.$time.datetimepicker('date', time ? moment(time) : null);
|
this.$time.datetimepicker('date', time ? moment(time) : null);
|
||||||
|
|
|
@ -48,7 +48,7 @@ export const processSummary = (activeTargets: Target[], droppedTargets: DroppedT
|
||||||
return targets;
|
return targets;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const processTargets = (activeTargets: Target[], droppedTargets: DroppedTarget[]) => {
|
export const processTargets = (activeTargets: Target[], droppedTargets: DroppedTarget[]): Record<string, TargetLabels[]> => {
|
||||||
const labels: Record<string, TargetLabels[]> = {};
|
const labels: Record<string, TargetLabels[]> = {};
|
||||||
|
|
||||||
for (const target of activeTargets) {
|
for (const target of activeTargets) {
|
||||||
|
|
|
@ -3,11 +3,11 @@ import moment from 'moment-timezone';
|
||||||
import { PanelOptions, PanelType, PanelDefaultOptions } from '../pages/graph/Panel';
|
import { PanelOptions, PanelType, PanelDefaultOptions } from '../pages/graph/Panel';
|
||||||
import { PanelMeta } from '../pages/graph/PanelList';
|
import { PanelMeta } from '../pages/graph/PanelList';
|
||||||
|
|
||||||
export const generateID = () => {
|
export const generateID = (): string => {
|
||||||
return `_${Math.random().toString(36).substr(2, 9)}`;
|
return `_${Math.random().toString(36).substr(2, 9)}`;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const byEmptyString = (p: string) => p.length > 0;
|
export const byEmptyString = (p: string): boolean => p.length > 0;
|
||||||
|
|
||||||
export const isPresent = <T>(obj: T): obj is NonNullable<T> => obj !== null && obj !== undefined;
|
export const isPresent = <T>(obj: T): obj is NonNullable<T> => obj !== null && obj !== undefined;
|
||||||
|
|
||||||
|
@ -26,7 +26,7 @@ export const escapeHTML = (str: string): string => {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
export const metricToSeriesName = (labels: { [key: string]: string }) => {
|
export const metricToSeriesName = (labels: { [key: string]: string }): string => {
|
||||||
if (labels === null) {
|
if (labels === null) {
|
||||||
return 'scalar';
|
return 'scalar';
|
||||||
}
|
}
|
||||||
|
@ -237,11 +237,11 @@ export const toQueryString = ({ key, options }: PanelMeta) => {
|
||||||
return urlParams.filter(byEmptyString).join('&');
|
return urlParams.filter(byEmptyString).join('&');
|
||||||
};
|
};
|
||||||
|
|
||||||
export const encodePanelOptionsToQueryString = (panels: PanelMeta[]) => {
|
export const encodePanelOptionsToQueryString = (panels: PanelMeta[]): string => {
|
||||||
return `?${panels.map(toQueryString).join('&')}`;
|
return `?${panels.map(toQueryString).join('&')}`;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const createExpressionLink = (expr: string) => {
|
export const createExpressionLink = (expr: string): string => {
|
||||||
return `../graph?g0.expr=${encodeURIComponent(expr)}&g0.tab=1&g0.stacked=0&g0.show_exemplars=0.g0.range_input=1h.`;
|
return `../graph?g0.expr=${encodeURIComponent(expr)}&g0.tab=1&g0.stacked=0&g0.show_exemplars=0.g0.range_input=1h.`;
|
||||||
};
|
};
|
||||||
export const mapObjEntries = <T, key extends keyof T, Z>(
|
export const mapObjEntries = <T, key extends keyof T, Z>(
|
||||||
|
@ -256,7 +256,7 @@ export const callAll =
|
||||||
fns.filter(Boolean).forEach((fn) => fn.apply(null, args));
|
fns.filter(Boolean).forEach((fn) => fn.apply(null, args));
|
||||||
};
|
};
|
||||||
|
|
||||||
export const parsePrometheusFloat = (value: string) => {
|
export const parsePrometheusFloat = (value: string): number | string => {
|
||||||
if (isNaN(Number(value))) {
|
if (isNaN(Number(value))) {
|
||||||
return value;
|
return value;
|
||||||
} else {
|
} else {
|
||||||
|
|
Loading…
Reference in a new issue