feat(runner): display variants of usage on web

semaphoreui · Feb 2, 2025 · 8c8857e · 8c8857e
1 parent fc086df
commit 8c8857e
Show file tree

Hide file tree

Showing 4 changed files with 122 additions and 52 deletions.
diff --git a/api/router.go b/api/router.go
@@ -506,11 +506,7 @@ func serveFile(w http.ResponseWriter, r *http.Request, name string) {
 }
 
 func getSystemInfo(w http.ResponseWriter, r *http.Request) {
-	host := ""
-
-	if util.WebHostURL != nil {
-		host = util.WebHostURL.String()
-	}
+	host := util.GetPublicHost()
 
 	var authMethods LoginAuthMethods
 

diff --git a/util/config.go b/util/config.go
@@ -893,7 +893,7 @@ func LookupDefaultApps() {
 	}
 }
 
-func GetPublicAliasURL(scope string, alias string) string {
+func GetPublicHost() string {
 	aliasURL := Config.WebHost
 	port := Config.Port
 	if port == "" {
@@ -908,6 +908,13 @@ func GetPublicAliasURL(scope string, alias string) string {
 		aliasURL = "http://localhost:" + port
 	}
 
+	return aliasURL
+
+}
+
+func GetPublicAliasURL(scope string, alias string) string {
+	aliasURL := GetPublicHost()
+
 	if !strings.HasSuffix(aliasURL, "/") {
 		aliasURL += "/"
 	}

diff --git a/web/src/views/Runners.vue b/web/src/views/Runners.vue
@@ -1,7 +1,7 @@
 <template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
   <div v-if="items != null">
 
-    <v-toolbar flat >
+    <v-toolbar flat>
       <v-app-bar-nav-icon @click="showDrawer()"></v-app-bar-nav-icon>
       <v-toolbar-title>
         {{ $t('dashboard2') }}
@@ -89,49 +89,96 @@
             </div>
           </div>
 
-          <div class="mb-4">
-            <div>{{ $t('runnerUsage') }}</div>
-            <div style="position: relative;">
-              <pre style="white-space: pre-wrap;
-                          background: gray;
-                          color: white;
-                          border-radius: 10px;
-                          margin-top: 5px;"
-                   class="pa-2"
-              >{{ runnerUsageCommand }}</pre>
-
-              <v-btn
-                style="position: absolute; right: 10px; top: 10px;"
-                icon
-                color="white"
-                @click="copyToClipboard(runnerUsageCommand)"
-              >
-                <v-icon>mdi-content-copy</v-icon>
-              </v-btn>
-            </div>
-          </div>
-
-          <div>
-            <div>{{ $t('runnerDockerCommand') }}</div>
-            <div style="position: relative;">
-              <pre style="white-space: pre-wrap;
-                          background: gray;
-                          color: white;
-                          border-radius: 10px;
-                          margin-top: 5px;"
-                   class="pa-2"
-              >{{ runnerDockerCommand }}</pre>
-
-              <v-btn
-                style="position: absolute; right: 10px; top: 10px;"
-                icon
-                color="white"
-                @click="copyToClipboard(runnerDockerCommand)"
-              >
-                <v-icon>mdi-content-copy</v-icon>
-              </v-btn>
-            </div>
-          </div>
+          <v-tabs v-model="usageTab" :show-arrows="false">
+            <v-tab key="config">Config file</v-tab>
+            <v-tab key="setup">Setup</v-tab>
+            <v-tab key="env">Env Vars</v-tab>
+            <v-tab key="docker">Docker</v-tab>
+          </v-tabs>
+
+          <v-tabs-items v-model="usageTab">
+            <v-tab-item key="config">
+              <div style="position: relative;">
+                <pre style="overflow: auto;
+                            background: gray;
+                            color: white;
+                            border-radius: 10px;
+                            margin-top: 5px;"
+                     class="pa-2"
+                >{{ runnerConfigCommand }}</pre>
+
+                <v-btn
+                  style="position: absolute; right: 10px; top: 10px;"
+                  icon
+                  color="white"
+                  @click="copyToClipboard(runnerEnvCommand)"
+                >
+                  <v-icon>mdi-content-copy</v-icon>
+                </v-btn>
+              </div>
+            </v-tab-item>
+            <v-tab-item key="setup">
+              <div style="position: relative;">
+                <pre style="overflow: auto;
+                            background: gray;
+                            color: white;
+                            border-radius: 10px;
+                            margin-top: 5px;"
+                     class="pa-2"
+                >{{ runnerSetupCommand }}</pre>
+
+                <v-btn
+                  style="position: absolute; right: 10px; top: 10px;"
+                  icon
+                  color="white"
+                  @click="copyToClipboard(runnerSetupCommand)"
+                >
+                  <v-icon>mdi-content-copy</v-icon>
+                </v-btn>
+              </div>
+            </v-tab-item>
+            <v-tab-item key="env">
+              <div style="position: relative;">
+                <pre style="overflow: auto;
+                            background: gray;
+                            color: white;
+                            border-radius: 10px;
+                            margin-top: 5px;"
+                     class="pa-2"
+                >{{ runnerEnvCommand }}</pre>
+
+                <v-btn
+                  style="position: absolute; right: 10px; top: 10px;"
+                  icon
+                  color="white"
+                  @click="copyToClipboard(runnerEnvCommand)"
+                >
+                  <v-icon>mdi-content-copy</v-icon>
+                </v-btn>
+              </div>
+            </v-tab-item>
+
+            <v-tab-item key="docker">
+              <div style="position: relative;">
+                <pre style="overflow: auto;
+                            background: gray;
+                            color: white;
+                            border-radius: 10px;
+                            margin-top: 5px;"
+                     class="pa-2"
+                >{{ runnerDockerCommand }}</pre>
+
+                <v-btn
+                  style="position: absolute; right: 10px; top: 10px;"
+                  icon
+                  color="white"
+                  @click="copyToClipboard(runnerDockerCommand)"
+                >
+                  <v-icon>mdi-content-copy</v-icon>
+                </v-btn>
+              </div>
+            </v-tab-item>
+          </v-tabs-items>
         </div>
       </template>
     </EditDialog>
@@ -257,16 +304,33 @@ export default {
   },
 
   computed: {
-    runnerUsageCommand() {
+    runnerConfigCommand() {
+      return `{
+  "web_host": "${this.webHost}",
+  "runner": {
+    "token": "${(this.newRunner || {}).token}",
+    "private_key_file": "/path/to/the/private/key"
+  }
+}`;
+    },
+
+    runnerSetupCommand() {
+      return 'semaphore runner setup';
+    },
+
+    runnerEnvCommand() {
       return `SEMAPHORE_WEB_ROOT=${this.webHost} \\
 SEMAPHORE_RUNNER_TOKEN=${(this.newRunner || {}).token} \\
+SEMAPHORE_RUNNER_PRIVATE_KEY_FILE=/path/to/the/private/key \\
 semaphore runner --no-config`;
     },
 
     runnerDockerCommand() {
       return `docker run \\
 -e SEMAPHORE_WEB_ROOT=${this.webHost} \\
 -e SEMAPHORE_RUNNER_TOKEN=${(this.newRunner || {}).token} \\
+-e SEMAPHORE_RUNNER_PRIVATE_KEY_FILE=/config.runner.key \\
+-v "/path/to/the/private/key:/config.runner.key" \\
 -d semaphoreui/runner:${this.version}`;
     },
   },
@@ -275,6 +339,7 @@ semaphore runner --no-config`;
     return {
       newRunnerTokenDialog: null,
       newRunner: null,
+      usageTab: null,
     };
   },
 

diff --git a/web/src/views/project/template/TemplateTerraformState.vue b/web/src/views/project/template/TemplateTerraformState.vue
@@ -193,7 +193,9 @@
         <v-btn
           color="hsl(348deg, 86%, 61%)"
           href="https://semaphoreui.com/pro"
-        >Upgrade
+        >
+          Learn more
+          <v-icon>mdi-chevron-right</v-icon>
         </v-btn>
       </v-alert>