Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add query details to query view page #62

Merged
merged 8 commits into from
Jun 28, 2024
Merged

add query details to query view page #62

Changes from 2 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
0dc55d6
add query details to query view page
eriktaubeneck Jun 26, 2024
38afd76
query params values should not be links
eriktaubeneck Jun 26, 2024
aff9acb
Update server/app/query/view/[id]/page.tsx
eriktaubeneck Jun 26, 2024
091fc0f
fix copy paste error
eriktaubeneck Jun 27, 2024
dbdcc9f
create queryParams variable to simply templating code
eriktaubeneck Jun 28, 2024
11de3c2
make the query-details template less repetative
eriktaubeneck Jun 28, 2024
3751339
Merge branch 'main' into query-details
eriktaubeneck Jun 28, 2024
c446524
add a JSONSafeParse function to handle parsing errors
eriktaubeneck Jun 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 89 additions & 11 deletions server/app/query/view/[id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export default function QueryPage({ params }: { params: { id: string } }) {
// display controls
const [logsHidden, setLogsHidden] = useState<boolean>(true);
const [statsHidden, setStatsHidden] = useState<boolean>(true);
const [query, setQuery] = useState<Query | null>(null);

const [logs, setLogs] = useState<ServerLog[]>([]);
const [statusByRemoteServer, setStatusByRemoteServer] =
Expand Down Expand Up @@ -61,6 +62,8 @@ export default function QueryPage({ params }: { params: { id: string } }) {
useEffect(() => {
(async () => {
const query: Query = await getQuery(params.id);
setQuery(query);

let webSockets: WebSocket[] = [];
for (const remoteServer of Object.values(IPARemoteServers)) {
const loggingWs = remoteServer.openLogSocket(query.uuid, setLogs);
Expand All @@ -86,18 +89,93 @@ export default function QueryPage({ params }: { params: { id: string } }) {

return (
<>
<div className="inline-flex items-center">
<h2 className="text-2xl font-bold leading-7 text-gray-900 dark:text-gray-100 sm:truncate sm:text-3xl sm:tracking-tight">
Query Details: {params.id}
</h2>
<div className="flex justify-between items-center">
<div>
<h2 className="text-2xl font-bold leading-7 text-gray-900 dark:text-gray-100 sm:truncate sm:text-3xl sm:tracking-tight">
Query Details
</h2>
</div>
<div>
<button
onClick={() => kill(IPARemoteServers)}
eriktaubeneck marked this conversation as resolved.
Show resolved Hide resolved
type="button"
className="ml-3 rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
>
Kill Query
</button>
</div>
</div>
eriktaubeneck marked this conversation as resolved.
Show resolved Hide resolved

<button
onClick={() => kill(IPARemoteServers)}
type="button"
className="ml-3 rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
>
Kill Query
</button>
<div className="mt-6 border-t border-b border-gray-300">
<dl className="divide-y divide-gray-200">
<div className="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt className="text-sm font-medium leading-6 text-gray-900">
Display name:
</dt>
<dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
{params.id}
</dd>
</div>

<div className="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt className="text-sm font-medium leading-6 text-gray-900">
UUID:
</dt>
<dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
{query?.uuid}
</dd>
</div>

<div className="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt className="text-sm font-medium leading-6 text-gray-900">
Created At:
</dt>
<dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
{query?.createdAt}
</dd>
</div>

<div className="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt className="text-sm font-medium leading-6 text-gray-900">
Type:
</dt>
<dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
{query?.type}
</dd>
</div>

<div className="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt className="text-sm font-medium leading-6 text-gray-900">
Params:
</dt>
<dd className="mt-2 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
<ul
role="list"
eriktaubeneck marked this conversation as resolved.
Show resolved Hide resolved
className="divide-y divide-gray-200 rounded-md border border-gray-200"
>
{Object.entries(
eriktaubeneck marked this conversation as resolved.
Show resolved Hide resolved
JSON.parse((query?.params as string) || "{}"),
).map(([key, value]) => {
return (
<li
className="flex items-center justify-between py-1 pl-4 pr-5 text-sm leading-6"
key={key}
>
<div className="flex w-0 flex-1 items-center">
<div className="ml-4 flex min-w-0 flex-1 gap-2">
<span className="truncate font-medium"> {key}</span>
</div>
</div>
<div className="ml-4 flex-shrink-0 font-medium text-sky-700">
{value as string}
</div>
</li>
);
})}
</ul>
</dd>
</div>
</dl>
</div>

<div className="w-full text-left mx-auto max-w-7xl overflow-hidden rounded-lg bg-slate-50 dark:bg-slate-950 shadow mt-10">
Expand Down
Loading