v1.0.6 (#30)

Features: - Rust support 🦀 (Thanks to @pepoviola) - Add a default rewrite rule to PHP apps (to index.php) - Able to control upgrades in a straightforward way Fixes: - Improved upgrade scripts - Simplified prechecks before deployment - Fixed path deployments - Fixed already defined apps redirections - Better error handling - still needs a lot of improvement here!
2021-04-15 22:40:44 +02:00
parent 166a573392
commit bad84289c4
56 changed files with 899 additions and 661 deletions
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -3,8 +3,7 @@
  import { Router } from "@roxi/routify";
  import { routes } from "../.routify/routes";
  const options = {
-    duration: 5000,
-    dismissable: true
+    duration: 2000
  };
 </script>

--- a/src/components/Application/Configuration/ActiveTab/General.svelte
+++ b/src/components/Application/Configuration/ActiveTab/General.svelte
@@ -1,6 +1,7 @@
 <script>
  import { application} from "@store";
  import TooltipInfo from "../../../Tooltip/TooltipInfo.svelte";
+  const showPorts = ['nodejs','custom','rust']
 </script>

 <div>
@@ -8,7 +9,7 @@
    class="grid grid-cols-1 text-sm max-w-2xl md:mx-auto mx-6 pb-6 auto-cols-max "
  >
    <label for="buildPack"
-      >Build Pack 
+      >Build Pack
      {#if $application.build.pack === 'custom'}
      <TooltipInfo
        label="Your custom Dockerfile will be used from the root directory (or from 'Base Directory' specified below) of your repository. "
@@ -26,8 +27,13 @@
      size="large"
        label="Published as a PHP application."
      />
+      {:else if $application.build.pack === 'rust'}
+      <TooltipInfo
+      size="large"
+        label="Published as a Rust application."
+      />
      {/if}
-      
+
 </label
    >
    <select id="buildPack" bind:value="{$application.build.pack}">
@@ -35,6 +41,7 @@
      <option class="font-bold">nodejs</option>
      <option class="font-bold">php</option>
      <option class="font-bold">custom</option>
+      <option class="font-bold">rust</option>
    </select>
  </div>
  <div
@@ -66,7 +73,7 @@
        />
      </div>
    </div>
-    {#if $application.build.pack === "nodejs" || $application.build.pack === "custom"}
+    {#if showPorts.includes($application.build.pack)}
    <label for="Port" >Port</label>
    <input
      id="Port"
--- a/src/components/Application/Configuration/Configuration.svelte
+++ b/src/components/Application/Configuration/Configuration.svelte
@@ -29,7 +29,7 @@

  async function loadBranches() {
    loading.branches = true;
-    if ($isActive("/application/new")) $application.repository.branch = null
+    if ($isActive("/application/new")) $application.repository.branch = null;
    const selectedRepository = repositories.find(
      r => r.id === $application.repository.id,
    );
@@ -54,6 +54,7 @@
  }

  async function loadGithub() {
+    loading.github = true;
    try {
      const { installations } = await $fetch(
        "https://api.github.com/user/installations",
@@ -100,7 +101,6 @@
    } finally {
      loading.github = false;
    }
- 
  }
  function modifyGithubAppConfig() {
    const left = screen.width / 2 - 1020 / 2;
@@ -144,6 +144,52 @@
  }
 </script>

+{#if !$isActive("/application/new")}
+  <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
+          ? `${$application.publish.domain}${$application.publish.path !== '/' ? $application.publish.path : ''}`
+          : "Loading..."}</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>
+{:else if $isActive("/application/new")}
+  <div class="min-h-full text-white">
+    <div
+      class="py-5 text-left px-6 text-3xl tracking-tight font-bold flex items-center"
+    >
+      New Application
+    </div>
+  </div>
+{/if}
+
 <div in:fade="{{ duration: 100 }}">
  {#if !$session.githubAppToken}
    <Login />
--- a/src/components/Application/Configuration/Tabs.svelte
+++ b/src/components/Application/Configuration/Tabs.svelte
@@ -8,7 +8,7 @@
  import BuildStep from "./ActiveTab/BuildStep.svelte";
  import Secrets from "./ActiveTab/Secrets.svelte";
  import Loading from "../../Loading.svelte";
-
+  const buildPhaseActive = ["nodejs", "static"];
  let loading = false;
  onMount(async () => {
    if (!$isActive("/application/new")) {
@@ -27,8 +27,8 @@
      });
    } else {
      loading = true;
-      $deployments?.applications?.deployed.filter(d => {
-        const conf = d?.Spec?.Labels.application;
+      $deployments?.applications?.deployed.find(d => {
+        const conf = d?.Spec?.Labels.configuration;
        if (
          conf?.repository?.organization ===
            $application.repository.organization &&
@@ -40,6 +40,7 @@
            organization: $application.repository.organization,
            branch: $application.repository.branch,
          });
+          toast.push("This repository & branch is already defined. Redirecting...");
        }
      });
      try {
@@ -52,6 +53,9 @@
        const Dockerfile = dir.find(
          f => f.type === "file" && f.name === "Dockerfile",
        );
+        const CargoToml = dir.find(
+          f => f.type === "file" && f.name === "Cargo.toml",
+        );

        if (Dockerfile) {
          $application.build.pack = "custom";
@@ -60,7 +64,7 @@
          const { content } = await $fetch(packageJson.git_url);
          const packageJsonContent = JSON.parse(atob(content));
          const checkPackageJSONContents = dep => {
-            return(
+            return (
              packageJsonContent?.dependencies?.hasOwnProperty(dep) ||
              packageJsonContent?.devDependencies?.hasOwnProperty(dep)
            );
@@ -87,13 +91,12 @@
              ) {
                $application.build.command.build = config.build;
              }
-              toast.push(
-                `${config.name} App detected. Default values set.`,
-              );
-            } 
- 
+              toast.push(`${config.name} App detected. Default values set.`);
+            }
          });
-
+        } else if (CargoToml) {
+          $application.build.pack = "rust";
+          toast.push(`Rust language detected. Default values set.`);
        }
      } catch (error) {
        // Nothing detected
@@ -133,7 +136,7 @@
      >
        General
      </div>
-      {#if $application.build.pack === "php"}
+      {#if !buildPhaseActive.includes($application.build.pack)}
        <div disabled class="px-3 py-2 text-warmGray-700 cursor-not-allowed">
          Build Step
        </div>
@@ -146,14 +149,19 @@
          Build Step
        </div>
      {/if}
-
-      <div
-        on:click="{() => activateTab('secrets')}"
-        class:text-green-500="{activeTab.secrets}"
-        class="px-3 py-2 cursor-pointer hover:text-green-500"
-      >
-        Secrets
-      </div>
+      {#if $application.build.pack === "custom"}
+        <div disabled class="px-3 py-2 text-warmGray-700 cursor-not-allowed">
+          Secrets
+        </div>
+      {:else}
+        <div
+          on:click="{() => activateTab('secrets')}"
+          class:text-green-500="{activeTab.secrets}"
+          class="px-3 py-2 cursor-pointer hover:text-green-500"
+        >
+          Secrets
+        </div>
+      {/if}
    </nav>
  </div>
  <div class="max-w-4xl mx-auto">
--- a/src/pages/_layout.svelte
+++ b/src/pages/_layout.svelte
@@ -64,18 +64,21 @@
    }
  }
  async function checkUpgrade() {
+    latest = await window
+      .fetch(`https://get.coollabs.io/version.json`, {
+        cache: "no-cache",
+      })
+      .then(r => r.json());
    const branch =
      process.env.NODE_ENV === "production" &&
      window.location.hostname !== "test.andrasbacsai.dev"
        ? "main"
        : "next";
-    latest = await window
-      .fetch(
-        `https://raw.githubusercontent.com/coollabsio/coolify/${branch}/package.json`,
-        { cache: "no-cache" },
-      )
-      .then(r => r.json());
-    return compareVersions(latest.version, packageJson.version) === 1
+
+    return compareVersions(
+      latest.coolify[branch].version,
+      packageJson.version,
+    ) === 1
      ? true
      : false;
  }
--- a/src/pages/application/[organization]/[name]/[branch]/configuration.svelte
+++ b/src/pages/application/[organization]/[name]/[branch]/configuration.svelte
@@ -1,38 +1,5 @@
 <script>
-  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"
-  >
-    <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 />
--- a/src/pages/application/[organization]/[name]/[branch]/logs/[deployId].svelte
+++ b/src/pages/application/[organization]/[name]/[branch]/logs/[deployId].svelte
@@ -38,12 +38,12 @@
  <Loading />
 {:then}
  <div
-    class="text-center space-y-2 max-w-7xl mx-auto px-6"
+    class="text-center px-6"
    in:fade="{{ duration: 100 }}"
  >
-    <div class="max-w-4xl mx-auto" in:fade="{{ duration: 100 }}">
+    <div 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">
+        class="leading-4 text-left text-sm font-semibold tracking-tighter rounded-lg bg-black p-6 whitespace-pre-wrap">
      {#if logs.length > 0}
        {#each logs as log}
          {log + '\n'}
--- a/src/pages/application/[organization]/[name]/[branch]/logs/index.svelte
+++ b/src/pages/application/[organization]/[name]/[branch]/logs/index.svelte
@@ -59,17 +59,17 @@
  <Loading />
 {:then}
  <div
-    class="text-center space-y-2 max-w-7xl mx-auto px-6"
+    class="text-center 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>
+          <div class="text-xs font-semibold tracking-tighter">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">
+        <pre
+        class="leading-4 text-left text-sm font-semibold tracking-tighter rounded-lg bg-black p-6 whitespace-pre-wrap w-full">
            {#each logs as log}
              {log + '\n'}
            {/each}
--- a/src/pages/application/new.svelte
+++ b/src/pages/application/new.svelte
@@ -2,12 +2,4 @@
  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"
-  >
-    New Application
-  </div>
-</div>
-
 <Configuration />
--- a/src/pages/dashboard/applications.svelte
+++ b/src/pages/dashboard/applications.svelte