Get identity and version number.

src/Home.tsx

@@ -14,12 +14,12 @@ import { atom, useAtomValue } from "jotai";
 import { createQueryAtom } from "./utils/query.ts";
 import { DiagnosticsCard } from "./components/DiagnosticsCard.tsx";
 
-const statusStringQueryAtom = createQueryAtom("status_string", "api/status", {
+const identityStringQueryAtom = createQueryAtom("api/identity", {
   refetchInterval: 500,
 });
-const statusStringAtom = atom((get) => {
+const identityStringAtom = atom((get) => {
-  const response = get(statusStringQueryAtom);
+  const response = get(identityStringQueryAtom);
-  if (response.isPending || response.isError || !response.data.status) {
+  if (response.isPending || response.isError) {
     return "N/A";
   }
   return response.data.message;
@@ -36,16 +36,14 @@ const uptimeAtom = atom((get) => {
   return response.data.uptime.toFixed(1);
 });
 
-function StatusCard() {
+function IdentityCard() {
-  const statusString = useAtomValue(statusStringAtom);
+  const identityString = useAtomValue(identityStringAtom);
   return (
-    <Card className="padded">
+    <Card className="padded h-100">
-      <Row>
+      <Card.Title>Identity</Card.Title>
-        <p>Status:</p>
+      <Card.Body>
-      </Row>
+        <div style={{ whiteSpace: "pre-line" }}>{identityString}</div>
-      <Row>
+      </Card.Body>
-        <p>{statusString}</p>
-      </Row>
     </Card>
   );
 }
@@ -53,13 +51,11 @@ function StatusCard() {
 function UptimeCard() {
   const uptime = useAtomValue(uptimeAtom);
   return (
-    <Card className="padded">
+    <Card className="padded h-100">
-      <Row>
+      <Card.Title>Uptime</Card.Title>
-        <p>Uptime:</p>
+      <Card.Body>
-      </Row>
-      <Row>
         <p>{uptime}s</p>
-      </Row>
+      </Card.Body>
     </Card>
   );
 }
@@ -74,7 +70,7 @@ export function Home() {
             <UptimeCard />
           </Col>
           <Col>
-            <StatusCard />
+            <IdentityCard />
           </Col>
         </Row>
         <Row className="vert-padded">

src/Version.tsx

@@ -14,35 +14,59 @@ import { atom, useAtomValue } from "jotai";
 import { createQueryAtom } from "./utils/query.ts";
 import YAML from "yaml";
 
-const versionQueryAtom = createQueryAtom("api/build_info");
+const buildInfoQueryAtom = createQueryAtom("api/build_info");
-
+const buildInfoAtom = atom((get) => {
-const versionAtom = atom((get) => {
+  const buildInfo = get(buildInfoQueryAtom);
-  const version = get(versionQueryAtom);
+  if (buildInfo.isPending) {
-  if (version.isPending) {
     return "Loading...";
   }
-  if (version.isError) {
+  if (buildInfo.isError) {
     return "Error loading!";
   }
-  if (!version.data.status) {
+  if (!buildInfo.data.status) {
-    return "Can not find version";
+    return "Can not find buildInfo";
   }
-  return YAML.stringify(version.data.message);
+  return YAML.stringify(buildInfo.data.message);
+});
+
+const versionNumberQueryAtom = createQueryAtom("api/version_number");
+const versionNumberAtom = atom((get) => {
+  const versionNumber = get(versionNumberQueryAtom);
+  if (versionNumber.isPending || versionNumber.isError) {
+    return "...";
+  }
+  if (!versionNumber.data.status) {
+    return "Can not find version number.";
+  }
+  return versionNumber.data.version;
 });
 
 export function Version() {
-  let versionText = useAtomValue(versionAtom);
+  let buildInfoText = useAtomValue(buildInfoAtom);
+  let versionText = useAtomValue(versionNumberAtom);
 
   return (
     <div>
       <AppNav />
       <Container className="vert-padded">
+        <Row>
+          <Col>
+            <Card className="padded">
+              <Card.Title>Version Number</Card.Title>
+              <Card.Body>{versionText}</Card.Body>
+            </Card>
+          </Col>
+        </Row>
+        <Row className="vert-padded">
+          <Col>
             <Card className="padded">
               <Card.Title>project.yaml</Card.Title>
               <Card.Body>
-            <pre>{versionText}</pre>
+                <pre>{buildInfoText}</pre>
               </Card.Body>
             </Card>
+          </Col>
+        </Row>
       </Container>
       <Footer />
     </div>

src/components/AppNav.tsx

@@ -16,7 +16,7 @@ export function AppNav() {
     <Navbar bg="dark" variant="dark" expand="sm" className="py-0">
       <Container className="me-auto">
         <Navbar.Brand as={Link} to="/">
-          J7s-Bridge
+          am_i_up
         </Navbar.Brand>
         <Navbar.Toggle aria-controls="collapse-navbar-nav" />
         <Navbar.Collapse id="collapse-navbar-nav">

src/components/DiagnosticsCard.tsx

@@ -107,7 +107,6 @@ function ValuesTable(props: Any) {
 
 function StatusContent(props: Any) {
   const status = props.status;
-  console.log(status);
   return (
     <div>
       <TitleText name={status.name} message={status.message} />