IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Chore: Fix more TypeScript errors (#36918)

Browse Source 
* TypeScript: Fix some strict typescript errors

* Fix more strict typescript errors

* Few more fixes

* Better string conversion

* update check script to 195
This commit is contained in:
Ashley Harrison
2021-07-20 09:57:03 +01:00
committed by GitHub
parent ea375db8b2
commit 220b964de5
26 changed files with 50 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx
View File

@@ -22,7 +22,7 @@ export interface Props<T> extends HTMLAttributes<HTMLButtonElement> {
* @internal
* A temporary component until we have a proper dropdown component
*/
export const ButtonSelect = React.memo(<T,>(props: Props<T>) => {
const ButtonSelectComponent = <T,>(props: Props<T>) => {
const { className, options, value, onChange, narrow, variant, ...restProps } = props;
const [isOpen, setIsOpen] = useState<boolean>(false);
const styles = useStyles2(getStyles);
@@ -73,9 +73,11 @@ export const ButtonSelect = React.memo(<T,>(props: Props<T>) => {
)}
</ButtonGroup>
);
});
};
ButtonSelect.displayName = 'ButtonSelect';
ButtonSelectComponent.displayName = 'ButtonSelect';
export const ButtonSelect = React.memo(ButtonSelectComponent) as typeof ButtonSelectComponent;
const getStyles = (theme: GrafanaTheme2) => {
return {

2
packages/grafana-ui/src/components/OptionsUI/color.tsx
View File

@@ -10,7 +10,7 @@ import { ColorSwatch } from '../ColorPicker/ColorSwatch';
* */
export interface ColorValueEditorProps {
value?: string;
onChange: (value?: string) => void;
onChange: (value: string) => void;
}
/**

5
public/app/core/components/PanelTypeFilter/PanelTypeFilter.tsx
View File

@@ -1,7 +1,7 @@
import React, { useCallback, useMemo, useState } from 'react';
import { GrafanaTheme2, PanelPluginMeta, SelectableValue } from '@grafana/data';
import { getAllPanelPluginMeta } from '../../../features/dashboard/components/VizTypePicker/VizTypePicker';
import { Icon, resetSelectStyles, Select, useStyles2 } from '@grafana/ui';
import { Icon, resetSelectStyles, MultiSelect, useStyles2 } from '@grafana/ui';
import { css } from '@emotion/css';
export interface Props {
@@ -40,7 +40,6 @@ export const PanelTypeFilter = ({ onChange: propsOnChange, maxMenuHeight }: Prop
defaultOptions: true,
getOptionLabel: (i: any) => i.label,
getOptionValue: (i: any) => i.value,
isMulti: true,
noOptionsMessage: 'No Panel types found',
placeholder: 'Filter by type',
styles: resetSelectStyles(),
@@ -57,7 +56,7 @@ export const PanelTypeFilter = ({ onChange: propsOnChange, maxMenuHeight }: Prop
Clear types
</span>
)}
<Select {...selectOptions} prefix={<Icon name="filter" />} aria-label="Panel Type filter" />
<MultiSelect {...selectOptions} prefix={<Icon name="filter" />} aria-label="Panel Type filter" />
</div>
);
};

4
public/app/core/utils/richHistory.ts
View File

@@ -331,7 +331,7 @@ export function filterQueriesBySearchFilter(queries: RichHistoryQuery[], searchF
});
}
export function filterQueriesByDataSource(queries: RichHistoryQuery[], listOfDatasourceFilters: string[] | null) {
export function filterQueriesByDataSource(queries: RichHistoryQuery[], listOfDatasourceFilters: string[]) {
return listOfDatasourceFilters && listOfDatasourceFilters.length > 0
? queries.filter((q) => listOfDatasourceFilters.includes(q.datasourceName))
: queries;
@@ -348,7 +348,7 @@ export function filterQueriesByTime(queries: RichHistoryQuery[], timeFilter: [nu
export function filterAndSortQueries(
queries: RichHistoryQuery[],
sortOrder: SortOrder,
listOfDatasourceFilters: string[] | null,
listOfDatasourceFilters: string[],
searchFilter: string,
timeFilter?: [number, number]
) {

2
public/app/features/alerting/unified/components/rules/RulesFilter.tsx
View File

@@ -98,7 +98,7 @@ const RulesFilter = () => {
<Label>View as</Label>
<RadioButtonGroup
options={ViewOptions}
value={queryParams['view'] || 'group'}
value={String(queryParams['view'] ?? 'group')}
onChange={handleViewChange}
/>
</div>

2
public/app/features/alerting/unified/utils/amroutes.ts
View File

@@ -19,7 +19,7 @@ const matchersToArrayFieldMatchers = (matchers: Record<string, string> | undefin
isEqual: true,
},
],
[]
[] as Matcher[]
);
const intervalToValueAndType = (strValue: string | undefined): [string, string] => {

2
public/app/features/annotations/components/StandardAnnotationQueryEditor.tsx
View File

@@ -86,7 +86,7 @@ export default class StandardAnnotationQueryEditor extends PureComponent<Props,
});
};
onMappingChange = (mappings: AnnotationEventMappings) => {
onMappingChange = (mappings?: AnnotationEventMappings) => {
this.props.onChange({
...this.props.annotation,
mappings,

4
public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx
View File

@@ -46,9 +46,9 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
});
};
onUpdate = (title: string, repeat: string | undefined) => {
onUpdate = (title: string, repeat?: string | null) => {
this.props.panel['title'] = title;
this.props.panel['repeat'] = repeat;
this.props.panel['repeat'] = repeat ?? undefined;
this.props.panel.render();
this.props.dashboard.processRepeats();
this.forceUpdate();

2
public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx
View File

@@ -43,7 +43,7 @@ export class TimePickerSettings extends PureComponent<Props, State> {
this.props.onHideTimePickerChange(!this.props.timePickerHidden);
};
onTimeZoneChange = (timeZone: string) => {
onTimeZoneChange = (timeZone?: string) => {
if (typeof timeZone !== 'string') {
return;
}

2
public/app/features/dashboard/components/PanelEditor/OptionsPane.tsx
View File

@@ -18,7 +18,7 @@ interface Props {
dashboard: DashboardModel;
onFieldConfigsChange: (config: FieldConfigSource) => void;
onPanelOptionsChanged: (options: any) => void;
onPanelConfigChange: (configKey: string, value: any) => void;
onPanelConfigChange: (configKey: keyof PanelModel, value: any) => void;
}
export const OptionsPane: React.FC<Props> = ({

2
public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx
View File

@@ -19,7 +19,7 @@ interface Props {
data?: PanelData;
onFieldConfigsChange: (config: FieldConfigSource) => void;
onPanelOptionsChanged: (options: any) => void;
onPanelConfigChange: (configKey: string, value: any) => void;
onPanelConfigChange: (configKey: keyof PanelModel, value: any) => void;
}
export const OptionsPaneOptions: React.FC<Props> = (props) => {

2
public/app/features/dashboard/components/PanelEditor/getPanelFrameOptions.tsx
View File

@@ -110,7 +110,7 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
return (
<RepeatRowSelect
repeat={panel.repeat}
onChange={(value: string | null) => {
onChange={(value?: string | null) => {
onPanelConfigChange('repeat', value);
}}
/>

2
public/app/features/dashboard/components/PanelEditor/types.ts
View File

@@ -54,7 +54,7 @@ export interface OptionPaneRenderProps {
plugin: PanelPlugin;
data?: PanelData;
dashboard: DashboardModel;
onPanelConfigChange: (configKey: string, value: any) => void;
onPanelConfigChange: (configKey: keyof PanelModel, value: any) => void;
onPanelOptionsChanged: (options: any) => void;
onFieldConfigsChange: (config: FieldConfigSource) => void;
}

6
public/app/features/dashboard/components/RepeatRowSelect/RepeatRowSelect.tsx
View File

@@ -7,8 +7,8 @@ import { getVariables } from '../../../variables/state/selectors';
import { StoreState } from '../../../../types';
export interface Props {
repeat: string | undefined | null;
onChange: (name: string | null | undefined) => void;
repeat?: string | null;
onChange: (name: string | null) => void;
}
export const RepeatRowSelect: FC<Props> = ({ repeat, onChange }) => {
@@ -34,7 +34,7 @@ export const RepeatRowSelect: FC<Props> = ({ repeat, onChange }) => {
return options;
}, [variables]);
const onSelectChange = useCallback((option: SelectableValue<string | null>) => onChange(option.value), [onChange]);
const onSelectChange = useCallback((option: SelectableValue<string | null>) => onChange(option.value!), [onChange]);
return <Select value={repeat} onChange={onSelectChange} options={variableOptions} />;
};

6
public/app/features/dashboard/components/RowOptions/RowOptionsButton.tsx
View File

@@ -5,13 +5,13 @@ import { RowOptionsModal } from './RowOptionsModal';
import { OnRowOptionsUpdate } from './RowOptionsForm';
export interface RowOptionsButtonProps {
title: string | null;
repeat: string | null | undefined;
title: string;
repeat?: string | null;
onUpdate: OnRowOptionsUpdate;
}
export const RowOptionsButton: FC<RowOptionsButtonProps> = ({ repeat, title, onUpdate }) => {
const onUpdateChange = (hideModal: () => void) => (title: string | null, repeat: string | null) => {
const onUpdateChange = (hideModal: () => void) => (title: string, repeat?: string | null) => {
onUpdate(title, repeat);
hideModal();
};

8
public/app/features/dashboard/components/RowOptions/RowOptionsForm.tsx
View File

@@ -3,10 +3,10 @@ import { Button, Field, Form, Modal, Input } from '@grafana/ui';
import { RepeatRowSelect } from '../RepeatRowSelect/RepeatRowSelect';
export type OnRowOptionsUpdate = (title: string | null, repeat: string | null | undefined) => void;
export type OnRowOptionsUpdate = (title: string, repeat?: string | null) => void;
export interface Props {
title: string | null;
title: string;
repeat?: string | null;
onUpdate: OnRowOptionsUpdate;
onCancel: () => void;
@@ -14,12 +14,12 @@ export interface Props {
export const RowOptionsForm: FC<Props> = ({ repeat, title, onUpdate, onCancel }) => {
const [newRepeat, setNewRepeat] = useState<string | null | undefined>(repeat);
const onChangeRepeat = useCallback((name: string) => setNewRepeat(name), [setNewRepeat]);
const onChangeRepeat = useCallback((name?: string | null) => setNewRepeat(name), [setNewRepeat]);
return (
<Form
defaultValues={{ title }}
onSubmit={(formData: { title: string | null }) => {
onSubmit={(formData: { title: string }) => {
onUpdate(formData.title, newRepeat);
}}
>

4
public/app/features/dashboard/components/RowOptions/RowOptionsModal.tsx
View File

@@ -5,8 +5,8 @@ import { css } from '@emotion/css';
import { OnRowOptionsUpdate, RowOptionsForm } from './RowOptionsForm';
export interface RowOptionsModalProps {
title: string | null;
repeat: string | null;
title: string;
repeat?: string | null;
onDismiss: () => void;
onUpdate: OnRowOptionsUpdate;
}

4
public/app/features/dashboard/components/VizTypePicker/VizTypePicker.tsx
View File

@@ -8,7 +8,7 @@ import { css } from '@emotion/css';
export interface Props {
current: PanelPluginMeta;
onTypeChange: (newType: PanelPluginMeta, withModKey?: boolean) => void;
onTypeChange: (newType: PanelPluginMeta, withModKey: boolean) => void;
searchQuery: string;
onClose: () => void;
}
@@ -80,7 +80,7 @@ export const VizTypePicker: React.FC<Props> = ({ searchQuery, onTypeChange, curr
key={plugin.id}
isCurrent={isCurrent}
plugin={plugin}
onClick={(e) => onTypeChange(plugin, e.metaKey || e.ctrlKey || e.altKey)}
onClick={(e) => onTypeChange(plugin, Boolean(e.metaKey || e.ctrlKey || e.altKey))}
/>
);
};

2
public/app/features/dashboard/state/DashboardModel.ts
View File

@@ -752,7 +752,7 @@ export class DashboardModel {
const maxPos = maxBy(positions, (pos: GridPos) => {
return pos.y + pos.h;
});
return maxPos.y + maxPos.h - rowYPos;
return maxPos!.y + maxPos!.h - rowYPos;
}
removePanel(panel: PanelModel) {

2
public/app/features/explore/Logs.tsx
View File

@@ -325,7 +325,7 @@ export class UnthemedLogs extends PureComponent<Props, State> {
</InlineField>
<InlineField label="Dedup" transparent>
<RadioButtonGroup
options={Object.keys(LogsDedupStrategy).map((dedupType: LogsDedupStrategy) => ({
options={Object.values(LogsDedupStrategy).map((dedupType) => ({
label: capitalize(dedupType),
value: dedupType,
description: LogsDedupDescription[dedupType],

6
public/app/features/explore/RichHistory/RichHistory.tsx
View File

@@ -42,7 +42,7 @@ interface RichHistoryState {
retentionPeriod: number;
starredTabAsFirstTab: boolean;
activeDatasourceOnly: boolean;
datasourceFilters: SelectableValue[] | null;
datasourceFilters: SelectableValue[];
}
class UnThemedRichHistory extends PureComponent<RichHistoryProps, RichHistoryState> {
@@ -50,7 +50,7 @@ class UnThemedRichHistory extends PureComponent<RichHistoryProps, RichHistorySta
super(props);
this.state = {
sortOrder: SortOrder.Descending,
datasourceFilters: store.getObject(RICH_HISTORY_SETTING_KEYS.datasourceFilters, null),
datasourceFilters: store.getObject(RICH_HISTORY_SETTING_KEYS.datasourceFilters, []),
retentionPeriod: store.getObject(RICH_HISTORY_SETTING_KEYS.retentionPeriod, 7),
starredTabAsFirstTab: store.getBool(RICH_HISTORY_SETTING_KEYS.starredTabAsFirstTab, false),
activeDatasourceOnly: store.getBool(RICH_HISTORY_SETTING_KEYS.activeDatasourceOnly, true),
@@ -80,7 +80,7 @@ class UnThemedRichHistory extends PureComponent<RichHistoryProps, RichHistorySta
store.set(RICH_HISTORY_SETTING_KEYS.activeDatasourceOnly, activeDatasourceOnly);
};
onSelectDatasourceFilters = (value: SelectableValue[] | null) => {
onSelectDatasourceFilters = (value: SelectableValue[]) => {
try {
store.setObject(RICH_HISTORY_SETTING_KEYS.datasourceFilters, value);
} catch (error) {

2
public/app/features/explore/RichHistory/RichHistoryQueriesTab.test.tsx
View File

@@ -12,7 +12,7 @@ const setup = (propOverrides?: Partial<Props>) => {
queries: [],
sortOrder: SortOrder.Ascending,
activeDatasourceOnly: false,
datasourceFilters: null,
datasourceFilters: [],
retentionPeriod: 14,
height: 100,
exploreId: ExploreId.left,

9
public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx
View File

@@ -6,7 +6,7 @@ import { uniqBy } from 'lodash';
import { RichHistoryQuery, ExploreId } from 'app/types/explore';
// Utils
import { stylesFactory, useTheme, RangeSlider, Select } from '@grafana/ui';
import { stylesFactory, useTheme, RangeSlider, MultiSelect, Select } from '@grafana/ui';
import { GrafanaTheme, SelectableValue } from '@grafana/data';
import {
@@ -27,7 +27,7 @@ export interface Props {
queries: RichHistoryQuery[];
sortOrder: SortOrder;
activeDatasourceOnly: boolean;
datasourceFilters: SelectableValue[] | null;
datasourceFilters: SelectableValue[];
retentionPeriod: number;
exploreId: ExploreId;
height: number;
@@ -161,7 +161,7 @@ export function RichHistoryQueriesTab(props: Props) {
filterAndSortQueries(
queries,
sortOrder,
datasourceFilters?.map((d) => d.value) as string[] | null,
datasourceFilters.map((d) => d.value),
debouncedSearchInput,
timeFilter
)
@@ -199,8 +199,7 @@ export function RichHistoryQueriesTab(props: Props) {
<div className={styles.selectors}>
{!activeDatasourceOnly && (
<div aria-label="Filter datasources" className={styles.multiselect}>
<Select
isMulti={true}
<MultiSelect
options={listOfDatasources}
value={datasourceFilters}
placeholder="Filter queries for data sources(s)"

2
public/app/features/explore/RichHistory/RichHistoryStarredTab.test.tsx
View File

@@ -11,7 +11,7 @@ const setup = (propOverrides?: Partial<Props>) => {
queries: [],
sortOrder: SortOrder.Ascending,
activeDatasourceOnly: false,
datasourceFilters: null,
datasourceFilters: [],
exploreId: ExploreId.left,
onChangeSortOrder: jest.fn(),
onSelectDatasourceFilters: jest.fn(),

9
public/app/features/explore/RichHistory/RichHistoryStarredTab.tsx
View File

@@ -6,7 +6,7 @@ import { uniqBy } from 'lodash';
import { RichHistoryQuery, ExploreId } from 'app/types/explore';
// Utils
import { stylesFactory, useTheme, Select } from '@grafana/ui';
import { stylesFactory, useTheme, Select, MultiSelect } from '@grafana/ui';
import { GrafanaTheme, SelectableValue } from '@grafana/data';
import { filterAndSortQueries, createDatasourcesList, SortOrder } from 'app/core/utils/richHistory';
@@ -20,7 +20,7 @@ export interface Props {
queries: RichHistoryQuery[];
sortOrder: SortOrder;
activeDatasourceOnly: boolean;
datasourceFilters: SelectableValue[] | null;
datasourceFilters: SelectableValue[];
exploreId: ExploreId;
onChangeSortOrder: (sortOrder: SortOrder) => void;
onSelectDatasourceFilters: (value: SelectableValue[]) => void;
@@ -105,7 +105,7 @@ export function RichHistoryStarredTab(props: Props) {
filterAndSortQueries(
starredQueries,
sortOrder,
datasourceFilters?.map((d) => d.value) as string[] | null,
datasourceFilters.map((d) => d.value),
debouncedSearchInput
)
);
@@ -117,8 +117,7 @@ export function RichHistoryStarredTab(props: Props) {
<div className={styles.selectors}>
{!activeDatasourceOnly && (
<div aria-label="Filter datasources" className={styles.multiselect}>
<Select
isMulti={true}
<MultiSelect
options={listOfDatasources}
value={datasourceFilters}
placeholder="Filter queries for specific data sources(s)"

2
scripts/ci-check-strict.sh
View File

@@ -3,7 +3,7 @@ set -e
echo -e "Collecting code stats (typescript errors & more)"
ERROR_COUNT_LIMIT=220
ERROR_COUNT_LIMIT=195
ERROR_COUNT="$(./node_modules/.bin/tsc --project tsconfig.json --noEmit --strict true | grep -oP 'Found \K(\d+)')"
if [ "$ERROR_COUNT" -gt $ERROR_COUNT_LIMIT ]; then