matrix-synapse-diskspace-janitor/frontend/panel.gotemplate.html

<div class="vertical align-center">
  {{ if .Updating }}
  <p>
    <span class="bold-red">
      NOTE: The data on this page is currently being updated... This can take a few minutes. Stand by.
    </span>
  </p>
  {{ else }}
  
  <form action="/" method="POST" class="box vertical">
    <p>
      <span class="bold-red">
        NOTE: The data on this page is generated by a scheduled task that runs every 24 hours.
      </span>
    </p>

    <div class="form-row horizontal">

      <input type="checkbox" id="measureMediaSize" name="measureMediaSize"></input>
      <label for="measureMediaSize" >measure size of media folder</label>
    </div>

    <div class="form-row horizontal">
      <input type="checkbox" id="stateGroupsStateScan" name="stateGroupsStateScan"></input>
      <label for="stateGroupsStateScan" >rescan <code>state_groups_state</code></label>
    </div>
    <input type="hidden" name="refresh" value="true"></input>
    <input type="submit" value="Re-run data gathering task now"></input>
  </form>
  {{ end }}
</div>

<div class="horizontal justify-center wrap">

  <div class="chart-container">
    <h3>disk space</h3>
    <canvas id="chart1" width="350" height="550"></canvas>
  </div>

  <div class="chart-container">
    <h3>database tables</h3>
    <canvas id="chart2" width="350" height="550"></canvas>
  </div>

  <div class="chart-container">
    <h3>state_groups_state by room</h3>
    <canvas id="chart3" width="350" height="550"></canvas>
  </div>

</div> 

<div class="horizontal space-around">
  <form action="/" method="POST" class="box vertical">
    <h3>🔨 delete rooms</h3>

    {{ range $i, $room := .BigRoomsSlice }}
      {{ if $room.Id }}
        <div class="form-row horizontal align-center">
          <input type="hidden" name="id_{{ $i }}" value="{{ $room.Id }}"></input>

          <label for="delete_{{ $i }}" >DELETE</span>
          <input type="checkbox" id="delete_{{ $i }}" name="delete_{{ $i }}"></input>
          <span> &nbsp; </span>
          <label for="ban_{{ $i }}" >BAN</span>
          <input type="checkbox" id="ban_{{ $i }}" name="ban_{{ $i }}"></input>
          <span> &nbsp; {{ $room.Percent }}% </span>
          <span> &nbsp;  {{ $room.IdWithName }}</span>
        </div>
      {{ end }}
    {{ end }}
    
    <input type="submit" value="SUMBIT"></input>
  </form>
</div>

<script src="static/vendor/chart.umd.js"></script>
<script>

  const diskUsage = {{ .DiskUsage }};
  const dbTableSizes = {{ .DBTableSizes }};
  const bigRooms = {{ .BigRooms }};

  //     disk space chart 

  const freeSpace = diskUsage.DiskSizeBytes - (diskUsage.PostgresBytes+diskUsage.MediaBytes+diskUsage.OtherBytes);
  new Chart(document.getElementById('chart1'), {
    type: 'doughnut',
    data: {
      labels: ["Postgres DB", "Matrix Media", "Other", "Free Space" ],
      datasets: [{
        label: 'GB',
        data: [diskUsage.PostgresBytes, diskUsage.MediaBytes, diskUsage.OtherBytes, freeSpace].map(x => x / 1000000000),
        borderWidth: 2
      }]
    },
    options: {
    }
  });




  //      database tables chart 

  dbTableSizes.sort((a, b) => {
     return b.Bytes - a.Bytes;
  });

  const top7Tables = dbTableSizes.slice(0, 6);
  const others = dbTableSizes.slice(6, dbTableSizes.length)
  top7Tables.push({
    Name: "others",
    Bytes: others.reduce((accumulator, table) => accumulator + table.Bytes, 0)
  })

  const totalBytes = top7Tables.reduce((accumulator, table) => accumulator + table.Bytes, 0);

  new Chart(document.getElementById('chart2'), {
    type: 'doughnut',
    data: {
      labels: top7Tables.map(table => table.Name),
      datasets: [{
        label: 'filesize %',
        data: top7Tables.map(table => Math.round((table.Bytes/totalBytes)*100)),
        borderWidth: 2
      }]
    },
    options: {
    }
  });



  //      matrix room size chart 
  const top7Rooms = bigRooms.slice(0, 6);
  const otherRooms = bigRooms.slice(6, bigRooms.length)
  top7Rooms.push({
    Name: "Others",
    Rows: otherRooms.reduce((accumulator, room) => accumulator + room.Rows, 0)
  })

  const totalRows = bigRooms.reduce((accumulator, room) => accumulator + room.Rows, 0);

  new Chart(document.getElementById('chart3'), {
    type: 'doughnut',
    data: {
      labels: top7Rooms.map(room => room.Name || room.Id),
      datasets: [{
        label: '%',
        data: top7Rooms.map(room => Math.round((room.Rows/totalRows)*100)),
        borderWidth: 2
      }]
    },
    options: {
    }
  });


</script>