github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

[7.x] [Uptime] Delete uptime eslint rule skip (#50912) (#53916)

Browse source 
* [Uptime] Delete uptime eslint rule skip (#50912)

* Delete uptime eslint rules.

* Update hooks usage to adhere to new eslint rules.

* Delete code accidentally added during rebase.

* WIP trying things.

* Clean up types and hook usage to comply with kibana eslint rules.

* Clean up code.

* Update new useEffect hooks that are missing dependencies.

* Fix edits that broke a page.

* Update handler type to match interface.
This commit is contained in:
Justin Kambic 2020-01-08 17:02:22 -05:00 • committed by GitHub
parent a1d811c796
commit 70870e26dd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 70 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

7
.eslintrc.js
View file

@ -189,13 +189,6 @@ module.exports = {
'react-hooks/exhaustive-deps': 'off',
},
},
{
files: ['x-pack/legacy/plugins/uptime/**/*.{js,ts,tsx}'],
rules: {
'react-hooks/exhaustive-deps': 'off',
'react-hooks/rules-of-hooks': 'off',
},
},
/**
* Files that require Apache 2.0 headers, settings

2
x-pack/legacy/plugins/uptime/public/components/functional/charts/donut_chart.tsx
View file

@ -68,7 +68,7 @@ export const DonutChart = ({ height, down, up, width }: DonutChartProps) => {
)
.attr('fill', (d: any) => color(d.data.key));
}
}, [chartElement.current, upCount, down]);
}, [danger, down, gray, height, upCount, width]);
return (
<EuiFlexGroup alignItems="center" responsive={false}>
<EuiFlexItem grow={false}>

7
x-pack/legacy/plugins/uptime/public/components/functional/charts/snapshot_histogram.tsx
View file

@ -51,6 +51,9 @@ export const SnapshotHistogramComponent: React.FC<Props> = ({
loading = false,
height,
}: Props) => {
const {
colors: { danger, gray },
} = useContext(UptimeSettingsContext);
if (!data || !data.queryResult)
/**
* TODO: the Fragment, EuiTitle, and EuiPanel should be extracted to a dumb component
@ -94,10 +97,6 @@ export const SnapshotHistogramComponent: React.FC<Props> = ({
queryResult: { histogram, interval },
} = data;
const {
colors: { danger, gray },
} = useContext(UptimeSettingsContext);
const downMonitorsId = i18n.translate('xpack.uptime.snapshotHistogram.downMonitorsId', {
defaultMessage: 'Down Monitors',
});

2
x-pack/legacy/plugins/uptime/public/components/functional/kuery_bar/index.tsx
View file

@ -80,7 +80,7 @@ export function KueryBar({ autocomplete }: Props) {
useEffect(() => {
getIndexPattern(basePath, (result: any) => setIndexPattern(toStaticIndexPattern(result)));
setIsLoadingIndexPattern(false);
}, []);
}, [basePath]);
const [getUrlParams, updateUrlParams] = useUrlParams();
const { search: kuery } = getUrlParams();

56
x-pack/legacy/plugins/uptime/public/components/functional/location_map/embeddables/embedded_map.tsx
View file

@ -46,33 +46,7 @@ const EmbeddedPanel = styled.div`
export const EmbeddedMap = ({ upPoints, downPoints }: EmbeddedMapProps) => {
const [embeddable, setEmbeddable] = useState<MapEmbeddable>();
useEffect(() => {
async function setupEmbeddable() {
const mapState = {
layerList: getLayerList(upPoints, downPoints),
title: i18n.MAP_TITLE,
};
// @ts-ignore
const embeddableObject = await factory.createFromState(mapState, input, undefined);
setEmbeddable(embeddableObject);
}
setupEmbeddable();
}, []);
useEffect(() => {
if (embeddable) {
embeddable.setLayerList(getLayerList(upPoints, downPoints));
}
}, [upPoints, downPoints]);
useEffect(() => {
if (embeddableRoot.current && embeddable) {
embeddable.render(embeddableRoot.current);
}
}, [embeddable]);
const embeddableRoot: React.RefObject<HTMLDivElement> = React.createRef();
const factory = start.getEmbeddableFactory(MAP_SAVED_OBJECT_TYPE);
const input = {
@ -90,7 +64,33 @@ export const EmbeddedMap = ({ upPoints, downPoints }: EmbeddedMapProps) => {
hideToolbarOverlay: true,
};
const embeddableRoot: React.RefObject<HTMLDivElement> = React.createRef();
useEffect(() => {
async function setupEmbeddable() {
const mapState = {
layerList: getLayerList(upPoints, downPoints),
title: i18n.MAP_TITLE,
};
// @ts-ignore
const embeddableObject = await factory.createFromState(mapState, input, undefined);
setEmbeddable(embeddableObject);
}
setupEmbeddable();
// we want this effect to execute exactly once after the component mounts
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useEffect(() => {
if (embeddable) {
embeddable.setLayerList(getLayerList(upPoints, downPoints));
}
}, [upPoints, downPoints, embeddable]);
useEffect(() => {
if (embeddableRoot.current && embeddable) {
embeddable.render(embeddableRoot.current);
}
}, [embeddable, embeddableRoot]);
return (
<EmbeddedPanel>

2
x-pack/legacy/plugins/uptime/public/components/functional/monitor_charts.tsx
View file

@ -39,12 +39,12 @@ export const MonitorChartsComponent = ({
dateRangeEnd,
loading,
}: Props) => {
const [getUrlParams] = useUrlParams();
if (data && data.monitorChartsData) {
const {
monitorChartsData: { locationDurationLines },
} = data;
const [getUrlParams] = useUrlParams();
const { absoluteDateRangeStart, absoluteDateRangeEnd } = getUrlParams();
return (

10
x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/monitor_list_drawer.tsx
View file

@ -49,12 +49,16 @@ export function MonitorListDrawerComponent({
loadMonitorDetails,
monitorDetails,
}: MonitorListDrawerProps) {
const monitorId = summary?.monitor_id;
useEffect(() => {
if (monitorId) {
loadMonitorDetails(monitorId);
}
}, [loadMonitorDetails, monitorId]);
if (!summary || !summary.state.checks) {
return null;
}
useEffect(() => {
loadMonitorDetails(summary.monitor_id);
}, []);
const monitorUrl: string | undefined = get(summary.state.url, 'full', undefined);

2
x-pack/legacy/plugins/uptime/public/components/functional/monitor_status_details/monitor_status_details.tsx
View file

@ -28,7 +28,7 @@ export const MonitorStatusDetailsComponent = ({
}: MonitorStatusBarProps) => {
useEffect(() => {
loadMonitorLocations(monitorId);
}, [monitorId, dateStart, dateEnd]);
}, [loadMonitorLocations, monitorId, dateStart, dateEnd]);
return (
<EuiPanel>

2
x-pack/legacy/plugins/uptime/public/components/functional/ping_list/__tests__/__snapshots__/ping_list.test.tsx.snap generated
View file

@ -167,7 +167,7 @@ exports[`PingList component renders sorted list without errors 1`] = `
"render": [Function],
},
Object {
"align": "center",
"align": "right",
"field": "http.response.status_code",
"name": "Response code",
"render": [Function],

1
x-pack/legacy/plugins/uptime/public/components/functional/ping_list/__tests__/ping_list.test.tsx
View file

@ -207,7 +207,6 @@ describe('PingList component', () => {
onPageCountChange={jest.fn()}
onSelectedLocationChange={(loc: EuiComboBoxOptionProps[]) => {}}
onSelectedStatusChange={jest.fn()}
onUpdateApp={jest.fn()}
pageSize={30}
selectedOption="down"
selectedLocation={BaseLocationOptions}

34
x-pack/legacy/plugins/uptime/public/components/functional/ping_list/ping_list.tsx
View file

@ -3,6 +3,7 @@
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import {
EuiBadge,
EuiBasicTable,
@ -22,15 +23,14 @@ import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import { get } from 'lodash';
import moment from 'moment';
import React, { Fragment, useEffect, useState } from 'react';
// @ts-ignore formatNumber
import { formatNumber } from '@elastic/eui/lib/services/format';
import React, { Fragment, useState } from 'react';
import { CriteriaWithPagination } from '@elastic/eui/src/components/basic_table/basic_table';
import { Ping, PingResults } from '../../../../common/graphql/types';
import { convertMicrosecondsToMilliseconds as microsToMillis } from '../../../lib/helper';
import { UptimeGraphQLQueryProps, withUptimeGraphQL } from '../../higher_order';
import { pingsQuery } from '../../../queries';
import { LocationName } from './../location_name';
import { Criteria, Pagination } from './../monitor_list';
import { Pagination } from './../monitor_list';
import { PingListExpandedRowComponent } from './expanded_row';
interface PingListQueryResult {
@ -38,10 +38,9 @@ interface PingListQueryResult {
}
interface PingListProps {
onSelectedStatusChange: (status: string | null) => void;
onSelectedStatusChange: (status: string | undefined) => void;
onSelectedLocationChange: (location: EuiComboBoxOptionProps[]) => void;
onPageCountChange: (itemCount: number) => void;
onUpdateApp: () => void;
pageSize: number;
selectedOption: string;
selectedLocation: EuiComboBoxOptionProps[];
@ -77,18 +76,13 @@ export const PingListComponent = ({
onPageCountChange,
onSelectedLocationChange,
onSelectedStatusChange,
onUpdateApp,
pageSize,
selectedOption,
selectedLocation,
}: Props) => {
const [itemIdToExpandedRowMap, setItemIdToExpandedRowMap] = useState<ExpandedRowMap>({});
useEffect(() => {
onUpdateApp();
}, [selectedOption]);
const statusOptions: EuiComboBoxOptionProps[] = [
const statusOptions = [
{
label: i18n.translate('xpack.uptime.pingList.statusOptions.allStatusOptionLabel', {
defaultMessage: 'All',
@ -182,16 +176,16 @@ export const PingListComponent = ({
render: (error: string) => error ?? '-',
},
];
const pings: Ping[] = data?.allPings?.pings ?? [];
const hasStatus: boolean = pings.some(
(currentPing: Ping) => !!currentPing?.http?.response?.status_code
const hasStatus: boolean = pings.reduce(
(hasHttpStatus: boolean, currentPing: Ping) =>
hasHttpStatus || !!currentPing.http?.response?.status_code,
false
);
if (hasStatus) {
columns.push({
field: 'http.response.status_code',
align: 'center',
align: 'right',
name: i18n.translate('xpack.uptime.pingList.responseCodeColumnLabel', {
defaultMessage: 'Response code',
}),
@ -266,7 +260,7 @@ export const PingListComponent = ({
if (typeof selectedOptions[0].value === 'string') {
onSelectedStatusChange(
// @ts-ignore it's definitely a string
selectedOptions[0].value !== '' ? selectedOptions[0].value : null
selectedOptions[0].value !== '' ? selectedOptions[0].value : undefined
);
}
}}
@ -309,7 +303,9 @@ export const PingListComponent = ({
itemId="id"
itemIdToExpandedRowMap={itemIdToExpandedRowMap}
pagination={pagination}
onChange={(criteria: Criteria) => onPageCountChange(criteria.page!.size)}
onChange={(criteria: CriteriaWithPagination<Ping>) =>
onPageCountChange(criteria.page!.size)
}
/>
</EuiPanel>
</Fragment>

2
x-pack/legacy/plugins/uptime/public/components/functional/snapshot.tsx
View file

@ -92,7 +92,7 @@ export const Container: React.FC<Props> = ({
}: Props) => {
useEffect(() => {
loadSnapshotCount(dateRangeStart, dateRangeEnd, filters, statusFilter);
}, [dateRangeStart, dateRangeEnd, filters, lastRefresh, statusFilter]);
}, [dateRangeStart, dateRangeEnd, filters, lastRefresh, loadSnapshotCount, statusFilter]);
return <PresentationalComponent count={count} height={height} loading={loading} />;
};

3
x-pack/legacy/plugins/uptime/public/components/higher_order/uptime_graphql_query.tsx
View file

@ -75,6 +75,9 @@ export function withUptimeGraphQL<T, P = {}>(WrappedComponent: any, query: any)
* reassign the update function to do nothing with the returned values.
*/
return () => {
// this component is planned to be deprecated, for the time being
// we will want to preserve this for the reason above.
// eslint-disable-next-line react-hooks/exhaustive-deps
updateState = () => {};
};
}, [variables, lastRefresh]);

12
x-pack/legacy/plugins/uptime/public/pages/monitor.tsx
View file

@ -62,7 +62,7 @@ export const MonitorPage = ({
setHeadingText(heading);
}
});
}, [params]);
}, [monitorId, params, query, setBreadcrumbs, setHeadingText]);
const [selectedLocation, setSelectedLocation] = useState<EuiComboBoxOptionProps[]>(
BaseLocationOptions
@ -79,7 +79,7 @@ export const MonitorPage = ({
useEffect(() => {
logMonitorPageLoad();
}, []);
}, [logMonitorPageLoad]);
useTrackPageview({ app: 'uptime', path: 'monitor' });
useTrackPageview({ app: 'uptime', path: 'monitor', delay: 15000 });
@ -106,10 +106,10 @@ export const MonitorPage = ({
<PingList
onPageCountChange={setPingListPageCount}
onSelectedLocationChange={setSelectedLocation}
onSelectedStatusChange={(selectedStatus: string | null) =>
updateUrlParams({ selectedPingStatus: selectedStatus || '' })
}
onUpdateApp={refreshApp}
onSelectedStatusChange={(selectedStatus: string | undefined) => {
updateUrlParams({ selectedPingStatus: selectedStatus || '' });
refreshApp();
}}
pageSize={pingListPageCount}
selectedOption={selectedPingStatus}
selectedLocation={selectedLocation}

2
x-pack/legacy/plugins/uptime/public/pages/overview.tsx
View file

@ -85,7 +85,7 @@ export const OverviewPage = ({
})
);
}
}, []);
}, [basePath, logOverviewPageLoad, setBreadcrumbs, setHeadingText]);
useTrackPageview({ app: 'uptime', path: 'overview' });
useTrackPageview({ app: 'uptime', path: 'overview', delay: 15000 });

2
x-pack/legacy/plugins/uptime/public/uptime_app.tsx
View file

@ -111,7 +111,7 @@ const Application = (props: UptimeAppProps) => {
}
: undefined
);
}, []);
}, [canSave, renderGlobalHelpControls, setBadge]);
const refreshApp = () => {
const refreshTime = Date.now();