Last active
November 5, 2016 21:26
-
-
Save loddit/f002cb75eb07e06487be48e37cd0b593 to your computer and use it in GitHub Desktop.
parse deploy.log to show who using your stage
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Who Is Using Your Stage?</title> | |
| <style> | |
| * { | |
| transition: all .2s linear; | |
| } | |
| body { | |
| background-color: #333; | |
| margin: 0; | |
| padding: 20px 0; | |
| color: #eee; | |
| width: 100vw; | |
| } | |
| img { | |
| margin: 40px auto; | |
| display: block; | |
| } | |
| h1 { | |
| color: #fff; | |
| text-align: center; | |
| font-family: sans-serif; | |
| font-variant: small-caps; | |
| } | |
| section { | |
| display: inline-block; | |
| width: 300px; | |
| padding: 20px; | |
| font-family: monospace; | |
| } | |
| ol { | |
| list-style-type: none; | |
| padding-left: 0; | |
| } | |
| p { | |
| width: 100vw; | |
| position: absolute; | |
| bottom: 0; | |
| text-align: center; | |
| } | |
| a { | |
| color: #fff; | |
| } | |
| </style> | |
| <script> | |
| setInterval(() => { | |
| document.body.style.backgroundColor = `hsl(${Math.random() * 255}, 50%, 20%)`; | |
| }, 200) | |
| fetch('./deploy.log').then( | |
| (res) => { | |
| res.text().then((text) => { | |
| var stages = {}; | |
| var logs = text.split('========================================'); | |
| logs.pop(); // remove tail breaks; | |
| logs.map((log) => { | |
| var logObject = {}; | |
| log.split('\n').filter(Boolean).map((line) => { | |
| [key, value] = line.split(': '); | |
| logObject[key] = key === 'time' ? new Date(value) : value; | |
| }); | |
| if (logObject.time > (stages[logObject.stage] && stages[logObject.stage].time || 0)) { | |
| stages[logObject.stage] = logObject | |
| } | |
| }); | |
| Object.keys(stages).map((key) => { | |
| logObject = stages[key]; | |
| delete logObject.stage | |
| var time = logObject.time; | |
| logObject.time = `${time.getFullYear()}-${time.getMonth()}-${time.getDate()} ${time.getHours()}:${time.getMinutes()}` | |
| var metaHTML = "<ol>" + Object.keys(logObject).map((key) => `<li>${key}: ${logObject[key]}</li>`).join('') + "</ol>"; | |
| var stageHTML = `<section><h3>${key}</h3>${metaHTML}</section>` | |
| document.body.insertAdjacentHTML('beforeEnd', stageHTML); | |
| }) | |
| }) | |
| } | |
| ); | |
| </script> | |
| </head> | |
| <body> | |
| <img src='./dogs.gif'/> | |
| <h1>Who Is Using Your Stage?</h1> | |
| <p><a href="https://github.com/loddit">@loddit</a> 2016</p> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment