| <!-- |
| ~ Licensed to the Apache Software Foundation (ASF) under one or more |
| ~ contributor license agreements. See the NOTICE file distributed with |
| ~ this work for additional information regarding copyright ownership. |
| ~ The ASF licenses this file to You under the Apache License, Version 2.0 |
| ~ (the "License"); you may not use this file except in compliance with |
| ~ the License. You may obtain a copy of the License at |
| ~ |
| ~ http://www.apache.org/licenses/LICENSE-2.0 |
| ~ |
| ~ Unless required by applicable law or agreed to in writing, software |
| ~ distributed under the License is distributed on an "AS IS" BASIS, |
| ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| ~ See the License for the specific language governing permissions and |
| ~ limitations under the License. |
| --> |
| |
| <!DOCTYPE html> |
| <html xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml" |
| layout:decorate="~{fragments/main_layout}"> |
| <head> |
| <title>Alpha Admin - Dashboard</title> |
| </head> |
| <body> |
| <div layout:fragment="content" class="container-fluid"> |
| <!-- Page Heading --> |
| <h1 class="h3 mb-4 text-gray-800">Dashboard</h1> |
| |
| <!-- Content Row --> |
| <div class="row"> |
| |
| <!-- Total Transaction Card --> |
| <div class="col-xl-3 col-md-6 mb-4"> |
| <div class="card border-left-primary shadow h-100 py-2"> |
| <div class="card-body" style="padding-bottom: 5px"> |
| <div class="row no-gutters align-items-center"> |
| <div class="col mr-2"> |
| <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Total</div> |
| <div class="h5 mb-0 font-weight-bold text-gray-800" id="statistics-total">0</div> |
| </div> |
| <div class="col-auto"> |
| <i class="fas fa-clipboard-list fa-2x text-gray-300"></i> |
| </div> |
| </div> |
| <div class="row no-gutters align-items-center"> |
| <div class="small" style="padding-top: 15px" id="statistics-total-tip">0</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <!-- Successful Transaction Card --> |
| <div class="col-xl-3 col-md-6 mb-4"> |
| <div class="card border-left-success shadow h-100 py-2"> |
| <div class="card-body" style="padding-bottom: 5px"> |
| <div class="row no-gutters align-items-center"> |
| <div class="col mr-2"> |
| <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Successful</div> |
| <div class="h5 mb-0 font-weight-bold text-gray-800" id="statistics-successful">0</div> |
| </div> |
| <div class="col-auto"> |
| <i class="fas fa-clipboard-list fa-2x text-gray-300"></i> |
| </div> |
| </div> |
| <div class="row no-gutters align-items-center"> |
| <div class="small" style="padding-top: 15px" id="statistics-successful-tip">0</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <!-- Compensated Transaction Card --> |
| <div class="col-xl-3 col-md-6 mb-4"> |
| <div class="card border-left-warning shadow h-100 py-2"> |
| <div class="card-body" style="padding-bottom: 5px"> |
| <div class="row no-gutters align-items-center"> |
| <div class="col mr-2"> |
| <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Compensated</div> |
| <div class="h5 mb-0 font-weight-bold text-gray-800" id="statistics-compensated">0 |
| </div> |
| </div> |
| <div class="col-auto"> |
| <i class="fas fa-clipboard-list fa-2x text-gray-300"></i> |
| </div> |
| </div> |
| <div class="row no-gutters align-items-center"> |
| <div class="small" style="padding-top: 15px" id="statistics-compensated-tip">0</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <!-- Failed Transactions Card --> |
| <div class="col-xl-3 col-md-6 mb-4"> |
| <div class="card border-left-danger shadow h-100 py-2"> |
| <div class="card-body" style="padding-bottom: 5px"> |
| <div class="row no-gutters align-items-center"> |
| <div class="col mr-2"> |
| <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">Failed</div> |
| <div class="h5 mb-0 font-weight-bold text-gray-800" id="statistics-failed">0</div> |
| </div> |
| <div class="col-auto"> |
| <i class="fas fa-clipboard-list fa-2x text-gray-300"></i> |
| </div> |
| </div> |
| <div class="row no-gutters align-items-center"> |
| <div class="small" style="padding-top: 15px" id="statistics-failed-tip">0</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <!-- Content Row --> |
| <div class="row"> |
| |
| <!-- Health Chart --> |
| <div class="col-xl-8 col-lg-7"> |
| <div class="card shadow mb-4"> |
| <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between"> |
| <h6 class="m-0 font-weight-bold text-primary">Active Transactions</h6> |
| </div> |
| <!-- Card Body --> |
| <div class="card-body"> |
| <div class="row"> |
| <div class="col-xl-4 col-md-4 mb-4" style="margin-bottom: 0px!important;"> |
| <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">COMMITTED</div> |
| <div class="h5 mb-0 font-weight-bold text-gray-800" id="metrics-committed">0</div> |
| <div class="row no-gutters align-items-center"> |
| <div class="small" style="padding-top: 25px" id="metrics-committed-tip">0</div> |
| </div> |
| </div> |
| <div class="col-xl-4 col-md-4 mb-4" style="margin-bottom: 0px!important;"> |
| <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">COMPENSATED</div> |
| <div class="h5 mb-0 font-weight-bold text-gray-800" id="metrics-compensated">0</div> |
| <div class="row no-gutters align-items-center"> |
| <div class="small" style="padding-top: 25px" id="metrics-compensated-tip">0</div> |
| </div> |
| </div> |
| <div class="col-xl-4 col-md-4 mb-4" style="margin-bottom: 0px!important;"> |
| <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">SUSPENDED</div> |
| <div class="h5 mb-0 font-weight-bold text-gray-800" id="metrics-suspended">0</div> |
| <div class="row no-gutters align-items-center"> |
| <div class="small" style="padding-top: 25px" id="metrics-suspended-tip">0</div> |
| </div> |
| </div> |
| </div> |
| <hr/> |
| <div class="row"> |
| <div class="col-xl-6 col-lg-6"> |
| <!-- Events health--> |
| <h4 class="small font-weight-bold">Events<span |
| class="float-right font-weight-light" id="metrics-events-average-time"></span></h4> |
| <div class="small">Received<span id="metrics-events-received" class="float-right">0</span></div> |
| <div class="progress mb-3"> |
| <div id="metrics-events-received-progress" class="progress-bar" role="progressbar" style="width: 0%" |
| aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> |
| </div> |
| <div class="small">Accepted<span id="metrics-events-accepted" class="float-right">0</span></div> |
| <div class="progress mb-3"> |
| <div id="metrics-events-accepted-progress" class="progress-bar bg-success" role="progressbar" style="width: 0%" |
| aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> |
| </div> |
| <div class="small">Rejected<span id="metrics-events-rejected" class="float-right">0</span></div> |
| <div class="progress mb-3"> |
| <div id="metrics-events-rejected-progress" class="progress-bar bg-danger" role="progressbar" style="width: 0%" |
| aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> |
| </div> |
| </div> |
| <div class="col-xl-6 col-lg-6"> |
| <!-- Actor health --> |
| <h4 class="small font-weight-bold">Actors<span |
| class="float-right font-weight-light" id="metrics-actors-average-time"></span></h4> |
| <div class="small">Received<span id="metrics-actors-received" class="float-right">0</span></div> |
| <div class="progress mb-3"> |
| <div id="metrics-actors-received-progress" class="progress-bar" role="progressbar" style="width: 0%" |
| aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> |
| </div> |
| <div class="small">Accepted<span id="metrics-actors-accepted" class="float-right">0</span></div> |
| <div class="progress mb-3"> |
| <div id="metrics-actors-accepted-progress" class="progress-bar bg-success" role="progressbar" style="width: 0%" |
| aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> |
| </div> |
| <div class="small">Rejected<span id="metrics-actors-rejected" class="float-right">0</span></div> |
| <div class="progress mb-3"> |
| <div id="metrics-actors-rejected-progress" class="progress-bar bg-danger" role="progressbar" style="width: 0%" |
| aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> |
| </div> |
| </div> |
| </div> |
| <hr/> |
| <div class="row"> |
| <div class="col-xl-6 col-lg-6"> |
| <h4 class="small font-weight-bold">Sagas<span |
| class="float-right font-weight-light" id="metrics-saga-average-time"></span></h4> |
| <div class="small">Begin<span id="metrics-saga-begin" class="float-right">0</span></div> |
| <div class="progress mb-3"> |
| <div id="metrics-saga-begin-progress" class="progress-bar" role="progressbar" style="width: 0%" |
| aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> |
| </div> |
| <div class="small">End<span id="metrics-saga-end" class="float-right"></span></div> |
| <div class="progress mb-3"> |
| <div id="metrics-saga-end-progress" class="progress-bar bg-success" role="progressbar" style="width: 0%" |
| aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> |
| </div> |
| </div> |
| <div class="col-xl-6 col-lg-6"> |
| <!-- Persistence health --> |
| <h4 class="small font-weight-bold">DB<span |
| class="float-right font-weight-light" id="metrics-persistence-average-time"></span></h4> |
| <div class="small">Received<span id="metrics-persistence-received" class="float-right">0</span></div> |
| <div class="progress mb-3"> |
| <div id="metrics-persistence-received-progress" class="progress-bar" role="progressbar" style="width: 0%" |
| aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> |
| </div> |
| <div class="small">Accepted<span id="metrics-persistence-accepted" class="float-right">0</span></div> |
| <div class="progress mb-3"> |
| <div id="metrics-persistence-accepted-progress" class="progress-bar bg-success" role="progressbar" style="width: 0%" |
| aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> |
| </div> |
| <div class="small">Rejected<span id="metrics-persistence-rejected" class="float-right">0</span></div> |
| <div class="progress mb-3"> |
| <div id="metrics-persistence-rejected-progress" class="progress-bar bg-danger" role="progressbar" style="width: 0%" |
| aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <!-- Slow Transaction Top N --> |
| <div class="col-xl-4 col-lg-5"> |
| <div class="card shadow mb-4"> |
| <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between"> |
| <h6 class="m-0 font-weight-bold text-primary">Top 10 Slow Transactions</h6> |
| </div> |
| <!-- Card Body --> |
| <div class="card-body"> |
| <div class="slow-topn"></div> |
| </div> |
| </div> |
| |
| <!-- Info Card --> |
| |
| <div class="card shadow mb-4"> |
| <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between"> |
| <h6 class="m-0 font-weight-bold text-primary">System Info</h6> |
| </div> |
| <!-- Card Body --> |
| <div class="card-body"> |
| <div class="row"> |
| <div class="col-xl-5 col-lg-5"> |
| <div class="mb-1 small">UPTIME</div> |
| </div> |
| <div class="col-xl-7 col-lg-7"> |
| <div class="mb-1 small" th:text="${systemInfo.upTime}"></div> |
| </div> |
| </div> |
| <div class="row"> |
| <div class="col-xl-5 col-lg-5"> |
| <div class="mb-1 small">CPUS</div> |
| </div> |
| <div class="col-xl-7 col-lg-7"> |
| <div class="mb-1 small" th:text="${systemInfo.cpus}"></div> |
| </div> |
| </div> |
| <div class="row"> |
| <div class="col-xl-5 col-lg-5"> |
| <div class="mb-1 small">SYSTEM LOAD</div> |
| </div> |
| <div class="col-xl-7 col-lg-7"> |
| <div class="mb-1 small" th:text="${systemInfo.systemLoad}"></div> |
| </div> |
| </div> |
| <hr/> |
| <div class="row"> |
| <div class="col-xl-5 col-lg-5"> |
| <div class="mb-1 small">THREAD LIVE</div> |
| </div> |
| <div class="col-xl-7 col-lg-7"> |
| <div class="mb-1 small" th:text="${systemInfo.threadsLive}"></div> |
| </div> |
| </div> |
| <div class="row"> |
| <div class="col-xl-5 col-lg-5"> |
| <div class="mb-1 small">THREAD DAEMON</div> |
| </div> |
| <div class="col-xl-7 col-lg-7"> |
| <div class="mb-1 small" th:text="${systemInfo.threadsDaemon}"></div> |
| </div> |
| </div> |
| <div class="row"> |
| <div class="col-xl-5 col-lg-5"> |
| <div class="mb-1 small">THREAD PEAK</div> |
| </div> |
| <div class="col-xl-7 col-lg-7"> |
| <div class="mb-1 small" th:text="${systemInfo.threadsPeak}"></div> |
| </div> |
| </div> |
| <hr/> |
| <div class="row"> |
| <div class="col-xl-5 col-lg-5"> |
| <div class="mb-1 small">GC COUNT</div> |
| </div> |
| <div class="col-xl-7 col-lg-7"> |
| <div class="mb-1 small" th:text="${systemInfo.gcCount}"></div> |
| </div> |
| </div> |
| <div class="row"> |
| <div class="col-xl-5 col-lg-5"> |
| <div class="mb-1 small">GC TIME</div> |
| </div> |
| <div class="col-xl-7 col-lg-7"> |
| <div class="mb-1 small" th:text="${systemInfo.gcTime} + ' sec'"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div layout:fragment="scripts"> |
| <script th:src="@{/js/alpha-dashboard.js}"></script> |
| <script th:src="@{/webjars/sockjs-client/sockjs.min.js}"></script> |
| <script th:src="@{/webjars/stomp-websocket/stomp.min.js}"></script> |
| </div> |
| </body> |
| </html> |
