codius-workers/packages/codius-astro/src/pages/apps/[id].astro at 03c8ea38ee13dff2cdfafc7c3c0099615871b4c1 · codius/codius-workers · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
---
import { Badge } from "@/components/ui/badge"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { FiGithub } from "react-icons/fi"
import AppBilling from "@/components/AppBilling.astro"
import CardField from "@/components/CardField.astro"
import DeleteAppButton from "@/components/DeleteAppButton.astro"
import TopUpBalanceButton from "@/components/TopUpBalanceButton.astro"
import ViewWorkflowButton from "@/components/ViewWorkflowButton.astro"
import Layout from "@/layouts/Layout.astro"

if (!Astro.params.id) {
  return Astro.redirect("/apps")
}

const app = await Astro.locals.db.apps.getById(Astro.params.id)

if (!app) {
  return new Response(null, {
    status: 404,
    statusText: "Not found",
  })
}

const userIsDeployer = Astro.locals.auth().userId === app.deployer.id

if (app.status !== "deployed" && !userIsDeployer) {
  return new Response(null, {
    status: 404,
    statusText: "Not found",
  })
}
---

<Layout>
  <main>
    <Card>
      <CardHeader>
        <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}`}
            target="_blank"
            rel="noopener noreferrer">{app.deployer.username}</a
          >
        </CardDescription>
        <CardContent>
          {
            userIsDeployer && (
              <div class="flex flex-col items-start mb-4 gap-4">
                <CardField label="Status">
                  <Badge
                    className="inline-flex"
                    variant={
                      app.deletedAt
                        ? "outline"
                        : app.status === "deployed"
                          ? "default"
                          : app.status === "failed"
                            ? "destructive"
                            : "secondary"
                    }
                    slot="content"
                  >
                    {app.deletedAt ? "deleted" : app.status}
                  </Badge>
                </CardField>
                {app.githubWorkflowRunId && app.githubWorkflowJobId && (
                  <ViewWorkflowButton
                    workflowRunId={app.githubWorkflowRunId}
                    workflowJobId={app.githubWorkflowJobId}
                  />
                )}
              </div>
            )
          }
          <div class="grid grid-cols-2 gap-4">
            <div class="col-span-1 grid gap-4">
              <CardField label="Repo">
                <a
                  href={`https://github.com/${app.githubOwner}/${app.repo}`}
                  target="_blank"
                  rel="noopener noreferrer"
                  class="inline-flex items-center"
                  style="align-items: baseline;"
                  slot="content"
                >
                  <FiGithub className="mr-2" />{app.githubOwner}/{app.repo}
                </a>
              </CardField>
              <CardField
                label="Branch (at time of deploy)"
                content={app.branch}
                link={`https://github.com/${app.githubOwner}/${app.repo}/tree/${app.branch}`}
              />
              <CardField
                label="Commit"
                content={app.commitHash}
                link={`https://github.com/${app.githubOwner}/${app.repo}/tree/${app.commitHash}`}
              />
              <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()}
              />
              {
                app.deletedAt === null && userIsDeployer && (
                  <div>
                    <DeleteAppButton appId={app.id} />
                  </div>
                )
              }
            </div>
            <div class="col-span-1 grid gap-4">
              <AppBilling appId={app.id} />
              <div>
                <TopUpBalanceButton
                  appId={app.id}
                  disabled={app.deletedAt !== null}
                />
              </div>
            </div>
          </div>
        </CardContent>
      </CardHeader>
    </Card>
  </main>
</Layout>