Skip to content

Commit ed0565f

Browse files
msqueemsquee
authored
Add Control Plane to Docker and fix Docker / Modd startup (#13)
* Add path cmd flag to Docker and Modd configs * Add frontend control plane to Docker * Update control plane styles * Remove whitespace from grafana.ini * Add Grafana and Prometheus icons to client * Update README and screenshots * Fix Grafana dashboard labels
1 parent 7068f19 commit ed0565f

File tree

13 files changed

+137
-52
lines changed

13 files changed

+137
-52
lines changed

‎.docker/grafana/dashboards/go-websockify.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@
164164
"fieldConfig": {
165165
"defaults": {
166166
"custom": {},
167-
"displayName": "Test",
167+
"displayName": "Active WebSocket Connections",
168168
"unit": "none"
169169
},
170170
"overrides": []
@@ -273,7 +273,7 @@
273273
"fieldConfig": {
274274
"defaults": {
275275
"custom": {},
276-
"displayName": "Test",
276+
"displayName": "Backend TCP Connections",
277277
"unit": "none"
278278
},
279279
"overrides": []

‎.docker/grafana/grafana.ini‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ instance_name = grafana
22
http_port = 3000
33

44
[dashboards]
5-
versions_to_keep = 5
6-
default_home_dashboard_path = /etc/grafana/dashboards/go-websockify.json
7-
5+
versions_to_keep = 1
6+
default_home_dashboard_path = /etc/grafana/dashboards/go-websockify.json
7+
88
[plugin.grafana-image-renderer]
9-
rendering_ignore_https_errors = true
9+
rendering_ignore_https_errors = true
1010

1111
[users]
12-
allow_sign_up = false
13-
default_theme = "dark"
12+
allow_sign_up = false
13+
default_theme = "dark"

‎.docker/prometheus/prometheus.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
global:
2-
scrape_interval: 1s
2+
scrape_interval: 5s
33

44
scrape_configs:
55
- job_name: "prometheus"
66
static_configs:
77
- targets: ["localhost:9090"]
88

99
- job_name: "go-websockify"
10-
scrape_interval: 1s
10+
scrape_interval: 5s
1111
static_configs:
1212
- targets: ["go-websockify:8080"]

‎README.md‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,9 @@ Flags:
6868
[Modd](https://github.com/cortesi/modd) is used for a seamless development experience and once installed simply run the command `modd` in the root directory of this project to start the development environment.
6969

7070
### Control plane
71-
`go-websockify` has a simple JavaScript based frontend control plane for development and is available at http://127.0.0.1:1234.
71+
> You don't need to do this if you use the provided Docker environment.
72+
73+
`go-websockify` has a simple JavaScript based frontend control plane for development and is available at http://127.0.0.1:1234
7274

7375
To start the control plane run:
7476
```shell
@@ -77,23 +79,24 @@ $ yarn install
7779
$ yarn dev
7880
```
7981

80-
> For the frontend to automatically connect to Go WebSockify you have to pass `--echo` as a command line flag to `go-websockify`. **This is done for you if you're using Modd.**
82+
> For the frontend to automatically connect to Go WebSockify you have to pass `--echo` as a command line flag to `go-websockify`. **This is done for you if you're using Docker or Modd.**
8183
8284
### Docker
8385
A batteries included Docker environment is included with this repository to show off Go WebSockify in a psuedo production environment.
8486

8587
**Docker environment features:**
8688
- Prometheus
8789
- Grafana with preconfigured dashboard
88-
- Go WebSockify
90+
- Go WebSockify and Control Plane
8991
- TCP Echo Server
9092

9193
|IP|Description|
9294
--|--
93-
|http://127.0.0.1:9090|Prometheus|
94-
|http://127.0.0.1:3000|Grafana|
95+
|http://127.0.0.1:1234|Control Plane|
9596
|http://127.0.0.1:8080|Go WebSockify|
9697
|http://127.0.0.1:1984|TCP Echo Server|
98+
|http://127.0.0.1:3000|Grafana|
99+
|http://127.0.0.1:9090|Prometheus|
97100

98101
To start the Docker environment run:
99102
```shell

‎client/Dockerfile‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
FROM node:latest
2+
WORKDIR /usr/client/
3+
COPY yarn.lock .
4+
COPY package.json .
5+
RUN yarn install
6+
COPY . .

‎client/app.css‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,45 @@
11
@import '~node_modules/xterm/css/xterm.css';
22

3-
@tailwind base;
3+
:root {
4+
--color-grafana: #F46800;
5+
--color-prometheus: #E6522C;
6+
}
47

8+
@tailwind base;
59
@tailwind components;
610

711
@font-face {
812
font-family: Iosevka;
913
src: url('fonts/iosevka-sparkle-regular.woff') format('woff'),
10-
url('fonts/iosevka-sparkle-regular.ttf') format('opentype');
14+
url('fonts/iosevka-sparkle-regular.ttf') format('opentype');
1115
}
1216

1317
.btn {
14-
@apply py-3 px-4 rounded-md leading-tight font-mono;
18+
@apply py-3 px-4 rounded-md leading-tight;
1519
}
1620

1721
.btn:focus {
1822
@apply outline-none shadow-outline;
1923
}
2024

25+
.btn-gray {
26+
@apply bg-gray-200;
27+
}
28+
2129
.btn-indigo {
2230
@apply text-white bg-indigo-500;
2331
}
2432

33+
.btn-indigo:active {
34+
@apply bg-indigo-700;
35+
}
36+
2537
.btn-green {
2638
@apply text-white bg-green-600;
2739
}
2840

29-
@tailwind utilities;
41+
.btn-green:active {
42+
@apply bg-green-700;
43+
}
44+
45+
@tailwind utilities;

‎client/app.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@ new fontfaceobserver('Iosevka').load().then(() => {
1111
const terminal = new Terminal({
1212
fontSize: 16,
1313
fontFamily: 'Iosevka',
14-
letterSpacing: 0,
14+
letterSpacing: 1,
1515
})
1616
const fitAddon = new FitAddon()
1717

18-
const WS_URL = 'ws://localhost:8080/websockify'
18+
const WS_URL = 'ws://127.0.0.1:8080/websockify'
1919
let closing = false
2020

2121
let ws = new WebSocket(WS_URL, ['binary'])

‎client/index.html‎

Lines changed: 59 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,68 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<title>Control Plane - Go WebSockify</title>
5-
<link rel="stylesheet" type="text/css" href="app.css">
6-
</head>
7-
<body class="font-mono">
8-
<div class="container mx-auto p-6">
9-
10-
<h1 class="text-2xl">Go WebSockify</h1>
11-
<h2 class="text-xl text-gray-500">Control Plane</h2>
12-
13-
<div class="divide-y">
14-
<div class="text-lg mb-2">
15-
<div class="block md:inline-flex">
16-
<svg class="h-6 fill-current text-red-700 inline-flex" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M8 7l4-4m0 0l4 4m-4-4v18"></path></svg>
17-
<span id="tx">Transmit 0 B</span>
18-
</div>
19-
20-
<div class="block md:inline-flex">
21-
<svg class="h-6 fill-current text-green-700 inline-flex" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M16 17l-4 4m0 0l-4-4m4 4V3"></path></svg>
22-
<span id="rx">Receive 0 B</span>
23-
</div>
3+
4+
<head>
5+
<title>Control Plane - Go WebSockify</title>
6+
<link rel="stylesheet" type="text/css" href="app.css">
7+
</head>
8+
9+
<body class="font-mono">
10+
<div class="container mx-auto p-6">
11+
12+
<h1 class="text-2xl">Go WebSockify</h1>
13+
<h2 class="text-xl text-gray-500">Control Plane</h2>
14+
15+
<div>
16+
<div class="text-lg mb-2">
17+
<div class="block md:inline-flex">
18+
<svg class="h-6 fill-current text-red-700 inline-flex" fill="none" stroke-linecap="round"
19+
stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
20+
<path d="M8 7l4-4m0 0l4 4m-4-4v18"></path>
21+
</svg>
22+
<span id="tx">Transmit 0 B</span>
23+
</div>
24+
25+
<div class="block md:inline-flex">
26+
<svg class="h-6 fill-current text-green-700 inline-flex" fill="none" stroke-linecap="round"
27+
stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
28+
<path d="M16 17l-4 4m0 0l-4-4m4 4V3"></path>
29+
</svg>
30+
<span id="rx">Receive 0 B</span>
2431
</div>
32+
</div>
2533

26-
<div class="py-4">
27-
<button type="button" class="btn bg-gray-200" id="reconnect">Reconnect</button>
34+
<div class="w-full flex justify-between flex-wrap">
35+
<div>
36+
<button type="button" class="btn btn-gray" id="reconnect">Reconnect</button>
2837
<button type="button" class="btn btn-indigo" id="ping">Ping</button>
2938
<button type="button" class="btn btn-indigo" id="benchmark">Send Bytes</button>
30-
<div id="terminal" class="py-4 w-auto"></div>
39+
</div>
40+
41+
<div class="inline-flex items-center">
42+
<a href="http://127.0.0.1:3000" class="mr-2" target="_blank" aria-label="grafana dashboard">
43+
<svg class="h-10 w-10 fill-current text-grafana" role="img" xmlns="http://www.w3.org/2000/svg"
44+
viewBox="0 0 24 24">
45+
<title>Grafana icon</title>
46+
<path
47+
d="M22.999 10.626c-.043-.405-.106-.873-.234-1.384s-.341-1.065-.618-1.661c-.298-.575-.66-1.193-1.15-1.768-.192-.234-.405-.447-.618-.681.341-1.342-.405-2.513-.405-2.513-1.299-.085-2.108.405-2.406.618-.043-.021-.106-.043-.149-.064-.213-.085-.447-.17-.681-.256-.234-.064-.469-.149-.703-.192-.234-.064-.49-.106-.745-.149-.043 0-.085-.021-.128-.021C14.608.766 12.99 0 12.99 0c-1.853 1.193-2.215 2.79-2.215 2.79s0 .043-.021.085c-.106.021-.192.064-.298.085-.128.043-.277.085-.405.149s-.277.106-.405.17c-.277.128-.532.256-.809.405a8.52 8.52 0 0 0-.745.469c-.043-.021-.064-.043-.064-.043-2.492-.958-4.706.192-4.706.192-.192 2.662 1.001 4.323 1.235 4.621-.064.17-.106.319-.17.49a10.658 10.658 0 0 0-.405 1.853c-.021.085-.021.192-.043.277-2.3 1.129-2.981 3.471-2.981 3.471 1.917 2.215 4.174 2.343 4.174 2.343a9.61 9.61 0 0 0 .98 1.448c.149.192.319.362.49.554-.703 2.002.106 3.684.106 3.684 2.151.085 3.556-.937 3.854-1.171l.639.192c.66.17 1.342.277 2.002.298h.873c1.001 1.448 2.79 1.64 2.79 1.64 1.256-1.342 1.342-2.641 1.342-2.939v-.021-.043-.064c.256-.192.511-.383.767-.596.511-.447.937-.98 1.32-1.533.043-.043.064-.106.106-.149 1.427.085 2.428-.894 2.428-.894-.234-1.491-1.086-2.215-1.256-2.343l-.021-.021-.021-.021-.021-.021c0-.085.021-.17.021-.277.021-.17.021-.319.021-.49v-.213-.277-.128c0-.043 0-.085-.021-.128l-.043-.256c-.021-.17-.064-.319-.085-.49a6.327 6.327 0 0 0-.724-1.789 6.634 6.634 0 0 0-1.214-1.448 5.89 5.89 0 0 0-1.533-.98 5.368 5.368 0 0 0-1.682-.469c-.277-.043-.575-.043-.852-.043h-.128-.298c-.149.021-.298.043-.426.064-.575.106-1.107.319-1.576.596s-.873.639-1.214 1.043a4.284 4.284 0 0 0-.767 1.299c-.17.447-.277.937-.298 1.384v.511c0 .064 0 .106.021.17a3.642 3.642 0 0 0 .703 1.81c.256.341.532.596.852.809.319.213.639.362.98.469s.66.149.958.128h.446c.043 0 .085-.021.106-.021.043 0 .064-.021.106-.021.064-.021.149-.043.213-.064.128-.043.256-.106.383-.149.128-.064.234-.128.319-.192.021-.021.064-.043.085-.064a.24.24 0 0 0 .043-.341.298.298 0 0 0-.319-.064c-.021.021-.043.021-.085.043a1.43 1.43 0 0 1-.277.106c-.106.021-.213.064-.319.085-.064 0-.106.021-.17.021h-.361s-.021 0 0 0h-.086c-.022 0-.064 0-.085-.021-.234-.043-.49-.106-.724-.213s-.469-.256-.66-.447c-.213-.192-.383-.405-.532-.66s-.234-.532-.277-.809c-.021-.149-.043-.298-.021-.447v-.128c0 .021 0 0 0 0v-.043-.064c0-.085.021-.149.043-.234a3.114 3.114 0 0 1 .916-1.725c.128-.128.256-.234.405-.319.149-.106.298-.192.447-.256s.319-.128.49-.17c.17-.043.341-.085.511-.085.085 0 .17-.021.256-.021H15.228c.021 0 0 0 0 0h.085a4.046 4.046 0 0 1 1.619.49c.681.383 1.256.958 1.597 1.661.17.341.298.724.362 1.129.021.106.021.192.043.298v.554c0 .106-.021.213-.021.319-.021.106-.021.213-.043.319l-.064.319c-.021.106-.128.405-.192.618s-.362.788-.618 1.129a5.164 5.164 0 0 1-2.002 1.64c-.405.17-.809.319-1.235.383a3.221 3.221 0 0 1-.639.064h-.319c.021 0 0 0 0 0h-.021c-.106 0-.234 0-.341-.021-.469-.043-.916-.128-1.363-.256s-.873-.298-1.278-.511a6.956 6.956 0 0 1-2.108-1.746c-.277-.362-.532-.745-.745-1.15s-.362-.831-.49-1.256a5.489 5.489 0 0 1-.213-1.32v-.49-.17c0-.213.021-.447.064-.681.021-.234.064-.447.106-.681s.106-.447.17-.681.277-.873.469-1.278c.383-.809.873-1.533 1.448-2.108.149-.149.298-.277.469-.405.064-.064.213-.192.383-.298s.341-.213.532-.298c.085-.043.17-.085.277-.128.043-.021.085-.043.149-.064.043-.021.085-.043.149-.064.192-.085.383-.149.575-.213.043-.021.106-.021.149-.043s.106-.021.149-.043.192-.043.298-.085c.043-.021.106-.021.149-.043.043 0 .106-.021.149-.021s.106-.021.149-.021l.17-.043c.043 0 .106-.021.149-.021.064 0 .106-.021.17-.021.043 0 .128-.021.17-.021s.064 0 .106-.021h.149c.064 0 .106 0 .17-.021h.085s.021 0 0 0H15.033c.383.021.767.064 1.129.128a7.234 7.234 0 0 1 2.044.681 7.676 7.676 0 0 1 1.661 1.086c.021.021.064.043.085.085.021.021.064.043.085.085.064.043.106.106.17.149s.106.106.17.149c.043.064.106.106.149.17a7.88 7.88 0 0 1 1.406 1.98c.021.021.021.043.043.085.021.021.021.043.043.085s.043.106.085.149c.021.043.043.106.064.149s.043.106.064.149c.085.192.149.383.213.575.106.298.17.554.234.767a.204.204 0 0 0 .192.149c.106 0 .17-.085.17-.192-.021-.256-.021-.532-.043-.852z" />
48+
</svg>
49+
</a>
50+
51+
<a href="http://127.0.0.1:9090" target="_blank" aria-label="prometheus dashboard">
52+
<svg class="h-10 w-10 fill-current text-prometheus" role="img" xmlns="http://www.w3.org/2000/svg"
53+
viewBox="0 0 24 24">
54+
<title>Prometheus icon</title>
55+
<path
56+
d="M12 0C5.373 0 0 5.372 0 12c0 6.627 5.373 12 12 12s12-5.373 12-12c0-6.628-5.373-12-12-12zm0 22.46c-1.885 0-3.414-1.26-3.414-2.814h6.828c0 1.553-1.528 2.813-3.414 2.813zm5.64-3.745H6.36v-2.046h11.28v2.046zm-.04-3.098H6.391c-.037-.043-.075-.086-.111-.13-1.155-1.401-1.427-2.133-1.69-2.879-.005-.025 1.4.287 2.395.511 0 0 .513.119 1.262.255-.72-.843-1.147-1.915-1.147-3.01 0-2.406 1.845-4.508 1.18-6.207.648.053 1.34 1.367 1.387 3.422.689-.951.977-2.69.977-3.755 0-1.103.727-2.385 1.454-2.429-.648 1.069.168 1.984.894 4.256.272.854.237 2.29.447 3.201.07-1.892.395-4.652 1.595-5.605-.529 1.2.079 2.702.494 3.424.671 1.164 1.078 2.047 1.078 3.716a4.642 4.642 0 01-1.11 2.996c.792-.149 1.34-.283 1.34-.283l2.573-.502s-.374 1.538-1.81 3.019z" />
57+
</svg>
58+
</a>
3159
</div>
3260
</div>
61+
62+
<div id="terminal" class="py-4 w-auto"></div>
3363
</div>
34-
<script src="app.js"></script>
35-
</body>
36-
</html>
64+
</div>
65+
<script src="app.js"></script>
66+
</body>
67+
68+
</html>

‎client/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,6 @@
1616
"postcss-preset-env": "^6.7.0"
1717
},
1818
"scripts": {
19-
"dev": "npx parcel index.html"
19+
"dev": "npx parcel index.html --hmr-port 4321"
2020
}
2121
}

‎client/tailwind.config.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,20 @@
1+
const { colors: { ...colors } } = require('tailwindcss/defaultTheme')
2+
13
module.exports = {
24
purge: [],
35
theme: {
46
extend: {},
57
fontFamily: {
68
mono: ["Iosevka"],
79
},
10+
colors: {
11+
grafana: 'var(--color-grafana)',
12+
prometheus: 'var(--color-prometheus)',
13+
...colors,
14+
},
15+
},
16+
variants: {
17+
backgroundColor: ['responsive', 'hover', 'focus', 'active']
818
},
9-
variants: {},
1019
plugins: [],
1120
};

0 commit comments

Comments
 (0)