diff --git a/web/ui/react-app/src/pages/graph/PanelList.tsx b/web/ui/react-app/src/pages/graph/PanelList.tsx
index 8a97144f0..026e12329 100644
--- a/web/ui/react-app/src/pages/graph/PanelList.tsx
+++ b/web/ui/react-app/src/pages/graph/PanelList.tsx
@@ -11,7 +11,7 @@ import { API_PATH } from '../../constants/constants';
export type PanelMeta = { key: string; options: PanelOptions; id: string };
-export const updateURL = (nextPanels: PanelMeta[]) => {
+export const updateURL = (nextPanels: PanelMeta[]): void => {
const query = encodePanelOptionsToQueryString(nextPanels);
window.history.pushState({}, '', query);
};
@@ -91,8 +91,8 @@ export const PanelListContent: FC
= ({
key={id}
id={id}
options={options}
- onOptionsChanged={opts =>
- callAll(setPanels, updateURL)(panels.map(p => (id === p.id ? { ...p, options: opts } : p)))
+ onOptionsChanged={(opts) =>
+ callAll(setPanels, updateURL)(panels.map((p) => (id === p.id ? { ...p, options: opts } : p)))
}
removePanel={() =>
callAll(
diff --git a/web/ui/react-app/src/pages/graph/QueryStatsView.tsx b/web/ui/react-app/src/pages/graph/QueryStatsView.tsx
index a125e451b..8bfd91c74 100644
--- a/web/ui/react-app/src/pages/graph/QueryStatsView.tsx
+++ b/web/ui/react-app/src/pages/graph/QueryStatsView.tsx
@@ -6,7 +6,7 @@ export interface QueryStats {
resultSeries: number;
}
-const QueryStatsView: FC = props => {
+const QueryStatsView: FC = (props) => {
const { loadTime, resolution, resultSeries } = props;
return (
diff --git a/web/ui/react-app/src/pages/graph/SeriesName.test.tsx b/web/ui/react-app/src/pages/graph/SeriesName.test.tsx
index 4eaf68105..f75cf9603 100755
--- a/web/ui/react-app/src/pages/graph/SeriesName.test.tsx
+++ b/web/ui/react-app/src/pages/graph/SeriesName.test.tsx
@@ -55,7 +55,7 @@ describe('SeriesName', () => {
const child = seriesName.childAt(i);
const text = child
.children()
- .map(ch => ch.text())
+ .map((ch) => ch.text())
.join('');
switch (child.children().length) {
case 1:
diff --git a/web/ui/react-app/src/pages/graph/SeriesName.tsx b/web/ui/react-app/src/pages/graph/SeriesName.tsx
index 0fb8bd285..d76a780ba 100644
--- a/web/ui/react-app/src/pages/graph/SeriesName.tsx
+++ b/web/ui/react-app/src/pages/graph/SeriesName.tsx
@@ -29,7 +29,7 @@ const SeriesName: FC = ({ labels, format }) => {
return (
-
{labels!.__name__ || ''}
+
{labels ? labels.__name__ : ''}
{'{'}
{labelNodes}
{'}'}
@@ -46,7 +46,7 @@ const SeriesName: FC
= ({ labels, format }) => {
}
// Return a simple text node. This is much faster to scroll through
// for longer lists (hundreds of items).
- return <>{metricToSeriesName(labels!)};
+ return <>{metricToSeriesName(labels)};
};
export default SeriesName;
diff --git a/web/ui/react-app/src/pages/graph/TimeInput.test.tsx b/web/ui/react-app/src/pages/graph/TimeInput.test.tsx
index 9c59c8014..b92556f58 100644
--- a/web/ui/react-app/src/pages/graph/TimeInput.test.tsx
+++ b/web/ui/react-app/src/pages/graph/TimeInput.test.tsx
@@ -39,11 +39,11 @@ describe('TimeInput', () => {
title: 'Increase time',
icon: faChevronRight,
},
- ].forEach(button => {
+ ].forEach((button) => {
const onChangeTime = sinon.spy();
const timeInput = shallow();
- const addon = timeInput.find(InputGroupAddon).filterWhere(addon => addon.prop('addonType') === button.position);
- const btn = addon.find(Button).filterWhere(btn => btn.prop('title') === button.title);
+ const addon = timeInput.find(InputGroupAddon).filterWhere((addon) => addon.prop('addonType') === button.position);
+ const btn = addon.find(Button).filterWhere((btn) => btn.prop('title') === button.title);
const icon = btn.find(FontAwesomeIcon);
expect(icon.prop('icon')).toEqual(button.icon);
expect(icon.prop('fixedWidth')).toBe(true);
diff --git a/web/ui/react-app/src/pages/graph/TimeInput.tsx b/web/ui/react-app/src/pages/graph/TimeInput.tsx
index 4a0e4dd1e..e857e2645 100644
--- a/web/ui/react-app/src/pages/graph/TimeInput.tsx
+++ b/web/ui/react-app/src/pages/graph/TimeInput.tsx
@@ -1,6 +1,6 @@
import $ from 'jquery';
import React, { Component } from 'react';
-import { Button, InputGroup, InputGroupAddon, Input } from 'reactstrap';
+import { Button, Input, InputGroup, InputGroupAddon } from 'reactstrap';
import moment from 'moment-timezone';
@@ -11,11 +11,11 @@ import '../../../node_modules/tempusdominus-bootstrap-4/build/css/tempusdominus-
import { dom, library } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
+ faArrowDown,
+ faArrowUp,
+ faCalendarCheck,
faChevronLeft,
faChevronRight,
- faCalendarCheck,
- faArrowUp,
- faArrowDown,
faTimes,
} from '@fortawesome/free-solid-svg-icons';
@@ -33,13 +33,14 @@ interface TimeInputProps {
class TimeInput extends Component {
private timeInputRef = React.createRef();
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
private $time: any = null;
getBaseTime = (): number => {
return this.props.time || moment().valueOf();
};
- calcShiftRange = () => this.props.range / 2;
+ calcShiftRange = (): number => this.props.range / 2;
increaseTime = (): void => {
const time = this.getBaseTime() + this.calcShiftRange();
@@ -59,8 +60,11 @@ class TimeInput extends Component {
return this.props.useLocalTime ? moment.tz.guess() : 'UTC';
};
- componentDidMount() {
- this.$time = $(this.timeInputRef.current!);
+ componentDidMount(): void {
+ if (!this.timeInputRef.current) {
+ return;
+ }
+ this.$time = $(this.timeInputRef.current);
this.$time.datetimepicker({
icons: {
@@ -78,20 +82,21 @@ class TimeInput extends Component {
defaultDate: this.props.time,
});
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
this.$time.on('change.datetimepicker', (e: any) => {
// The end time can also be set by dragging a section on the graph,
// and that value will have decimal places.
- if (e.date && e.date.valueOf() !== Math.trunc(this.props.time?.valueOf()!)) {
+ if (e.date && e.date.valueOf() !== Math.trunc(this.props.time?.valueOf() || NaN)) {
this.props.onChangeTime(e.date.valueOf());
}
});
}
- componentWillUnmount() {
+ componentWillUnmount(): void {
this.$time.datetimepicker('destroy');
}
- componentDidUpdate(prevProps: TimeInputProps) {
+ componentDidUpdate(prevProps: TimeInputProps): void {
const { time, useLocalTime } = this.props;
if (prevProps.time !== time) {
this.$time.datetimepicker('date', time ? moment(time) : null);
@@ -101,7 +106,7 @@ class TimeInput extends Component {
}
}
- render() {
+ render(): JSX.Element {
return (
@@ -115,7 +120,7 @@ class TimeInput extends Component {
innerRef={this.timeInputRef}
onFocus={() => this.$time.datetimepicker('show')}
onBlur={() => this.$time.datetimepicker('hide')}
- onKeyDown={e => ['Escape', 'Enter'].includes(e.key) && this.$time.datetimepicker('hide')}
+ onKeyDown={(e) => ['Escape', 'Enter'].includes(e.key) && this.$time.datetimepicker('hide')}
/>
{/* CAUTION: While the datetimepicker also has an option to show a 'clear' button,
diff --git a/web/ui/react-app/src/pages/rules/RulesContent.tsx b/web/ui/react-app/src/pages/rules/RulesContent.tsx
index 1d08c3d91..e7adfee39 100644
--- a/web/ui/react-app/src/pages/rules/RulesContent.tsx
+++ b/web/ui/react-app/src/pages/rules/RulesContent.tsx
@@ -22,7 +22,7 @@ export interface RulesMap {
groups: RuleGroup[];
}
-const GraphExpressionLink: FC<{ expr: string; text: string; title: string }> = props => {
+const GraphExpressionLink: FC<{ expr: string; text: string; title: string }> = (props) => {
return (
<>
{props.title}:
diff --git a/web/ui/react-app/src/pages/serviceDiscovery/Services.tsx b/web/ui/react-app/src/pages/serviceDiscovery/Services.tsx
index a6d35852a..28d6db6dc 100644
--- a/web/ui/react-app/src/pages/serviceDiscovery/Services.tsx
+++ b/web/ui/react-app/src/pages/serviceDiscovery/Services.tsx
@@ -1,7 +1,7 @@
import React, { FC } from 'react';
import { useFetch } from '../../hooks/useFetch';
import { LabelsTable } from './LabelsTable';
-import { Target, Labels, DroppedTarget } from '../targets/target';
+import { DroppedTarget, Labels, Target } from '../targets/target';
import { withStatusIndicator } from '../../components/withStatusIndicator';
import { mapObjEntries } from '../../utils';
@@ -19,7 +19,10 @@ export interface TargetLabels {
isDropped: boolean;
}
-export const processSummary = (activeTargets: Target[], droppedTargets: DroppedTarget[]) => {
+export const processSummary = (
+ activeTargets: Target[],
+ droppedTargets: DroppedTarget[]
+): Record => {
const targets: Record = {};
// Get targets of each type along with the total and active end points
@@ -48,7 +51,7 @@ export const processSummary = (activeTargets: Target[], droppedTargets: DroppedT
return targets;
};
-export const processTargets = (activeTargets: Target[], droppedTargets: DroppedTarget[]) => {
+export const processTargets = (activeTargets: Target[], droppedTargets: DroppedTarget[]): Record => {
const labels: Record = {};
for (const target of activeTargets) {
diff --git a/web/ui/react-app/src/pages/status/Status.tsx b/web/ui/react-app/src/pages/status/Status.tsx
index 17f7ed7d8..20d2e9e99 100644
--- a/web/ui/react-app/src/pages/status/Status.tsx
+++ b/web/ui/react-app/src/pages/status/Status.tsx
@@ -12,6 +12,7 @@ interface StatusPageProps {
export const statusConfig: Record<
string,
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
{ title?: string; customizeValue?: (v: any, key: string) => any; customRow?: boolean; skip?: boolean }
> = {
startTime: { title: 'Start time', customizeValue: (v: string) => new Date(v).toUTCString() },
@@ -57,7 +58,7 @@ export const StatusContent: FC = ({ data, title }) => {
{Object.entries(data).map(([k, v]) => {
- const { title = k, customizeValue = (val: any) => val, customRow, skip } = statusConfig[k] || {};
+ const { title = k, customizeValue = (val: string) => val, customRow, skip } = statusConfig[k] || {};
if (skip) {
return null;
}
diff --git a/web/ui/react-app/src/pages/targets/EndpointLink.test.tsx b/web/ui/react-app/src/pages/targets/EndpointLink.test.tsx
index e48efa64d..6ec682942 100644
--- a/web/ui/react-app/src/pages/targets/EndpointLink.test.tsx
+++ b/web/ui/react-app/src/pages/targets/EndpointLink.test.tsx
@@ -24,16 +24,16 @@ describe('EndpointLink', () => {
expect(anchor.children().text()).toEqual('http://100.99.128.71:9115/probe');
expect(endpointLink.find('br')).toHaveLength(1);
expect(badges).toHaveLength(2);
- const moduleLabel = badges.filterWhere(badge => badge.children().text() === 'module="http_2xx"');
+ const moduleLabel = badges.filterWhere((badge) => badge.children().text() === 'module="http_2xx"');
expect(moduleLabel.length).toEqual(1);
- const targetLabel = badges.filterWhere(badge => badge.children().text() === 'target="http://some-service"');
+ const targetLabel = badges.filterWhere((badge) => badge.children().text() === 'target="http://some-service"');
expect(targetLabel.length).toEqual(1);
});
it('renders an alert if url is invalid', () => {
const endpointLink = shallow();
const err = endpointLink.find(Alert);
- expect(err.render().text()).toEqual('Error: Invalid URL');
+ expect(err.render().text()).toEqual('Error: Invalid URL: afdsacas');
});
it('handles params with multiple values correctly', () => {
diff --git a/web/ui/react-app/src/pages/targets/Filter.test.tsx b/web/ui/react-app/src/pages/targets/Filter.test.tsx
index dc2451137..620866f76 100644
--- a/web/ui/react-app/src/pages/targets/Filter.test.tsx
+++ b/web/ui/react-app/src/pages/targets/Filter.test.tsx
@@ -15,7 +15,7 @@ describe('Filter', () => {
showUnhealthy: true,
};
let setFilter: SinonSpy;
- let filterWrapper: ShallowWrapper, Component<{}, {}, Component>>;
+ let filterWrapper: ShallowWrapper, Component>;
beforeEach(() => {
setFilter = sinon.spy();
setExpaned = sinon.spy();
diff --git a/web/ui/react-app/src/pages/targets/ScrapePoolList.test.tsx b/web/ui/react-app/src/pages/targets/ScrapePoolList.test.tsx
index b1b296235..dc400de99 100644
--- a/web/ui/react-app/src/pages/targets/ScrapePoolList.test.tsx
+++ b/web/ui/react-app/src/pages/targets/ScrapePoolList.test.tsx
@@ -50,7 +50,7 @@ describe('ScrapePoolList', () => {
expect(panels).toHaveLength(3);
const activeTargets: Target[] = sampleApiResponse.data.activeTargets as Target[];
activeTargets.forEach(({ scrapePool }: Target) => {
- const panel = scrapePoolList.find(ScrapePoolPanel).filterWhere(panel => panel.prop('scrapePool') === scrapePool);
+ const panel = scrapePoolList.find(ScrapePoolPanel).filterWhere((panel) => panel.prop('scrapePool') === scrapePool);
expect(panel).toHaveLength(1);
});
});
diff --git a/web/ui/react-app/src/pages/targets/ScrapePoolList.tsx b/web/ui/react-app/src/pages/targets/ScrapePoolList.tsx
index 72868f741..a5f218363 100644
--- a/web/ui/react-app/src/pages/targets/ScrapePoolList.tsx
+++ b/web/ui/react-app/src/pages/targets/ScrapePoolList.tsx
@@ -34,12 +34,12 @@ export const ScrapePoolContent: FC = ({ activeTargets }) =>
<>
{Object.keys(targetGroups)
- .filter(scrapePool => {
+ .filter((scrapePool) => {
const targetGroup = targetGroups[scrapePool];
const isHealthy = targetGroup.upCount === targetGroup.targets.length;
return (isHealthy && showHealthy) || (!isHealthy && showUnhealthy);
})
- .map(scrapePool => (
+ .map((scrapePool) => (
{
const scrapePoolPanel = shallow();
it('renders a container', () => {
- const div = scrapePoolPanel.find('div').filterWhere(elem => elem.hasClass('container'));
+ const div = scrapePoolPanel.find('div').filterWhere((elem) => elem.hasClass('container'));
expect(div).toHaveLength(1);
});
@@ -79,7 +79,7 @@ describe('ScrapePoolPanel', () => {
const headers = table.find('th');
expect(table).toHaveLength(1);
expect(headers).toHaveLength(6);
- columns.forEach(col => {
+ columns.forEach((col) => {
expect(headers.contains(col));
});
});
@@ -97,7 +97,7 @@ describe('ScrapePoolPanel', () => {
});
it('renders a badge for health', () => {
- const td = row.find('td').filterWhere(elem => Boolean(elem.hasClass('state')));
+ const td = row.find('td').filterWhere((elem) => Boolean(elem.hasClass('state')));
const badge = td.find(Badge);
expect(badge).toHaveLength(1);
expect(badge.prop('color')).toEqual(getColor(health));
@@ -112,17 +112,17 @@ describe('ScrapePoolPanel', () => {
});
it('renders last scrape time', () => {
- const lastScrapeCell = row.find('td').filterWhere(elem => Boolean(elem.hasClass('last-scrape')));
+ const lastScrapeCell = row.find('td').filterWhere((elem) => Boolean(elem.hasClass('last-scrape')));
expect(lastScrapeCell).toHaveLength(1);
});
it('renders last scrape duration', () => {
- const lastScrapeCell = row.find('td').filterWhere(elem => Boolean(elem.hasClass('scrape-duration')));
+ const lastScrapeCell = row.find('td').filterWhere((elem) => Boolean(elem.hasClass('scrape-duration')));
expect(lastScrapeCell).toHaveLength(1);
});
it('renders a badge for Errors', () => {
- const td = row.find('td').filterWhere(elem => Boolean(elem.hasClass('errors')));
+ const td = row.find('td').filterWhere((elem) => Boolean(elem.hasClass('errors')));
const badge = td.find(Badge);
expect(badge).toHaveLength(lastError ? 1 : 0);
if (lastError) {
diff --git a/web/ui/react-app/src/pages/targets/ScrapePoolPanel.tsx b/web/ui/react-app/src/pages/targets/ScrapePoolPanel.tsx
index 246da42e3..35ff99eb2 100644
--- a/web/ui/react-app/src/pages/targets/ScrapePoolPanel.tsx
+++ b/web/ui/react-app/src/pages/targets/ScrapePoolPanel.tsx
@@ -38,7 +38,7 @@ const ScrapePoolPanel: FC = ({ scrapePool, targetGroup, expanded, to
- {columns.map(column => (
+ {columns.map((column) => (
| {column} |
))}
diff --git a/web/ui/react-app/src/pages/targets/TargetLabels.test.tsx b/web/ui/react-app/src/pages/targets/TargetLabels.test.tsx
index 1f7d56dc4..3ebe34f64 100644
--- a/web/ui/react-app/src/pages/targets/TargetLabels.test.tsx
+++ b/web/ui/react-app/src/pages/targets/TargetLabels.test.tsx
@@ -23,7 +23,7 @@ describe('targetLabels', () => {
const targetLabels = shallow();
it('renders a div of series labels', () => {
- const div = targetLabels.find('div').filterWhere(elem => elem.hasClass('series-labels-container'));
+ const div = targetLabels.find('div').filterWhere((elem) => elem.hasClass('series-labels-container'));
expect(div).toHaveLength(1);
expect(div.prop('id')).toEqual('series-labels-cortex/node-exporter_group/0-1');
});
@@ -33,7 +33,7 @@ describe('targetLabels', () => {
Object.keys(l).forEach((labelName: string): void => {
const badge = targetLabels
.find(Badge)
- .filterWhere(badge => badge.children().text() === `${labelName}="${l[labelName]}"`);
+ .filterWhere((badge) => badge.children().text() === `${labelName}="${l[labelName]}"`);
expect(badge).toHaveLength(1);
});
expect(targetLabels.find(Badge)).toHaveLength(3);
diff --git a/web/ui/react-app/src/pages/targets/TargetLabels.tsx b/web/ui/react-app/src/pages/targets/TargetLabels.tsx
index fdc7ae070..2664cda96 100644
--- a/web/ui/react-app/src/pages/targets/TargetLabels.tsx
+++ b/web/ui/react-app/src/pages/targets/TargetLabels.tsx
@@ -14,7 +14,7 @@ export interface TargetLabelsProps {
scrapePool: string;
}
-const formatLabels = (labels: Labels): string[] => Object.keys(labels).map(key => `${key}="${labels[key]}"`);
+const formatLabels = (labels: Labels): string[] => Object.keys(labels).map((key) => `${key}="${labels[key]}"`);
const TargetLabels: FC = ({ discoveredLabels, labels, idx, scrapePool }) => {
const [tooltipOpen, setTooltipOpen] = useState(false);
@@ -25,7 +25,7 @@ const TargetLabels: FC = ({ discoveredLabels, labels, idx, sc
return (
<>
- {Object.keys(labels).map(labelName => {
+ {Object.keys(labels).map((labelName) => {
return (
{`${labelName}="${labels[labelName]}"`}
diff --git a/web/ui/react-app/src/pages/targets/__testdata__/testdata.ts b/web/ui/react-app/src/pages/targets/__testdata__/testdata.ts
index b0838b72e..443aca3dc 100644
--- a/web/ui/react-app/src/pages/targets/__testdata__/testdata.ts
+++ b/web/ui/react-app/src/pages/targets/__testdata__/testdata.ts
@@ -1,5 +1,3 @@
-/* eslint @typescript-eslint/camelcase: 0 */
-
import { ScrapePools } from '../target';
export const targetGroups: ScrapePools = Object.freeze({
diff --git a/web/ui/react-app/src/pages/targets/target.test.ts b/web/ui/react-app/src/pages/targets/target.test.ts
index e17ab59e7..4b0b47d13 100644
--- a/web/ui/react-app/src/pages/targets/target.test.ts
+++ b/web/ui/react-app/src/pages/targets/target.test.ts
@@ -1,5 +1,3 @@
-/* eslint @typescript-eslint/camelcase: 0 */
-
import { sampleApiResponse } from './__testdata__/testdata';
import { groupTargets, Target, ScrapePools, getColor } from './target';
@@ -8,7 +6,7 @@ describe('groupTargets', () => {
const targetGroups: ScrapePools = groupTargets(targets);
it('groups a list of targets by scrape job', () => {
- ['blackbox', 'prometheus/test', 'node_exporter'].forEach(scrapePool => {
+ ['blackbox', 'prometheus/test', 'node_exporter'].forEach((scrapePool) => {
expect(Object.keys(targetGroups)).toContain(scrapePool);
});
Object.keys(targetGroups).forEach((scrapePool: string): void => {
diff --git a/web/ui/react-app/src/pages/tsdbStatus/TSDBStatus.test.tsx b/web/ui/react-app/src/pages/tsdbStatus/TSDBStatus.test.tsx
index d6d41708f..b7c683115 100644
--- a/web/ui/react-app/src/pages/tsdbStatus/TSDBStatus.test.tsx
+++ b/web/ui/react-app/src/pages/tsdbStatus/TSDBStatus.test.tsx
@@ -121,11 +121,7 @@ describe('TSDB Stats', () => {
credentials: 'same-origin',
});
- const headStats = page
- .find(Table)
- .at(0)
- .find('tbody')
- .find('td');
+ const headStats = page.find(Table).at(0).find('tbody').find('td');
['508', '937', '1234', '2020-06-07T08:00:00.000Z (1591516800000)', '2020-08-31T18:00:00.143Z (1598896800143)'].forEach(
(value, i) => {
expect(headStats.at(i).text()).toEqual(value);
@@ -170,11 +166,7 @@ describe('TSDB Stats', () => {
expect(page.find('h2').text()).toEqual('TSDB Status');
- const headStats = page
- .find(Table)
- .at(0)
- .find('tbody')
- .find('td');
+ const headStats = page.find(Table).at(0).find('tbody').find('td');
['0', '0', '0', 'No datapoints yet', 'No datapoints yet'].forEach((value, i) => {
expect(headStats.at(i).text()).toEqual(value);
});
@@ -199,11 +191,7 @@ describe('TSDB Stats', () => {
expect(page.find('h2').text()).toEqual('TSDB Status');
- const headStats = page
- .find(Table)
- .at(0)
- .find('tbody')
- .find('td');
+ const headStats = page.find(Table).at(0).find('tbody').find('td');
['1', '0', '0', 'Error parsing time (9223372036854776000)', 'Error parsing time (-9223372036854776000)'].forEach(
(value, i) => {
expect(headStats.at(i).text()).toEqual(value);
diff --git a/web/ui/react-app/src/setupTests.ts b/web/ui/react-app/src/setupTests.ts
index 4a62858cc..ac65735bb 100644
--- a/web/ui/react-app/src/setupTests.ts
+++ b/web/ui/react-app/src/setupTests.ts
@@ -11,12 +11,12 @@ customGlobal.fetchMock = customGlobal.fetch;
// CodeMirror in the expression input requires this DOM API. When we upgrade react-scripts
// and the associated Jest deps, hopefully this won't be needed anymore.
-document.getSelection = function() {
+document.getSelection = function () {
return {
- addRange: function() {
+ addRange: function () {
return;
},
- removeAllRanges: function() {
+ removeAllRanges: function () {
return;
},
};
diff --git a/web/ui/react-app/src/types/index.d.ts b/web/ui/react-app/src/types/index.d.ts
index c809c1d90..7033555b2 100644
--- a/web/ui/react-app/src/types/index.d.ts
+++ b/web/ui/react-app/src/types/index.d.ts
@@ -1,9 +1,7 @@
declare namespace jquery.flot {
- // eslint-disable-next-line @typescript-eslint/class-name-casing
interface plot extends jquery.flot.plot {
destroy: () => void;
}
- // eslint-disable-next-line @typescript-eslint/class-name-casing
interface plotOptions extends jquery.flot.plotOptions {
tooltip: {
show?: boolean;
diff --git a/web/ui/react-app/src/utils/index.ts b/web/ui/react-app/src/utils/index.ts
index a452cd266..b01ce840e 100644
--- a/web/ui/react-app/src/utils/index.ts
+++ b/web/ui/react-app/src/utils/index.ts
@@ -3,13 +3,11 @@ import moment from 'moment-timezone';
import { PanelOptions, PanelType, PanelDefaultOptions } from '../pages/graph/Panel';
import { PanelMeta } from '../pages/graph/PanelList';
-export const generateID = () => {
- return `_${Math.random()
- .toString(36)
- .substr(2, 9)}`;
+export const generateID = (): string => {
+ 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 = (obj: T): obj is NonNullable => obj !== null && obj !== undefined;
@@ -23,12 +21,12 @@ export const escapeHTML = (str: string): string => {
'/': '/',
};
- return String(str).replace(/[&<>"'/]/g, function(s) {
+ return String(str).replace(/[&<>"'/]/g, function (s) {
return entityMap[s];
});
};
-export const metricToSeriesName = (labels: { [key: string]: string }) => {
+export const metricToSeriesName = (labels: { [key: string]: string }): string => {
if (labels === null) {
return 'scalar';
}
@@ -219,11 +217,13 @@ export const parseOption = (param: string): Partial => {
return {};
};
-export const formatParam = (key: string) => (paramName: string, value: number | string | boolean) => {
- return `g${key}.${paramName}=${encodeURIComponent(value)}`;
-};
+export const formatParam =
+ (key: string) =>
+ (paramName: string, value: number | string | boolean): string => {
+ return `g${key}.${paramName}=${encodeURIComponent(value)}`;
+ };
-export const toQueryString = ({ key, options }: PanelMeta) => {
+export const toQueryString = ({ key, options }: PanelMeta): string => {
const formatWithKey = formatParam(key);
const { expr, type, stacked, range, endTime, resolution, showExemplars } = options;
const time = isPresent(endTime) ? formatTime(endTime) : false;
@@ -239,24 +239,30 @@ export const toQueryString = ({ key, options }: PanelMeta) => {
return urlParams.filter(byEmptyString).join('&');
};
-export const encodePanelOptionsToQueryString = (panels: PanelMeta[]) => {
+export const encodePanelOptionsToQueryString = (panels: PanelMeta[]): string => {
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.`;
};
export const mapObjEntries = (
o: T,
cb: ([k, v]: [string, T[key]], i: number, arr: [string, T[key]][]) => Z
-) => Object.entries(o).map(cb);
+): Z[] => Object.entries(o).map(cb);
-export const callAll = (...fns: Array<(...args: any) => void>) => (...args: any) => {
- // eslint-disable-next-line prefer-spread
- fns.filter(Boolean).forEach(fn => fn.apply(null, args));
-};
+export const callAll =
+ (
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ ...fns: Array<(...args: any) => void>
+ ) =>
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
+ (...args: any): void => {
+ // eslint-disable-next-line prefer-spread
+ fns.filter(Boolean).forEach((fn) => fn.apply(null, args));
+ };
-export const parsePrometheusFloat = (value: string) => {
+export const parsePrometheusFloat = (value: string): string | number => {
if (isNaN(Number(value))) {
return value;
} else {
diff --git a/web/ui/react-app/src/utils/utils.test.ts b/web/ui/react-app/src/utils/utils.test.ts
index c7fcc635c..99a72d7b8 100644
--- a/web/ui/react-app/src/utils/utils.test.ts
+++ b/web/ui/react-app/src/utils/utils.test.ts
@@ -136,7 +136,7 @@ describe('Utils', () => {
},
];
- tests.forEach(t => {
+ tests.forEach((t) => {
it(t.input, () => {
const d = parseDuration(t.input);
expect(d).toEqual(t.output);
@@ -148,7 +148,7 @@ describe('Utils', () => {
describe('should fail to parse invalid durations', () => {
const tests = ['1', '1y1m1d', '-1w', '1.5d', 'd', ''];
- tests.forEach(t => {
+ tests.forEach((t) => {
it(t, () => {
expect(parseDuration(t)).toBe(null);
});
diff --git a/web/ui/react-app/tsconfig.json b/web/ui/react-app/tsconfig.json
index 15dc86f99..f97ba5e0e 100644
--- a/web/ui/react-app/tsconfig.json
+++ b/web/ui/react-app/tsconfig.json
@@ -17,9 +17,12 @@
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
- "jsx": "preserve"
+ "jsx": "react",
+ "noFallthroughCasesInSwitch": true
},
"include": [
- "src", "test", "react-app-env.d.ts"
+ "src",
+ "test",
+ "react-app-env.d.ts"
]
}