From 5764b90fa0d24e2807dff2b409e8c92f49afb0d5 Mon Sep 17 00:00:00 2001 From: Julius Volz Date: Thu, 14 Feb 2019 22:24:22 +0100 Subject: [PATCH] More TS conversions Signed-off-by: Julius Volz --- package-lock.json | 19 ++++- package.json | 1 + ...ExpressionInput.js => ExpressionInput.tsx} | 50 +++++------ src/{GraphControls.js => GraphControls.tsx} | 85 ++++++++++++------- src/Panel.js | 5 +- src/PanelList.tsx | 4 +- src/{index.js => index.tsx} | 0 7 files changed, 95 insertions(+), 69 deletions(-) rename src/{ExpressionInput.js => ExpressionInput.tsx} (79%) rename src/{GraphControls.js => GraphControls.tsx} (66%) rename src/{index.js => index.tsx} (100%) diff --git a/package-lock.json b/package-lock.json index 420ed5d379..84d26cdf4c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -938,6 +938,14 @@ "resolved": "https://registry.npmjs.org/@types/jest-diff/-/jest-diff-20.0.1.tgz", "integrity": "sha512-yALhelO3i0hqZwhjtcr6dYyaLoCHbAMshwtj6cGxTvHZAKXHsYGdff6E8EPw3xLKY0ELUTQ69Q1rQiJENnccMA==" }, + "@types/jquery": { + "version": "3.3.29", + "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.3.29.tgz", + "integrity": "sha512-FhJvBninYD36v3k6c+bVk1DSZwh7B5Dpb/Pyk3HKVsiohn0nhbefZZ+3JXbWQhFyt0MxSl2jRDdGQPHeOHFXrQ==", + "requires": { + "@types/sizzle": "*" + } + }, "@types/node": { "version": "11.9.3", "resolved": "https://registry.npmjs.org/@types/node/-/node-11.9.3.tgz", @@ -980,6 +988,11 @@ "popper.js": "^1.14.1" } }, + "@types/sizzle": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.2.tgz", + "integrity": "sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg==" + }, "@types/tapable": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.2.tgz", @@ -6474,9 +6487,9 @@ "integrity": "sha512-d4sze1JNC454Wdo2fkuyzCr6aHcbL6PGGuFAz0Li/NcOm1tCHGnWDRmJP85dh9IhQErTc2svWFEX5xHIOo//kQ==" }, "handlebars": { - "version": "4.0.12", - "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.0.12.tgz", - "integrity": "sha512-RhmTekP+FZL+XNhwS1Wf+bTTZpdLougwt5pcgA1tuz6Jcx0fpH/7z0qd71RKnZHBCxIRBHfBOnio4gViPemNzA==", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.1.0.tgz", + "integrity": "sha512-l2jRuU1NAWK6AW5qqcTATWQJvNPEwkM7NEKSiv/gqOsoSQbVoWyqVEY5GS+XPQ88zLNmqASRpzfdm8d79hJS+w==", "requires": { "async": "^2.5.0", "optimist": "^0.6.1", diff --git a/package.json b/package.json index 861d37ad14..ec07e99a98 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "@fortawesome/free-solid-svg-icons": "^5.7.1", "@fortawesome/react-fontawesome": "^0.1.4", "@types/jest": "^24.0.4", + "@types/jquery": "^3.3.29", "@types/node": "^11.9.3", "@types/react": "^16.8.2", "@types/react-dom": "^16.8.0", diff --git a/src/ExpressionInput.js b/src/ExpressionInput.tsx similarity index 79% rename from src/ExpressionInput.js rename to src/ExpressionInput.tsx index 02602f3be2..6ddd482521 100644 --- a/src/ExpressionInput.js +++ b/src/ExpressionInput.tsx @@ -1,3 +1,4 @@ +import $ from 'jquery'; import React, { Component } from 'react'; import { Button, @@ -7,7 +8,7 @@ import { Input, } from 'reactstrap'; -import Downshift from 'downshift'; +import Downshift, { ChildrenFunction, ControllerStateAndHelpers, DownshiftInterface } from 'downshift'; import fuzzy from 'fuzzy'; import { library } from '@fortawesome/fontawesome-svg-core'; @@ -16,32 +17,26 @@ import { faSearch, faSpinner } from '@fortawesome/free-solid-svg-icons'; library.add(faSearch, faSpinner); -class ExpressionInput extends Component { - handleKeyPress = (event) => { +interface ExpressionInputProps { + value: string; + metricNames: string[]; + onChange: (expr: string) => void; + executeQuery: () => void; + loading: boolean; +} + +class ExpressionInput extends Component { + prevNoMatchValue: string | null = null; + exprInputRef: HTMLInputElement | null = null; + + handleKeyPress = (event: React.KeyboardEvent) => { if (event.key === 'Enter' && !event.shiftKey) { this.props.executeQuery(); event.preventDefault(); } } - stateReducer = (state, changes) => { - return changes; - // // TODO: Remove this whole function if I don't notice any odd behavior without it. - // // I don't remember why I had to add this and currently things seem fine without it. - // switch (changes.type) { - // case Downshift.stateChangeTypes.keyDownEnter: - // case Downshift.stateChangeTypes.clickItem: - // case Downshift.stateChangeTypes.changeInput: - // return { - // ...changes, - // selectedItem: changes.inputValue, - // }; - // default: - // return changes; - // } - } - - renderAutosuggest = (downshift) => { + renderAutosuggest = (downshift: any) => { if (this.prevNoMatchValue && downshift.inputValue.includes(this.prevNoMatchValue)) { // TODO: Is this still correct with fuzzy? return null; @@ -90,7 +85,7 @@ class ExpressionInput extends Component { } componentDidMount() { - const $exprInput = window.$(this.exprInputRef); + const $exprInput = $(this.exprInputRef as any) $exprInput.on('input', () => { const el = $exprInput.get(0); const offset = el.offsetHeight - el.clientHeight; @@ -105,7 +100,7 @@ class ExpressionInput extends Component { onInputValueChange={this.props.onChange} selectedItem={this.props.value} > - {downshift => ( + {(downshift) => (
@@ -117,19 +112,18 @@ class ExpressionInput extends Component { this.exprInputRef = ref} - //onChange={selection => alert(`You selected ${selection}`)} {...downshift.getInputProps({ - onKeyDown: event => { + onKeyDown: (event: React.KeyboardEvent): void => { switch (event.key) { case 'Home': case 'End': // We want to be able to jump to the beginning/end of the input field. // By default, Downshift otherwise jumps to the first/last suggestion item instead. - event.nativeEvent.preventDownshiftDefault = true; + (event.nativeEvent as any).preventDownshiftDefault = true; break; case 'Enter': downshift.closeMenu(); @@ -137,7 +131,7 @@ class ExpressionInput extends Component { default: } } - })} + } as any)} /> diff --git a/src/GraphControls.js b/src/GraphControls.tsx similarity index 66% rename from src/GraphControls.js rename to src/GraphControls.tsx index 39fb3fed89..ff7070e976 100644 --- a/src/GraphControls.js +++ b/src/GraphControls.tsx @@ -21,7 +21,7 @@ import { faChartLine, } from '@fortawesome/free-solid-svg-icons'; -import TimeInput from './TimeInput.js'; +import TimeInput from './TimeInput'; library.add( faPlus, @@ -30,16 +30,23 @@ library.add( faChartLine, ); -class GraphControls extends Component { - constructor(props) { - super(props); +interface GraphControlsProps { + range: number; + endTime: number | null; + resolution: number | null; + stacked: boolean; - this.rangeRef = React.createRef(); - this.endTimeRef = React.createRef(); - this.resolutionRef = React.createRef(); - } + onChangeRange: (range: number | null) => void; + onChangeEndTime: (endTime: number | null) => void; + onChangeResolution: (resolution: number | null) => void; + onChangeStacking: (stacked: boolean) => void; +} - rangeUnits = { +class GraphControls extends Component { + private rangeRef = React.createRef(); + private resolutionRef = React.createRef(); + + rangeUnits: {[unit: string]: number} = { 'y': 60 * 60 * 24 * 365, 'w': 60 * 60 * 24 * 7, 'd': 60 * 60 * 24, @@ -49,22 +56,38 @@ class GraphControls extends Component { } rangeSteps = [ - '1s', '10s', '1m', '5m', '15m', '30m', '1h', '2h', '6h', '12h', '1d', '2d', - '1w', '2w', '4w', '8w', '1y', '2y' + 1, + 10, + 60, + 5*60, + 15*60, + 30*60, + 60*60, + 2*60*60, + 6*60*60, + 12*60*60, + 24*60*60, + 48*60*60, + 7*24*60*60, + 14*24*60*60, + 28*24*60*60, + 56*24*60*60, + 365*24*60*60, + 730*24*60*60, ] - parseRange(rangeText) { - var rangeRE = new RegExp('^([0-9]+)([ywdhms]+)$'); - var matches = rangeText.match(rangeRE); + parseRange(rangeText: string): number | null { + const rangeRE = new RegExp('^([0-9]+)([ywdhms]+)$'); + const matches = rangeText.match(rangeRE); if (!matches || matches.length !== 3) { return null; } - var value = parseInt(matches[1]); - var unit = matches[2]; + const value = parseInt(matches[1]); + const unit = matches[2]; return value * this.rangeUnits[unit]; } - formatRange(range) { + formatRange(range: number): string { for (let unit of Object.keys(this.rangeUnits)) { if (range % this.rangeUnits[unit] === 0) { return (range / this.rangeUnits[unit]) + unit; @@ -73,36 +96,34 @@ class GraphControls extends Component { return range + 's'; } - onChangeRangeInput = (rangeText) => { + onChangeRangeInput = (rangeText: string): void => { const range = this.parseRange(rangeText); if (range === null) { - this.changeRangeInput(this.formatRange(this.props.range)); + this.changeRangeInput(this.props.range); } else { this.props.onChangeRange(this.parseRange(rangeText)); } } - changeRangeInput = (rangeText) => { - this.rangeRef.current.value = rangeText; + changeRangeInput = (range: number): void => { + this.rangeRef.current!.value = this.formatRange(range); } - increaseRange = () => { + increaseRange = (): void => { for (let range of this.rangeSteps) { - let rangeSeconds = this.parseRange(range); - if (this.props.range < rangeSeconds) { + if (this.props.range < range) { this.changeRangeInput(range); - this.props.onChangeRange(rangeSeconds); + this.props.onChangeRange(range); return; } } } - decreaseRange = () => { + decreaseRange = (): void => { for (let range of this.rangeSteps.slice().reverse()) { - let rangeSeconds = this.parseRange(range); - if (this.props.range > rangeSeconds) { + if (this.props.range > range) { this.changeRangeInput(range); - this.props.onChangeRange(rangeSeconds); + this.props.onChangeRange(range); return; } } @@ -119,7 +140,7 @@ class GraphControls extends Component { this.onChangeRangeInput(this.rangeRef.current.value)} + onBlur={() => this.onChangeRangeInput(this.rangeRef.current!.value)} /> @@ -132,9 +153,9 @@ class GraphControls extends Component { this.props.onChangeResolution(parseInt(this.resolutionRef.current.value))} + onBlur={() => this.props.onChangeResolution(parseInt(this.resolutionRef.current!.value))} bsSize="sm" /> diff --git a/src/Panel.js b/src/Panel.js index 8337ef1063..aeb8efff90 100644 --- a/src/Panel.js +++ b/src/Panel.js @@ -35,8 +35,6 @@ class Panel extends Component { error: null, stats: null, }; - - this.handleExpressionChange = this.handleExpressionChange.bind(this); } componentDidUpdate(prevProps, prevState) { @@ -133,8 +131,7 @@ class Panel extends Component { }); } - handleExpressionChange(expr) { - //this.setState({expr: event.target.value}); + handleExpressionChange = (expr) => { this.setState({expr: expr}); } diff --git a/src/PanelList.tsx b/src/PanelList.tsx index d64e41f995..0f60b6ad3d 100644 --- a/src/PanelList.tsx +++ b/src/PanelList.tsx @@ -14,9 +14,9 @@ interface PanelListState { } class PanelList extends Component { - key: number; + private key: number; - constructor(props: []) { + constructor(props: any) { super(props); this.state = { diff --git a/src/index.js b/src/index.tsx similarity index 100% rename from src/index.js rename to src/index.tsx