Skip to content

Commit 2325881

Browse files
amir20amir20
authored
Ui redesign (#3)
* Adds a different layout * Adds new layout and uses sass to get bulma * Adds new layout and uses sass to get bulma * Adds title * Adds ellipses * Adds tooltip * Updates packages * Fixes / page
1 parent 067fea2 commit 2325881

File tree

9 files changed

+300
-250
lines changed

9 files changed

+300
-250
lines changed

‎.editorconfig

+3
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,6 @@ indent_size = 2
2020

2121
[Makefile]
2222
indent_style = tab
23+
24+
[package.json]
25+
indent_size = 1

‎assets/App.vue

+36-7
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,48 @@
11
<template lang="html">
2-
<router-view></router-view>
2+
<div class="columns is-marginless">
3+
<aside class="column menu is-2 section">
4+
<h1 class="title has-text-warning">Dozzle</h1>
5+
<p class="menu-label">Containers</p>
6+
<ul class="menu-list">
7+
<li v-for="item in containers">
8+
<router-link
9+
:to="{ name: 'container', params: { id: item.Id } }"
10+
active-class="is-active"
11+
class="tooltip is-tooltip-right is-tooltip-info"
12+
:data-tooltip="item.Names[0]"
13+
>
14+
<div class="hide-overflow">{{ item.Names[0] }}</div>
15+
</router-link>
16+
</li>
17+
</ul>
18+
</aside>
19+
<div class="column is-offset-2"><router-view></router-view></div>
20+
</div>
321
</template>
422

523
<script>
624
export default {
7-
name: "App"
25+
name: "App",
26+
data() {
27+
return {
28+
containers: []
29+
};
30+
},
31+
async created() {
32+
this.containers = await (await fetch(`/api/containers.json`)).json();
33+
}
834
};
935
</script>
1036

11-
<style>
12-
.section.is-fullwidth {
13-
padding: 0 !important;
37+
<style scoped>
38+
aside {
39+
position: fixed;
40+
padding-right: 0;
1441
}
1542
16-
body {
17-
font-family: "Roboto", sans-serif;
43+
.hide-overflow {
44+
text-overflow: ellipsis;
45+
white-space: nowrap;
46+
overflow: hidden;
1847
}
1948
</style>

‎assets/index.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1" />
66
<title>Dozzle</title>
7-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" />
8-
<link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono" rel="stylesheet">
7+
<link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono|Gafata" rel="stylesheet">
8+
<link href="./styles.scss" rel="stylesheet">
99
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
1010
</head>
1111

12-
<body>
13-
<section class="section is-fullwidth"><div id="app"></div></section>
12+
<body class="is-dark">
13+
<div id="app"></div>
1414
<script src="/main.js"></script>
1515
</body>
1616
</html>

‎assets/main.js

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
import Vue from "vue";
22
import VueRouter from "vue-router";
33
import App from "./App.vue";
4-
import Index from "./pages/Index.vue";
54
import Container from "./pages/Container.vue";
5+
import Index from "./pages/Index.vue";
66

77
Vue.use(VueRouter);
88

99
const routes = [
10-
{ path: "/", component: Index },
10+
{
11+
path: "/",
12+
component: Index,
13+
name: "default"
14+
},
1115
{
1216
path: "/container/:id",
1317
component: Container,

‎assets/pages/Container.vue

+30-21
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template lang="html">
2-
<div class="parent">
2+
<div class="is-fullheight">
33
<ul ref="events" class="events">
44
<li v-for="item in messages" class="event" :key="item.key">
55
<span class="date">{{ item.dateRelative }}</span> <span class="text">{{ item.message }}</span>
@@ -39,38 +39,48 @@ export default {
3939
messages: []
4040
};
4141
},
42-
beforeCreate() {
43-
document.documentElement.className = "dark";
44-
},
4542
created() {
46-
ws = new WebSocket(`ws://${window.location.host}/api/logs?id=${this.id}`);
47-
ws.onopen = e => console.log("Connection opened.");
48-
ws.onclose = e => console.log("Connection closed.");
49-
ws.onerror = e => console.error("Connection error: " + e.data);
50-
ws.onmessage = e => {
51-
const message = parseMessage(e.data);
52-
this.messages.push(message);
53-
};
43+
this.loadLogs(this.id);
5444
},
5545
beforeDestroy() {
5646
ws.close();
5747
ws = null;
58-
document.documentElement.className = "";
48+
},
49+
watch: {
50+
id(newValue, oldValue) {
51+
if (oldValue !== newValue) {
52+
this.loadLogs(newValue);
53+
}
54+
}
55+
},
56+
methods: {
57+
loadLogs(id) {
58+
if (ws) {
59+
ws.close();
60+
ws = null;
61+
this.messages = [];
62+
}
63+
ws = new WebSocket(`ws://${window.location.host}/api/logs?id=${this.id}`);
64+
ws.onopen = e => console.log("Connection opened.");
65+
ws.onclose = e => console.log("Connection closed.");
66+
ws.onerror = e => console.error("Connection error: " + e.data);
67+
ws.onmessage = e => {
68+
const message = parseMessage(e.data);
69+
this.messages.push(message);
70+
};
71+
}
5972
}
6073
};
6174
</script>
62-
<style>
75+
<style scoped>
6376
.events {
64-
color: #ddd;
65-
background-color: #111;
6677
padding: 10px;
6778
font-family: "Roboto Mono", monaco, monospace;
6879
}
6980
7081
.event {
71-
font-size: 14px;
82+
font-size: 13px;
7283
line-height: 16px;
73-
padding: 0 15px 0 30px;
7484
word-wrap: break-word;
7585
}
7686
@@ -79,8 +89,7 @@ export default {
7989
color: #258ccd;
8090
}
8191
82-
html.dark {
83-
background-color: #111;
84-
color: #ddd;
92+
.is-fullheight {
93+
min-height: 100vh;
8594
}
8695
</style>

‎assets/pages/Index.vue

+11-45
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,22 @@
11
<template lang="html">
2-
<div class="container">
3-
<div class="content">
4-
<section class="section">
5-
<ul class="is-marginless is-paddless">
6-
<li v-for="item in containers" class="unstyled box">
7-
<router-link :to="{ name: 'container', params: { id: item.Id } }" class="columns">
8-
<div class="column is-6">
9-
<h2 class="is-2 hide-overflow">{{ item.Names[0] }}</h2>
10-
<span class="subtitle is-6 code hide-overflow"> {{ item.Command }} </span>
11-
</div>
12-
<div class="column is-4">
13-
<span class="code hide-overflow">{{ item.Image }}</span>
14-
</div>
15-
<div class="column is-narrow">
16-
<span class="subtitle is-7">{{ item.Status }}</span>
17-
</div>
18-
</router-link>
19-
</li>
20-
</ul>
21-
</section>
2+
<div class="hero is-fullheight is-dark">
3+
<div class="hero-body">
4+
<div class="container has-text-centered">
5+
<h1 class="title">Please choose a container from the list to view the logs</h1>
6+
</div>
227
</div>
238
</div>
249
</template>
2510

2611
<script>
2712
export default {
28-
name: "Index",
29-
data() {
30-
return {
31-
containers: []
32-
};
33-
},
34-
async created() {
35-
this.containers = await (await fetch(`/api/containers.json`)).json();
36-
}
13+
props: [],
14+
name: "Default"
3715
};
3816
</script>
39-
40-
<style lang="css">
41-
.hide-overflow {
42-
text-overflow: ellipsis;
43-
white-space: nowrap;
44-
overflow: hidden;
45-
}
46-
47-
.code {
48-
background-color: #f5f5f5;
49-
color: #ff3860;
50-
font-size: 0.875em;
51-
font-weight: 400;
52-
padding: 0.25em 0.5em 0.25em;
53-
display: block;
54-
border-radius: 2px;
17+
<style scoped>
18+
.hero.is-dark {
19+
color: #ddd;
20+
background-color: #111;
5521
}
5622
</style>

‎assets/styles.scss

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
@charset "utf-8";
2+
3+
$menu-item-active-background-color: hsl(171, 100%, 41%);
4+
$menu-item-color: hsl(0, 6%, 87%);
5+
6+
@import "../node_modules/bulma/bulma.sass";
7+
@import "../node_modules/bulma-tooltip/src/sass";
8+
9+
.is-dark {
10+
color: #ddd;
11+
background-color: #111;
12+
}
13+
14+
body {
15+
font-family: "Roboto", sans-serif;
16+
}
17+
18+
h1.title {
19+
font-family: "Gafata", sans-serif;
20+
}

0 commit comments

Comments
 (0)