initial production release 🎉

src/pages/application/[organization]/[name]/[branch]/configuration.svelte

@@ -0,0 +1,62 @@
+<script>
+  import { redirect, isActive } from "@roxi/routify";
+  import { application, fetch, initialApplication, initConf } from "@store";
+  import { toast } from "@zerodevx/svelte-toast";
+  import Configuration from "../../../../../components/Application/Configuration/Configuration.svelte";
+  import Loading from "../../../../../components/Loading.svelte";
+
+  async function loadConfiguration() {
+    if (!$isActive("/application/new")) {
+      try {
+        const config = await $fetch(`/api/v1/config`, {
+          body: {
+            name: $application.repository.name,
+            organization: $application.repository.organization,
+            branch: $application.repository.branch,
+          },
+        });
+        $application = { ...config };
+        $initConf = JSON.parse(JSON.stringify($application));
+      } catch (error) {
+        toast.push("Configuration not found.");
+        $redirect("/dashboard/applications");
+      }
+    } else {
+      $application = JSON.parse(JSON.stringify(initialApplication));
+    }
+  }
+</script>
+
+<div class="min-h-full text-white">
+  <div
+    class="py-5 text-left px-6 text-3xl tracking-tight font-bold flex items-center"
+  >
+    <a
+      target="_blank"
+      class="text-green-500 hover:underline cursor-pointer px-2"
+      href="{'https://' +
+        $application.publish.domain +
+        $application.publish.path}">{$application.publish.domain}</a
+    >
+    <a
+      target="_blank"
+      class="icon"
+      href="{`https://github.com/${$application.repository.organization}/${$application.repository.name}`}"
+    >
+      <svg
+        class="w-6"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        ><path
+          d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
+        ></path></svg
+      ></a
+    >
+  </div>
+</div>
+<Configuration />

src/pages/application/[organization]/[name]/[branch]/index.svelte

@@ -0,0 +1,4 @@
+<script>
+  import { params,  redirect } from "@roxi/routify";
+  $redirect(`/application/${$params.organization}/${$params.name}/${$params.branch}/configuration`);
+</script>

src/pages/application/[organization]/[name]/[branch]/logs/[deployId].svelte

@@ -0,0 +1,57 @@
+<script>
+  import { params } from "@roxi/routify";
+  import { onDestroy, onMount } from "svelte";
+  import { fade } from "svelte/transition";
+  import { fetch } from "@store";
+  import Loading from "../../../../../../components/Loading.svelte";
+
+  let loadLogsInterval;
+  let logs = [];
+
+  onMount(() => {
+    loadLogsInterval = setInterval(() => {
+      loadLogs();
+    }, 500);
+  });
+
+  async function loadLogs() {
+    const { events, progress } = await $fetch(
+      `/api/v1/application/deploy/logs/${$params.deployId}`,
+    );
+    logs = [...events];
+    if (progress === "done" || progress === "failed") {
+      clearInterval(loadLogsInterval);
+    }
+  }
+  onDestroy(() => {
+    clearInterval(loadLogsInterval);
+  });
+</script>
+
+<div
+  class="py-5 text-left px-6 text-3xl tracking-tight font-bold flex items-center"
+  in:fade="{{ duration: 100 }}"
+>
+  <div>Deployment log</div>
+</div>
+{#await loadLogs()}
+  <Loading />
+{:then}
+  <div
+    class="text-center space-y-2 max-w-7xl mx-auto px-6"
+    in:fade="{{ duration: 100 }}"
+  >
+    <div class="max-w-4xl mx-auto" in:fade="{{ duration: 100 }}">
+      <pre
+        class="text-left font-mono text-xs font-medium tracking-tighter rounded-lg bg-warmGray-800  p-4 whitespace-pre-wrap">
+      {#if logs.length > 0}
+        {#each logs as log}
+          {log + '\n'}
+        {/each}
+      {:else}
+        It's starting soon.
+      {/if}
+    </pre>
+    </div>
+  </div>
+{/await}

src/pages/application/[organization]/[name]/[branch]/logs/index.svelte

@@ -0,0 +1,140 @@
+<style lang="postcss">
+  .w-300 {
+    width: 300px !important;
+  }
+</style>
+
+<script>
+  import { fetch, application, dateOptions } from "@store";
+  import { fade } from "svelte/transition";
+  import { goto } from "@roxi/routify";
+  import { onDestroy, onMount } from "svelte";
+
+  import Loading from "../../../../../../components/Loading.svelte";
+
+  let loadDeploymentsInterval = null;
+  let loadLogsInterval = null;
+  let deployments = [];
+  let logs = [];
+  let page = 1;
+
+  onMount(async () => {
+    loadApplicationLogs();
+    loadLogsInterval = setInterval(() => {
+      loadApplicationLogs();
+    }, 3000);
+    loadDeploymentsInterval = setInterval(() => {
+      loadDeploymentLogs();
+    }, 1000);
+  });
+  onDestroy(() => {
+    clearInterval(loadDeploymentsInterval);
+    clearInterval(loadLogsInterval);
+  });
+  async function loadMoreDeploymentLogs() {
+    page = page + 1;
+    await loadDeploymentLogs();
+  }
+  async function loadDeploymentLogs() {
+    deployments = await $fetch(
+      `/api/v1/application/deploy/logs?repoId=${$application.repository.id}&branch=${$application.repository.branch}&page=${page}`,
+    );
+  }
+  async function loadApplicationLogs() {
+    logs = (
+      await $fetch(
+        `/api/v1/application/logs?name=${$application.build.container.name}`,
+      )
+    ).logs;
+  }
+</script>
+
+<div
+  class="py-5 text-left px-6 text-3xl tracking-tight font-bold flex items-center"
+  in:fade="{{ duration: 100 }}"
+>
+  <div>Logs</div>
+</div>
+{#await loadDeploymentLogs()}
+  <Loading />
+{:then}
+  <div
+    class="text-center space-y-2 max-w-7xl mx-auto px-6"
+    in:fade="{{ duration: 100 }}"
+  >
+    <div class="flex pt-2 space-x-4 w-full">
+      <div class="w-full">
+        <div class="font-bold text-left pb-2 text-xl">Application logs</div>
+        {#if logs.length === 0}
+          <div class="text-xs">Waiting for the logs...</div>
+        {:else}
+          <pre
+            class="text-left font-mono text-xs font-medium rounded bg-warmGray-800 text-white p-4 whitespace-pre-wrap w-full">
+            {#each logs as log}
+              {log + '\n'}
+            {/each}
+          </pre>
+        {/if}
+      </div>
+      <div>
+        <div class="font-bold text-left pb-2  text-xl w-300">
+          Deployment logs
+        </div>
+        {#if deployments.length > 0}
+          {#each deployments as deployment}
+            <div
+              in:fade="{{ duration: 100 }}"
+              class="flex space-x-4 text-md py-4 hover:shadow  mx-auto cursor-pointer transition-all duration-100 border-l-4 border-transparent rounded hover:bg-warmGray-700"
+              class:hover:border-green-500="{deployment.progress === 'done'}"
+              class:border-yellow-300="{deployment.progress !== 'done' &&
+                deployment.progress !== 'failed'}"
+              class:bg-warmGray-800="{deployment.progress !== 'done' &&
+                deployment.progress !== 'failed'}"
+              class:hover:bg-red-200="{deployment.progress === 'failed'}"
+              class:hover:border-red-500="{deployment.progress === 'failed'}"
+              on:click="{() => $goto(`./${deployment.deployId}`)}"
+            >
+              <div
+                class="font-bold text-sm px-3 flex justify-center items-center"
+              >
+                {deployment.branch}
+              </div>
+              <div class="flex-1"></div>
+              <div class="px-3 w-48">
+                <div
+                  class="text-xs"
+                  title="{new Intl.DateTimeFormat(
+                    'default',
+                    $dateOptions,
+                  ).format(new Date(deployment.createdAt))}"
+                >
+                  {deployment.since}
+                </div>
+                {#if deployment.progress === "done"}
+                  <div class="text-xs">
+                    Deployed in <span class="font-bold">{deployment.took}s</span
+                    >
+                  </div>
+                {:else if deployment.progress === "failed"}
+                  <div class="text-xs text-red-500">Failed</div>
+                {:else}
+                  <div class="text-xs">Deploying...</div>
+                {/if}
+              </div>
+            </div>
+          {/each}
+          <button
+            class="text-xs bg-green-600 hover:bg-green-500 p-1 rounded text-white px-2 font-medium my-6"
+            on:click="{loadMoreDeploymentLogs}">Show more</button
+          >
+        {:else}
+          <div class="text-left text-sm tracking-tight">
+            No deployments found
+          </div>
+        {/if}
+      </div>
+    </div>
+  </div>
+{:catch}
+  <div class="text-center font-bold tracking-tight text-xl">No logs found</div>
+{/await}

src/pages/application/[organization]/[name]/[branch]/overview.svelte

@@ -0,0 +1,31 @@
+<script>
+  import { fade } from "svelte/transition";
+  import { application } from "@store";
+  import Configuration from "../../../../../components/Application/Configuration/Configuration.svelte";
+</script>
+
+<div class="min-h-full text-white">
+  <div
+    class="py-5 text-left px-6 text-3xl tracking-tight font-bold flex items-center"
+  >
+    Overview of
+    <a
+      target="_blank"
+      class="text-green-500 hover:underline cursor-pointer px-2"
+      href="{'https://' +
+        $application.publish.domain +
+        $application.publish.path}">{$application.publish.domain}</a
+    >
+    <a
+      target="_blank"
+      class="icon"
+      href="{`https://github.com/${$application.repository.organization}/${$application.repository.name}`}"
+    >
+    <svg class="w-6" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/></svg></a
+    >
+
+  </div>
+</div>
+
+
+<Configuration />

src/pages/application/[organization]/[name]/index.svelte

@@ -0,0 +1,4 @@
+<script>
+  import { redirect } from "@roxi/routify";
+  $redirect("/dashboard/applications");
+</script>