add ability to group monitors & proxies

src/app/Store.ts

@@ -108,12 +108,13 @@ export default class Store {
   public toggleMonitor(monitorId: string) {
     const monitor = this.monitors.get(monitorId);
 
+    const encodedMonitorId = encodeURIComponent(monitorId);
     if (monitor) {
       if (monitor.status === RUNNING) {
-        api.stopMonitor(monitorId);
+        api.stopMonitor(encodedMonitorId);
         monitor.status = STOPPED; // optimistic update
       } else {
-        api.startMonitor(monitorId);
+        api.startMonitor(encodedMonitorId);
         monitor.status = RUNNING;
       }
     }

src/app/components/Content/index.tsx

@@ -108,7 +108,9 @@ class Content extends React.Component<IProps, {}> {
       >
         <div className="content-bar">
           <span>
-            <Link id={store.selectedMonitorId} />
+            <Link id={encodeURIComponent(store.selectedMonitorId)}>
+              {store.selectedMonitorId}
+            </Link>
           </span>
           <span>
             <button

src/app/components/Link/index.tsx

@@ -15,12 +15,13 @@ function href(id: string) {
 
 interface IProps {
   id: string;
+  children?: React.ReactNode;
 }
 
-function Link({ id }: IProps) {
+function Link({ id, children }: IProps) {
   return (
     <a href={href(id)} target="_blank" onClick={e => e.stopPropagation()}>
-      {id}
+      {children ?? id}
     </a>
   );
 }

src/app/components/MonitorList/index.css

@@ -0,0 +1,20 @@
+.monitor {
+  height: 3rem;
+}
+
+.monitor.running * {
+  color: white;
+}
+
+.monitor:hover {
+  cursor: pointer;
+  background: var(--primary-light);
+}
+
+.monitor.selected {
+  background: var(--primary);
+}
+
+.monitor-group {
+  padding-left: 1rem;
+}

src/app/components/MonitorList/index.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react'
+import {observer} from 'mobx-react'
+import * as classNames from 'classnames'
+import {IMonitor, RUNNING} from '../../Store'
+import Link from '../Link'
+import Switch from '../Switch'
+import NavExpansionPanel from '../NavExpansionPanel';
+import "./index.css";
+
+export interface IProps {
+  monitors: Map<string, IMonitor>
+  selected: string
+  onMonitorClick?: (id: string) => void
+  onMonitorToggle?: (id: string) => void
+  idPrefix?: string
+}
+
+function MonitorList({
+                       monitors,
+                       selected,
+                       onMonitorClick,
+                       onMonitorToggle,
+                       idPrefix: idPrefixProp,
+                     }: IProps) {
+  const monitorClickCallback = onMonitorClick ?? (() => undefined)
+  const monitorToggleCallback = onMonitorToggle ?? (() => undefined)
+  const idPrefix = idPrefixProp ?? ''
+  const groups = Array.from(monitors)
+    .filter(([id]) => id.includes('/'))
+    .reduce((prev, [id, monitor]) => {
+      const segments = id.split('/')
+      const firstSegment = segments.shift()!
+
+      if (!(firstSegment in prev)) {
+        prev[firstSegment] = new Map<string, IMonitor>()
+      }
+
+      prev[firstSegment].set(segments.join('/'), monitor)
+
+      return prev
+    }, {} as Record<string, Map<string, IMonitor>>)
+
+  return (
+    <ul>
+      {Array.from(monitors)
+        .filter(([id]) => !id.includes('/'))
+        .map(([id, monitor]) => {
+          return (
+            <li
+              key={idPrefix + id}
+              className={classNames('monitor', {
+                running: monitor.status === RUNNING,
+                selected: (idPrefix + id) === selected
+              })}
+              onClick={() => monitorClickCallback(idPrefix + id)}
+            >
+              <span>
+                <Link id={encodeURIComponent(idPrefix + id)}>{id}</Link>
+              </span>
+              <span>
+                <Switch
+                  onClick={() => monitorToggleCallback(idPrefix + id)}
+                  checked={monitor.status === RUNNING}
+                />
+              </span>
+            </li>
+          )
+        })}
+      {Object.entries(groups).map(([key, group]) => {
+        return (
+          <li key={key}>
+            <NavExpansionPanel title={key} open={selected.startsWith(`${key}/`) || undefined}>
+              <div className={'monitor-group'}>
+                <MonitorList monitors={group}
+                             selected={selected}
+                             onMonitorClick={id => monitorClickCallback(id)}
+                             onMonitorToggle={id => monitorToggleCallback(id)}
+                             idPrefix={`${idPrefix}${key}/`}
+                />
+              </div>
+            </NavExpansionPanel>
+          </li>
+        )
+      })}
+    </ul>
+  )
+}
+
+export default observer(MonitorList);

src/app/components/Nav/index.css

@@ -53,14 +53,13 @@ h2 {
 
 ul {
   padding: 0;
-  margin: 0 0 2rem 0;
+  margin: 0;
   list-style: none;
 }
 
 li {
   display: flex;
   justify-content: space-between;
-  height: 3rem;
   color: var(--primary-light);
   transition: border-color 0.2s;
 }
@@ -69,19 +68,6 @@ li:focus {
   outline: none;
 }
 
-li.running * {
-  color: white;
-}
-
-li.monitor:hover {
-  cursor: pointer;
-  background: var(--primary-light);
-}
-
-li.selected {
-  background: var(--primary);
-}
-
 li > span {
   align-self: center;
   padding: 0 1rem;
@@ -95,3 +81,7 @@ li > span:nth-last-child() {
 p {
   padding: 1rem;
 }
+
+.monitors-nav {
+  margin-bottom: 2rem;
+}

src/app/components/Nav/index.tsx

@@ -2,11 +2,12 @@ import * as classNames from "classnames";
 import { observer } from "mobx-react";
 import KeyboardIcon from "@material-ui/icons/Keyboard";
 import * as React from "react";
-import Store, { RUNNING } from "../../Store";
+import Store from "../../Store";
 import Link from "../Link";
-import Switch from "../Switch";
 import "./index.css";
 import KeyboardShortcutsModal from "../KeyboardShortcutsModal";
+import MonitorList from '../MonitorList';
+import ProxyList from '../ProxyList';
 
 const examples = `~/app$ chalet add 'cmd'
 ~/app$ chalet add 'cmd -p $PORT'
@@ -116,49 +117,20 @@ function Nav({ store }: IProps) {
         )}
 
         {monitors.size > 0 && (
-          <div>
+          <div className={'monitors-nav'}>
             <h2>monitors</h2>
-            <ul>
-              {Array.from(monitors).map(([id, monitor]) => {
-                return (
-                  <li
-                    key={id}
-                    className={classNames("monitor", {
-                      running: monitor.status === RUNNING,
-                      selected: id === selectedMonitorId,
-                    })}
-                    onClick={() => store.selectMonitor(id)}
-                  >
-                    <span>
-                      <Link id={id} />
-                    </span>
-                    <span>
-                      <Switch
-                        onClick={() => store.toggleMonitor(id)}
-                        checked={monitor.status === RUNNING}
-                      />
-                    </span>
-                  </li>
-                );
-              })}
-            </ul>
+            <MonitorList monitors={monitors}
+                         selected={selectedMonitorId}
+                         onMonitorClick={id => store.selectMonitor(id)}
+                         onMonitorToggle={id => store.toggleMonitor(id)}
+                         />
           </div>
         )}
 
         {proxies.size > 0 && (
-          <div>
+          <div className={'proxies-nav'}>
             <h2>proxies</h2>
-            <ul>
-              {Array.from(proxies).map(([id, proxy]) => {
-                return (
-                  <li key={id}>
-                    <span>
-                      <Link id={id} />
-                    </span>
-                  </li>
-                );
-              })}
-            </ul>
+            <ProxyList proxies={proxies} />
           </div>
         )}
       </div>

src/app/components/NavExpansionPanel/index.css

@@ -0,0 +1,33 @@
+.expansion-panel {
+  width: 100%;
+}
+
+.expansion-header {
+  display: flex;
+  height: 3rem;
+  padding: 0 1rem;
+  cursor: pointer;
+}
+
+.expansion-header:hover {
+  background: var(--primary-light);
+}
+
+.expansion-header__title {
+  flex: 1;
+  align-self: center;
+  color: #6c6c6f;
+}
+
+.expansion-header__arrow {
+  align-self: center;
+}
+
+.expansion-header__arrow svg {
+  transition: transform 0.2s ease;
+  transform-origin: center;
+}
+
+.open .expansion-header__arrow svg {
+  transform: rotate(180deg);
+}

src/app/components/NavExpansionPanel/index.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import {observer} from 'mobx-react';
+import {useEffect, useState} from 'react';
+import "./index.css";
+import classNames = require('classnames');
+import {KeyboardArrowUp} from '@material-ui/icons';
+
+export interface IProps {
+  children: React.ReactNode;
+  title: string;
+  open?: boolean;
+}
+
+function NavExpansionPanel({title, open: openProp, children}: IProps) {
+  const [open, setOpen] = useState(openProp ?? false);
+  useEffect(() => setOpen(openProp ?? false), [openProp]);
+  return (
+    <div className={'expansion-panel'}>
+      <div className={classNames('expansion-header', {
+        open,
+      })} onClick={() => setOpen(!open)}>
+        <div className={'expansion-header__title'}>{title}</div>
+        <div className={'expansion-header__arrow'}>
+          <KeyboardArrowUp />
+        </div>
+      </div>
+      {open && children}
+    </div>
+  );
+}
+
+export default observer(NavExpansionPanel);

src/app/components/ProxyList/index.css

@@ -0,0 +1,7 @@
+.proxy {
+  height: 3rem;
+}
+
+.proxy-group {
+  padding-left: 1rem;
+}