codius-workers/packages/codius-astro/src/components/UserAppsTable.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
---
import { Badge } from "@/components/ui/badge"
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"

interface Props {
  userId: string
  dispatcherHostname: string
}

const { dispatcherHostname, userId } = Astro.props
const apps = await Astro.locals.db.apps.getByUserId(userId)
---

<Table>
  <TableCaption>Your Apps</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Repo</TableHead>
      <TableHead>URL</TableHead>
      <TableHead>Status</TableHead>
      <TableHead>Created At</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {
      apps.length === 0 && (
        <TableRow>
          <TableCell className="text-center">No apps found</TableCell>
        </TableRow>
      )
    }
    {
      apps.map((app) => (
        <TableRow key={app.id} data-app-id={app.id} clickable>
          <TableCell>
            <a
              href={`https://github.com/${app.githubOwner}/${app.repo}/tree/${app.commitHash}`}
              target="_blank"
              rel="noopener noreferrer"
            >
              {app.githubOwner}/{app.repo}
            </a>
          </TableCell>

          <TableCell>
            <a
              href={`https://${app.id}.${dispatcherHostname}`}
              target="_blank"
              rel="noopener noreferrer"
            >
              {`https://${app.id}.${dispatcherHostname}`}
            </a>
          </TableCell>
          <TableCell>
            <Badge
              variant={
                app.deletedAt
                  ? "outline"
                  : app.status === "deployed"
                    ? "default"
                    : app.status === "failed"
                      ? "destructive"
                      : "secondary"
              }
            >
              {app.deletedAt ? "deleted" : app.status}
            </Badge>
          </TableCell>
          <TableCell>{new Date(app.createdAt).toUTCString()}</TableCell>
        </TableRow>
      ))
    }
  </TableBody>
</Table>

<script>
  const rows = document.querySelectorAll<HTMLTableRowElement>("tr[data-app-id]")
  rows.forEach((row) => {
    row.addEventListener("click", function () {
      window.location.href = `/apps/${this.dataset.appId}`
    })
  })
</script>