src/components/services/Portainer.vue

   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         if(endpointContainers){
  94           containers = containers.concat(endpointContainers);
  95         }
  96       }
  97
  98       this.containers = containers;
  99     },
 100   },
 101 };
 102 </script>
 103
 104 <style scoped lang="scss">
 105 .notifs {
 106   position: absolute;
 107   color: white;
 108   font-family: sans-serif;
 109   top: 0.3em;
 110   right: 0.5em;
 111
 112   .notif {
 113     display: inline-block;
 114     padding: 0.2em 0.35em;
 115     border-radius: 0.25em;
 116     position: relative;
 117     margin-left: 0.3em;
 118     font-size: 0.8em;
 119
 120     &.running {
 121       background-color: #4fd671;
 122     }
 123
 124     &.dead {
 125       background-color: #e51111;
 126     }
 127
 128     &.misc {
 129       background-color: #2ed0c8;
 130     }
 131   }
 132 }
 133 </style>