Add TFRobot solution

packages/playground/public/info/tfrobot.md

@@ -0,0 +1,5 @@
+---
+title: TFRobot
+---
+
+TFRobot is a command line interface tool that offers simultaneous mass deployment of groups of VMs on the ThreeFold Grid, with support of multiple retries for failed deployments, and customizable configurations, where you can define node groups, VMs groups and other configurations through a YAML or a JSON file. For more details, check [TFRobot documentation](https://manual.grid.tf/documentation/developers/tfrobot/tfrobot.html?highlight=tfrobot#).

packages/playground/src/components/node_selector/TfSelectionDetails.vue

@@ -1,5 +1,5 @@
 <template>
-  <section>
+  <section class="mt-4">
     <template v-if="!disableNodeSelection">
       <h3 class="bg-primary pa-2 text-h6 rounded">Node Selection</h3>
       <p class="text-h6 mb-4 mt-2 ml-2">Choose a way to select Node</p>

packages/playground/src/components/vm_deployment_table.vue

@@ -247,7 +247,7 @@ async function loadDeployments() {
 }
 
 const filteredHeaders = computed(() => {
-  const headers = [
+  let headers = [
     { title: "PLACEHOLDER", key: "data-table-select" },
     { title: "Name", key: "name" },
     {
@@ -269,7 +269,7 @@ const filteredHeaders = computed(() => {
     { title: "Actions", key: "actions", sortable: false },
   ];
 
-  const IPV6Solutions = [ProjectName.VM, ProjectName.Fullvm] as string[];
+  const IPV6Solutions = [ProjectName.VM, ProjectName.Fullvm, ProjectName.TFRobot] as string[];
 
   const IPV4Solutions = [
     ProjectName.VM,
@@ -284,9 +284,10 @@ const filteredHeaders = computed(() => {
     ProjectName.Taiga,
     ProjectName.StaticWebsite,
     ProjectName.Wordpress,
+    ProjectName.TFRobot,
   ] as string[];
 
-  const WireguardSolutions = [ProjectName.VM, ProjectName.Fullvm, ProjectName.Umbrel] as string[];
+  const WireguardSolutions = [ProjectName.VM, ProjectName.Fullvm, ProjectName.Umbrel, ProjectName.TFRobot] as string[];
 
   const flistSolutions = [ProjectName.VM, ProjectName.Fullvm] as string[];
 
@@ -302,10 +303,9 @@ const filteredHeaders = computed(() => {
     if (!WireguardSolutions.includes(props.projectName)) {
       headers[2].children = headers[2].children.filter(h => h.key !== "wireguard");
     }
-
-    if (!flistSolutions.includes(props.projectName)) {
-      headers[2].children = headers[2].children.filter(h => h.key !== "flist");
-    }
+  }
+  if (!flistSolutions.includes(props.projectName)) {
+    headers = headers.filter(h => h.key !== "flist");
   }
 
   return headers;

packages/playground/src/constants/deployment_list.ts

@@ -162,4 +162,8 @@ export const deploymentListEnvironments = {
       transform: prefixUrl("https"),
     },
   },
+
+  tfrobot: {
+    SSH_KEY: _ssh,
+  },
 };

packages/playground/src/router/index.ts

@@ -387,6 +387,28 @@ function createApplicationsRoutes(): RouteRecordRaw[] {
     //     },
     //   },
     // },
+    {
+      path: DashboardRoutes.Applications.TFRobot,
+      component: () => import("../views/tfrobot_view.vue"),
+      meta: {
+        title: "TFRobot",
+        info: { page: "info/tfrobot.md" },
+        navbarConfig: {
+          back: true,
+          path: [
+            { title: "Deploy" },
+            {
+              title: "Applications",
+              disabled: false,
+              to: DashboardRoutes.Deploy.Applications,
+            },
+            {
+              title: "TFRobot",
+            },
+          ],
+        },
+      },
+    },
   ];
 }
 

packages/playground/src/router/routes.ts

@@ -67,6 +67,7 @@ enum ApplicationRoutes {
   Wordpress = "/deploy/applications/wordpress/",
   Umbrel = "/deploy/applications/umbrel/",
   Freeflow = "/deploy/applications/freeflow/",
+  TFRobot = "/deploy/applications/tfrobot/",
 }
 
 const DashboardRoutes = {

packages/playground/src/types/index.ts

@@ -121,6 +121,7 @@ export enum ProjectName {
   Umbrel = "Umbrel",
   FreeFlow = "Freeflow",
   StaticWebsite = "StaticWebsite",
+  TFRobot = "TFRobot",
 }
 
 export enum SolutionCode {
@@ -147,6 +148,7 @@ export enum SolutionCode {
   umbrel = "um",
   wordpress = "wp",
   staticwebsite = "sw",
+  tfrobot = "tfr",
 }
 
 export const solutionType: { [key: string]: string } = {
@@ -170,6 +172,7 @@ export const solutionType: { [key: string]: string } = {
   vm: "Micro Virtual Machine",
   wordpress: "Wordpress",
   staticwebsite: "Static Website",
+  tfrobot: "TFRobot",
 };
 
 export interface solutionFlavor {

packages/playground/src/views/solutions_view.vue

@@ -58,6 +58,13 @@ export default {
   name: "SolutionsView",
   setup() {
     const cards: Card[] = [
+      {
+        title: "TFRobot",
+        excerpt:
+          "TFRobot is a command line interface tool that offers simultaneous mass deployment of groups of VMs on the ThreeFold Grid, with support of multiple retries for failed deployments, and customizable configurations.",
+        icon: "tfrobot.png",
+        route: DashboardRoutes.Applications.TFRobot,
+      },
       {
         title: "Peertube",
         excerpt: "Peertube aspires to be a decentralized and free/libre alternative to video broadcasting services.",
@@ -100,13 +107,6 @@ export default {
         icon: "static_website.png",
         route: DashboardRoutes.Applications.StaticWebsite,
       },
-      // {
-      //   title: "Owncloud",
-      //   excerpt:
-      //     "ownCloud develops and provides open-source software for content collaboration, allowing teams to easily share and work on files seamlessly regardless of device or location.",
-      //   icon: "owncloud.png",
-      //   route: DashboardRoutes.Applications.Owncloud,
-      // },
       {
         title: "Nextcloud",
         excerpt:
@@ -157,13 +157,6 @@ export default {
         icon: "umbrel.png",
         route: DashboardRoutes.Applications.Umbrel,
       },
-      //       {
-      //         title: "Freeflow",
-      //         excerpt: `Freeflow is a convenient ecosystem on top of a resilient internet grid. We bring you a new internet with a set of
-      // productivity tools so you can enhance collaboration within your country, your company, your community.`,
-      //         icon: "freeflow.png",
-      //         route: DashboardRoutes.Applications.Freeflow,
-      //       },
       {
         title: "Wordpress",
         excerpt:

packages/playground/src/views/tfrobot_view.vue

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

packages/playground/src/weblets/tf_deployment_list.vue

@@ -274,6 +274,14 @@
           />
         </template>
 
+        <template #TFRobot-actions="{ item }">
+          <IconActionBtn
+            tooltip="Show Details"
+            icon="mdi-eye-outline"
+            @click="openDialog(tabs[activeTab].value, item)"
+          />
+        </template>
+
         <template #Wordpress-actions="{ item }">
           <IconActionBtn
             tooltip="Show Details"
@@ -393,6 +401,7 @@ const tabs: Tab[] = [
   { 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" },
+  { title: "TFRobot", value: "TFRobot", imgPath: "images/icons/tfrobot.png" },
 ];
 
 const layout = useLayout();