diff --git a/frontend/src/pages/Overview/Overview.tsx b/frontend/src/pages/Overview/Overview.tsx
index 4cb04fa..c74db52 100644
--- a/frontend/src/pages/Overview/Overview.tsx
+++ b/frontend/src/pages/Overview/Overview.tsx
@@ -3,6 +3,7 @@ import { Line } from '@ant-design/charts'
import { Card, Col, Row, Tooltip, notification } from 'antd'
import { InfoCircleOutlined } from '@ant-design/icons'
import { clickhouseTips } from './tips'
+import useSWR from 'swr'
interface MetricData {
day_start: string
@@ -17,37 +18,34 @@ interface QueryGraphsData {
}
export default function Overview() {
- const [queryGraphs, setQueryGraphs] = useState
({
- execution_count: [],
- memory_usage: [],
- read_bytes: [],
- cpu: [],
- })
-
- const loadData = async () => {
+ const loadData = async (url: string) => {
try {
- const res = await fetch('/api/analyze/query_graphs')
+ const res = await fetch(url)
const resJson = await res.json()
const execution_count = resJson.execution_count
const memory_usage = resJson.memory_usage
const read_bytes = resJson.read_bytes
const cpu = resJson.cpu
- setQueryGraphs({ execution_count, memory_usage, read_bytes, cpu })
+ return { execution_count, memory_usage, read_bytes, cpu }
} catch (err) {
notification.error({ message: 'Failed to load data' })
}
}
- useEffect(() => {
- loadData()
- }, [])
+ const { data, error, isLoading } = useSWR('/api/analyze/query_graphs', loadData)
const now = new Date()
const dayOfTheYear = Math.floor(
(now.getTime() - new Date(now.getFullYear(), 0, 0).getTime()) / (1000 * 60 * 60 * 24)
)
- return (
+ console.log(data, error, isLoading)
+
+ return isLoading ? (
+ loading
+ ) : error ? (
+ error
+ ) : (
Overview
{clickhouseTips[dayOfTheYear % clickhouseTips.length]}
@@ -56,7 +54,7 @@ export default function Overview() {
({
+ data={data.execution_count.map(dataPoint => ({
...dataPoint,
day_start: dataPoint.day_start.split('T')[0],
}))}
@@ -65,14 +63,14 @@ export default function Overview() {
xAxis={{ tickCount: 5 }}
style={{ padding: 20, height: 300 }}
color="#ffb200"
- loading={queryGraphs.execution_count.length < 1}
+ loading={isLoading}
/>
({
+ data={data.read_bytes.map(dataPoint => ({
day_start: dataPoint.day_start.split('T')[0],
total: dataPoint.total / 1000000000,
}))}
@@ -81,7 +79,7 @@ export default function Overview() {
xAxis={{ tickCount: 5 }}
style={{ padding: 20, height: 300 }}
color="#ffb200"
- loading={queryGraphs.read_bytes.length < 1}
+ loading={isLoading}
/>
@@ -90,7 +88,7 @@ export default function Overview() {
({
+ data={data.memory_usage.map(dataPoint => ({
day_start: dataPoint.day_start.split('T')[0],
total: dataPoint.total / 1000000000,
}))}
@@ -98,7 +96,7 @@ export default function Overview() {
yField={'total'}
style={{ padding: 20, height: 300 }}
color="#ffb200"
- loading={queryGraphs.memory_usage.length < 1}
+ loading={isLoading}
/>
@@ -117,7 +115,7 @@ export default function Overview() {
}
>
({
+ data={data.cpu.map(dataPoint => ({
day_start: dataPoint.day_start.split('T')[0],
total: dataPoint.total,
}))}
@@ -125,7 +123,7 @@ export default function Overview() {
yField={'total'}
style={{ padding: 20, height: 300 }}
color="#ffb200"
- loading={queryGraphs.cpu.length < 1}
+ loading={isLoading}
/>
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
new file mode 100644
index 0000000..8bb5a58
--- /dev/null
+++ b/frontend/vite.config.ts
@@ -0,0 +1,27 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [react()],
+ server: {
+ proxy: {
+ "/api": {
+ target: "http://127.0.0.1:8000",
+ secure: false,
+ ws: true,
+ },
+ "/admin/": {
+ target: "http://127.0.0.1:8000",
+ secure: false,
+ ws: true,
+ },
+ "/logout": {
+ target: "http://127.0.0.1:8000",
+ secure: false,
+ ws: true,
+ },
+ },
+ },
+ base: process.env.NODE_ENV === "production" ? "/webapp/" : "/",
+})