Skip to content

Commit

Permalink
checkpoint again
Browse files Browse the repository at this point in the history
  • Loading branch information
@fuziontech
fuziontech committed Jan 27, 2024
1 parent 52cce2d commit 21116bf
Show file tree
Hide file tree
Showing 5 changed files with 64 additions and 50 deletions.
32 changes: 18 additions & 14 deletions frontend/src/pages/DiskUsage/DiskUsage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,40 +2,44 @@ import React, { useEffect, useState } from 'react'
import { Pie } from '@ant-design/plots'
import { Card, Spin, Row, Col, notification } from 'antd'

import useSWR from 'swr'

interface NodeData {
node: string
space_used: number
free_space: number
}

export function DiskUsage(): JSX.Element {
const [clusterOverviewData, setClusterOverviewData] = useState<NodeData[]>([])

const loadData = async () => {
const loadData = async (url: string) => {
try {
const res = await fetch('/api/analyze/cluster_overview')
const res = await fetch(url)
const resJson = await res.json()
setClusterOverviewData(resJson)
return resJson
} catch {
notification.error({ message: 'Failed to load data' })
}
}

useEffect(() => {
loadData()
}, [])
const { data, error, isLoading } = useSWR('/api/analyze/cluster_overview', loadData)

const rows = []
for (let i = 0; i < clusterOverviewData.length; i += 2) {
rows.push(clusterOverviewData.slice(i, i + 2))
if (!isLoading) {
for (let i = 0; i < data.length; i += 2) {
rows.push(data.slice(i, i + 2))
}
}

return (
return isLoading ? (
<div>loading...</div>
) : error ? (
<div>error</div>
) : (
<div style={{ textAlign: 'left' }}>
<h1>Disk usage</h1>
<br />
<div style={{ display: 'block' }}>
{clusterOverviewData.length === 0 ? (
{data.length === 0 ? (
<Spin />
) : (
<>
Expand Down Expand Up @@ -78,7 +82,7 @@ export function DiskUsage(): JSX.Element {
}}
color={['#FFB816', '#175FFF']}
tooltip={{
formatter: (v) => {
formatter: v => {
return {
name: v.type,
value: `${(v.value / 1000000000).toFixed(2)}GB`,
Expand Down Expand Up @@ -126,7 +130,7 @@ export function DiskUsage(): JSX.Element {
}}
color={['#FFB816', '#175FFF']}
tooltip={{
formatter: (v) => {
formatter: v => {
return {
name: v.type,
value: `${(v.value / 1000000000).toFixed(2)}GB`,
Expand Down
29 changes: 13 additions & 16 deletions frontend/src/pages/Errors/Errors.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@ import { Table, notification } from 'antd'
import { ColumnsType } from 'antd/es/table'
import { isoTimestampToHumanReadable } from '../../utils/dateUtils'

import useSWR from 'swr'

interface ErrorData {
name: string
count: number
max_last_error_time: string
}

export default function CollapsibleTable() {
const [slowQueries, setSlowQueries] = useState([])

const slowQueriesColumns: ColumnsType<ErrorData> = [
{
title: 'Error',
Expand All @@ -26,37 +26,34 @@ export default function CollapsibleTable() {
{
title: 'Most recent occurence',
dataIndex: 'max_last_error_time',
render: (_, item) => isoTimestampToHumanReadable(item.max_last_error_time)
render: (_, item) => isoTimestampToHumanReadable(item.max_last_error_time),
},
]

const loadData = async () => {
const loadData = async (url: string) => {
try {
const res = await fetch('/api/analyze/errors')
const res = await fetch(url)
const resJson = await res.json()

const slowQueriesData = resJson.map((error: ErrorData, idx: number) => ({ key: idx, ...error }))
setSlowQueries(slowQueriesData)
return slowQueriesData
} catch {
notification.error({ message: 'Failed to load data' })
}
}

useEffect(() => {
loadData()
}, [])
const { data, error, isLoading, mutate } = useSWR('/api/analyze/errors', loadData)

return (
return isLoading ? (
<div>loading...</div>
) : error ? (
<div>error</div>
) : (
<div>
<h1 style={{ textAlign: 'left' }}>Errors</h1>
<br />
<div>
<Table
columns={slowQueriesColumns}
dataSource={slowQueries}
size="small"
loading={slowQueries.length < 1}
/>
<Table columns={slowQueriesColumns} dataSource={data} size="small" loading={isLoading} />
</div>
</div>
)
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/pages/Logs/Logs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export default function Logs() {
<h1 style={{ textAlign: 'left' }}>Logs</h1>
<Input
style={{ boxShadow: 'none' }}
onChange={(e) => setLogMessageFilter(e.target.value)}
onChange={e => setLogMessageFilter(e.target.value)}
value={logMessageFilter}
/>
<br />
Expand Down
42 changes: 27 additions & 15 deletions frontend/src/pages/Operations/Operations.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import TextArea from 'antd/es/input/TextArea'
import { ColumnType } from 'antd/es/table'
import { isoTimestampToHumanReadable } from '../../utils/dateUtils'

import useSWR from 'swr'

const OPERATION_STATUS_TO_HUMAN = {
0: 'Not started',
1: 'Running',
Expand Down Expand Up @@ -74,25 +76,29 @@ export function OperationControls({
}

export function OperationsList(): JSX.Element {
const [operations, setOperations] = useState([])

const fetchAndUpdateOperationsIfNeeded = async () => {
const response = await fetch('/api/async_migrations')
const fetchAndUpdateOperationsIfNeeded = async (url: string) => {
const response = await fetch(url)
const responseJson = await response.json()
const results = responseJson.results
if (JSON.stringify(results) !== JSON.stringify(operations)) {
setOperations(results)
return results
}
}

const triggerOperation = async (id) => {
const triggerOperation = async id => {
await fetch(`/api/async_migrations/${id}/trigger`, { method: 'POST' })
await fetchAndUpdateOperationsIfNeeded()
}

const { data: operations, error, isLoading, mutate } = useSWR(
'/api/async_migrations',
fetchAndUpdateOperationsIfNeeded
)

useEffect(() => {
fetchAndUpdateOperationsIfNeeded()
const intervalId = setInterval(fetchAndUpdateOperationsIfNeeded, 5000)
const intervalId = setInterval(() => {
mutate('/api/async_migrations')
}, 5000)
return () => {
try {
clearInterval(intervalId)
Expand Down Expand Up @@ -121,11 +127,11 @@ export function OperationsList(): JSX.Element {
},
{
title: 'Started at',
render: (_, migration) => migration.started_at ? isoTimestampToHumanReadable(migration.started_at) : '',
render: (_, migration) => (migration.started_at ? isoTimestampToHumanReadable(migration.started_at) : ''),
},
{
title: 'Finished at',
render: (_, migration) => migration.finished_at ? isoTimestampToHumanReadable(migration.finished_at) : '',
render: (_, migration) => (migration.finished_at ? isoTimestampToHumanReadable(migration.finished_at) : ''),
},
{
title: '',
Expand All @@ -140,7 +146,13 @@ export function OperationsList(): JSX.Element {
},
]

return <Table columns={columns} dataSource={operations} />
return isLoading ? (
<div>loading...</div>
) : error ? (
<div>error</div>
) : (
<Table columns={columns} dataSource={operations} />
)
}

export function CreateNewOperation(): JSX.Element {
Expand Down Expand Up @@ -221,8 +233,8 @@ export function CreateNewOperation(): JSX.Element {
code[`operation-${i + 1}`] ||
`CREATE TABLE test_table ( foo String ) Engine=MergeTree() ORDER BY foo`
}
onValueChange={(value) => setCode({ ...code, [`operation-${i + 1}`]: value })}
highlight={(code) => highlight(code, languages.sql)}
onValueChange={value => setCode({ ...code, [`operation-${i + 1}`]: value })}
highlight={code => highlight(code, languages.sql)}
padding={10}
style={{
fontFamily: '"Fira code", "Fira Mono", monospace',
Expand All @@ -242,8 +254,8 @@ export function CreateNewOperation(): JSX.Element {
id={`create-migration-form-rollback-${i + 1}`}
name={`rollback-${i + 1}`}
value={code[`rollback-${i + 1}`] || `DROP TABLE IF EXISTS test_table`}
onValueChange={(value) => setCode({ ...code, [`rollback-${i + 1}`]: value })}
highlight={(code) => highlight(code, languages.sql)}
onValueChange={value => setCode({ ...code, [`rollback-${i + 1}`]: value })}
highlight={code => highlight(code, languages.sql)}
padding={10}
style={{
fontFamily: '"Fira code", "Fira Mono", monospace',
Expand Down
9 changes: 5 additions & 4 deletions frontend/src/pages/QueryEditor/Benchmark.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import 'prismjs/components/prism-sql'
import 'prismjs/themes/prism.css'
import Editor from 'react-simple-code-editor'
import { Column } from '@ant-design/charts'
import useSWR from 'swr'

export interface BenchmarkingData {
benchmarking_result: {
Expand Down Expand Up @@ -82,8 +83,8 @@ export default function QueryBenchmarking() {
</p>
<Editor
value={query1}
onValueChange={(code) => setQuery1(code)}
highlight={(code) => highlight(code, languages.sql)}
onValueChange={code => setQuery1(code)}
highlight={code => highlight(code, languages.sql)}
padding={10}
style={{
fontFamily: '"Fira code", "Fira Mono", monospace',
Expand All @@ -102,8 +103,8 @@ export default function QueryBenchmarking() {
</p>
<Editor
value={query2}
onValueChange={(code) => setQuery2(code)}
highlight={(code) => highlight(code, languages.sql)}
onValueChange={code => setQuery2(code)}
highlight={code => highlight(code, languages.sql)}
padding={10}
style={{
fontFamily: '"Fira code", "Fira Mono", monospace',
Expand Down

0 comments on commit 21116bf

Please sign in to comment.