1.4.5.2

EdgeAdmin/web/views/@default/clusters/cluster/boards/index.html

@@ -0,0 +1,111 @@
+{$layout}
+{$template "/echarts"}
+
+<second-menu>
+    <menu-item :href="'/clusters/cluster?clusterId=' + clusterId">{{currentClusterName}}</menu-item>
+    <span class="disabled item" style="padding: 0">&raquo;</span>
+    <span class="item active">看板</span>
+</second-menu>
+
+<!-- 加载中 -->
+<div style="margin-top: 0.8em">
+    <div class="ui message loading" v-if="isLoading">
+        <div class="ui active inline loader small"></div>  &nbsp; 数据加载中...
+    </div>
+</div>
+
+<columns-grid v-show="!isLoading">
+    <div class="ui column">
+        <h4>在线节点<link-icon :href="'/clusters/cluster/nodes?clusterId=' + clusterId"></link-icon></h4>
+        <div class="value"><span class="green">{{board.countActiveNodes}}</span>个</div>
+    </div>
+    <div class="ui column">
+        <h4>离线节点<link-icon :href="'/clusters/cluster/nodes?clusterId=' + clusterId"></link-icon></h4>
+        <div class="value"><span :class="{red: board.countInactiveNodes > 0}">{{board.countInactiveNodes}}</span>个</div>
+    </div>
+    <div class="ui column">
+        <h4>网站</h4>
+        <div class="value"><span>{{board.countServers}}</span>个</div>
+    </div>
+    <div class="ui column">
+        <h4>用户</h4>
+        <div class="value"><span>{{board.countUsers}}</span>个</div>
+    </div>
+    <div class="ui column">
+        <h4>当月流量</h4>
+        <div class="value"><span>{{monthlyTrafficFormat[0]}}</span>{{monthlyTrafficFormat[1]}}</div>
+    </div>
+    <div class="ui column">
+        <h4>昨日流量</h4>
+        <div class="value"><span>{{yesterdayTrafficFormat[0]}}</span>{{yesterdayTrafficFormat[1]}}</div>
+    </div>
+    <div class="ui column with-border">
+        <h4>今日流量</h4>
+        <div class="value"><span>{{todayTrafficFormat[0]}}</span>{{todayTrafficFormat[1]}}</div>
+    </div>
+</columns-grid>
+
+<chart-columns-grid>
+    <div class="ui column">
+        <div class="ui menu text blue" v-show="!isLoading">
+            <a href="" class="item" :class="{active: trafficTab == 'hourly'}" @click.prevent="selectTrafficTab('hourly')">24小时流量趋势</a>
+            <a href="" class="item" :class="{active: trafficTab == 'daily'}" @click.prevent="selectTrafficTab('daily')">15天流量趋势</a>
+        </div>
+        <div class="ui divider"></div>
+
+        <!-- 按小时统计流量 -->
+        <div class="chart-box" id="hourly-traffic-chart" v-show="trafficTab == 'hourly'"></div>
+
+        <!-- 按日统计流量 -->
+        <div class="chart-box" id="daily-traffic-chart" v-show="trafficTab == 'daily'"></div>
+    </div>
+
+    <div class="ui column">
+        <div class="ui menu text blue" v-show="!isLoading">
+            <a href="" class="item" :class="{active: requestsTab == 'hourly'}" @click.prevent="selectRequestsTab('hourly')">24小时访问量趋势</a>
+            <a href="" class="item" :class="{active: requestsTab == 'daily'}" @click.prevent="selectRequestsTab('daily')">15天访问量趋势</a>
+        </div>
+        <div class="ui divider"></div>
+
+        <!-- 按小时统计访问量 -->
+        <div class="chart-box" id="hourly-requests-chart" v-show="requestsTab == 'hourly'"></div>
+
+        <!-- 按日统计访问量 -->
+        <div class="chart-box" id="daily-requests-chart" v-show="requestsTab == 'daily'"></div>
+    </div>
+
+    <div class="ui column">
+        <!-- 域名排行 -->
+        <h4 v-show="!isLoading">域名访问排行 <span>（24小时）</span></h4>
+        <div class="ui divider"></div>
+        <div class="chart-box" id="top-domains-chart"><loading-message>数据加载中...</loading-message></div>
+    </div>
+
+    <div class="ui column">
+        <!-- 节点排行 -->
+        <h4 v-show="!isLoading">节点访问排行 <span>（24小时）</span></h4>
+        <div class="ui divider"></div>
+        <div class="chart-box" id="top-nodes-chart"></div>
+    </div>
+    <div class="ui column">
+        <div class="ui menu text blue" v-show="!isLoading">
+            <a href="" class="item" :class="{active: nodeStatusTab == 'cpu'}" @click.prevent="selectNodeStatusTab('cpu')">节点CPU</a>
+            <a href="" class="item" :class="{active: nodeStatusTab == 'memory'}" @click.prevent="selectNodeStatusTab('memory')">节点内存</a>
+            <a href="" class="item" :class="{active: nodeStatusTab == 'load'}" @click.prevent="selectNodeStatusTab('load')">节点负载</a>
+        </div>
+        <div class="ui divider"></div>
+
+        <div class="chart-box" id="cpu-chart" v-show="nodeStatusTab == 'cpu'"></div>
+        <div class="chart-box" id="memory-chart" v-show="nodeStatusTab == 'memory'"></div>
+        <div class="chart-box" id="load-chart" v-show="nodeStatusTab == 'load'"></div>
+    </div>
+
+    <!-- 指标 -->
+    <metric-chart v-for="chart in metricCharts"
+                  :key="chart.id"
+                  :v-chart="chart.chart"
+                  :v-stats="chart.stats"
+                  :v-item="chart.item"
+                  :v-column="true">
+    </metric-chart>
+</chart-columns-grid>