nezha/resource/template/theme-default/home.html

{{define "theme-default/home"}} {{template "common/header" .}} {{if ts
.CustomCode}} {{.CustomCode|safe}} {{end}} {{template "common/menu" .}}
<div class="nb-container">
  <div class="ui container">
    <div id="app">
      <div class="ui styled fluid accordion" v-for="group in groups">
        <div class="active title">
          <i class="dropdown icon"></i>@#(group.Tag!==''?group.Tag:'默认')#@
        </div>
        <div class="active content">
          <div class="ui four stackable status cards">
            <div v-for="server in group.data" :id="server.ID" class="ui card">
              <div
                class="content"
                v-if="server.Host"
                style="margin-top: 10px; padding-bottom: 5px"
              >
                <div class="header">
                  <i :class="server.Host.CountryCode + ' flag'"></i
                  ><i
                    v-if='server.Host.Platform == "darwin"'
                    class="apple icon"
                  ></i
                  ><i
                    v-if='server.Host.Platform == "linux"'
                    class="linux icon"
                  ></i
                  ><i
                    v-if='server.Host.Platform == "windows"'
                    class="windows icon"
                  ></i
                  ><i
                    v-if='server.Host.Platform == "freebsd"'
                    class="freebsd icon"
                  ></i
                  >@#server.Name + (server.live?'':' [已离线]')#@
                  <i class="yellow info circle icon"></i>
                  <div class="ui content popup" style="margin-bottom: 0">
                    系统：@#server.Host.Platform#@-@#server.Host.PlatformVersion#@
                    [<span v-if="server.Host.Virtualization"
                      >@#server.Host.Virtualization#@:</span
                    >@#server.Host.Arch#@]<br />
                    CPU：@#server.Host.CPU#@<br />
                    硬盘：@#formatByteSize(server.State.DiskUsed)#@/@#formatByteSize(server.Host.DiskTotal)#@<br />
                    内存：@#formatByteSize(server.State.MemUsed)#@/@#formatByteSize(server.Host.MemTotal)#@<br />
                    交换：@#formatByteSize(server.State.SwapUsed)#@/@#formatByteSize(server.Host.SwapTotal)#@<br />
                    流量：<i
                      class="arrow alternate circle down outline icon"
                    ></i
                    >@#formatByteSize(server.State.NetInTransfer)#@<i
                      class="arrow alternate circle up outline icon"
                    ></i
                    >@#formatByteSize(server.State.NetOutTransfer)#@<br />
                    启动：@# formatTimestamp(server.Host.BootTime) #@<br />
                    活动：@# new Date(server.LastActive).toLocaleString() #@<br />
                    版本：@#server.Host.Version#@<br />
                  </div>
                  <div class="ui divider" style="margin-bottom: 5px"></div>
                </div>
                <div class="description">
                  <div class="ui grid">
                    <div class="three wide column">CPU</div>
                    <div class="thirteen wide column">
                      <div
                        :class="formatPercent(server.live,server.State.CPU, 100).class"
                      >
                        <div
                          class="bar"
                          :style="formatPercent(server.live,server.State.CPU, 100).style"
                        >
                          <small
                            >@#formatPercent(server.live,server.State.CPU,100).percent#@%</small
                          >
                        </div>
                      </div>
                    </div>
                    <div class="three wide column">内存</div>
                    <div class="thirteen wide column">
                      <div
                        :class="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).class"
                      >
                        <div
                          class="bar"
                          :style="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).style"
                        >
                          <small
                            >@#parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)#@%</small
                          >
                        </div>
                      </div>
                    </div>
                    <div class="three wide column">交换</div>
                    <div class="thirteen wide column">
                      <div
                        :class="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).class"
                      >
                        <div
                          class="bar"
                          :style="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).style"
                        >
                          <small
                            >@#parseInt(server.State?server.State.SwapUsed/server.Host.SwapTotal*100:0)#@%</small
                          >
                        </div>
                      </div>
                    </div>
                    <div class="three wide column">网络</div>
                    <div class="thirteen wide column">
                      <i class="arrow alternate circle down outline icon"></i>
                      @#formatByteSize(server.State.NetInSpeed)#@/s
                      <i class="arrow alternate circle up outline icon"></i>
                      @#formatByteSize(server.State.NetOutSpeed)#@/s
                    </div>
                    <div class="three wide column">硬盘</div>
                    <div class="thirteen wide column">
                      <div
                        :class="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).class"
                      >
                        <div
                          class="bar"
                          :style="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).style"
                        >
                          <small
                            >@#parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)#@%</small
                          >
                        </div>
                      </div>
                    </div>
                    <div class="three wide column">在线</div>
                    <div class="thirteen wide column">
                      <i class="clock icon"></i
                      >@#secondToDate(server.State.Uptime)#@
                    </div>
                  </div>
                </div>
              </div>
              <div class="content" v-else>
                <p>@#server.Name#@</p>
                <p>节点已离线</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{{template "common/footer" .}}
<script>
  const initData = {{.Servers}};
  var statusCards = new Vue({
      el: '#app',
      delimiters: ['@#', '#@'],
      data: {
          data: initData,
          groups: [],
          cache: [],
      },
      created() {
          this.group()
      },
      mounted() {
          $('.yellow.info.icon').popup({
              popup: '.ui.content.popup',
              exclusive: true,
          });
      },
      methods: {
          group() {
              this.groups = groupingData(this.data, "Tag")
          },
          formatPercent(live, used, total) {
              const percent = live ? (parseInt(used / total * 100) || 0) : -1
              if (!this.cache[percent]) {
                  this.cache[percent] = {
                      class: {
                          ui: true,
                          progress: true,
                      },
                      style: {
                          'transition-duration': '300ms',
                          'min-width': 'unset',
                          width: percent + '% !important',
                      },
                      percent,
                  }
                  if (percent < 0) {
                      this.cache[percent].style['background-color'] = 'slategray'
                      this.cache[percent].class.offline = true
                  } else if (percent < 51) {
                      this.cache[percent].style['background-color'] = 'rgb(0, 235, 139)'
                      this.cache[percent].class.fine = true
                  } else if (percent < 81) {
                      this.cache[percent].style['background-color'] = 'orange'
                      this.cache[percent].class.warning = true
                  } else {
                      this.cache[percent].style['background-color'] = 'crimson'
                      this.cache[percent].class.error = true
                  }
              }
              return this.cache[percent]
          },
          secondToDate(s) {
              var d = Math.floor(s / 3600 / 24);
              if (d > 0) {
                  return d + "天"
              }
              var h = Math.floor(s / 3600 % 24);
              var m = Math.floor(s / 60 % 60);
              var s = Math.floor(s % 60);
              return h + ":" + ("0" + m).slice(-2) + ":" + ("0" + s).slice(-2);
          },
          formatTimestamp(t) {
              return new Date(t * 1000).toLocaleString()
          },
          formatByteSize(bs) {
              const x = readableBytes(bs)
              return x != "NaN undefined" ? x : '0 KB'
          }
      }
  })

  function groupingData(data, filed) {
      let map = {};
      let dest = [];
      data.forEach(item => {
          if (!map[item[filed]]) {
              dest.push({
                  [filed]: item[filed],
                  data: [item]
              });
              map[item[filed]] = item;
          } else {
              dest.forEach(dItem => {
                  if (dItem[filed] == item[filed]) {
                      dItem.data.push(item);
                  }
              });
          }
      })
      return dest;
  }

  const wsProtocol = window.location.protocol == "https:" ? "wss" : "ws"
  const ws = new WebSocket(wsProtocol + '://' + window.location.host + '/ws');
  ws.onopen = function (evt) {
      $.suiAlert({
          title: '实时通道建立',
          description: '可以实时获取最新监控数据啦',
          type: 'success',
          time: '2',
          position: 'top-center',
      });
  }
  ws.onmessage = function (evt) {
      const oldServers = statusCards.servers
      statusCards.servers = JSON.parse(evt.data)
      for (let i = 0; i < statusCards.servers.length; i++) {
          const ns = statusCards.servers[i];
          if (!ns.Host) ns.live = false
          else {
              const lastActive = new Date(ns.LastActive).getTime()
              if (Date.now() - lastActive > 20 * 1000) {
                  ns.live = false
              } else {
                  ns.live = true
              }
          }
      }
      statusCards.groups = groupingData(statusCards.servers, "Tag")
  }
  ws.onclose = function () {
      $.suiAlert({
          title: '实时通道断开',
          description: '无法实时获取最新监控数据咯',
          type: 'warning',
          time: '2',
          position: 'top-center',
      });
  }
  $('.ui.accordion')
      .accordion({"exclusive": false})
  ;
</script>
{{end}}