mirrors/dozzle
1
0
Fork 0
mirror of https://github.com/amir20/dozzle.git synced 2025-12-24 22:39:18 +01:00
Code Issues Projects Releases Wiki Activity

Fixes some spacing issues

Browse Source
This commit is contained in:
Amir Raminfar
2018-10-31 11:16:23 -07:00
parent 1ed4dde60e
commit ef78f94cb5
5 changed files with 131 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
assets/App.vue
View File

@@ -3,13 +3,13 @@
</template>
<script>
export default {
name: "App"
};
export default {
name: "App"
};
</script>
<style lang="css">
.section.is-fullwidth {
padding: 0 !important;
}
</style>
.section.is-fullwidth {
padding: 0 !important;
}
</style>

13
assets/index.html
View File

@@ -1,16 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dozzle!</title>
<title>Dozzle</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</head>
<body>
<section class="section is-fullwidth">
<div id="app"></div>
</section>
<script src="/main.js"></script>
<section class="section is-fullwidth">
<div id="app"></div>
</section>
<script src="/main.js"></script>
</body>
</html>

22
assets/main.js
View File

@@ -7,21 +7,21 @@ import Container from "./pages/Container.vue";
Vue.use(VueRouter);
const routes = [
{path: "/", component: Index},
{
path: "/container/:id",
component: Container,
name: "container",
props: true
}
{ path: "/", component: Index },
{
path: "/container/:id",
component: Container,
name: "container",
props: true
}
];
const router = new VueRouter({
mode: "history",
routes
mode: "history",
routes
});
new Vue({
router,
render: h => h(App)
router,
render: h => h(App)
}).$mount("#app");

118
assets/pages/Container.vue
View File

@@ -3,68 +3,68 @@
</template>
<script>
import { formatRelative } from 'date-fns'
let ws;
import { formatRelative } from "date-fns";
let ws;
const parseMessage = (data) => {
const date = new Date(data.substring(0, 30));
const dateRelative = formatRelative(date, new Date());
const message = data.substring(30);
return {
date,
dateRelative,
message
}
};
export default {
props: ["id"],
name: "Container",
mounted() {
ws = new WebSocket(`ws://${window.location.host}/api/logs?id=${this.id}`);
ws.onopen = e => console.log("Connection opened.");
ws.onclose = e => console.log("Connection closed.");
ws.onerror = e => console.error("Connection error: " + e.data);
ws.onmessage = e => {
const data = parseMessage(e.data);
const parent = this.$refs.events;
const item = document.createElement("li");
item.className = "event";
const date = document.createElement("span");
date.className = "date";
date.innerHTML = data.dateRelative;
item.appendChild(date);
const message = document.createElement("span");
message.className = "text";
message.innerHTML = data.message;
item.appendChild(message);
parent.appendChild(item);
this.$nextTick(() => item.scrollIntoView());
};
}
const parseMessage = data => {
const date = new Date(data.substring(0, 30));
const dateRelative = formatRelative(date, new Date());
const message = data.substring(30);
return {
date,
dateRelative,
message
};
};
export default {
props: ["id"],
name: "Container",
mounted() {
ws = new WebSocket(`ws://${window.location.host}/api/logs?id=${this.id}`);
ws.onopen = e => console.log("Connection opened.");
ws.onclose = e => console.log("Connection closed.");
ws.onerror = e => console.error("Connection error: " + e.data);
ws.onmessage = e => {
const data = parseMessage(e.data);
const parent = this.$refs.events;
const item = document.createElement("li");
item.className = "event";
const date = document.createElement("span");
date.className = "date";
date.innerHTML = data.dateRelative;
item.appendChild(date);
const message = document.createElement("span");
message.className = "text";
message.innerHTML = data.message;
item.appendChild(message);
parent.appendChild(item);
this.$nextTick(() => item.scrollIntoView());
};
}
};
</script>
<style>
.events {
color: #ddd;
background-color: #111;
padding: 10px;
}
.events {
color: #ddd;
background-color: #111;
padding: 10px;
}
.event {
font-family: monaco, monospace;
font-size: 12px;
line-height: 16px;
padding: 0 15px 0 30px;
word-wrap: break-word;
}
.event {
font-family: monaco, monospace;
font-size: 12px;
line-height: 16px;
padding: 0 15px 0 30px;
word-wrap: break-word;
}
.date {
background-color: #262626;
color: #258CCD;
}
</style>
.date {
background-color: #262626;
color: #258ccd;
}
</style>

93
assets/pages/Index.vue
View File

@@ -1,56 +1,55 @@
<template lang="html">
<div class="container">
<div class="content">
<section class="section">
<ul class="is-marginless is-paddless">
<li v-for="item in containers" class=" unstyled box">
<router-link :to="{name: 'container', params: {id: item.Id}}" class="columns">
<div class="column">
<h2 class="is-2">{{ item.Names[0] }}</h2>
<span class="subtitle is-6 code">{{ item.Command}}</span>
</div>
<div class="column is-4">
<span class="code">{{ item.Image }}</span>
</div>
<div class="column is-narrow">
<span class="subtitle is-7">{{ item.Status}}</span>
</div>
</router-link>
</li>
</ul>
</section>
</div>
<div class="container">
<div class="content">
<section class="section">
<ul class="is-marginless is-paddless">
<li v-for="item in containers" class=" unstyled box">
<router-link :to="{name: 'container', params: {id: item.Id}}" class="columns">
<div class="column is-7">
<h2 class="is-2 hide-overflow">{{ item.Names[0] }}</h2>
<span class="subtitle is-6 code hide-overflow">{{ item.Command}}</span>
</div>
<div class="column is-4">
<span class="code hide-overflow">{{ item.Image }}</span>
</div>
<div class="column is-narrow">
<span class="subtitle is-7">{{ item.Status}}</span>
</div>
</router-link>
</li>
</ul>
</section>
</div>
</div>
</template>
<script>
export default {
name: "Index",
data() {
return {
containers: []
};
},
async created() {
this.containers = await (await fetch(`/api/containers.json`)).json();
}
export default {
name: "Index",
data() {
return {
containers: []
};
},
async created() {
this.containers = await (await fetch(`/api/containers.json`)).json();
}
};
</script>
<style lang="css">
.code {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
background-color: #f5f5f5;
color: #ff3860;
font-size: .875em;
font-weight: 400;
padding: .25em .5em .25em;
display: block;
border-radius: 2px;
}
</style>
.hide-overflow {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.code {
background-color: #f5f5f5;
color: #ff3860;
font-size: 0.875em;
font-weight: 400;
padding: 0.25em 0.5em 0.25em;
display: block;
border-radius: 2px;
}
</style>