chore(astro): clean up app page

codius · Aug 2, 2024 · dd60d32 · dd60d32
1 parent cad9506
commit dd60d32
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 23 deletions.
diff --git a/packages/codius-astro/src/components/AppBilling.astro b/packages/codius-astro/src/components/AppBilling.astro
@@ -18,7 +18,7 @@ const workerBilling = await billing.getWorkerBilling()
 const totalCost = getWorkerTotalCost(workerBilling)
 ---
 
-<>
+<div class="grid w-full items-center gap-4">
   <CardField
     label="Requests"
     content={workerBilling.requests.total.toString()}
@@ -45,4 +45,4 @@ const totalCost = getWorkerTotalCost(workerBilling)
     label="Balance"
     content={nanoUSDToString(workerBilling.funding.totalNanoUSD - totalCost)}
   />
-</>
+</div>
diff --git a/packages/codius-astro/src/components/CardField.astro b/packages/codius-astro/src/components/CardField.astro
@@ -12,7 +12,7 @@ const { label, content, link, linkTarget = "_blank" } = Astro.props
 ---
 
 <div class="flex flex-col space-y-1.5">
-  <Label>{label}</Label>
+  {label && <Label>{label}</Label>}
   <slot name="label" />
   <div class="rounded-md border p-3">
     {

diff --git a/packages/codius-astro/src/pages/apps/[id].astro b/packages/codius-astro/src/pages/apps/[id].astro
@@ -40,7 +40,14 @@ if (app.status !== "deployed" && !userIsDeployer) {
   <main>
     <Card>
       <CardHeader>
-        <CardTitle>{app.id}</CardTitle>
+        <CardTitle>
+          <a
+            href={`https://${app.id}.${Astro.locals.runtime.env.DISPATHER_HOSTNAME}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            >{`${app.id}.${Astro.locals.runtime.env.DISPATHER_HOSTNAME}`}</a
+          >
+        </CardTitle>
         <CardDescription
           >Deployed by <a
             href={`https://github.com/${app.deployer.username}`}
@@ -51,7 +58,7 @@ if (app.status !== "deployed" && !userIsDeployer) {
         <CardContent>
           {
             userIsDeployer && (
-              <div class="flex justify-start items-center mb-4 space-x-4">
+              <div class="flex flex-col items-start mb-4 gap-4">
                 <CardField label="Status">
                   <Badge
                     className="inline-flex"
@@ -84,11 +91,6 @@ if (app.status !== "deployed" && !userIsDeployer) {
           }
           <div class="grid grid-cols-2 gap-4">
             <div class="col-span-1 grid gap-4">
-              <CardField
-                label="URL"
-                content={`https://${app.id}.${Astro.locals.runtime.env.DISPATHER_HOSTNAME}`}
-                link={`https://${app.id}.${Astro.locals.runtime.env.DISPATHER_HOSTNAME}`}
-              />
               <CardField label="Repo">
                 <a
                   href={`https://github.com/${app.githubOwner}/${app.repo}`}
@@ -111,15 +113,11 @@ if (app.status !== "deployed" && !userIsDeployer) {
                 content={app.commitHash}
                 link={`https://github.com/${app.githubOwner}/${app.repo}/tree/${app.commitHash}`}
               />
-              {
-                app.directory && (
-                  <CardField
-                    label="Directory"
-                    content={app.directory}
-                    link={`https://github.com/${app.githubOwner}/${app.repo}/tree/${app.commitHash}/${app.directory}`}
-                  />
-                )
-              }
+              <CardField
+                label="Directory"
+                content={app.directory || "/"}
+                link={`https://github.com/${app.githubOwner}/${app.repo}/tree/${app.commitHash}/${app.directory}`}
+              />
               <CardField
                 label="Created At"
                 content={new Date(app.createdAt + "Z").toUTCString()}
@@ -141,7 +139,7 @@ if (app.status !== "deployed" && !userIsDeployer) {
             </div>
             <div class="col-span-1 grid gap-4">
               <AppBilling appId={app.id} />
-              <div class="mb-4">
+              <div>
                 <Button
                   className="top-up-balance"
                   data-app-id={app.id}

diff --git a/packages/codius-astro/src/pages/apps/[id]/402.astro b/packages/codius-astro/src/pages/apps/[id]/402.astro
@@ -18,9 +18,7 @@ if (!appId) {
       <CardHeader>
         <CardTitle>{appId}</CardTitle>
         <CardContent>
-          <div class="grid w-full items-center gap-4">
-            <AppBilling appId={appId} />
-          </div>
+          <AppBilling appId={appId} />
         </CardContent>
         <div class="mb-4">
           <Button className="top-up-balance" data-app-id={appId}>