sermoni

"Service monitor" / cronjob status service
Log | Files | Refs

proto.html (4404B)

      1 <!-- Prototype -->
      2 
      3 <html>
      4     <head>
      5         <meta name="viewport" 
      6               content="width=device-width,initial-scale=1,user-scalable=no">
      7         <link rel="stylesheet" type="text/css" href="style.css"></link>
      8         <script src="https://unpkg.com/vue"></script>
      9 	<script src="https://cdn.jsdelivr.net/npm/vue-mq@1.0.1/dist/vue-mq.min.js"></script>
     10     </head>
     11     <body>
     12         <div id="app" style="padding: 0">
     13             <header> 
     14                 <div id="bar">
     15                     <div style="font-family: Helvetica; font-size: 1.5em; color: #555 ">&gt; sermoni</div> <!-- color #bbf instead? -->
     16                     <div style="margin-left: auto;">
     17                         <img src="/eye.png" style="height: 3em; opacity: 0.3;">
     18                     </div>
     19                 </div>
     20             </header>
     21             <main>
     22                 <div class="events-wrapper">
     23                     <div v-for="e in events">
     24                         <div class="event"
     25                              style="display: flex;"
     26                             :style="e.style">
     27                             <div class="event-field">{{ e.service }}</div>
     28                             <mq-layout mq="md+">
     29                                 <div class="event-field">{{ e.title }}</div>
     30                             </mq-layout>
     31                         </div>
     32                         <div v-show="false"> more info here </div>
     33                     </div>
     34                 </div>
     35             <main>
     36         </div>
     37 
     38         <script>
     39             Vue.use(vueMq, {
     40                 breakpoints: {
     41                     sm: 450,
     42                     md: 1250,
     43                     lg: Infinity,
     44                 },
     45                 defaultBreakpoint: 'sm'
     46             });
     47             var app = new Vue({
     48                 el: "#app",
     49                 data: {
     50                     testdata: [{
     51                         service: "backup-files @ haflan.dev",
     52                         timestamp: 1586459792925,
     53                         title: "Server reported success",
     54                         status: "ok"
     55                     },{
     56                         service: "backup-gitlab @ haflan.dev",
     57                         timestamp: 1586459793155,
     58                         title: "Server reported success",
     59                         status: "ok"
     60                     },{
     61                         service: "backup-qumps @ haflan.dev",
     62                         timestamp: 1586459793285,
     63                         status: "warning",
     64                         title: "Memory almost full",
     65                         message: "df -h reports that less than 1GB is available"
     66                     },{
     67                         service: "backup-offsite @ work-computer",
     68                         timestamp: 1586459794385,
     69                         status: "error",
     70                         title: "Expectation not met" // These are read from a default title thingy
     71                     },{
     72                         service: "ssh @ haflan.dev",
     73                         timestamp: 1586459794385,
     74                         status: "info",
     75                         title: "SSH server login",
     76                         message: "User vetle logged in from IP 192.168.10.105"
     77                     }],
     78                     statusStyling: {
     79                         "ok": { color: "#000", backgroundColor: "#c3e6cb" },
     80                         "warning": { color: "#000", backgroundColor: "#ffeeba" },
     81                         "error": { color: "#000", backgroundColor: "#f5c6cb" },
     82                         "info": { color: "#000", backgroundColor: "#fff" }
     83                     }
     84                 },
     85                 methods: {
     86                     statusStyle(status) {
     87                         const style = this.statusStyling[status];
     88                         if (style) {
     89                             return style;
     90                         } else {
     91                             return { color: "#fff", backgroundColor: "#000" };
     92                         }
     93                     }
     94                 },
     95                 computed: {
     96                     events() {
     97                         return this.testdata.map(e => {
     98                             return {
     99                                 ...e,
    100                                 style: this.statusStyle(e.status)
    101                             };
    102                         });
    103                     }
    104                 }
    105             });
    106         </script>
    107     </body>
    108 </html>
    109