local proxy tab

Signed-off-by: Maksim Paskal <paskal.maksim@gmail.com>

front/components/CopyTextbox.vue

@@ -3,24 +3,35 @@
     <b-button @click="copyToClipboard()" variant="outline-primary" style="margin-bottom: 10px"><em
         :class=iconClass />&nbsp;Copy to clipboard
     </b-button>
-    <textarea class="form-control" onclick="this.focus();this.select()"
-      style="background-color:#eeeeee;border:0px;padding:10px;outline:none;width:100%" v-model="textareaValue"
+    <textarea class="form-control" onclick="this.focus();this.select()" :style="textareaStyle()" v-model="textareaValue"
       readonly />
   </div>
 </template>
 <script>
 export default {
-  props: ['text'],
+  props: ['text', 'height'],
   mounted() {
     this.textareaValue = this.text;
   },
+  watch: {
+    text() {
+      this.textareaValue = this.text;
+    }
+  },
   data() {
     return {
       textareaValue: '',
       iconClass: 'bi bi-clipboard',
     };
   },
   methods: {
+    textareaStyle() {
+      let style = "background-color:#eeeeee;border:0px;padding:10px;outline:none;width:100%";
+      if (this.height) {
+        style += `;height:${this.height}`;
+      }
+      return style;
+    },
     copyToClipboard() {
       navigator.clipboard.writeText(this.textareaValue);
       this.iconClass = 'bi bi-clipboard-check-fill';

front/components/LocalProxy.vue

@@ -0,0 +1,110 @@
+<style scoped>
+.form-field {
+  margin-bottom: 10px;
+}
+</style>
+<template>
+  <b-alert v-if="$fetchState.error" variant="danger" show>{{
+    $fetchState.error.message
+  }}</b-alert>
+  <b-spinner v-else-if="$fetchState.pending" variant="primary" />
+  <div v-else>
+    <b-form-select v-model="selectedHost" class="form-select form-field" :options="selectedHostOptions" />
+    <b-form-select v-model="selectedOS" class="form-select form-field" :options="selectedOSOptions" />
+    <b-form-select v-model="selectedTemplate" class="form-select form-field" :options="selectedTemplateOptions" />
+    <div v-if="templatedText" style="margin-top:20px">
+      <CopyTextbox :text="templatedText" height="200px" />
+      <a href="https://github.com/maksim-paskal/developer-proxy"
+        target="_blank">https://github.com/maksim-paskal/developer-proxy</a>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  layout: "details",
+  mounted() {
+    if (this.environment?.Hosts) {
+      this.selectedHostOptions = this.environment.Hosts
+      this.selectedHost = this.environment.Hosts[0]
+    }
+  },
+  watch: {
+    selectedOS() {
+      this.template();
+    },
+    selectedHost() {
+      this.template();
+    },
+    selectedTemplate() {
+      this.template();
+    },
+  },
+  data() {
+    return {
+      data: {},
+      selectedHost: "",
+      selectedHostOptions: [],
+      selectedOS: "Linux",
+      selectedOSOptions: ['Linux', 'MacOS'],
+      templatedText: "",
+      selectedTemplate: "",
+      selectedTemplateOptions: [],
+      selectedTemplateOptionsData: []
+    }
+  },
+  methods: {
+    template() {
+      if (!this.selectedHost) return
+      if (!this.selectedOS) return
+      if (!this.selectedTemplate) return
+
+      const data = this.selectedTemplateOptionsData.find((template) => template.Title === this.selectedTemplate)
+
+      this.templatedText = ""
+
+      // https://github.com/maksim-paskal/developer-proxy
+      const developerProxyCmd = this.selectedOS == 'MacOS' ? 'developer-proxy' : "docker run --pull=always --rm -it --net=host paskalmaksim/developer-proxy:latest"
+
+      let text = data.Template.trim()
+      text = text.replace(/{{cmd}}/g, developerProxyCmd)
+      text = text.replace(/{{host}}/g, this.selectedHost)
+      text = text.replace(/{{os}}/g, data.selectedOS)
+      text = text.replace(/{{template}}/g, data.selectedTemplate)
+
+      this.templatedText = text
+
+      console.log(this.templatedText)
+    }
+  },
+  async fetch() {
+    const result = await fetch(`/api/${this.$route.params.environmentID}/local-proxy-templates`);
+    if (result.ok) {
+      this.data = await result.json();
+
+      this.templatedText = ""
+      this.selectedTemplate = ""
+      this.selectedTemplateOptions = []
+      this.selectedTemplateOptionsData = []
+
+      this.data.Result.forEach((template) => {
+        this.selectedTemplateOptions.push(template.Title)
+        this.selectedTemplateOptionsData.push(template)
+      })
+
+      if (this.selectedTemplateOptions.length > 0) {
+        this.selectedTemplate = this.selectedTemplateOptions[0]
+      }
+
+      this.template()
+    } else {
+      const text = await result.text();
+      throw Error(text);
+    }
+  },
+  head() {
+    return {
+      title: this.pageTitle('Local proxy', true)
+    }
+  },
+}
+</script>

front/pages/_environmentID/tools.vue

@@ -2,10 +2,18 @@
   <div class="detail-tab">
     <b-card no-body>
       <b-tabs pills card>
-        <b-tab title="Kubectl" active><Kubectl/></b-tab>
-        <b-tab title="Local proxy">Coming soon...</b-tab>
-        <b-tab title="Debug"><Debug/></b-tab>
-        <b-tab title="Git Sync"><GitSync/></b-tab>
+        <b-tab title="Kubectl" active>
+          <Kubectl />
+        </b-tab>
+        <b-tab title="Local proxy">
+          <LocalProxy v-if="environment" />
+        </b-tab>
+        <b-tab title="Debug">
+          <Debug />
+        </b-tab>
+        <b-tab title="Git Sync">
+          <GitSync />
+        </b-tab>
       </b-tabs>
     </b-card>
   </div>

pkg/config/config.go

@@ -465,6 +465,7 @@ type Type struct {
 	WikiPages                  []*WikiPage
 	Cache                      *Cache
 	Sentry                     *Sentry
+	LocalProxy                 *LocalProxy
 }
 
 func (t *Type) DeepCopy() *Type {
@@ -707,3 +708,12 @@ type Sentry struct {
 	Token        string
 	Organization string
 }
+
+type LocalProxyTemplate struct {
+	Title    string
+	Template string
+}
+
+type LocalProxy struct {
+	Templates []*LocalProxyTemplate
+}

pkg/web/handlerEnvironment.go

@@ -762,6 +762,14 @@ func environmentOperation(ctx context.Context, r *http.Request, environmentID st
 		}
 
 		result.Result = issues
+
+	case "local-proxy-templates":
+		if config.Get().LocalProxy == nil {
+			return result, errors.New("no local proxy config")
+		}
+
+		result.Result = config.Get().LocalProxy.Templates
+
 	default:
 		return result, errors.Wrap(errNoComandFound, operation)
 	}