Skip to content

Commit 21116bf

Browse files
fuziontechfuziontech
committed
checkpoint again
1 parent 52cce2d commit 21116bf

File tree

5 files changed

+64
-50
lines changed

5 files changed

+64
-50
lines changed

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

+18-14
Original file line numberDiff line numberDiff line change
@@ -2,40 +2,44 @@ import React, { useEffect, useState } from 'react'
22
import { Pie } from '@ant-design/plots'
33
import { Card, Spin, Row, Col, notification } from 'antd'
44

5+
import useSWR from 'swr'
6+
57
interface NodeData {
68
node: string
79
space_used: number
810
free_space: number
911
}
1012

1113
export function DiskUsage(): JSX.Element {
12-
const [clusterOverviewData, setClusterOverviewData] = useState<NodeData[]>([])
13-
14-
const loadData = async () => {
14+
const loadData = async (url: string) => {
1515
try {
16-
const res = await fetch('/api/analyze/cluster_overview')
16+
const res = await fetch(url)
1717
const resJson = await res.json()
18-
setClusterOverviewData(resJson)
18+
return resJson
1919
} catch {
2020
notification.error({ message: 'Failed to load data' })
2121
}
2222
}
2323

24-
useEffect(() => {
25-
loadData()
26-
}, [])
24+
const { data, error, isLoading } = useSWR('/api/analyze/cluster_overview', loadData)
2725

2826
const rows = []
29-
for (let i = 0; i < clusterOverviewData.length; i += 2) {
30-
rows.push(clusterOverviewData.slice(i, i + 2))
27+
if (!isLoading) {
28+
for (let i = 0; i < data.length; i += 2) {
29+
rows.push(data.slice(i, i + 2))
30+
}
3131
}
3232

33-
return (
33+
return isLoading ? (
34+
<div>loading...</div>
35+
) : error ? (
36+
<div>error</div>
37+
) : (
3438
<div style={{ textAlign: 'left' }}>
3539
<h1>Disk usage</h1>
3640
<br />
3741
<div style={{ display: 'block' }}>
38-
{clusterOverviewData.length === 0 ? (
42+
{data.length === 0 ? (
3943
<Spin />
4044
) : (
4145
<>
@@ -78,7 +82,7 @@ export function DiskUsage(): JSX.Element {
7882
}}
7983
color={['#FFB816', '#175FFF']}
8084
tooltip={{
81-
formatter: (v) => {
85+
formatter: v => {
8286
return {
8387
name: v.type,
8488
value: `${(v.value / 1000000000).toFixed(2)}GB`,
@@ -126,7 +130,7 @@ export function DiskUsage(): JSX.Element {
126130
}}
127131
color={['#FFB816', '#175FFF']}
128132
tooltip={{
129-
formatter: (v) => {
133+
formatter: v => {
130134
return {
131135
name: v.type,
132136
value: `${(v.value / 1000000000).toFixed(2)}GB`,

‎frontend/src/pages/Errors/Errors.tsx

+13-16
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,15 @@ import { Table, notification } from 'antd'
33
import { ColumnsType } from 'antd/es/table'
44
import { isoTimestampToHumanReadable } from '../../utils/dateUtils'
55

6+
import useSWR from 'swr'
7+
68
interface ErrorData {
79
name: string
810
count: number
911
max_last_error_time: string
1012
}
1113

1214
export default function CollapsibleTable() {
13-
const [slowQueries, setSlowQueries] = useState([])
14-
1515
const slowQueriesColumns: ColumnsType<ErrorData> = [
1616
{
1717
title: 'Error',
@@ -26,37 +26,34 @@ export default function CollapsibleTable() {
2626
{
2727
title: 'Most recent occurence',
2828
dataIndex: 'max_last_error_time',
29-
render: (_, item) => isoTimestampToHumanReadable(item.max_last_error_time)
29+
render: (_, item) => isoTimestampToHumanReadable(item.max_last_error_time),
3030
},
3131
]
3232

33-
const loadData = async () => {
33+
const loadData = async (url: string) => {
3434
try {
35-
const res = await fetch('/api/analyze/errors')
35+
const res = await fetch(url)
3636
const resJson = await res.json()
3737

3838
const slowQueriesData = resJson.map((error: ErrorData, idx: number) => ({ key: idx, ...error }))
39-
setSlowQueries(slowQueriesData)
39+
return slowQueriesData
4040
} catch {
4141
notification.error({ message: 'Failed to load data' })
4242
}
4343
}
4444

45-
useEffect(() => {
46-
loadData()
47-
}, [])
45+
const { data, error, isLoading, mutate } = useSWR('/api/analyze/errors', loadData)
4846

49-
return (
47+
return isLoading ? (
48+
<div>loading...</div>
49+
) : error ? (
50+
<div>error</div>
51+
) : (
5052
<div>
5153
<h1 style={{ textAlign: 'left' }}>Errors</h1>
5254
<br />
5355
<div>
54-
<Table
55-
columns={slowQueriesColumns}
56-
dataSource={slowQueries}
57-
size="small"
58-
loading={slowQueries.length < 1}
59-
/>
56+
<Table columns={slowQueriesColumns} dataSource={data} size="small" loading={isLoading} />
6057
</div>
6158
</div>
6259
)

‎frontend/src/pages/Logs/Logs.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ export default function Logs() {
8686
<h1 style={{ textAlign: 'left' }}>Logs</h1>
8787
<Input
8888
style={{ boxShadow: 'none' }}
89-
onChange={(e) => setLogMessageFilter(e.target.value)}
89+
onChange={e => setLogMessageFilter(e.target.value)}
9090
value={logMessageFilter}
9191
/>
9292
<br />

‎frontend/src/pages/Operations/Operations.tsx

+27-15
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import TextArea from 'antd/es/input/TextArea'
1111
import { ColumnType } from 'antd/es/table'
1212
import { isoTimestampToHumanReadable } from '../../utils/dateUtils'
1313

14+
import useSWR from 'swr'
15+
1416
const OPERATION_STATUS_TO_HUMAN = {
1517
0: 'Not started',
1618
1: 'Running',
@@ -74,25 +76,29 @@ export function OperationControls({
7476
}
7577

7678
export function OperationsList(): JSX.Element {
77-
const [operations, setOperations] = useState([])
78-
79-
const fetchAndUpdateOperationsIfNeeded = async () => {
80-
const response = await fetch('/api/async_migrations')
79+
const fetchAndUpdateOperationsIfNeeded = async (url: string) => {
80+
const response = await fetch(url)
8181
const responseJson = await response.json()
8282
const results = responseJson.results
8383
if (JSON.stringify(results) !== JSON.stringify(operations)) {
84-
setOperations(results)
84+
return results
8585
}
8686
}
8787

88-
const triggerOperation = async (id) => {
88+
const triggerOperation = async id => {
8989
await fetch(`/api/async_migrations/${id}/trigger`, { method: 'POST' })
9090
await fetchAndUpdateOperationsIfNeeded()
9191
}
9292

93+
const { data: operations, error, isLoading, mutate } = useSWR(
94+
'/api/async_migrations',
95+
fetchAndUpdateOperationsIfNeeded
96+
)
97+
9398
useEffect(() => {
94-
fetchAndUpdateOperationsIfNeeded()
95-
const intervalId = setInterval(fetchAndUpdateOperationsIfNeeded, 5000)
99+
const intervalId = setInterval(() => {
100+
mutate('/api/async_migrations')
101+
}, 5000)
96102
return () => {
97103
try {
98104
clearInterval(intervalId)
@@ -121,11 +127,11 @@ export function OperationsList(): JSX.Element {
121127
},
122128
{
123129
title: 'Started at',
124-
render: (_, migration) => migration.started_at ? isoTimestampToHumanReadable(migration.started_at) : '',
130+
render: (_, migration) => (migration.started_at ? isoTimestampToHumanReadable(migration.started_at) : ''),
125131
},
126132
{
127133
title: 'Finished at',
128-
render: (_, migration) => migration.finished_at ? isoTimestampToHumanReadable(migration.finished_at) : '',
134+
render: (_, migration) => (migration.finished_at ? isoTimestampToHumanReadable(migration.finished_at) : ''),
129135
},
130136
{
131137
title: '',
@@ -140,7 +146,13 @@ export function OperationsList(): JSX.Element {
140146
},
141147
]
142148

143-
return <Table columns={columns} dataSource={operations} />
149+
return isLoading ? (
150+
<div>loading...</div>
151+
) : error ? (
152+
<div>error</div>
153+
) : (
154+
<Table columns={columns} dataSource={operations} />
155+
)
144156
}
145157

146158
export function CreateNewOperation(): JSX.Element {
@@ -221,8 +233,8 @@ export function CreateNewOperation(): JSX.Element {
221233
code[`operation-${i + 1}`] ||
222234
`CREATE TABLE test_table ( foo String ) Engine=MergeTree() ORDER BY foo`
223235
}
224-
onValueChange={(value) => setCode({ ...code, [`operation-${i + 1}`]: value })}
225-
highlight={(code) => highlight(code, languages.sql)}
236+
onValueChange={value => setCode({ ...code, [`operation-${i + 1}`]: value })}
237+
highlight={code => highlight(code, languages.sql)}
226238
padding={10}
227239
style={{
228240
fontFamily: '"Fira code", "Fira Mono", monospace',
@@ -242,8 +254,8 @@ export function CreateNewOperation(): JSX.Element {
242254
id={`create-migration-form-rollback-${i + 1}`}
243255
name={`rollback-${i + 1}`}
244256
value={code[`rollback-${i + 1}`] || `DROP TABLE IF EXISTS test_table`}
245-
onValueChange={(value) => setCode({ ...code, [`rollback-${i + 1}`]: value })}
246-
highlight={(code) => highlight(code, languages.sql)}
257+
onValueChange={value => setCode({ ...code, [`rollback-${i + 1}`]: value })}
258+
highlight={code => highlight(code, languages.sql)}
247259
padding={10}
248260
style={{
249261
fontFamily: '"Fira code", "Fira Mono", monospace',

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

+5-4
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import 'prismjs/components/prism-sql'
66
import 'prismjs/themes/prism.css'
77
import Editor from 'react-simple-code-editor'
88
import { Column } from '@ant-design/charts'
9+
import useSWR from 'swr'
910

1011
export interface BenchmarkingData {
1112
benchmarking_result: {
@@ -82,8 +83,8 @@ export default function QueryBenchmarking() {
8283
</p>
8384
<Editor
8485
value={query1}
85-
onValueChange={(code) => setQuery1(code)}
86-
highlight={(code) => highlight(code, languages.sql)}
86+
onValueChange={code => setQuery1(code)}
87+
highlight={code => highlight(code, languages.sql)}
8788
padding={10}
8889
style={{
8990
fontFamily: '"Fira code", "Fira Mono", monospace',
@@ -102,8 +103,8 @@ export default function QueryBenchmarking() {
102103
</p>
103104
<Editor
104105
value={query2}
105-
onValueChange={(code) => setQuery2(code)}
106-
highlight={(code) => highlight(code, languages.sql)}
106+
onValueChange={code => setQuery2(code)}
107+
highlight={code => highlight(code, languages.sql)}
107108
padding={10}
108109
style={{
109110
fontFamily: '"Fira code", "Fira Mono", monospace',

0 commit comments

Comments
 (0)