]>
Commit | Line | Data |
---|---|---|
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 | if ( | |
87 | this.item.environments && | |
88 | !this.item.environments.includes(endpoint.Name) | |
89 | ) { | |
90 | continue; | |
91 | } | |
92 | const uri = `/api/endpoints/${endpoint.Id}/docker/containers/json?all=1`; | |
93 | const endpointContainers = await this.fetch(uri, { headers }).catch( | |
94 | (e) => { | |
95 | console.error(e); | |
96 | } | |
97 | ); | |
98 | ||
99 | if (endpointContainers) { | |
100 | containers = containers.concat(endpointContainers); | |
101 | } | |
102 | } | |
103 | ||
104 | this.containers = containers; | |
105 | }, | |
106 | }, | |
107 | }; | |
108 | </script> | |
109 | ||
110 | <style scoped lang="scss"> | |
111 | .notifs { | |
112 | position: absolute; | |
113 | color: white; | |
114 | font-family: sans-serif; | |
115 | top: 0.3em; | |
116 | right: 0.5em; | |
117 | ||
118 | .notif { | |
119 | display: inline-block; | |
120 | padding: 0.2em 0.35em; | |
121 | border-radius: 0.25em; | |
122 | position: relative; | |
123 | margin-left: 0.3em; | |
124 | font-size: 0.8em; | |
125 | ||
126 | &.running { | |
127 | background-color: #4fd671; | |
128 | } | |
129 | ||
130 | &.dead { | |
131 | background-color: #e51111; | |
132 | } | |
133 | ||
134 | &.misc { | |
135 | background-color: #2ed0c8; | |
136 | } | |
137 | } | |
138 | } | |
139 | </style> |