aboutsummaryrefslogtreecommitdiffhomepage
path: root/src
diff options
context:
space:
mode:
authorBastien Wirtz <bastien.wirtz@gmail.com>2022-03-11 22:47:26 +0100
committerBastien Wirtz <bastien.wirtz@gmail.com>2022-03-11 22:47:26 +0100
commitf3980069351ec91bea1999e5efff5c343a808706 (patch)
treee86760449a59c12d157f5cb5af55523ceff25d86 /src
parentdb2a2af3a4664366257957400b9eaadf795808c2 (diff)
downloadhomer-f3980069351ec91bea1999e5efff5c343a808706.tar.gz
homer-f3980069351ec91bea1999e5efff5c343a808706.tar.zst
homer-f3980069351ec91bea1999e5efff5c343a808706.zip
Add a get started link when no configuration is found
Diffstat (limited to 'src')
-rw-r--r--src/App.vue8
-rw-r--r--src/components/GetStarted.vue35
-rw-r--r--src/components/services/Portainer.vue25
3 files changed, 60 insertions, 8 deletions
diff --git a/src/App.vue b/src/App.vue
index 9a67a33..d2cb3ad 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -56,6 +56,9 @@
56 v-if="config.connectivityCheck" 56 v-if="config.connectivityCheck"
57 @network-status-update="offline = $event" 57 @network-status-update="offline = $event"
58 /> 58 />
59
60 <GetStarted v-if="loaded && !services" />
61
59 <div v-if="!offline"> 62 <div v-if="!offline">
60 <!-- Optional messages --> 63 <!-- Optional messages -->
61 <Message :item="config.message" /> 64 <Message :item="config.message" />
@@ -130,6 +133,7 @@ const jsyaml = require("js-yaml");
130const merge = require("lodash.merge"); 133const merge = require("lodash.merge");
131 134
132import Navbar from "./components/Navbar.vue"; 135import Navbar from "./components/Navbar.vue";
136import GetStarted from "./components/GetStarted.vue";
133import ConnectivityChecker from "./components/ConnectivityChecker.vue"; 137import ConnectivityChecker from "./components/ConnectivityChecker.vue";
134import Service from "./components/Service.vue"; 138import Service from "./components/Service.vue";
135import Message from "./components/Message.vue"; 139import Message from "./components/Message.vue";
@@ -144,6 +148,7 @@ export default {
144 name: "App", 148 name: "App",
145 components: { 149 components: {
146 Navbar, 150 Navbar,
151 GetStarted,
147 ConnectivityChecker, 152 ConnectivityChecker,
148 Service, 153 Service,
149 Message, 154 Message,
@@ -154,6 +159,7 @@ export default {
154 }, 159 },
155 data: function () { 160 data: function () {
156 return { 161 return {
162 loaded: false,
157 config: null, 163 config: null,
158 services: null, 164 services: null,
159 offline: false, 165 offline: false,
@@ -166,6 +172,7 @@ export default {
166 created: async function () { 172 created: async function () {
167 this.buildDashboard(); 173 this.buildDashboard();
168 window.onhashchange = this.buildDashboard; 174 window.onhashchange = this.buildDashboard;
175 this.loaded = true;
169 }, 176 },
170 methods: { 177 methods: {
171 searchHotkey() { 178 searchHotkey() {
@@ -193,6 +200,7 @@ export default {
193 } 200 }
194 this.config = merge(defaults, config); 201 this.config = merge(defaults, config);
195 this.services = this.config.services; 202 this.services = this.config.services;
203
196 document.title = 204 document.title =
197 this.config.documentTitle || 205 this.config.documentTitle ||
198 `${this.config.title} | ${this.config.subtitle}`; 206 `${this.config.title} | ${this.config.subtitle}`;
diff --git a/src/components/GetStarted.vue b/src/components/GetStarted.vue
new file mode 100644
index 0000000..dcabc02
--- /dev/null
+++ b/src/components/GetStarted.vue
@@ -0,0 +1,35 @@
1<template>
2 <article>
3 <div class="m-6 has-text-centered py-6">
4 <p class="is-size-5 mb-0">No configured service found!</p>
5 <p>Check out the documentation to start building your Homer dashboard.</p>
6 <p>
7 <a
8 class="button is-primary mt-5 has-text-weight-bold"
9 href="https://github.com/bastienwirtz/homer/blob/main/README.md#getting-started"
10 target="_blank"
11 >
12 Get started
13 </a>
14 </p>
15 </div>
16 </article>
17</template>
18
19<script>
20export default {
21 name: "GetStarted",
22};
23</script>
24
25<style lang="scss" scoped>
26p {
27 color: #4a4a4a;
28}
29
30body #app a {
31 font-weight: 900;
32 color: #ffffff;
33 font-family: "Lato", sans-serif;
34}
35</style>
diff --git a/src/components/services/Portainer.vue b/src/components/services/Portainer.vue
index 176d92e..c7e9962 100644
--- a/src/components/services/Portainer.vue
+++ b/src/components/services/Portainer.vue
@@ -8,7 +8,11 @@
8 <strong v-if="dead > 0" class="notif dead" title="Dead"> 8 <strong v-if="dead > 0" class="notif dead" title="Dead">
9 {{ dead }} 9 {{ dead }}
10 </strong> 10 </strong>
11 <strong v-if="misc > 0" class="notif misc" title="Other (creating, paused, exited, etc.)"> 11 <strong
12 v-if="misc > 0"
13 class="notif misc"
14 title="Other (creating, paused, exited, etc.)"
15 >
12 {{ misc }} 16 {{ misc }}
13 </strong> 17 </strong>
14 </div> 18 </div>
@@ -55,7 +59,10 @@ export default {
55 return ""; 59 return "";
56 } 60 }
57 return this.containers.filter((container) => { 61 return this.containers.filter((container) => {
58 return container.State.toLowerCase() !== "running" && container.State.toLowerCase() !== "dead"; 62 return (
63 container.State.toLowerCase() !== "running" &&
64 container.State.toLowerCase() !== "dead"
65 );
59 }).length; 66 }).length;
60 }, 67 },
61 }, 68 },
@@ -68,18 +75,20 @@ export default {
68 "X-Api-Key": this.item.apikey, 75 "X-Api-Key": this.item.apikey,
69 }; 76 };
70 77
71 this.endpoints = await this.fetch("/api/endpoints", { headers }) 78 this.endpoints = await this.fetch("/api/endpoints", { headers }).catch(
72 .catch((e) => { 79 (e) => {
73 console.error(e); 80 console.error(e);
74 }); 81 }
82 );
75 83
76 let containers = []; 84 let containers = [];
77 for (let endpoint of this.endpoints) { 85 for (let endpoint of this.endpoints) {
78 const uri = `/api/endpoints/${endpoint.Id}/docker/containers/json?all=1`; 86 const uri = `/api/endpoints/${endpoint.Id}/docker/containers/json?all=1`;
79 const endpointContainers = await this.fetch(uri, { headers }) 87 const endpointContainers = await this.fetch(uri, { headers }).catch(
80 .catch((e) => { 88 (e) => {
81 console.error(e); 89 console.error(e);
82 }); 90 }
91 );
83 92
84 containers = containers.concat(endpointContainers); 93 containers = containers.concat(endpointContainers);
85 } 94 }