v1.0.7 (#32)

New features: - Automatic error reporting (enabled by default) - Increase build times by leveraging docker build caches - Fixes: - Fix error handling - Fix vue autodetect - Custom dockerfile is not the default Others: - Cleanup `logs-servers` collection, because old errors are not standardized - New Traefik proxy version - Standardized directory configurations
2021-04-19 09:46:05 +02:00
parent bad84289c4
commit 142b83cc13
51 changed files with 1300 additions and 837 deletions
--- a/src/components/Application/Configuration/ActiveTab/General.svelte
+++ b/src/components/Application/Configuration/ActiveTab/General.svelte
@@ -63,7 +63,7 @@
      <div class="grid grid-flow-row">
        <label for="Path"
          >Path <TooltipInfo
-            label="{`Path to deploy your application on your domain. eg: /api means it will be deployed to -> https://${$application.publish.domain}/api`}"
+            label="{`Path to deploy your application on your domain. eg: /api means it will be deployed to -> https://${$application.publish.domain || '<yourdomain>'}/api`}"
          /></label
        >
        <input
@@ -92,7 +92,7 @@
        <input
          id="baseDir"
          bind:value="{$application.build.directory}"
-          placeholder="/"
+          placeholder="eg: sourcedir"
        />
      </div>
      <div class="grid grid-flow-row">
@@ -104,7 +104,7 @@
        <input
          id="publishDir"
          bind:value="{$application.publish.directory}"
-          placeholder="/"
+          placeholder="eg: dist, _site, public"
        />
      </div>
    </div>
--- a/src/components/Application/Configuration/Configuration.svelte
+++ b/src/components/Application/Configuration/Configuration.svelte
@@ -157,7 +157,7 @@
          $application.publish.path}"
        >{$application.publish.domain
          ? `${$application.publish.domain}${$application.publish.path !== '/' ? $application.publish.path : ''}`
-          : "Loading..."}</a
+          : "<yourdomain>"}</a
      >
      <a
        target="_blank"
--- a/src/components/Application/Configuration/Tabs.svelte
+++ b/src/components/Application/Configuration/Tabs.svelte
@@ -57,10 +57,7 @@
          f => f.type === "file" && f.name === "Cargo.toml",
        );

-        if (Dockerfile) {
-          $application.build.pack = "custom";
-          toast.push("Custom Dockerfile found. Build pack set to custom.");
-        } else if (packageJson) {
+        if (packageJson) {
          const { content } = await $fetch(packageJson.git_url);
          const packageJsonContent = JSON.parse(atob(content));
          const checkPackageJSONContents = dep => {
@@ -73,17 +70,9 @@
            if (checkPackageJSONContents(dep)) {
              const config = templates[dep];
              $application.build.pack = config.pack;
-              if (config.installation) {
-                $application.build.command.installation = config.installation;
-              }
-
-              if (config.port) {
-                $application.publish.port = config.port;
-              }
-
-              if (config.directory) {
-                $application.publish.directory = config.directory;
-              }
+              if (config.installation) $application.build.command.installation = config.installation;
+              if (config.port) $application.publish.port = config.port;
+              if (config.directory) $application.publish.directory = config.directory;

              if (
                packageJsonContent.scripts.hasOwnProperty("build") &&
@@ -97,6 +86,9 @@
        } else if (CargoToml) {
          $application.build.pack = "rust";
          toast.push(`Rust language detected. Default values set.`);
+        } else if (Dockerfile) {
+          $application.build.pack = "custom";
+          toast.push("Custom Dockerfile found. Build pack set to custom.");
        }
      } catch (error) {
        // Nothing detected
--- a/src/index.css
+++ b/src/index.css
@@ -22,6 +22,11 @@ body {
    border-image: linear-gradient(0.25turn, rgba(255, 249, 34), rgba(255, 0, 128), rgba(56, 2, 155, 0));
    border-image-slice: 1;
 }
+.border-gradient-full {
+    border: 4px solid transparent;
+    border-image: linear-gradient(0.25turn, rgba(255, 249, 34), rgba(255, 0, 128), rgba(56, 2, 155, 0));
+    border-image-slice: 1;
+}

 [aria-label][role~="tooltip"]::after {
  background: rgba(41, 37, 36, 0.9);
--- a/src/pages/_layout.svelte
+++ b/src/pages/_layout.svelte
@@ -17,9 +17,37 @@
  let upgradeDisabled = false;
  let upgradeDone = false;
  let latest = {};
+  let showAck = false;
+  const branch =
+    process.env.NODE_ENV === "production" &&
+    window.location.hostname !== "test.andrasbacsai.dev"
+      ? "main"
+      : "next";
  onMount(async () => {
-    if ($session.token) upgradeAvailable = await checkUpgrade();
+    if ($session.token) {
+      upgradeAvailable = await checkUpgrade();
+      if (!localStorage.getItem("automaticErrorReportsAck")) {
+        showAck = true;
+        if (latest?.coolify[branch]?.settings?.sendErrors) {
+          const settings = {
+            sendErrors: true,
+          };
+          await $fetch("/api/v1/settings", {
+            body: {
+              ...settings,
+            },
+            headers: {
+              Authorization: `Bearer ${$session.token}`,
+            },
+          });
+        }
+      }
+    }
  });
+  function ackError() {
+    localStorage.setItem("automaticErrorReportsAck", "true");
+    showAck = false;
+  }
  async function verifyToken() {
    if ($session.token) {
      try {
@@ -69,11 +97,6 @@
        cache: "no-cache",
      })
      .then(r => r.json());
-    const branch =
-      process.env.NODE_ENV === "production" &&
-      window.location.hostname !== "test.andrasbacsai.dev"
-        ? "main"
-        : "next";

    return compareVersions(
      latest.coolify[branch].version,
@@ -85,6 +108,31 @@
 </script>

 {#await verifyToken() then notUsed}
+  {#if showAck}
+    <div
+      class="p-2 fixed top-0 right-0 z-50 w-64 m-2 rounded border-gradient-full bg-black"
+    >
+      <div class="text-white text-xs space-y-2 text-justify font-medium">
+        <div>
+          We implemented an automatic error reporting feature, which is enabled
+          by default.
+        </div>
+        <div>
+          Why? Because we would like to hunt down bugs faster and easier.
+        </div>
+        <div class="py-5">
+          If you do not like it, you can turn it off in the <button
+            class="underline font-bold"
+            on:click="{$goto('/settings')}">Settings menu</button
+          >.
+        </div>
+        <button
+          class="button p-2 bg-warmGray-800 w-full text-center hover:bg-warmGray-700"
+          on:click="{ackError}">OK</button
+        >
+      </div>
+    </div>
+  {/if}
  {#if $route.path !== "/index"}
    <nav
      class="w-16 bg-warmGray-800 text-white top-0 left-0 fixed min-w-4rem min-h-screen"
--- a/src/pages/application/[organization]/[name]/[branch]/logs/[deployId].svelte
+++ b/src/pages/application/[organization]/[name]/[branch]/logs/[deployId].svelte
@@ -1,5 +1,5 @@
 <script>
-  import { params } from "@roxi/routify";
+  import { params, redirect } from "@roxi/routify";
  import { onDestroy, onMount } from "svelte";
  import { fade } from "svelte/transition";
  import { fetch } from "@store";
@@ -15,13 +15,18 @@
  });

  async function loadLogs() {
-    const { events, progress } = await $fetch(
+    try {
+      const { events, progress } = await $fetch(
      `/api/v1/application/deploy/logs/${$params.deployId}`,
    );
    logs = [...events];
    if (progress === "done" || progress === "failed") {
      clearInterval(loadLogsInterval);
    }
+    } catch(error) {
+      $redirect('/dashboard')
+    }
+
  }
  onDestroy(() => {
    clearInterval(loadLogsInterval);
--- a/src/pages/application/_layout.svelte
+++ b/src/pages/application/_layout.svelte
@@ -55,19 +55,20 @@ import Tooltip from "../../components/Tooltip/Tooltip.svelte";
      await $fetch(`/api/v1/application/check`, {
        body: $application,
      });
-      const { nickname, name } = await $fetch(`/api/v1/application/deploy`, {
+      const { nickname, name, deployId } = await $fetch(`/api/v1/application/deploy`, {
        body: $application,
      });
      $application.general.nickname = nickname;
      $application.build.container.name = name;
+      $application.general.deployId = deployId;
      $initConf = JSON.parse(JSON.stringify($application));
      toast.push("Application deployment queued.");
-      $redirect(
-        `/application/${$application.repository.organization}/${$application.repository.name}/${$application.repository.branch}/logs`,
+      $goto(
+        `/application/${$application.repository.organization}/${$application.repository.name}/${$application.repository.branch}/logs/${$application.general.deployId}`,
      );
    } catch (error) {
      console.log(error);
-      toast.push(error.error ? error.error : "Ooops something went wrong.");
+      toast.push(error.error || error || "Ooops something went wrong.");
    }
  }
 </script>
--- a/src/pages/settings/index.svelte
+++ b/src/pages/settings/index.svelte
@@ -6,11 +6,13 @@

  let settings = {
    allowRegistration: false,
+    sendErrors: true
  };

  async function loadSettings() {
    const response = await $fetch(`/api/v1/settings`);
    settings.allowRegistration = response.settings.allowRegistration;
+    settings.sendErrors = response.settings.sendErrors;
  }
  async function changeSettings(value) {
    settings[value] = !settings[value];
@@ -23,7 +25,7 @@
  }
 </script>

-  <div class="min-h-full text-white"  in:fade="{{ duration: 100 }}">
+  <div class="min-h-full text-white" in:fade="{{ duration: 100 }}">
    <div
      class="py-5 text-left px-6 text-3xl tracking-tight font-bold flex items-center"
    >
@@ -101,6 +103,67 @@
                </span>
              </button>
            </li>
+            <li class="py-4 flex items-center justify-between">
+              <div class="flex flex-col">
+                <p class="text-base font-bold text-warmGray-100">
+                  Send errors automatically?
+                </p>
+                <p class="text-sm font-medium text-warmGray-400">
+                  Allow to send errors automatically to developer(s) at coolLabs (<a href="https://twitter.com/andrasbacsai" target="_blank" class="underline text-white font-bold hover:text-blue-400">Andras Bacsai</a>). This will help to fix bugs quicker. 🙏
+                </p>
+              </div>
+              <button
+                type="button"
+                on:click="{() => changeSettings('sendErrors')}"
+                aria-pressed="true"
+                class="relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200"
+                class:bg-green-600="{settings.sendErrors}"
+                class:bg-warmGray-700="{!settings.sendErrors}"
+              >
+                <span class="sr-only">Use setting</span>
+                <span
+                  class="pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transform transition ease-in-out duration-200"
+                  class:translate-x-5="{settings.sendErrors}"
+                  class:translate-x-0="{!settings.sendErrors}"
+                >
+                  <span
+                    class=" ease-in duration-200 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity"
+                    class:opacity-0="{settings.sendErrors}"
+                    class:opacity-100="{!settings.sendErrors}"
+                    aria-hidden="true"
+                  >
+                    <svg
+                      class="bg-white h-3 w-3 text-red-600"
+                      fill="none"
+                      viewBox="0 0 12 12"
+                    >
+                      <path
+                        d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"></path>
+                    </svg>
+                  </span>
+                  <span
+                    class="ease-out duration-100 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity"
+                    aria-hidden="true"
+                    class:opacity-100="{settings.sendErrors}"
+                    class:opacity-0="{!settings.sendErrors}"
+                  >
+                    <svg
+                      class="bg-white h-3 w-3 text-green-600"
+                      fill="currentColor"
+                      viewBox="0 0 12 12"
+                    >
+                      <path
+                        d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"
+                      ></path>
+                    </svg>
+                  </span>
+                </span>
+              </button>
+            </li>
          </ul>
        </div>
      </div>
--- a/src/utils/templates.js
+++ b/src/utils/templates.js
@@ -28,7 +28,7 @@ const templates = {
    directory: 'dist',
    name: 'Parcel'
  },
-  'vue-cli-service': {
+  '@vue/cli-service': {
    pack: 'static',
    ...defaultBuildAndDeploy,
    directory: 'dist',