diff --git a/package.json b/package.json
index cfed876..42426c0 100644
--- a/package.json
+++ b/package.json
@@ -41,5 +41,9 @@
"last 1 firefox version",
"last 1 safari version"
]
+ },
+ "devDependencies": {
+ "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+ "prettier": "^3.2.5"
}
}
diff --git a/src/App.tsx b/src/App.tsx
index 4b7d715..33a55c5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,53 +1,64 @@
-import {
- useQuery,
- useMutation,
- useQueryClient,
- QueryClient,
- QueryClientProvider,
-} from '@tanstack/react-query'
-import {fetchAllStatuses} from './utils/data-utils';
+import {QueryClient, QueryClientProvider, useQuery, useQueryClient,} from '@tanstack/react-query'
+import React, {useState} from "react";
+import {fetchAllStatuses, fetchLogs} from './utils/data-utils';
+import Modal from './Modal'
// Create a client
const queryClient = new QueryClient()
function App() {
- return (
- // Provide the client to your App
+ return (// Provide the client to your App
-
-
-
-
- )
+
+ )
}
function StatusTable() {
// Access the client
const queryClient = useQueryClient()
+ const [logId, setLogId] = useState("");
// Queries
- const query = useQuery({ queryKey: ['allStatus'], queryFn: fetchAllStatuses })
+ const query = useQuery({queryKey: ['allStatus'], queryFn: fetchAllStatuses})
+ const queryLog = useQuery({queryKey: ['log', logId], queryFn: () => fetchLogs(logId)});
- return (
-
-
- URL |
- Application |
- Status |
- Last Update |
- Request ID |
-
- {query.data?.map((status: any) =>
-
- {status.deployment && {status.url}} |
- {status.app} |
- {status.lastState} |
- {status.lastUpdate} |
- {status.id} |
-
- )}
-
- )
+ return (
+ {logId && (
+
+
+ )}
+
+ {query.data?.map((status: any) =>
+
+ Request ID:
+ {status.id}
+
+
+ Application:
+ {status.app}
+
+ {status.deployment &&
}
+
+ Last Update:
+ {status.lastUpdate}
+
+
+ Last State:
+ {(status.logAvailable &&
+ ) || status.lastState}
+
+
)}
+
+
)
}
export default App;
diff --git a/src/Modal.tsx b/src/Modal.tsx
new file mode 100644
index 0000000..55f3693
--- /dev/null
+++ b/src/Modal.tsx
@@ -0,0 +1,37 @@
+import {Component} from "react";
+
+const MODAL_STYLES = {
+ position: "absolute" as "absolute",
+ backgroundColor: "#FFF",
+ marginTop: "2em",
+ padding: "2em",
+ zIndex: "1000",
+ width: "75%",
+ height: "85%",
+ borderRadius: ".5em",
+};
+const OVERLAY_STYLE = {
+ position: "fixed" as "fixed",
+ display: "flex",
+ justifyContent: "center",
+ top: "0",
+ left: "0",
+ width: "100%",
+ height: "100%",
+ backgroundColor: "rgba(0,0,0, .8)",
+ zIndex: "1000",
+};
+
+class Modal extends Component<{ open: any, children: any }> {
+ render() {
+ let {open, children} = this.props;
+ if (!open) return null;
+ return (<>
+
+ >);
+ }
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 0e9b656..7eb2663 100644
--- a/src/index.css
+++ b/src/index.css
@@ -5,6 +5,7 @@ body {
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
+ background-color: white;
}
code {
@@ -12,70 +13,74 @@ code {
monospace;
}
+button {
+ cursor: pointer;
+}
+
#all-status {
- width: 85%;
+ margin: auto;
+ min-width: 50%;
+ max-width: 75%;
+ padding: 10px;
}
-#all-status td {
- padding: 0.3em;
+.log-data {
+ overflow: auto;
+ color: grey;
+ background-color: black;
+ font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+ width: 98%;
+ height: 95%;
+ padding: 1em;
}
-table {
- border-collapse:separate;
- border:solid lightblue 1px;
- border-radius:6px;
+.status-row {
+ width: auto;
+ background-color: white;
+ padding: 1em;
+ margin: 1em;
+ border-radius: 25px;
}
-td, th {
- border-left:solid lightblue 1px;
- border-top:solid lightblue 1px;
+.status-key {
+ font-weight: bold;
+ margin-right: 0.5em;
}
-th {
- border-top: none;
-}
-
-td:first-child, th:first-child {
- border-left: none;
+.status-value {
}
.deployed {
- background-color: #ddffdd;
+ background-color: #ddffdd;
+}
+
+.button-deployed {
+ background-color: lawngreen;
+ color: white;
}
.error {
- background-color: #ffdddd;
+ background-color: #ffdddd;
+}
+
+.button-error {
+ background-color: red;
}
.cancelled {
- background-color: #efefef;
- text-color: #dddddd;
+ background-color: #efefef;
+ text-color: #dddddd;
}
.removed {
- background-color: #efeffa;
- text-color: #dddddd;
+ background-color: #efeffa;
+ text-color: #dddddd;
}
.submitted {
- background-color: #ffffdd;
+ background-color: #ffffdd;
}
.deploying {
- background-color: #fff1dd;
+ background-color: #fff1dd;
}
-
-.tr-status {
- font-size: small;
- font-family: 'Courier New', Courier, monospace;
-}
-
-.td-id {
- font-size: xx-small;
-}
-
-.td-last-update{
-}
-
-.td-status{
-}
\ No newline at end of file
diff --git a/src/utils/data-utils.ts b/src/utils/data-utils.ts
index 9fe0baf..4808b66 100644
--- a/src/utils/data-utils.ts
+++ b/src/utils/data-utils.ts
@@ -1,8 +1,21 @@
-export const fetchAllStatuses = async () => {
- let url = "http://localhost:9555"
- const res = await fetch(url);
- if (!res.ok) {
- throw new Error('Network response was not ok')
- }
- return await res.json();
-}
+export const fetchAllStatuses = async () => {
+ let url = "http://localhost:9555"
+ const res = await fetch(url);
+ if (!res.ok) {
+ throw new Error('Network response was not ok')
+ }
+ return await res.json();
+}
+
+
+export const fetchLogs = async (id: string) => {
+ if (!id) {
+ return "";
+ }
+ let url = `http://localhost:9555/log/${id}`
+ const res = await fetch(url);
+ if (!res.ok) {
+ throw new Error('Network response was not ok')
+ }
+ return await res.text();
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 9e98096..ce83c48 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -87,7 +87,7 @@
"@jridgewell/trace-mapping" "^0.3.17"
jsesc "^2.5.1"
-"@babel/helper-annotate-as-pure@^7.22.5":
+"@babel/helper-annotate-as-pure@^7.18.6", "@babel/helper-annotate-as-pure@^7.22.5":
version "7.22.5"
resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz#e7f06737b197d580a01edf75d97e2c8be99d3882"
integrity sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==
@@ -127,6 +127,21 @@
"@babel/helper-split-export-declaration" "^7.22.6"
semver "^6.3.1"
+"@babel/helper-create-class-features-plugin@^7.21.0":
+ version "7.23.10"
+ resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.23.10.tgz#25d55fafbaea31fd0e723820bb6cc3df72edf7ea"
+ integrity sha512-2XpP2XhkXzgxecPNEEK8Vz8Asj9aRxt08oKOqtiZoqV2UGZ5T+EkyP9sXQ9nwMxBIG34a7jmasVqoMop7VdPUw==
+ dependencies:
+ "@babel/helper-annotate-as-pure" "^7.22.5"
+ "@babel/helper-environment-visitor" "^7.22.20"
+ "@babel/helper-function-name" "^7.23.0"
+ "@babel/helper-member-expression-to-functions" "^7.23.0"
+ "@babel/helper-optimise-call-expression" "^7.22.5"
+ "@babel/helper-replace-supers" "^7.22.20"
+ "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
+ "@babel/helper-split-export-declaration" "^7.22.6"
+ semver "^6.3.1"
+
"@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.22.15", "@babel/helper-create-regexp-features-plugin@^7.22.5":
version "7.22.15"
resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.22.15.tgz#5ee90093914ea09639b01c711db0d6775e558be1"
@@ -380,6 +395,16 @@
resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz#7844f9289546efa9febac2de4cfe358a050bd703"
integrity sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==
+"@babel/plugin-proposal-private-property-in-object@^7.21.11":
+ version "7.21.11"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz#69d597086b6760c4126525cfa154f34631ff272c"
+ integrity sha512-0QZ8qP/3RLDVBwBFoWAwCtgcDZJVwA5LUJRZU8x2YFfKNuFq161wK3cuGrALu5yiPu+vzwTAg/sMWVNeWeNyaw==
+ dependencies:
+ "@babel/helper-annotate-as-pure" "^7.18.6"
+ "@babel/helper-create-class-features-plugin" "^7.21.0"
+ "@babel/helper-plugin-utils" "^7.20.2"
+ "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
+
"@babel/plugin-syntax-async-generators@^7.8.4":
version "7.8.4"
resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
@@ -7676,6 +7701,11 @@ prelude-ls@~1.1.2:
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
integrity sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==
+prettier@^3.2.5:
+ version "3.2.5"
+ resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.2.5.tgz#e52bc3090586e824964a8813b09aba6233b28368"
+ integrity sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==
+
pretty-bytes@^5.3.0, pretty-bytes@^5.4.1:
version "5.6.0"
resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"