cerc-io/webapp-deployment-status-ui
16
0
Fork 0
Code Issues 3 Pull Requests 1 Actions Packages Projects Releases 9 Wiki Activity

Use LACONIC_HOSTED_CONFIG #1

Merged
telackey merged 5 commits from telackey/csss into main 2024-02-16 03:59:10 +00:00
Conversation 0 Commits 5 Files Changed 4 +14 -6
4 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -2,6 +2,7 @@
"name": "webapp-deployment-status-ui", "name": "webapp-deployment-status-ui",
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"homepage": "LACONIC_HOSTED_CONFIG_homepage",
"dependencies": { "dependencies": {
"@tanstack/react-query": "^5.17.15", "@tanstack/react-query": "^5.17.15",
"@testing-library/jest-dom": "^5.14.1", "@testing-library/jest-dom": "^5.14.1",

6
src/App.tsx
View File

@ -19,9 +19,11 @@ function StatusTable() {
const [logId, setLogId] = useState(""); const [logId, setLogId] = useState("");
// Queries // Queries
const query = useQuery({queryKey: ['allStatus'], queryFn: fetchAllStatuses}) const query = useQuery({queryKey: ['allStatus'], queryFn: fetchAllStatuses, refetchInterval: 10000});
const queryLog = useQuery({queryKey: ['log', logId], queryFn: () => fetchLogs(logId)}); const queryLog = useQuery({queryKey: ['log', logId], queryFn: () => fetchLogs(logId)});
const consoleLink = "LACONIC_HOSTED_CONFIG_app_console_link";
return (<div> return (<div>
{logId && (<Modal open={true}> {logId && (<Modal open={true}>
<button className="close" onClick={() => setLogId("")}>CLOSE</button> <button className="close" onClick={() => setLogId("")}>CLOSE</button>
@ -33,7 +35,7 @@ function StatusTable() {
{query.data?.map((status: any) => <div className={status.lastState.toLowerCase() + " status-row"}> {query.data?.map((status: any) => <div className={status.lastState.toLowerCase() + " status-row"}>
<div className="status-line"> <div className="status-line">
<span className="status-key">Request ID:</span> <span className="status-key">Request ID:</span>
<span className="status-value">{status.id}</span> <span className="status-value"><a href={consoleLink.replace("#RQID#", status.id)}>{status.id}</a></span>
</div> </div>
<div className="status-line"> <div className="status-line">
<span className="status-key">Application:</span> <span className="status-key">Application:</span>

4
src/index.css
View File

@ -17,6 +17,10 @@ button {
cursor: pointer; cursor: pointer;
} }
a {
color: #444;
}
#all-status { #all-status {
margin: auto; margin: auto;
min-width: 50%; min-width: 50%;

7
src/utils/data-utils.ts
View File

@ -1,6 +1,7 @@
const apiUrl = "LACONIC_HOSTED_CONFIG_app_api_url";
export const fetchAllStatuses = async () => { export const fetchAllStatuses = async () => {
let url = "http://localhost:9555" const res = await fetch(apiUrl);
const res = await fetch(url);
if (!res.ok) { if (!res.ok) {
throw new Error('Network response was not ok') throw new Error('Network response was not ok')
} }
@ -12,7 +13,7 @@ export const fetchLogs = async (id: string) => {
if (!id) { if (!id) {
return ""; return "";
} }
let url = `http://localhost:9555/log/${id}` let url = `${apiUrl}/log/${id}`
const res = await fetch(url); const res = await fetch(url);
if (!res.ok) { if (!res.ok) {
throw new Error('Network response was not ok') throw new Error('Network response was not ok')