diff options
Diffstat (limited to 'src/components/services/Portainer.vue')
-rw-r--r-- | src/components/services/Portainer.vue | 131 |
1 files changed, 131 insertions, 0 deletions
diff --git a/src/components/services/Portainer.vue b/src/components/services/Portainer.vue new file mode 100644 index 0000000..c7e9962 --- /dev/null +++ b/src/components/services/Portainer.vue | |||
@@ -0,0 +1,131 @@ | |||
1 | <template> | ||
2 | <Generic :item="item"> | ||
3 | <template #indicator> | ||
4 | <div class="notifs"> | ||
5 | <strong v-if="running > 0" class="notif running" title="Running"> | ||
6 | {{ running }} | ||
7 | </strong> | ||
8 | <strong v-if="dead > 0" class="notif dead" title="Dead"> | ||
9 | {{ dead }} | ||
10 | </strong> | ||
11 | <strong | ||
12 | v-if="misc > 0" | ||
13 | class="notif misc" | ||
14 | title="Other (creating, paused, exited, etc.)" | ||
15 | > | ||
16 | {{ misc }} | ||
17 | </strong> | ||
18 | </div> | ||
19 | </template> | ||
20 | </Generic> | ||
21 | </template> | ||
22 | |||
23 | <script> | ||
24 | import service from "@/mixins/service.js"; | ||
25 | import Generic from "./Generic.vue"; | ||
26 | |||
27 | export default { | ||
28 | name: "Portainer", | ||
29 | mixins: [service], | ||
30 | props: { | ||
31 | item: Object, | ||
32 | }, | ||
33 | components: { | ||
34 | Generic, | ||
35 | }, | ||
36 | data: () => ({ | ||
37 | endpoints: null, | ||
38 | containers: null, | ||
39 | }), | ||
40 | computed: { | ||
41 | running: function () { | ||
42 | if (!this.containers) { | ||
43 | return ""; | ||
44 | } | ||
45 | return this.containers.filter((container) => { | ||
46 | return container.State.toLowerCase() === "running"; | ||
47 | }).length; | ||
48 | }, | ||
49 | dead: function () { | ||
50 | if (!this.containers) { | ||
51 | return ""; | ||
52 | } | ||
53 | return this.containers.filter((container) => { | ||
54 | return container.State.toLowerCase() === "dead"; | ||
55 | }).length; | ||
56 | }, | ||
57 | misc: function () { | ||
58 | if (!this.containers) { | ||
59 | return ""; | ||
60 | } | ||
61 | return this.containers.filter((container) => { | ||
62 | return ( | ||
63 | container.State.toLowerCase() !== "running" && | ||
64 | container.State.toLowerCase() !== "dead" | ||
65 | ); | ||
66 | }).length; | ||
67 | }, | ||
68 | }, | ||
69 | created() { | ||
70 | this.fetchStatus(); | ||
71 | }, | ||
72 | methods: { | ||
73 | fetchStatus: async function () { | ||
74 | const headers = { | ||
75 | "X-Api-Key": this.item.apikey, | ||
76 | }; | ||
77 | |||
78 | this.endpoints = await this.fetch("/api/endpoints", { headers }).catch( | ||
79 | (e) => { | ||
80 | console.error(e); | ||
81 | } | ||
82 | ); | ||
83 | |||
84 | let containers = []; | ||
85 | for (let endpoint of this.endpoints) { | ||
86 | const uri = `/api/endpoints/${endpoint.Id}/docker/containers/json?all=1`; | ||
87 | const endpointContainers = await this.fetch(uri, { headers }).catch( | ||
88 | (e) => { | ||
89 | console.error(e); | ||
90 | } | ||
91 | ); | ||
92 | |||
93 | containers = containers.concat(endpointContainers); | ||
94 | } | ||
95 | |||
96 | this.containers = containers; | ||
97 | }, | ||
98 | }, | ||
99 | }; | ||
100 | </script> | ||
101 | |||
102 | <style scoped lang="scss"> | ||
103 | .notifs { | ||
104 | position: absolute; | ||
105 | color: white; | ||
106 | font-family: sans-serif; | ||
107 | top: 0.3em; | ||
108 | right: 0.5em; | ||
109 | |||
110 | .notif { | ||
111 | display: inline-block; | ||
112 | padding: 0.2em 0.35em; | ||
113 | border-radius: 0.25em; | ||
114 | position: relative; | ||
115 | margin-left: 0.3em; | ||
116 | font-size: 0.8em; | ||
117 | |||
118 | &.running { | ||
119 | background-color: #4fd671; | ||
120 | } | ||
121 | |||
122 | &.dead { | ||
123 | background-color: #e51111; | ||
124 | } | ||
125 | |||
126 | &.misc { | ||
127 | background-color: #2ed0c8; | ||
128 | } | ||
129 | } | ||
130 | } | ||
131 | </style> | ||