Adding static website application

packages/playground/public/info/static_website.md

@@ -0,0 +1,5 @@
+---
+title: Static Website
+---
+
+Static Website is an application where a user provide a github repository url and it's automatically served using caddy. For more details, check [Static Website documentation](https://www.manual.grid.tf/documentation/dashboard/solutions/static_website.html).

packages/playground/src/constants/deployment_list.ts

@@ -124,6 +124,12 @@ export const deploymentListEnvironments = {
     CHAIN_ENDPOINT: "Chain Endpoint",
   },
 
+  static_website: {
+    SSH_KEY: _ssh,
+    GITHUB_URL: "Cloned Repository URL",
+    ROOT: "HTML Directory",
+  },
+
   taiga: {
     SSH_KEY: _ssh,
     DOMAIN_NAME: "Domain Name",

packages/playground/src/router/index.ts

@@ -339,6 +339,29 @@ function createApplicationsRoutes(): RouteRecordRaw[] {
         },
       },
     },
+
+    {
+      path: DashboardRoutes.Applications.StaticWebsite,
+      component: () => import("../views/staticwebsite_view.vue"),
+      meta: {
+        title: "Static Website",
+        info: { page: "info/static_website.md" },
+        navbarConfig: {
+          back: true,
+          path: [
+            { title: "Deploy" },
+            {
+              title: "Applications",
+              disabled: false,
+              to: DashboardRoutes.Deploy.Applications,
+            },
+            {
+              title: "Static Website",
+            },
+          ],
+        },
+      },
+    },
     // Commented for now and will be user later.
     // {
     //   path: DashboardRoutes.Applications.Freeflow,

packages/playground/src/router/routes.ts

@@ -53,6 +53,7 @@ enum OtherRoutes {
 enum ApplicationRoutes {
   BaseRoute = "/deploy/applications/",
   Peertube = "/deploy/applications/peertube/",
+  StaticWebsite = "/deploy/applications/static_website/",
   Funkwhale = "/deploy/applications/funkwhale/",
   Mattermost = "/deploy/applications/mattermost/",
   Discourse = "/deploy/applications/discourse/",

packages/playground/src/types/index.ts

@@ -114,6 +114,7 @@ export enum ProjectName {
   Qvm = "Qvm",
   Umbrel = "Umbrel",
   FreeFlow = "Freeflow",
+  StaticWebsite = "StaticWebsite",
 }
 
 export enum SolutionCode {
@@ -139,6 +140,7 @@ export enum SolutionCode {
   qvm = "qvm",
   umbrel = "um",
   wordpress = "wp",
+  staticwebsite = "sw",
 }
 
 export const solutionType: { [key: string]: string } = {
@@ -161,6 +163,7 @@ export const solutionType: { [key: string]: string } = {
   umbrel: "Umbrel",
   vm: "Micro Virtual Machine",
   wordpress: "Wordpress",
+  staticwebsite: "Static Website",
 };
 
 export interface solutionFlavor {

packages/playground/src/views/solutions_view.vue

@@ -93,6 +93,13 @@ export default {
         icon: "taiga.png",
         route: DashboardRoutes.Applications.Taiga,
       },
+      {
+        title: "Static Website",
+        excerpt:
+          "Static Website is an application where a user provides a Github repository url and it's automatically served using Caddy.",
+        icon: "static_website.png",
+        route: DashboardRoutes.Applications.StaticWebsite,
+      },
       // {
       //   title: "Owncloud",
       //   excerpt:

packages/playground/src/views/staticwebsite_view.vue

@@ -0,0 +1,26 @@
+<template>
+  <view-layout>
+    <StaticWebsite />
+
+    <template #list>
+      <TfDeploymentList title="Static Website Instances" :project-name="name" />
+    </template>
+  </view-layout>
+</template>
+
+<script lang="ts">
+import { ProjectName } from "../types";
+import TfDeploymentList from "../weblets/tf_deployment_list.vue";
+import StaticWebsite from "../weblets/tf_staticwebsite.vue";
+
+export default {
+  name: "CaddyView",
+  components: {
+    StaticWebsite,
+    TfDeploymentList,
+  },
+  setup() {
+    return { name: ProjectName.StaticWebsite };
+  },
+};
+</script>

packages/playground/src/weblets/tf_deployment_list.vue

@@ -235,6 +235,20 @@
           />
         </template>
 
+        <template #StaticWebsite-actions="{ item }">
+          <IconActionBtn
+            tooltip="Show Details"
+            icon="mdi-eye-outline"
+            @click="openDialog(tabs[activeTab].value, item)"
+          />
+          <IconActionBtn
+            tooltip="Visit"
+            icon="mdi-web"
+            color="anchor"
+            :href="'https://' + item.value.env.STATICWEBSITE_DOMAIN"
+          />
+        </template>
+
         <template #Algorand-actions="{ item }">
           <IconActionBtn
             tooltip="Show Details"
@@ -399,6 +413,7 @@ const tabs: Tab[] = [
   { title: "Umbrel", value: "Umbrel", imgPath: "images/icons/umbrel.png" },
   { title: "Freeflow", value: "Freeflow", imgPath: "images/icons/freeflow.png" },
   { title: "Wordpress", value: "Wordpress", imgPath: "images/icons/wordpress.png" },
+  { title: "Static Website", value: "StaticWebsite", imgPath: "images/icons/wordpress.png" },
 ];
 
 const profileManager = useProfileManager();

packages/playground/src/weblets/tf_staticwebsite.vue

@@ -0,0 +1,248 @@
+<template>
+  <weblet-layout
+    ref="layout"
+    :cpu="solution?.cpu"
+    :memory="solution?.memory"
+    :disk="solution?.disk"
+    :ipv4="ipv4"
+    :dedicated="dedicated"
+    :SelectedNode="selectionDetails?.node"
+    :valid-filters="selectionDetails?.validFilters"
+    title-image="images/icons/static_website.png"
+  >
+    <template #title>Deploy a Static Website Instance </template>
+
+    <form-validator v-model="valid">
+      <input-validator
+        :value="name"
+        :rules="[
+          validators.required('Name is required.'),
+          validators.isLowercase('Name should consist of lowercase letters only.'),
+          validators.isAlphanumeric('Name should consist of letters and numbers only.'),
+          name => validators.isAlpha('Name must start with alphabet char.')(name[0]),
+          validators.minLength('Name must be at least 2 characters.', 2),
+          validators.maxLength('Name cannot exceed 15 characters.', 15),
+        ]"
+        #="{ props }"
+      >
+        <input-tooltip tooltip="Instance name.">
+          <v-text-field label="Name" v-model="name" v-bind="props" />
+        </input-tooltip>
+      </input-validator>
+
+      <input-validator
+        :value="githubUrl"
+        :rules="[
+          validators.required('Github Repository is required.'),
+          validators.isURL('Github Repository must be a valid URL.', {
+            protocols: ['https'],
+          }),
+        ]"
+        #="{ props }"
+      >
+        <input-tooltip tooltip="Github Repository to serve.">
+          <v-text-field label="Github Repository" v-model="githubUrl" v-bind="props" />
+        </input-tooltip>
+      </input-validator>
+
+      <input-tooltip tooltip="Github Branch to serve (optional).">
+        <v-text-field label="Github Branch" v-model="githubBranch" />
+      </input-tooltip>
+      <input-validator :value="root" :rules="[validators.required('HTML Directory is required.')]" #="{ props }">
+        <input-tooltip
+          tooltip="HTML Directory to serve. Note that this field is case-sensitive so make sure you provide the correct directory"
+        >
+          <v-text-field label="HTML Directory" v-model="root" v-bind="props" />
+        </input-tooltip>
+      </input-validator>
+
+      <SelectSolutionFlavor
+        v-model="solution"
+        :small="{ cpu: 1, memory: 2, disk: 50 }"
+        :medium="{ cpu: 2, memory: 4, disk: 100 }"
+      />
+
+      <Networks ref="network" v-model:ipv4="ipv4" v-model:mycelium="mycelium" />
+
+      <input-tooltip
+        inline
+        tooltip="Click to know more about dedicated machines."
+        href="https://www.manual.grid.tf/documentation/dashboard/deploy/dedicated_machines.html"
+      >
+        <v-switch color="primary" inset label="Dedicated" v-model="dedicated" hide-details />
+      </input-tooltip>
+
+      <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
+        <v-switch color="primary" inset label="Certified" v-model="certified" hide-details />
+      </input-tooltip>
+
+      <TfSelectionDetails
+        :filters="{
+          ipv4,
+          certified,
+          dedicated,
+          cpu: solution?.cpu,
+          solutionDisk: solution?.disk,
+          memory: solution?.memory,
+          rootFilesystemSize,
+        }"
+        require-domain
+        v-model="selectionDetails"
+      />
+    </form-validator>
+
+    <template #footer-actions>
+      <v-btn color="secondary" variant="outlined" @click="deploy()" :disabled="!valid"> Deploy </v-btn>
+    </template>
+  </weblet-layout>
+</template>
+
+<script lang="ts" setup>
+import type { GridClient } from "@threefold/grid_client";
+import { computed, type Ref, ref } from "vue";
+
+import { useLayout } from "../components/weblet_layout.vue";
+import { useProfileManager } from "../stores";
+import type { Flist, solutionFlavor as SolutionFlavor } from "../types";
+import { ProjectName } from "../types";
+import { deployVM } from "../utils/deploy_vm";
+import { deployGatewayName, getSubdomain, rollbackDeployment } from "../utils/gateway";
+import { getGrid } from "../utils/grid";
+import { normalizeError } from "../utils/helpers";
+import { generateName } from "../utils/strings";
+
+const layout = useLayout();
+const valid = ref(false);
+const profileManager = useProfileManager();
+const name = ref(generateName({ prefix: "sw" }));
+const githubUrl = ref("");
+const githubBranch = ref("");
+const root = ref("");
+const domain = ref();
+
+const ipv4 = ref(false);
+const mycelium = ref(false);
+const solution = ref() as Ref<SolutionFlavor>;
+const flist: Flist = {
+  // Should be upgraded to an oficial Flist
+  value: "https://hub.grid.tf/mayarosamaa.3bot/mayarosama-caddy2-v1.flist",
+  entryPoint: "/sbin/zinit init",
+};
+const dedicated = ref(false);
+const certified = ref(false);
+const rootFilesystemSize = computed(() => rootFs(solution.value?.cpu ?? 0, solution.value?.memory ?? 0));
+const selectionDetails = ref<SelectionDetails>();
+
+function finalize(deployment: any) {
+  layout.value.reloadDeploymentsList();
+  layout.value.setStatus("success", "Successfully deployed a Static Website instance.");
+  layout.value.openDialog(deployment, deploymentListEnvironments.static_website);
+}
+
+async function deploy() {
+  layout.value.setStatus("deploy");
+
+  const projectName = ProjectName.StaticWebsite.toLowerCase() + "/" + name.value;
+
+  const subdomain = getSubdomain({
+    deploymentName: name.value,
+    projectName,
+    twinId: profileManager.profile!.twinId,
+  });
+
+  if (
+    selectionDetails.value?.domain?.customDomain ||
+    selectionDetails.value?.domain?.selectedDomain?.publicConfig.domain
+  ) {
+    domain.value = selectionDetails.value?.domain?.enabledCustomDomain
+      ? selectionDetails.value.domain.customDomain
+      : subdomain + "." + selectionDetails.value?.domain?.selectedDomain?.publicConfig.domain;
+  }
+
+  let grid: GridClient | null;
+  let vm: any;
+
+  try {
+    layout.value?.validateSSH();
+    grid = await getGrid(profileManager.profile!, projectName);
+
+    await layout.value.validateBalance(grid!);
+
+    vm = await deployVM(grid!, {
+      name: name.value,
+      network: {
+        addAccess: selectionDetails.value!.domain!.enableSelectedDomain,
+        accessNodeId: selectionDetails.value?.domain?.selectedDomain?.nodeId,
+      },
+      machines: [
+        {
+          name: name.value,
+          cpu: solution.value.cpu,
+          memory: solution.value.memory,
+          disks: [
+            {
+              size: solution.value.disk,
+              mountPoint: "/var/lib/docker",
+            },
+          ],
+          flist: flist.value,
+          entryPoint: flist.entryPoint,
+          publicIpv4: ipv4.value,
+          mycelium: mycelium.value,
+          envs: [
+            { key: "SSH_KEY", value: profileManager.profile!.ssh },
+            { key: "GITHUB_URL", value: githubUrl.value },
+            { key: "GITHUB_BRANCH", value: githubBranch.value },
+            { key: "ROOT", value: root.value },
+            { key: "USER_DOMAIN", value: selectionDetails.value?.domain?.enabledCustomDomain ? domain.value : "" },
+            { key: "STATICWEBSITE_DOMAIN", value: domain.value },
+          ],
+          nodeId: selectionDetails.value!.node!.nodeId,
+          rentedBy: dedicated.value ? grid!.twinId : undefined,
+          certified: certified.value,
+          rootFilesystemSize: rootFilesystemSize.value,
+        },
+      ],
+    });
+  } catch (e) {
+    return layout.value.setStatus("failed", normalizeError(e, "Failed to deploy a Static Website instance."));
+  }
+  if (domain.value) {
+    if (!selectionDetails.value?.domain?.enableSelectedDomain) {
+      vm[0].customDomain = selectionDetails.value?.domain?.customDomain;
+      return;
+    }
+
+    try {
+      layout.value.setStatus("deploy", "Preparing to deploy gateway...");
+
+      await deployGatewayName(grid, selectionDetails.value.domain, {
+        subdomain,
+        ip: vm[0].interfaces[0].ip,
+        port: 9000,
+        network: vm[0].interfaces[0].network,
+      });
+      finalize(vm);
+    } catch (e) {
+      layout.value.setStatus("deploy", "Rollbacking back due to fail to deploy gateway...");
+
+      await rollbackDeployment(grid!, name.value);
+      layout.value.setStatus("failed", normalizeError(e, "Failed to deploy a Static Website instance."));
+    }
+  }
+  finalize(vm);
+}
+</script>
+
+<script lang="ts">
+import Networks from "../components/networks.vue";
+import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
+import { deploymentListEnvironments } from "../constants";
+import type { SelectionDetails } from "../types/nodeSelector";
+import rootFs from "../utils/root_fs";
+
+export default {
+  name: "TfStaticWebsite",
+  components: { SelectSolutionFlavor, Networks },
+};
+</script>