luci-app-diskman/luasrc/view/diskman/disk_info.htm

<script type="text/javascript">
  window.onload = function () {
    //disk partition info
    let p_colors = ["#c0c0ff", "#fbbd00", "#e97c30", "#a0e0a0", "#e0c0ff"]
    let lines = document.querySelectorAll('[id^=cbi-disk-]')
    lines.forEach((item) => {
      let dev = item.id.match(/cbi-disk-(.*)/)[1]
      if (dev == "table") { return }
      XHR.get('<%=luci.dispatcher.build_url("admin/system/diskman/get_disk_info")%>/' + dev, null, (x, disk_info) => {
        // handle disk info
        item.childNodes.forEach((cell) => {
          if (cell && cell.attributes) {
            if (cell.getAttribute("data-name") == "sn" || cell.childNodes[1] && cell.childNodes[1].id.match(/sn/)) {
              cell.innerText = disk_info.sn || "-"
            } else if (cell.getAttribute("data-name") == "temp" || cell.childNodes[1] && cell.childNodes[1].id.match(/temp/)) {
              cell.innerText = disk_info.temp || "-"
            } else if (cell.getAttribute("data-name") == "p_table" || cell.childNodes[1] && cell.childNodes[1].id.match(/p_table/)) {
              cell.innerText = disk_info.p_table || "-"
            } else if (cell.getAttribute("data-name") == "sata_ver" || cell.childNodes[1] && cell.childNodes[1].id.match(/sata_ver/)) {
              cell.innerText = disk_info.sata_ver || "-"
            } else if (cell.getAttribute("data-name") == "health_status" || cell.childNodes[1] && cell.childNodes[1].id.match(/health_status/)) {
              cell.innerText = (disk_info.health || "-") + "\n" + (disk_info.status || "-")
            } else if (cell.getAttribute("data-name") == "health" || cell.childNodes[1] && cell.childNodes[1].id.match(/health/)) {
              cell.innerText = disk_info.health || "-"
            } else if (cell.getAttribute("data-name") == "status" || cell.childNodes[1] && cell.childNodes[1].id.match(/status/)) {
              cell.innerText = disk_info.status || "-"
            }
          }
        })
        // handle partitons info
        if (disk_info.partitions && disk_info.partitions.length > 0) {
          let partitons_div
          if (item.nodeName == "TR") {
            partitons_div = '<tr width="100%" style="white-space:nowrap;"><td style="margin:0px; padding:0px; border:0px; white-space:nowrap;" colspan="15">'
          } else if (item.nodeName == "DIV") {
            partitons_div = '<div class="tr cbi-section-table-row cbi-rowstyle-1"><div style="white-space:nowrap; position:absolute; width:100%">'
          }
          let expand = 0
          let need_expand = 0
          disk_info.partitions.forEach((part) => {
            let p = part.size / disk_info.size * 100
            if (p <= 8) {
              expand += 8
              need_expand += p
              part.part_percent = 8
            }
          })
          let n = 0
          disk_info.partitions.forEach((part) => {
            let p = part.size / disk_info.size * 100
            if (p > 8) {
              part.part_percent = p * (100 - expand) / (100 - need_expand)
            }
            let part_percent = part.part_percent + '%'
            let p_color = p_colors[n++]
            if (n > 4) { n = 0 }
            let inline_txt = (part.name != '-' && part.name || '') + ' ' + (part.fs != 'Free Space' && part.fs || '') + ' ' + part.size_formated + ' ' + (part.useage != '-' && part.useage || '')
            let partiton_div = '<div title="' + inline_txt + '" style="color: #525F7F; display:inline-block; text-align:center;background-color:' + p_color + '; width:' + part_percent + '">' + inline_txt + '</div>'
            partitons_div += partiton_div
          })
          if (item.nodeName == "TR") {
            partitons_div += '</td></tr>'
          } else if (item.nodeName == "DIV") {
            partitons_div += '</div><div>&nbsp</div></div>'
          }
          item.insertAdjacentHTML('afterend', partitons_div);
        }
      })
    })
    //raid table
    lines = document.querySelectorAll('[id^=cbi-_raid-]')
    lines.forEach((item) => {
      let dev = item.id.match(/cbi-_raid-(.*)/)[1]
      if (dev == "table") { return }
      console.log(dev)
      XHR.get('<%=luci.dispatcher.build_url("admin/system/diskman/get_disk_info")%>/' + dev, null, (x, disk_info) => {
        // handle raid info
        item.childNodes.forEach((cell) => {
          if (cell && cell.attributes) {
            if (cell.getAttribute("data-name") == "p_table" || cell.childNodes[1] && cell.childNodes[1].id.match(/p_table/)) {
                  cell.innerText = disk_info.p_table || "-"
                }
          }
        })
        // handle partitons info
        let partitons_div
        if (item.nodeName == "TR") {
          partitons_div = '<tr width="100%" style="white-space:nowrap;"><td style="margin:0px; padding:0px; border:0px; white-space:nowrap;" colspan="15">'
        } else if (item.nodeName == "DIV") {
          partitons_div = '<div class="tr cbi-section-table-row cbi-rowstyle-1"><div style="white-space:nowrap; position:absolute; width:100%">'
        }
        let n = 0
        disk_info.partitions.forEach((part) => {
          let part_percent = part.size / disk_info.size * 100 + '%'
          let p_color = p_colors[n++]
          if (n > 4) { n = 0 }
          let inline_txt = (part.name != '-' && part.name || '') + ' ' + (part.fs != 'Free Space' && part.fs || '') + ' ' + part.size_formated + ' ' + (part.useage != '-' && part.useage || '')
          let partiton_div = '<div title="' + inline_txt + '" style="display:inline-block; text-align:center;background-color:' + p_color + '; width:' + part_percent + '">' + inline_txt + '</div>'
          partitons_div += partiton_div
        })
        if (item.nodeName == "TR") {
          partitons_div += '</td></tr>'
        } else if (item.nodeName == "DIV") {
          partitons_div += '</div><div>&nbsp</div></div>'
        }
        item.insertAdjacentHTML('afterend', partitons_div);
      })
    })
  }
</script>