Skip to content

Commit 52c2a07

Browse files
fuziontechfuziontech
committed
TS fixes and hacks
1 parent 392db10 commit 52c2a07

File tree

8 files changed

+35
-32
lines changed

8 files changed

+35
-32
lines changed

‎frontend/src/pages/Backups/Backups.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -201,7 +201,7 @@ export default function Backups() {
201201
</Form.Item>
202202
</Form>
203203
</Modal>
204-
<Table columns={columns} dataSource={data.backups} loading={isLoading} />
204+
<Table columns={columns} dataSource={data!.backups} loading={isLoading} />
205205
</div>
206206
)
207207
}

‎frontend/src/pages/Backups/ScheduledBackups.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import React, { useEffect, useState } from 'react'
22
import { usePollingEffect } from '../../utils/usePollingEffect'
33
import { ColumnType } from 'antd/es/table'
44
import { Switch, Select, Table, Button, Form, Input, Modal, Tag, Col, Progress, Row, Tooltip, notification } from 'antd'
5-
import { DeleteOutlined, EditOutlined } from '@ant-design/icons'
5+
import DeleteOutlined from '@ant-design/icons'
6+
import EditOutlined from '@ant-design/icons'
67
import { Clusters } from '../Clusters/Clusters'
78
import useSWR, { mutate } from 'swr'
89

@@ -174,7 +175,7 @@ export default function ScheduledBackups() {
174175

175176
return (
176177
<a id={id} onClick={deleteBackup}>
177-
<DeleteOutlined rev={undefined} />
178+
<DeleteOutlined />
178179
</a>
179180
)
180181
},
@@ -245,7 +246,7 @@ export default function ScheduledBackups() {
245246

246247
<Form.Item name="cluster" label="Cluster">
247248
<Select>
248-
{clusters.clusters.map(cluster => (
249+
{clusters!.clusters.map((cluster: any) => (
249250
<Select.Option value={cluster.cluster}>{cluster.cluster}</Select.Option>
250251
))}
251252
</Select>
@@ -317,7 +318,7 @@ export default function ScheduledBackups() {
317318
</Form.Item>
318319
</Form>
319320
</Modal>
320-
<Table columns={columns} dataSource={backups.backups} loading={backupsIsLoading} />
321+
<Table columns={columns} dataSource={backups!.backups} loading={backupsIsLoading} />
321322
</div>
322323
)
323324
}

‎frontend/src/pages/Clusters/Clusters.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ export default function Clusters() {
6868
<p>These are the clusters that are configured in the connected ClickHouse instance</p>
6969
<div>
7070
<ul>
71-
{data.clusters.map(cluster => (
71+
{data!.clusters.map((cluster: any) => (
7272
<>
7373
<h1 key={cluster.cluster}>{cluster.cluster}</h1>
7474
<Table columns={columns} dataSource={cluster.nodes} loading={isLoading} />

‎frontend/src/pages/DiskUsage/DiskUsage.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,8 @@ export function DiskUsage(): JSX.Element {
6666
label={{
6767
type: 'inner',
6868
offset: '-30%',
69-
content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
69+
content: ({ percent }: { percent: number }) =>
70+
`${(percent * 100).toFixed(0)}%`,
7071
style: {
7172
fontSize: 14,
7273
textAlign: 'center',
@@ -82,7 +83,7 @@ export function DiskUsage(): JSX.Element {
8283
}}
8384
color={['#FFB816', '#175FFF']}
8485
tooltip={{
85-
formatter: v => {
86+
formatter: (v: any) => {
8687
return {
8788
name: v.type,
8889
value: `${(v.value / 1000000000).toFixed(2)}GB`,
@@ -114,7 +115,8 @@ export function DiskUsage(): JSX.Element {
114115
label={{
115116
type: 'inner',
116117
offset: '-30%',
117-
content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
118+
content: ({ percent }: { percent: number }) =>
119+
`${(percent * 100).toFixed(0)}%`,
118120
style: {
119121
fontSize: 14,
120122
textAlign: 'center',
@@ -130,7 +132,7 @@ export function DiskUsage(): JSX.Element {
130132
}}
131133
color={['#FFB816', '#175FFF']}
132134
tooltip={{
133-
formatter: v => {
135+
formatter: (v: any) => {
134136
return {
135137
name: v.type,
136138
value: `${(v.value / 1000000000).toFixed(2)}GB`,

‎frontend/src/pages/Overview/Overview.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useEffect, useState } from 'react'
22
import { Line } from '@ant-design/charts'
33
import { Card, Col, Row, Tooltip, notification } from 'antd'
4-
import { InfoCircleOutlined } from '@ant-design/icons'
4+
import InfoCircleOutlined from '@ant-design/icons'
55
import { clickhouseTips } from './tips'
66
import useSWR from 'swr'
77

@@ -54,7 +54,7 @@ export default function Overview() {
5454
<Col span={12}>
5555
<Card style={{ boxShadow: '2px 2px 2px 2px rgb(217 208 208 / 20%)' }} title="Number of queries">
5656
<Line
57-
data={data.execution_count.map(dataPoint => ({
57+
data={data!.execution_count.map((dataPoint: any) => ({
5858
...dataPoint,
5959
day_start: dataPoint.day_start.split('T')[0],
6060
}))}
@@ -70,7 +70,7 @@ export default function Overview() {
7070
<Col span={12}>
7171
<Card style={{ boxShadow: '2px 2px 2px 2px rgb(217 208 208 / 20%)' }} title="Data read (GB)">
7272
<Line
73-
data={data.read_bytes.map(dataPoint => ({
73+
data={data!.read_bytes.map((dataPoint: any) => ({
7474
day_start: dataPoint.day_start.split('T')[0],
7575
total: dataPoint.total / 1000000000,
7676
}))}
@@ -88,7 +88,7 @@ export default function Overview() {
8888
<Col span={12}>
8989
<Card style={{ boxShadow: '2px 2px 2px 2px rgb(217 208 208 / 20%)' }} title="Memory usage (GB)">
9090
<Line
91-
data={data.memory_usage.map(dataPoint => ({
91+
data={data!.memory_usage.map((dataPoint: any) => ({
9292
day_start: dataPoint.day_start.split('T')[0],
9393
total: dataPoint.total / 1000000000,
9494
}))}
@@ -109,13 +109,13 @@ export default function Overview() {
109109
<Tooltip
110110
title={`Calculated from OSCPUVirtualTimeMicroseconds metric from ClickHouse query log's ProfileEvents.`}
111111
>
112-
<InfoCircleOutlined rev={undefined} />
112+
<InfoCircleOutlined />
113113
</Tooltip>
114114
</>
115115
}
116116
>
117117
<Line
118-
data={data.cpu.map(dataPoint => ({
118+
data={data!.cpu.map((dataPoint: any) => ({
119119
day_start: dataPoint.day_start.split('T')[0],
120120
total: dataPoint.total,
121121
}))}

‎frontend/src/pages/QueryEditor/QueryEditor.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import 'prismjs/components/prism-sql'
66
import 'prismjs/themes/prism.css'
77
import Editor from 'react-simple-code-editor'
88
import { v4 as uuidv4 } from 'uuid'
9-
import { SaveOutlined } from '@ant-design/icons'
9+
import SaveOutlined from '@ant-design/icons'
1010

1111
function CreateSavedQueryModal({
1212
modalOpen = false,
@@ -27,7 +27,7 @@ function CreateSavedQueryModal({
2727
onOk={() => saveQuery(queryName)}
2828
onCancel={() => setModalOpen(false)}
2929
>
30-
<Input value={queryName} onChange={(e) => setQueryName(e.target.value)} />
30+
<Input value={queryName} onChange={e => setQueryName(e.target.value)} />
3131
</Modal>
3232
</>
3333
)
@@ -42,7 +42,7 @@ export default function QueryEditor() {
4242
const [runningQueryId, setRunningQueryId] = useState<null | string>(null)
4343
const [modalOpen, setModalOpen] = useState(false)
4444

45-
const columns = data.length > 0 ? Object.keys(data[0]).map((column) => ({ title: column, dataIndex: column })) : []
45+
const columns = data.length > 0 ? Object.keys(data[0]).map(column => ({ title: column, dataIndex: column })) : []
4646

4747
const saveQuery = async (queryName: string) => {
4848
try {
@@ -116,7 +116,7 @@ export default function QueryEditor() {
116116
{data && Object.keys(data[0] || {}).length > 0 ? (
117117
<Tooltip title="Save query">
118118
<Button style={{ background: 'transparent' }} onClick={() => setModalOpen(true)}>
119-
<SaveOutlined rev={undefined} />
119+
<SaveOutlined />
120120
</Button>
121121
</Tooltip>
122122
) : null}
@@ -125,8 +125,8 @@ export default function QueryEditor() {
125125

126126
<Editor
127127
value={sql}
128-
onValueChange={(code) => setSql(code)}
129-
highlight={(code) => highlight(code, languages.sql)}
128+
onValueChange={code => setSql(code)}
129+
highlight={code => highlight(code, languages.sql)}
130130
padding={10}
131131
style={{
132132
fontFamily: '"Fira code", "Fira Mono", monospace',

‎frontend/src/pages/QueryEditor/SavedQueries.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Table, Button, Row, Col, Tooltip } from 'antd'
22
import React, { useEffect, useState } from 'react'
33
import { ColumnType } from 'antd/es/table'
44
import SavedQuery from './SavedQuery'
5-
import { ReloadOutlined } from '@ant-design/icons'
5+
import ReloadOutlined from '@ant-design/icons'
66
import { useHistory } from 'react-router-dom'
77
import { isoTimestampToHumanReadable } from '../../utils/dateUtils'
88

@@ -30,7 +30,7 @@ export default function SavedQueries({ match }: { match: { params: { id: string
3030
loadData()
3131
}, [])
3232

33-
const columns: ColumnType<{ name: string; id: number; query: string, created_at: string }>[] = [
33+
const columns: ColumnType<{ name: string; id: number; query: string; created_at: string }>[] = [
3434
{
3535
title: 'Name',
3636
dataIndex: 'name',
@@ -48,7 +48,7 @@ export default function SavedQueries({ match }: { match: { params: { id: string
4848
},
4949
{
5050
title: 'Created at',
51-
render: (_, item) => item.created_at ? isoTimestampToHumanReadable(item.created_at) : '',
51+
render: (_, item) => (item.created_at ? isoTimestampToHumanReadable(item.created_at) : ''),
5252
},
5353
]
5454

@@ -74,7 +74,7 @@ export default function SavedQueries({ match }: { match: { params: { id: string
7474
<Col span={1}>
7575
<Tooltip title="Refresh list">
7676
<Button style={{ background: 'transparent' }} onClick={loadData}>
77-
<ReloadOutlined rev={undefined} />
77+
<ReloadOutlined />
7878
</Button>
7979
</Tooltip>
8080
</Col>

‎frontend/src/pages/SlowQueries/MetricsTab.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
22
import { Line } from '@ant-design/plots'
33
// @ts-ignore
44
import { Card, Col, Row, Tooltip, notification } from 'antd'
5-
import { InfoCircleOutlined } from '@ant-design/icons'
5+
import InfoCircleOutlined from '@ant-design/icons'
66
import { NoDataSpinner, QueryDetailData } from './QueryDetail'
77

88
export default function MetricsTab({ query_hash }: { query_hash: string }) {
@@ -31,7 +31,7 @@ export default function MetricsTab({ query_hash }: { query_hash: string }) {
3131
<Col span={12}>
3232
<Card style={{ boxShadow: '2px 2px 2px 2px rgb(217 208 208 / 20%)' }} title="Number of queries">
3333
<Line
34-
data={data.execution_count.map((dataPoint) => ({
34+
data={data.execution_count.map(dataPoint => ({
3535
...dataPoint,
3636
day_start: dataPoint.day_start.split('T')[0],
3737
}))}
@@ -46,7 +46,7 @@ export default function MetricsTab({ query_hash }: { query_hash: string }) {
4646
<Col span={12}>
4747
<Card style={{ boxShadow: '2px 2px 2px 2px rgb(217 208 208 / 20%)' }} title="Data read (GB)">
4848
<Line
49-
data={data.read_bytes.map((dataPoint) => ({
49+
data={data.read_bytes.map(dataPoint => ({
5050
day_start: dataPoint.day_start.split('T')[0],
5151
total: dataPoint.total / 1000000000,
5252
}))}
@@ -63,7 +63,7 @@ export default function MetricsTab({ query_hash }: { query_hash: string }) {
6363
<Col span={12}>
6464
<Card style={{ boxShadow: '2px 2px 2px 2px rgb(217 208 208 / 20%)' }} title="Memory usage (GB)">
6565
<Line
66-
data={data.memory_usage.map((dataPoint) => ({
66+
data={data.memory_usage.map(dataPoint => ({
6767
day_start: dataPoint.day_start.split('T')[0],
6868
total: dataPoint.total / 1000000000,
6969
}))}
@@ -84,14 +84,14 @@ export default function MetricsTab({ query_hash }: { query_hash: string }) {
8484
title={`Calculated from OSCPUVirtualTimeMicroseconds metric from ClickHouse query log's ProfileEvents.`}
8585
>
8686
<span>
87-
<InfoCircleOutlined rev={undefined} />
87+
<InfoCircleOutlined />
8888
</span>
8989
</Tooltip>
9090
</>
9191
}
9292
>
9393
<Line
94-
data={data.cpu.map((dataPoint) => ({
94+
data={data.cpu.map(dataPoint => ({
9595
day_start: dataPoint.day_start.split('T')[0],
9696
total: dataPoint.total,
9797
}))}

0 commit comments

Comments
 (0)