TS fixes and hacks

PostHog · Jan 30, 2024 · 52c2a07 · 52c2a07
1 parent 392db10
commit 52c2a07
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 32 deletions.
diff --git a/frontend/src/pages/Backups/Backups.tsx b/frontend/src/pages/Backups/Backups.tsx
@@ -201,7 +201,7 @@ export default function Backups() {
                     </Form.Item>
                 </Form>
             </Modal>
-            <Table columns={columns} dataSource={data.backups} loading={isLoading} />
+            <Table columns={columns} dataSource={data!.backups} loading={isLoading} />
         </div>
     )
 }
diff --git a/frontend/src/pages/Backups/ScheduledBackups.tsx b/frontend/src/pages/Backups/ScheduledBackups.tsx
@@ -2,7 +2,8 @@ import React, { useEffect, useState } from 'react'
 import { usePollingEffect } from '../../utils/usePollingEffect'
 import { ColumnType } from 'antd/es/table'
 import { Switch, Select, Table, Button, Form, Input, Modal, Tag, Col, Progress, Row, Tooltip, notification } from 'antd'
-import { DeleteOutlined, EditOutlined } from '@ant-design/icons'
+import DeleteOutlined from '@ant-design/icons'
+import EditOutlined from '@ant-design/icons'
 import { Clusters } from '../Clusters/Clusters'
 import useSWR, { mutate } from 'swr'
 
@@ -174,7 +175,7 @@ export default function ScheduledBackups() {
 
                 return (
                     <a id={id} onClick={deleteBackup}>
-                        <DeleteOutlined rev={undefined} />
+                        <DeleteOutlined />
                     </a>
                 )
             },
@@ -245,7 +246,7 @@ export default function ScheduledBackups() {
 
                     <Form.Item name="cluster" label="Cluster">
                         <Select>
-                            {clusters.clusters.map(cluster => (
+                            {clusters!.clusters.map((cluster: any) => (
                                 <Select.Option value={cluster.cluster}>{cluster.cluster}</Select.Option>
                             ))}
                         </Select>
@@ -317,7 +318,7 @@ export default function ScheduledBackups() {
                     </Form.Item>
                 </Form>
             </Modal>
-            <Table columns={columns} dataSource={backups.backups} loading={backupsIsLoading} />
+            <Table columns={columns} dataSource={backups!.backups} loading={backupsIsLoading} />
         </div>
     )
 }
diff --git a/frontend/src/pages/Clusters/Clusters.tsx b/frontend/src/pages/Clusters/Clusters.tsx
@@ -68,7 +68,7 @@ export default function Clusters() {
             <p>These are the clusters that are configured in the connected ClickHouse instance</p>
             <div>
                 <ul>
-                    {data.clusters.map(cluster => (
+                    {data!.clusters.map((cluster: any) => (
                         <>
                             <h1 key={cluster.cluster}>{cluster.cluster}</h1>
                             <Table columns={columns} dataSource={cluster.nodes} loading={isLoading} />

diff --git a/frontend/src/pages/DiskUsage/DiskUsage.tsx b/frontend/src/pages/DiskUsage/DiskUsage.tsx
@@ -66,7 +66,8 @@ export function DiskUsage(): JSX.Element {
                                             label={{
                                                 type: 'inner',
                                                 offset: '-30%',
-                                                content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
+                                                content: ({ percent }: { percent: number }) =>
+                                                    `${(percent * 100).toFixed(0)}%`,
                                                 style: {
                                                     fontSize: 14,
                                                     textAlign: 'center',
@@ -82,7 +83,7 @@ export function DiskUsage(): JSX.Element {
                                             }}
                                             color={['#FFB816', '#175FFF']}
                                             tooltip={{
-                                                formatter: v => {
+                                                formatter: (v: any) => {
                                                     return {
                                                         name: v.type,
                                                         value: `${(v.value / 1000000000).toFixed(2)}GB`,
@@ -114,7 +115,8 @@ export function DiskUsage(): JSX.Element {
                                                 label={{
                                                     type: 'inner',
                                                     offset: '-30%',
-                                                    content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
+                                                    content: ({ percent }: { percent: number }) =>
+                                                        `${(percent * 100).toFixed(0)}%`,
                                                     style: {
                                                         fontSize: 14,
                                                         textAlign: 'center',
@@ -130,7 +132,7 @@ export function DiskUsage(): JSX.Element {
                                                 }}
                                                 color={['#FFB816', '#175FFF']}
                                                 tooltip={{
-                                                    formatter: v => {
+                                                    formatter: (v: any) => {
                                                         return {
                                                             name: v.type,
                                                             value: `${(v.value / 1000000000).toFixed(2)}GB`,

diff --git a/frontend/src/pages/Overview/Overview.tsx b/frontend/src/pages/Overview/Overview.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { Line } from '@ant-design/charts'
 import { Card, Col, Row, Tooltip, notification } from 'antd'
-import { InfoCircleOutlined } from '@ant-design/icons'
+import InfoCircleOutlined from '@ant-design/icons'
 import { clickhouseTips } from './tips'
 import useSWR from 'swr'
 
@@ -54,7 +54,7 @@ export default function Overview() {
                 <Col span={12}>
                     <Card style={{ boxShadow: '2px 2px 2px 2px rgb(217 208 208 / 20%)' }} title="Number of queries">
                         <Line
-                            data={data.execution_count.map(dataPoint => ({
+                            data={data!.execution_count.map((dataPoint: any) => ({
                                 ...dataPoint,
                                 day_start: dataPoint.day_start.split('T')[0],
                             }))}
@@ -70,7 +70,7 @@ export default function Overview() {
                 <Col span={12}>
                     <Card style={{ boxShadow: '2px 2px 2px 2px rgb(217 208 208 / 20%)' }} title="Data read (GB)">
                         <Line
-                            data={data.read_bytes.map(dataPoint => ({
+                            data={data!.read_bytes.map((dataPoint: any) => ({
                                 day_start: dataPoint.day_start.split('T')[0],
                                 total: dataPoint.total / 1000000000,
                             }))}
@@ -88,7 +88,7 @@ export default function Overview() {
                 <Col span={12}>
                     <Card style={{ boxShadow: '2px 2px 2px 2px rgb(217 208 208 / 20%)' }} title="Memory usage (GB)">
                         <Line
-                            data={data.memory_usage.map(dataPoint => ({
+                            data={data!.memory_usage.map((dataPoint: any) => ({
                                 day_start: dataPoint.day_start.split('T')[0],
                                 total: dataPoint.total / 1000000000,
                             }))}
@@ -109,13 +109,13 @@ export default function Overview() {
                                 <Tooltip
                                     title={`Calculated from OSCPUVirtualTimeMicroseconds metric from ClickHouse query log's ProfileEvents.`}
                                 >
-                                    <InfoCircleOutlined rev={undefined} />
+                                    <InfoCircleOutlined />
                                 </Tooltip>
                             </>
                         }
                     >
                         <Line
-                            data={data.cpu.map(dataPoint => ({
+                            data={data!.cpu.map((dataPoint: any) => ({
                                 day_start: dataPoint.day_start.split('T')[0],
                                 total: dataPoint.total,
                             }))}

diff --git a/frontend/src/pages/QueryEditor/QueryEditor.tsx b/frontend/src/pages/QueryEditor/QueryEditor.tsx
@@ -6,7 +6,7 @@ import 'prismjs/components/prism-sql'
 import 'prismjs/themes/prism.css'
 import Editor from 'react-simple-code-editor'
 import { v4 as uuidv4 } from 'uuid'
-import { SaveOutlined } from '@ant-design/icons'
+import SaveOutlined from '@ant-design/icons'
 
 function CreateSavedQueryModal({
     modalOpen = false,
@@ -27,7 +27,7 @@ function CreateSavedQueryModal({
                 onOk={() => saveQuery(queryName)}
                 onCancel={() => setModalOpen(false)}
             >
-                <Input value={queryName} onChange={(e) => setQueryName(e.target.value)} />
+                <Input value={queryName} onChange={e => setQueryName(e.target.value)} />
             </Modal>
         </>
     )
@@ -42,7 +42,7 @@ export default function QueryEditor() {
     const [runningQueryId, setRunningQueryId] = useState<null | string>(null)
     const [modalOpen, setModalOpen] = useState(false)
 
-    const columns = data.length > 0 ? Object.keys(data[0]).map((column) => ({ title: column, dataIndex: column })) : []
+    const columns = data.length > 0 ? Object.keys(data[0]).map(column => ({ title: column, dataIndex: column })) : []
 
     const saveQuery = async (queryName: string) => {
         try {
@@ -116,7 +116,7 @@ export default function QueryEditor() {
                     {data && Object.keys(data[0] || {}).length > 0 ? (
                         <Tooltip title="Save query">
                             <Button style={{ background: 'transparent' }} onClick={() => setModalOpen(true)}>
-                                <SaveOutlined rev={undefined} />
+                                <SaveOutlined />
                             </Button>
                         </Tooltip>
                     ) : null}
@@ -125,8 +125,8 @@ export default function QueryEditor() {
 
             <Editor
                 value={sql}
-                onValueChange={(code) => setSql(code)}
-                highlight={(code) => highlight(code, languages.sql)}
+                onValueChange={code => setSql(code)}
+                highlight={code => highlight(code, languages.sql)}
                 padding={10}
                 style={{
                     fontFamily: '"Fira code", "Fira Mono", monospace',

diff --git a/frontend/src/pages/QueryEditor/SavedQueries.tsx b/frontend/src/pages/QueryEditor/SavedQueries.tsx
@@ -2,7 +2,7 @@ import { Table, Button, Row, Col, Tooltip } from 'antd'
 import React, { useEffect, useState } from 'react'
 import { ColumnType } from 'antd/es/table'
 import SavedQuery from './SavedQuery'
-import { ReloadOutlined } from '@ant-design/icons'
+import ReloadOutlined from '@ant-design/icons'
 import { useHistory } from 'react-router-dom'
 import { isoTimestampToHumanReadable } from '../../utils/dateUtils'
 
@@ -30,7 +30,7 @@ export default function SavedQueries({ match }: { match: { params: { id: string
         loadData()
     }, [])
 
-    const columns: ColumnType<{ name: string; id: number; query: string, created_at: string }>[] = [
+    const columns: ColumnType<{ name: string; id: number; query: string; created_at: string }>[] = [
         {
             title: 'Name',
             dataIndex: 'name',
@@ -48,7 +48,7 @@ export default function SavedQueries({ match }: { match: { params: { id: string
         },
         {
             title: 'Created at',
-            render: (_, item) => item.created_at ? isoTimestampToHumanReadable(item.created_at) : '',
+            render: (_, item) => (item.created_at ? isoTimestampToHumanReadable(item.created_at) : ''),
         },
     ]
 
@@ -74,7 +74,7 @@ export default function SavedQueries({ match }: { match: { params: { id: string
                         <Col span={1}>
                             <Tooltip title="Refresh list">
                                 <Button style={{ background: 'transparent' }} onClick={loadData}>
-                                    <ReloadOutlined rev={undefined} />
+                                    <ReloadOutlined />
                                 </Button>
                             </Tooltip>
                         </Col>

diff --git a/frontend/src/pages/SlowQueries/MetricsTab.tsx b/frontend/src/pages/SlowQueries/MetricsTab.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { Line } from '@ant-design/plots'
 // @ts-ignore
 import { Card, Col, Row, Tooltip, notification } from 'antd'
-import { InfoCircleOutlined } from '@ant-design/icons'
+import InfoCircleOutlined from '@ant-design/icons'
 import { NoDataSpinner, QueryDetailData } from './QueryDetail'
 
 export default function MetricsTab({ query_hash }: { query_hash: string }) {
@@ -31,7 +31,7 @@ export default function MetricsTab({ query_hash }: { query_hash: string }) {
                 <Col span={12}>
                     <Card style={{ boxShadow: '2px 2px 2px 2px rgb(217 208 208 / 20%)' }} title="Number of queries">
                         <Line
-                            data={data.execution_count.map((dataPoint) => ({
+                            data={data.execution_count.map(dataPoint => ({
                                 ...dataPoint,
                                 day_start: dataPoint.day_start.split('T')[0],
                             }))}
@@ -46,7 +46,7 @@ export default function MetricsTab({ query_hash }: { query_hash: string }) {
                 <Col span={12}>
                     <Card style={{ boxShadow: '2px 2px 2px 2px rgb(217 208 208 / 20%)' }} title="Data read (GB)">
                         <Line
-                            data={data.read_bytes.map((dataPoint) => ({
+                            data={data.read_bytes.map(dataPoint => ({
                                 day_start: dataPoint.day_start.split('T')[0],
                                 total: dataPoint.total / 1000000000,
                             }))}
@@ -63,7 +63,7 @@ export default function MetricsTab({ query_hash }: { query_hash: string }) {
                 <Col span={12}>
                     <Card style={{ boxShadow: '2px 2px 2px 2px rgb(217 208 208 / 20%)' }} title="Memory usage (GB)">
                         <Line
-                            data={data.memory_usage.map((dataPoint) => ({
+                            data={data.memory_usage.map(dataPoint => ({
                                 day_start: dataPoint.day_start.split('T')[0],
                                 total: dataPoint.total / 1000000000,
                             }))}
@@ -84,14 +84,14 @@ export default function MetricsTab({ query_hash }: { query_hash: string }) {
                                     title={`Calculated from OSCPUVirtualTimeMicroseconds metric from ClickHouse query log's ProfileEvents.`}
                                 >
                                     <span>
-                                        <InfoCircleOutlined rev={undefined} />
+                                        <InfoCircleOutlined />
                                     </span>
                                 </Tooltip>
                             </>
                         }
                     >
                         <Line
-                            data={data.cpu.map((dataPoint) => ({
+                            data={data.cpu.map(dataPoint => ({
                                 day_start: dataPoint.day_start.split('T')[0],
                                 total: dataPoint.total,
                             }))}