summaryrefslogblamecommitdiffstats
path: root/static/table.html
blob: 4b58b32e8ce01ea35eaea62df7a7cc8ee00e90c8 (plain) (tree)
1
2
3
4
5
6



                      

                         










                                   
  
                     
                  

                            
   
 
           
                            
                           


                        
                
   



                            






                       
                    


                                
                           
                       
                                  
   


               


          

       
 
                
                                  
                                                                                                                                                          
               

                                                                                                













                                                                                                                               
                                                                          
                                                                          
                                               
                                                                               
                                                                                                                         
                                                                                                     
                 


                
          
                                                           

        
                                  

                                   




                   
                
                  

                  
                 

                   


















                                                                                                                                                                                                                                             
    


                                 














                                                                                                           
           


                                                                       

                           






                                                                                           

                                  
          
















                                                                                                            
       
     



                                                 
                                          

                                       
                     

                                                            
 





                                                                    
 


                                                                                 
 




                                                                       
      





                                                                                     






                                                          
                                                                        



                                                                            
                                                                                     
                                                                                                           











                                                                      


                                                                    
     



                                                                 
                                                                                
                                                                                   
                     









                                                      

                                      





                                                  





         
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
  <style type="text/css">
  
  html, body {
    height: 100%;
    margin: 0;
  }

  #app {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .server-container {
    display: flex;
    justify-content: center;
    overflow-y: auto;
  }

  .server {
    border-spacing: 2px 4px;
    background-color: #eee;
    flex: 1;
    white-space: nowrap;
    max-width: 360px;
    margin: 3px;
  }

  .server-offline {
    filter: brightness(50%);
  }
  
  .first-row {
    font-weight: bold;
  }
  
  .server-ip {
    text-align: center;
    font-size: 150%;
  }
  
  .client-label, .client-speed {
    border: 1px solid #888;
    text-align: center;
    text-shadow: #fff 1.2px 1.2px;
  }

  .expand {
    width: 99%;
  }
  
  </style>
</head>
<body>

  <div id="app">
    <div class="server-container">
      <table v-for="server in servers" class="server" :class="{ 'server-offline': server.offline }" :style="{ border: '4px solid ' + server.graphColor }">
        <tbody>
          <tr class="first-row"><td colspan="2" class="server-ip">{{ server.address }}</td></tr>
          <tr><td>Uptime:</td><td class="expand">{{ formatSeconds(server.uptime) }}</td></tr>
          <tr>
              <td>Upload speed:</td>
              <td class="client-speed" :style="calcBackgroundStyle(peak ? server.peakUploadSpeed : server.avgUploadSpeed)">
                  <span>{{ formatBytes(peak ? server.peakUploadSpeed : server.avgUploadSpeed) }}/s</span>
              </td>
          </tr>
          <tr>
              <td>Download speed:</td>
              <td class="client-speed" :style="calcBackgroundStyle(peak ? server.peakDownloadSpeed : server.avgDownloadSpeed)">
                  <span>{{ formatBytes(peak ? server.peakDownloadSpeed : server.avgDownloadSpeed) }}/s</span>
              </td>
          </tr>
          <tr><td>Total sent:</td><td>{{ formatBytes(server.bytesSent) }}</td></tr>
          <tr><td>Total received:</td><td>{{ formatBytes(server.bytesReceived) }}</td></tr>
          <tr><td>Client count:</td><td>{{ server.clientCount }}</td></tr>
          <tr><td>Server count:</td><td>{{ server.serverCount }}</td></tr>
          <tr v-for="client in server.clients">
            <td class="client-label">{{ formatIpAddress(client.address) }}</td>
            <td class="client-speed" :style="calcBackgroundStyle(peak ? client.peakUploadSpeed : client.avgUploadSpeed)">
              <span>{{ formatBytes(peak ? client.peakUploadSpeed : client.avgUploadSpeed) }}/s</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <canvas ref="chart" :width="this.canvasWidth"></canvas>
  </div>
  
<script src="vue.min.js"></script>
<script src="smoothie.js"></script>

<script>

var app = new Vue({
  el: '#app',
  data: {
    rawData: {},
    serverMap: {},
    timespan: 120,
    peak: false,
    ports: false,
    canvasWidth: 0,
    smoothie: null,
    graphColors: ["#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00", "#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707", "#651067", "#329262", "#5574a6", "#3b3eac"]
  },
  computed: {
    servers () {
      const servers = Object.values(this.serverMap)
      servers.sort(this.compareObjectIps)
      servers.forEach(server => {
        if (this.rawData.timestamp - server.timestamp > 6000) server.offline = true
        const clients = Object.values(server.clientMap)
        if (this.peak) {
          server.clients = clients.filter(client => client.peakUploadSpeed > 0)
          server.clients.sort((a, b) => b.peakUploadSpeed - a.peakUploadSpeed)
        } else {
          server.clients = clients.filter(client => client.avgUploadSpeed > 0)
          server.clients.sort((a, b) => b.avgUploadSpeed - a.avgUploadSpeed)
        }
      })
      return servers
    }
  },
  watch: {
    rawData () {
      if (this.rawData.servers) {
        this.rawData.servers.forEach(serverData => {
          // Update server
          var server = this.serverMap[serverData.address]
          if (server) {
            Object.assign(server, serverData)
          } else {
            server = {
              ...serverData,
              log: [],
              clientMap: {},
              graphColor: this.graphColors.shift(),
              graphLine: new TimeSeries({ logarithmicScale: true })
            }
            Vue.set(this.serverMap, serverData.address, server)
            this.smoothie.addTimeSeries(server.graphLine, { lineWidth: 2, strokeStyle: server.graphColor })
          }
          server.log.push(serverData)
          this.calcSpeed(server)
          server.graphLine.append(server.timestamp, server.uploadSpeed)

          // Update clients
          serverData.clients.forEach(clientData => {
            clientData.timestamp = server.timestamp
            var client = server.clientMap[clientData.address]
            if (client) server.clientMap[clientData.address] = { ...client, ...clientData }
            else Vue.set(server.clientMap, clientData.address, { ...clientData, log: [] })
            client = server.clientMap[clientData.address]
            client.log.push(clientData)
            this.calcSpeed(client)
          })
        })
      }

      // Remove outdated values
      for (let serverIp in this.serverMap) {
        const server = this.serverMap[serverIp]
        server.log = server.log.filter(x => x.timestamp > this.rawData.timestamp - this.timespan * 1000)
        if (server.log.length === 0) {
          this.smoothie.removeTimeSeries(server.graphLine)
          this.graphColors.unshift(server.graphColor)
          Vue.delete(this.serverMap, serverIp)
        } else {
          for (let clientIp in server.clientMap) {
            const client = server.clientMap[clientIp]
            client.log = client.log.filter(x => x.timestamp > this.rawData.timestamp - this.timespan * 1000)
            if (client.log.length === 0) Vue.delete(server.clientMap, clientIp)
          }
        }
      }
    }
  },
  methods: {
    async updateData () {
      const response = await fetch('/data2.json')
      this.rawData = await response.json()
      setTimeout(this.updateData, 2000)
    },
    calcSpeed (obj) {
      // Need a minimum of two values to calculate the speed
      if (obj.log.length <= 1) return 

      // Calculate current speeds
      var a = obj.log[obj.log.length - 2]
      const b = obj.log[obj.log.length - 1]
      var time = (b.timestamp - a.timestamp) / 1000
      obj.uploadSpeed = (b.bytesSent - a.bytesSent) / time
      obj.downloadSpeed = (b.bytesReceived - a.bytesReceived) / time

      // Calculate peak speeds
      obj.peakUploadSpeed = Math.max(...obj.log.map(x => x.uploadSpeed || 0))
      obj.peakDownloadSpeed = Math.max(...obj.log.map(x => x.downloadSpeed || 0))

      // Calculate average speeds
      a = obj.log[0]
      time = (b.timestamp - a.timestamp) / 1000
      obj.avgUploadSpeed = (b.bytesSent - a.bytesSent) / time
      obj.avgDownloadSpeed = (b.bytesReceived - a.bytesReceived) / time
    },
    formatBytes (bytes) {
      if (bytes < 1024) return bytes.toFixed(2) + ' B'
      else if (bytes < 1048576) return (bytes / 1024).toFixed(2) + ' KiB'
      else if (bytes < 1073741824) return (bytes / 1048576).toFixed(2) + ' MiB'
      else if (bytes < 1099511627776) return (bytes / 1073741824).toFixed(2) + ' GiB'
      else return (bytes / 1099511627776).toFixed(2) + ' TiB'
    },
    formatSeconds (seconds) {
      return ( Math.floor(seconds / ( 3600 * 24 ) ) + 'd '
             + Math.floor(seconds / 3600 ) % 24 + 'h '
             + Math.floor(seconds / 60 ) % 60 + 'min' )
    },
    calcBackgroundStyle (speed) {
      const colors = ['#eee', '#cfc', '#6f6', '#70bf30', '#f00', '#f65']
      const limits = [1048576, 10485760, 104857600, 1073741824, 10737418240]
      for (var i = 0; i < 4; ++i) {
        if (speed < limits[i]) break
      }
      const percent = Math.round(Math.max(0, Math.min(100, speed / limits[i] * 100)))
      return { background: `linear-gradient(90deg, ${colors[i+1]} ${percent}%, ${colors[i]} ${percent}%)` }
    },
    compareObjectIps (obj1, obj2) {
      const parts1 = obj1.address.split('.').map(str => parseInt(str))
      const parts2 = obj2.address.split('.').map(str => parseInt(str))
      var result = parts1[0] - parts2[0]
      if (result === 0) result = parts1[1] - parts2[1]
      if (result === 0) result = parts1[2] - parts2[2]
      if (result === 0) result = parts1[3] - parts2[3]
      return result
    },
    logScale (value) {
      return Math.log(value/100000 + 1)
    },
    formatIpAddress (ip) {
      return this.ports ? ip : ip.substring(0, ip.lastIndexOf(':')) 
    }
  },
  created () {
    const urlParams = new URLSearchParams(window.location.search)
    this.timespan = parseInt(urlParams.get('timespan')) || 120
    this.peak = urlParams.get('peak') === 'true' || urlParams.get('peak') === ''
    this.ports = urlParams.get('ports') === 'true' || urlParams.get('ports') === ''
    this.updateData()
  },
  mounted () {
    this.canvasWidth = window.innerWidth
    window.addEventListener('resize', () => {
      this.canvasWidth = window.innerWidth
    })
    this.smoothie = new SmoothieChart({
      'millisPerPixel': 300,
      'grid': { 'millisPerLine': 30000 },
      timestampFormatter: SmoothieChart.timeFormatter,
      yMaxFormatter: this.formatBytes,
      yMinFormatter: this.formatBytes,
      valueTransformFunction: this.logScale,
      minValue: 0,
      maxValue: 262144000,
      labels: { fontSize: 13 }
    })
    this.smoothie.streamTo(this.$refs.chart, 2000)
  }
})

</script>
</body>
</html>