diff --git a/src/pages/instance/[identifier]/index.tsx b/src/pages/instance/[identifier]/index.tsx
index 9d7f307..6fc72d1 100644
--- a/src/pages/instance/[identifier]/index.tsx
+++ b/src/pages/instance/[identifier]/index.tsx
@@ -4,6 +4,8 @@ import { useRouter } from 'next/router'
import Link from 'next/link'
import mysql from 'mysql2/promise'
import { getConfig } from '@/lib/config'
+import { Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, getKeyValue, SortDescriptor } from '@nextui-org/react'
+import React from 'react'
type TransactionInfoDict = {
[threadId: number]: TransactionInfo
@@ -61,9 +63,7 @@ const blackOrWhite = function (hex: string): string {
const parseInnoDbStatus = (innoDbStatus: string): TransactionInfoDict => {
const splitInnoDbStatus = innoDbStatus.split('\n') // Find the line LIST OF TRANSACTIONS FOR EACH SESSION:\n
- const transactionsStartIndex = splitInnoDbStatus.findIndex((line) =>
- line.includes('LIST OF TRANSACTIONS FOR EACH SESSION:')
- )
+ const transactionsStartIndex = splitInnoDbStatus.findIndex((line) => line.includes('LIST OF TRANSACTIONS FOR EACH SESSION:'))
// After the transactionStartIndex, read transactions lines, splitting by lines starting with ---TRANSACTION, until we meet the line --------\n
const transactions: TransactionInfoDict = {}
@@ -129,9 +129,7 @@ export const getServerSideProps = (async (context) => {
conn = await mysql.createConnection(instance)
const [processListResult] = await conn.query('SHOW PROCESSLIST;')
processList = processListResult as Process[]
- const [innoDbStatusResult] = await conn.query(
- 'SHOW ENGINE INNODB STATUS;'
- )
+ const [innoDbStatusResult] = await conn.query('SHOW ENGINE INNODB STATUS;')
innoDbStatusString = innoDbStatusResult[0]['Status'] as string
} finally {
@@ -140,14 +138,13 @@ export const getServerSideProps = (async (context) => {
const innoDbStatus = parseInnoDbStatus(innoDbStatusString)
- const processListWithTransaction: ProcessWithTransaction[] =
- processList.map((process) => {
- const transaction = innoDbStatus[process.Id] || null
- return {
- ...process,
- transaction,
- }
- })
+ const processListWithTransaction: ProcessWithTransaction[] = processList.map((process) => {
+ const transaction = innoDbStatus[process.Id] || null
+ return {
+ ...process,
+ transaction,
+ }
+ })
// Order by transaction.activeTime desc, then by process.Time desc
processListWithTransaction.sort((a, b) => {
@@ -171,10 +168,29 @@ export const getServerSideProps = (async (context) => {
return { props: { repo } }
}) satisfies GetServerSideProps<{ repo: Repo }>
-export default function Home({
- repo,
-}: InferGetServerSidePropsType) {
+export default function Home({ repo }: InferGetServerSidePropsType) {
const router = useRouter()
+
+ const [processList, setProcessList] = React.useState(repo.processList)
+
+ const sort: (descriptor: SortDescriptor) => void = (descriptor) => {
+ const key = descriptor.column as string
+ const direction = descriptor.direction
+
+ repo.processList.sort((a, b) => {
+ const aValue = getKeyValue(a, key)
+ const bValue = getKeyValue(b, key)
+
+ if (direction === 'ascending') {
+ return aValue > bValue ? 1 : -1
+ } else {
+ return aValue < bValue ? 1 : -1
+ }
+ })
+
+ setProcessList([...repo.processList])
+ }
+
return (
@@ -187,152 +203,115 @@ export default function Home({
-
-
-
-
| 🔥 | -Id | -User | -Host | -db | -Command | -Time | -State | -Info | -Progress | -Transaction Time | -Transaction Info | -
|---|---|---|---|---|---|---|---|---|---|---|---|
+ {item.User}
+
+
+ {item.db}
+
+
-
)
diff --git a/tailwind.config.ts b/tailwind.config.ts
index dd45ffb..1e72c84 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,20 +1,17 @@
import type { Config } from 'tailwindcss'
+import { nextui } from '@nextui-org/react'
const config: Config = {
content: [
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
+ './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}',
],
theme: {
- extend: {
- backgroundImage: {
- 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
- 'gradient-conic':
- 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
- },
- },
+ extend: {},
},
- plugins: [require('daisyui')],
+ darkMode: 'class',
+ plugins: [require('daisyui'), nextui()],
}
export default config
- Click to see complete innodb status result.
-
-
- {repo.innodbStatus}
-
+ Click to see complete innodb status result.
+ {repo.innodbStatus}