Add a link for http ports

package.json

@@ -91,9 +91,9 @@
     "electron-ga": "^1.0.6",
     "electron-store": "^3.2.0",
     "electron-updater": "^4.0.6",
-    "fix-path": "^2.1.0",
     "killable": "^1.0.1",
     "lodash": "^4.17.15",
+    "shell-path": "^2.1.0",
     "vue": "^2.6.10",
     "vue-click-outside": "^1.0.7",
     "vue-electron": "^1.0.6",

src/main/index.js

@@ -37,6 +37,7 @@ function createWindow() {
     titleBarStyle: 'hiddenInset',
     resizable: process.env.NODE_ENV === 'development',
     webPreferences: {
+      webSecurity: false,
       nodeIntegration: true
     }
   })

src/renderer/App.vue

@@ -59,4 +59,20 @@ td, th {
 b {
   font-weight: 600;
 }
+
+.link {
+  text-decoration: none;
+  color: $color-primary;
+  position: relative;
+
+  &:after {
+    content: '';
+    position: absolute;
+    bottom: -2px;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background-color: rgba($color-primary, 0.5);
+  }
+}
 </style>

src/renderer/components/Clusters/ServiceItem.vue

@@ -10,8 +10,16 @@
         <span>From <span class="service-item__namespace">{{ service.namespace }}</span> namespace exposed to</span>
         <span class="service-item__ports">
           <span v-for="(forward, index) in forwards" :key="forward.id" class="service-item__port">
-            <b>{{ forward.localPort }}</b><span v-if="index !== forwards.length - 1"
-                                                class="service-item__port-divider" />
+            <a
+              v-if="portHttp[forward.localPort]"
+              href="#"
+              class="service-item__port-number link"
+              @click="(e) => openHttpPort(e, forward.localPort)"
+            >{{ forward.localPort }}</a>
+            <span v-else class="service-item__port-number">{{ forward.localPort }}</span><span
+              v-if="index !== forwards.length - 1"
+              class="service-item__port-divider"
+            />
           </span>
         </span>
         <span>port{{ forwards.length > 1 ? 's' : '' }}</span>
@@ -52,6 +60,8 @@
 </template>
 
 <script>
+import { remote as electron } from 'electron'
+
 import { CONNECTED } from '../../lib/constants/connection-states'
 import { showMessageBox, showConfirmBox } from '../../lib/helpers/ui'
 import { getServiceLabel } from '../../lib/helpers/service'
@@ -84,6 +94,13 @@ export default {
     portStates() {
       return this.forwards.map(forward => this.$store.state.Connections[forward.localPort] || {})
     },
+    portHttp() {
+      const result = {}
+      for (const state of this.portStates) {
+        result[state.port] = state.serviceId === this.service.id && state.flags.http
+      }
+      return result
+    },
     serviceState() {
       const isFree = this.portStates.every(state => !state.serviceId)
       if (isFree) return 'ready'
@@ -157,6 +174,10 @@ export default {
     },
     servicePath(postfix = '') {
       return `/clusters/${this.service.clusterId}/services/${this.service.id}${postfix}`
+    },
+    openHttpPort(e, port) {
+      e.preventDefault()
+      electron.shell.openExternal(`http://localhost:${port}`)
     }
   }
 }
@@ -204,9 +225,14 @@ export default {
 
 .service-item__description {
   color: $color-text-tertiary;
+}
 
-  b {
-    color: $color-text
+.service-item__port-number {
+  color: $color-text;
+  font-weight: 500;
+
+  &.link {
+    color: $color-primary;
   }
 }
 

src/renderer/components/shared/form/BaseCheckbox.vue

@@ -1,12 +1,13 @@
 <template>
   <div class="base-checkbox">
     <input
-      :id="name"
+      :id="id"
+      class="base-checkbox__input"
       type="checkbox"
       :checked="value"
       @change="$emit('input', $event.target.checked)"
     >
-    <label :for="name">
+    <label class="base-checkbox__label" :for="id">
       <slot />
     </label>
   </div>
@@ -17,59 +18,40 @@ export default {
   name: 'BaseCheckbox',
   props: {
     name: { type: String, default: () => Math.random().toString() },
-    value: { type: Boolean, required: true }
+    value: { type: Boolean, default: null }
+  },
+  computed: {
+    id() {
+      return `base-checkbox-${this.name}`
+    }
   }
 }
 </script>
 
 <!-- TODO: Think about extracting common code from BaseCheckbox and BaseRadioButtons -->
 
-<style scoped>
+<style lang="scss">
 .base-checkbox {
   display: inline-block;
 }
 
-input {
+.base-checkbox__input {
   width: 0;
   height: 0;
   opacity: 0;
   position: absolute;
 }
 
-label {
-  position: relative;
-  padding-left: 27px;
-  line-height: 20px;
-  display: inline-block;
-  cursor: pointer;
-}
-
-label:before {
-  content: "";
-  position: absolute;
-  width: 18px;
-  height: 18px;
-  border: 1px solid rgba(25, 45, 70, 0.25);
-  border-radius: 3px;
-  top: 0;
-  left: 0;
-  background-color: #fff;
-}
-
-label:hover:before {
-  border-color: #0564d7;
-}
-
-input:focus + label:before {
+.base-checkbox__input:focus + .base-checkbox__label:before {
   box-shadow: 0 0 4px 1px #0564d7;
 }
 
-input:checked + label:before {
+.base-checkbox__input:checked + .base-checkbox__label:before {
   background: #0564d7;
   border-color: transparent;
 }
 
-input:checked + label:after {
+.base-checkbox__input:checked + .base-checkbox__label:after {
   content: "";
   position: absolute;
   left: 6px;
@@ -81,4 +63,30 @@ input:checked + label:after {
   transform: rotate(-45deg);
   box-sizing: border-box;
 }
+
+.base-checkbox__label {
+  position: relative;
+  padding-left: 27px;
+  line-height: 20px;
+  display: inline-block;
+  cursor: pointer;
+
+  &:before {
+    content: "";
+    position: absolute;
+    width: 18px;
+    height: 18px;
+    border: 1px solid rgba(25, 45, 70, 0.25);
+    border-radius: 3px;
+    top: 0;
+    left: 0;
+    background-color: #fff;
+  }
+
+  &:hover {
+    &:before {
+      border-color: #0564d7;
+    }
+  }
+}
 </style>

src/renderer/lib/fix-path.js

@@ -0,0 +1,18 @@
+// Async version of https://www.npmjs.com/package/fix-path
+
+import shellPath from 'shell-path'
+
+export default async function() {
+  if (process.platform !== 'darwin') {
+    return
+  }
+
+  const path = await shellPath()
+
+  process.env.PATH = path || [
+    './node_modules/.bin',
+    '/.nodebrew/current/bin',
+    '/usr/local/bin',
+    process.env.PATH
+  ].join(':')
+};

src/renderer/main.js

@@ -5,7 +5,7 @@ import configureSentry from './configure-sentry'
 configureSentry({ Vue })
 
 /* eslint-disable import/first */
-import fixPath from 'fix-path'
+import fixPath from './lib/fix-path'
 fixPath()
 
 import App from './App'