Separate server name and id, use hostname-valid encoding

package.json

@@ -61,6 +61,7 @@
     "once": "^1.3.2",
     "please-upgrade-node": "^3.0.1",
     "pug": "^2.0.0-rc.4",
+    "punycode": "^2.1.0",
     "respawn": "^2.4.1",
     "selfsigned": "^1.10.1",
     "server-ready": "^0.3.1",

src/app/Store.ts

@@ -13,6 +13,7 @@ export interface ILine {
 }
 
 export interface IMonitor {
+  name: string,
   cwd: string
   command: string[]
   status: string

src/app/components/Content/index.tsx

@@ -58,9 +58,11 @@ class Content extends React.Component<IProps, {}> {
         }}
       >
         <div className="content-bar">
-          <span>
-            <Link id={store.selectedMonitorId} />
-          </span>
+          {monitor && (
+            <span>
+              <Link id={store.selectedMonitorId} name={monitor.name} />
+            </span>
+          )}
           <span>
             <button
               title="Clear output"

src/app/components/Link/index.tsx

@@ -14,13 +14,15 @@ function href(id: string) {
 }
 
 interface IProps {
-  id: string
+  className?: string,
+  id: string,
+  name: string
 }
 
-export default function Link({ id }: IProps) {
+export default function Link({ className, id, name }: IProps) {
   return (
-    <a href={href(id)} target="_blank" onClick={e => e.stopPropagation()}>
-      {id}
+    <a className={className} href={href(id)} target="_blank" onClick={e => e.stopPropagation()}>
+      {name}
     </a>
   )
 }

src/app/components/Nav/index.tsx

@@ -44,7 +44,7 @@ function Nav({ store }: IProps) {
                   onClick={() => store.selectMonitor(id)}
                 >
                   <span>
-                    <Link id={id} />
+                    <Link className="listLink" id={id} name={monitor.name} />
                   </span>
                   <span>
                     <Switch
@@ -63,9 +63,9 @@ function Nav({ store }: IProps) {
             <h2>proxies</h2>
             <ul>
               {Array.from(proxies).map(([id, proxy]) => (
-                <li key={id}>
+                <li key={name}>
                   <span>
-                    <Link id={id} />
+                    <Link className="listLink" id={id} name={id} />
                   </span>
                 </li>
               ))}

src/daemon/group.js

@@ -10,6 +10,7 @@ const afterAll = require('after-all')
 const httpProxy = require('http-proxy')
 const serverReady = require('server-ready')
 const log = require('./log')
+const normalize = require('./normalize')
 const tcpProxy = require('./tcp-proxy')
 const daemonConf = require('../conf')
 const getCmd = require('../get-cmd')
@@ -61,15 +62,18 @@ class Group extends EventEmitter {
     return this._list[id]
   }
 
-  add(id, conf) {
+  add(name, conf) {
+    conf.name = name
+    const id = normalize(name)
+
     if (conf.target) {
-      log(`Add target ${id}`)
+      log(`Add target ${name}`)
       this._list[id] = conf
       this._change()
       return
     }
 
-    log(`Add server ${id}`)
+    log(`Add server ${name}`)
 
     const HTTP_PROXY = `http://127.0.0.1:${daemonConf.port}/proxy.pac`
 
@@ -97,7 +101,8 @@ class Group extends EventEmitter {
 
     const mon = respawn(command, {
       ...conf,
-      maxRestarts: 0
+      maxRestarts: 0,
+      name
     })
 
     this._list[id] = mon
@@ -145,7 +150,8 @@ class Group extends EventEmitter {
     this._change()
   }
 
-  remove(id, cb) {
+  remove(name, cb) {
+    const id = normalize(name)
     const item = this.find(id)
     if (item) {
       delete this._list[id]
@@ -204,10 +210,8 @@ class Group extends EventEmitter {
   exists(req, res, next) {
     // Resolve using either hostname `app.tld`
     // or id param `http://localhost:2000/app`
-    const tld = new RegExp(`.${daemonConf.tld}$`)
-    const id = req.params.id
-      ? this.resolve(req.params.id)
-      : this.resolve(req.hostname.replace(tld, ''))
+    const tld = new RegExp(`\\.${daemonConf.tld}$`)
+    const id = this.resolve(req.params.id || req.hostname.replace(tld, ''))
 
     // Find item
     const item = this.find(id)

src/daemon/normalize.js

@@ -0,0 +1,12 @@
+const punycode = require('punycode') // eslint-disable-line node/no-deprecated-api
+
+module.exports = function normalize(name) {
+  return name
+    ? punycode
+        .encode(name)
+        .toLowerCase()
+        .replace(/[^a-z0-9-.]/g, '-')
+        .replace(/-+/g, '-')
+        .replace(/-$/, '')
+    : name
+}