]>
Commit | Line | Data |
---|---|---|
a1a70d4a ES |
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> | |
f3980069 BW |
11 | <strong |
12 | v-if="misc > 0" | |
13 | class="notif misc" | |
14 | title="Other (creating, paused, exited, etc.)" | |
15 | > | |
a1a70d4a ES |
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"; | |
edd2c9ce | 55 | }).length; |
a1a70d4a ES |
56 | }, |
57 | misc: function () { | |
58 | if (!this.containers) { | |
59 | return ""; | |
60 | } | |
61 | return this.containers.filter((container) => { | |
f3980069 BW |
62 | return ( |
63 | container.State.toLowerCase() !== "running" && | |
64 | container.State.toLowerCase() !== "dead" | |
65 | ); | |
a1a70d4a ES |
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 | ||
f3980069 BW |
78 | this.endpoints = await this.fetch("/api/endpoints", { headers }).catch( |
79 | (e) => { | |
a1a70d4a | 80 | console.error(e); |
f3980069 BW |
81 | } |
82 | ); | |
a1a70d4a ES |
83 | |
84 | let containers = []; | |
85 | for (let endpoint of this.endpoints) { | |
e2ebf997 RC |
86 | if ( |
87 | this.item.environments && | |
88 | !this.item.environments.includes(endpoint.Name) | |
89 | ) { | |
90 | continue; | |
91 | } | |
a1a70d4a | 92 | const uri = `/api/endpoints/${endpoint.Id}/docker/containers/json?all=1`; |
f3980069 BW |
93 | const endpointContainers = await this.fetch(uri, { headers }).catch( |
94 | (e) => { | |
a1a70d4a | 95 | console.error(e); |
f3980069 BW |
96 | } |
97 | ); | |
a1a70d4a | 98 | |
4e953d7c | 99 | if (endpointContainers) { |
a7cbcc77 RC |
100 | containers = containers.concat(endpointContainers); |
101 | } | |
a1a70d4a ES |
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> |