This is an automated email from the ASF dual-hosted git repository. ningjiang pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/servicecomb-pack.git
commit 3ee9034c3a3fa223affd726ac5868b40966d27b3 Author: Lei Zhang <[email protected]> AuthorDate: Thu Aug 8 14:09:27 2019 +0800 SCB-1411 Implement dashboard active transactions card --- alpha/alpha-core/pom.xml | 4 + .../pack/alpha/core/metrics/AlphaMetrics.java} | 21 +- .../pack/alpha/core}/metrics/MetricsBean.java | 2 +- .../pack/alpha/fsm/metrics/MetricsService.java | 2 + .../pack/alpha/server/api/APIControllerV1.java | 10 +- ...AlphaMetrics.java => AlphaMetricsEndpoint.java} | 4 +- .../alpha/server/api/APIControllerV1Tests.java | 8 +- .../pack/alpha/ui/TransactionController.java | 17 + .../main/resources/static/js/alpha-dashboard.js | 60 +++- .../src/main/resources/templates/index.html | 388 +++++++++++++-------- 10 files changed, 344 insertions(+), 172 deletions(-) diff --git a/alpha/alpha-core/pom.xml b/alpha/alpha-core/pom.xml index 5d91ca0..ec1829d 100644 --- a/alpha/alpha-core/pom.xml +++ b/alpha/alpha-core/pom.xml @@ -87,6 +87,10 @@ <artifactId>jackson-databind</artifactId> <version>${jackson.version}</version> </dependency> + <dependency> + <groupId>com.google.guava</groupId> + <artifactId>guava</artifactId> + </dependency> </dependencies> diff --git a/alpha/alpha-fsm/src/main/java/org/apache/servicecomb/pack/alpha/fsm/metrics/MetricsService.java b/alpha/alpha-core/src/main/java/org/apache/servicecomb/pack/alpha/core/metrics/AlphaMetrics.java similarity index 64% copy from alpha/alpha-fsm/src/main/java/org/apache/servicecomb/pack/alpha/fsm/metrics/MetricsService.java copy to alpha/alpha-core/src/main/java/org/apache/servicecomb/pack/alpha/core/metrics/AlphaMetrics.java index e1b675f..5f1c075 100644 --- a/alpha/alpha-fsm/src/main/java/org/apache/servicecomb/pack/alpha/fsm/metrics/MetricsService.java +++ b/alpha/alpha-core/src/main/java/org/apache/servicecomb/pack/alpha/core/metrics/AlphaMetrics.java @@ -15,14 +15,27 @@ * limitations under the License. */ -package org.apache.servicecomb.pack.alpha.fsm.metrics; +package org.apache.servicecomb.pack.alpha.core.metrics; -public class MetricsService { +import org.apache.servicecomb.pack.alpha.core.NodeStatus.TypeEnum; - private final MetricsBean metrics = new MetricsBean(); +public class AlphaMetrics { + private MetricsBean metrics; + private TypeEnum nodeType; - public MetricsBean metrics() { + public MetricsBean getMetrics() { return metrics; } + public void setMetrics(MetricsBean metrics) { + this.metrics = metrics; + } + + public TypeEnum getNodeType() { + return nodeType; + } + + public void setNodeType(TypeEnum nodeType) { + this.nodeType = nodeType; + } } diff --git a/alpha/alpha-fsm/src/main/java/org/apache/servicecomb/pack/alpha/fsm/metrics/MetricsBean.java b/alpha/alpha-core/src/main/java/org/apache/servicecomb/pack/alpha/core/metrics/MetricsBean.java similarity index 99% rename from alpha/alpha-fsm/src/main/java/org/apache/servicecomb/pack/alpha/fsm/metrics/MetricsBean.java rename to alpha/alpha-core/src/main/java/org/apache/servicecomb/pack/alpha/core/metrics/MetricsBean.java index 5f68ce4..fc45975 100644 --- a/alpha/alpha-fsm/src/main/java/org/apache/servicecomb/pack/alpha/fsm/metrics/MetricsBean.java +++ b/alpha/alpha-core/src/main/java/org/apache/servicecomb/pack/alpha/core/metrics/MetricsBean.java @@ -15,7 +15,7 @@ * limitations under the License. */ -package org.apache.servicecomb.pack.alpha.fsm.metrics; +package org.apache.servicecomb.pack.alpha.core.metrics; import com.google.common.util.concurrent.AtomicDouble; import java.util.concurrent.atomic.AtomicLong; diff --git a/alpha/alpha-fsm/src/main/java/org/apache/servicecomb/pack/alpha/fsm/metrics/MetricsService.java b/alpha/alpha-fsm/src/main/java/org/apache/servicecomb/pack/alpha/fsm/metrics/MetricsService.java index e1b675f..aa085fc 100644 --- a/alpha/alpha-fsm/src/main/java/org/apache/servicecomb/pack/alpha/fsm/metrics/MetricsService.java +++ b/alpha/alpha-fsm/src/main/java/org/apache/servicecomb/pack/alpha/fsm/metrics/MetricsService.java @@ -17,6 +17,8 @@ package org.apache.servicecomb.pack.alpha.fsm.metrics; +import org.apache.servicecomb.pack.alpha.core.metrics.MetricsBean; + public class MetricsService { private final MetricsBean metrics = new MetricsBean(); diff --git a/alpha/alpha-server/src/main/java/org/apache/servicecomb/pack/alpha/server/api/APIControllerV1.java b/alpha/alpha-server/src/main/java/org/apache/servicecomb/pack/alpha/server/api/APIControllerV1.java index c3b5394..f6eac8d 100644 --- a/alpha/alpha-server/src/main/java/org/apache/servicecomb/pack/alpha/server/api/APIControllerV1.java +++ b/alpha/alpha-server/src/main/java/org/apache/servicecomb/pack/alpha/server/api/APIControllerV1.java @@ -19,10 +19,11 @@ package org.apache.servicecomb.pack.alpha.server.api; import java.util.List; import java.util.Map; +import org.apache.servicecomb.pack.alpha.core.metrics.AlphaMetrics; import org.apache.servicecomb.pack.alpha.fsm.repository.TransactionRepository; import org.apache.servicecomb.pack.alpha.core.fsm.repository.model.GlobalTransaction; import org.apache.servicecomb.pack.alpha.core.fsm.repository.model.PagingGlobalTransactions; -import org.apache.servicecomb.pack.alpha.server.metrics.AlphaMetrics; +import org.apache.servicecomb.pack.alpha.server.metrics.AlphaMetricsEndpoint; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.http.ResponseEntity; import org.springframework.web.bind.annotation.GetMapping; @@ -36,14 +37,17 @@ import org.springframework.web.bind.annotation.RestController; public class APIControllerV1 { @Autowired - AlphaMetrics AlphaMetrics; + AlphaMetricsEndpoint alphaMetricsEndpoint; @Autowired(required = false) TransactionRepository transactionRepository; @GetMapping(value = "/metrics") ResponseEntity<AlphaMetrics> metrics() { - return ResponseEntity.ok(AlphaMetrics); + AlphaMetrics alphaMetrics = new AlphaMetrics(); + alphaMetrics.setMetrics(alphaMetricsEndpoint.getMetrics()); + alphaMetrics.setNodeType(alphaMetricsEndpoint.getNodeType()); + return ResponseEntity.ok(alphaMetrics); } @GetMapping(value = "/transaction/{globalTxId}") diff --git a/alpha/alpha-server/src/main/java/org/apache/servicecomb/pack/alpha/server/metrics/AlphaMetrics.java b/alpha/alpha-server/src/main/java/org/apache/servicecomb/pack/alpha/server/metrics/AlphaMetricsEndpoint.java similarity index 93% rename from alpha/alpha-server/src/main/java/org/apache/servicecomb/pack/alpha/server/metrics/AlphaMetrics.java rename to alpha/alpha-server/src/main/java/org/apache/servicecomb/pack/alpha/server/metrics/AlphaMetricsEndpoint.java index 1b4a1ca..4a88890 100644 --- a/alpha/alpha-server/src/main/java/org/apache/servicecomb/pack/alpha/server/metrics/AlphaMetrics.java +++ b/alpha/alpha-server/src/main/java/org/apache/servicecomb/pack/alpha/server/metrics/AlphaMetricsEndpoint.java @@ -19,14 +19,14 @@ package org.apache.servicecomb.pack.alpha.server.metrics; import org.apache.servicecomb.pack.alpha.core.NodeStatus; import org.apache.servicecomb.pack.alpha.core.NodeStatus.TypeEnum; -import org.apache.servicecomb.pack.alpha.fsm.metrics.MetricsBean; +import org.apache.servicecomb.pack.alpha.core.metrics.MetricsBean; import org.apache.servicecomb.pack.alpha.fsm.metrics.MetricsService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.context.annotation.Lazy; import org.springframework.stereotype.Component; @Component -public class AlphaMetrics { +public class AlphaMetricsEndpoint { @Autowired @Lazy diff --git a/alpha/alpha-server/src/test/java/org/apache/servicecomb/pack/alpha/server/api/APIControllerV1Tests.java b/alpha/alpha-server/src/test/java/org/apache/servicecomb/pack/alpha/server/api/APIControllerV1Tests.java index 502cf32..76202dd 100644 --- a/alpha/alpha-server/src/test/java/org/apache/servicecomb/pack/alpha/server/api/APIControllerV1Tests.java +++ b/alpha/alpha-server/src/test/java/org/apache/servicecomb/pack/alpha/server/api/APIControllerV1Tests.java @@ -40,13 +40,13 @@ import org.apache.servicecomb.pack.alpha.core.fsm.event.SagaStartedEvent; import org.apache.servicecomb.pack.alpha.core.fsm.event.TxEndedEvent; import org.apache.servicecomb.pack.alpha.core.fsm.event.TxStartedEvent; import org.apache.servicecomb.pack.alpha.core.fsm.event.base.BaseEvent; -import org.apache.servicecomb.pack.alpha.fsm.metrics.MetricsBean; +import org.apache.servicecomb.pack.alpha.core.metrics.MetricsBean; import org.apache.servicecomb.pack.alpha.fsm.metrics.MetricsService; import org.apache.servicecomb.pack.alpha.fsm.repository.TransactionRepository; import org.apache.servicecomb.pack.alpha.core.fsm.repository.model.GlobalTransaction; import org.apache.servicecomb.pack.alpha.core.fsm.repository.model.PagingGlobalTransactions; import org.apache.servicecomb.pack.alpha.core.fsm.repository.model.SagaSubTransaction; -import org.apache.servicecomb.pack.alpha.server.metrics.AlphaMetrics; +import org.apache.servicecomb.pack.alpha.server.metrics.AlphaMetricsEndpoint; import org.junit.Test; import org.junit.runner.RunWith; import org.springframework.beans.factory.annotation.Autowired; @@ -61,14 +61,14 @@ import org.springframework.test.web.servlet.result.MockMvcResultMatchers; import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.get; @RunWith(SpringRunner.class) -@WebMvcTest(value = {APIControllerV1.class, AlphaMetrics.class}) +@WebMvcTest(value = {APIControllerV1.class, AlphaMetricsEndpoint.class}) public class APIControllerV1Tests { @Autowired private MockMvc mockMvc; @Autowired - AlphaMetrics alphaMetrics; + AlphaMetricsEndpoint alphaMetricsEndpoint; @MockBean MetricsService metricsService; diff --git a/alpha/alpha-ui/src/main/java/org/apache/servicecomb/pack/alpha/ui/TransactionController.java b/alpha/alpha-ui/src/main/java/org/apache/servicecomb/pack/alpha/ui/TransactionController.java index bbadf70..b8015b6 100644 --- a/alpha/alpha-ui/src/main/java/org/apache/servicecomb/pack/alpha/ui/TransactionController.java +++ b/alpha/alpha-ui/src/main/java/org/apache/servicecomb/pack/alpha/ui/TransactionController.java @@ -24,6 +24,7 @@ import java.util.Map; import javax.servlet.http.HttpServletRequest; import org.apache.servicecomb.pack.alpha.core.fsm.repository.model.GlobalTransaction; import org.apache.servicecomb.pack.alpha.core.fsm.repository.model.PagingGlobalTransactions; +import org.apache.servicecomb.pack.alpha.core.metrics.AlphaMetrics; import org.apache.servicecomb.pack.alpha.ui.vo.DataTablesRequestDTO; import org.apache.servicecomb.pack.alpha.ui.vo.DataTablesResponseDTO; import org.apache.servicecomb.pack.alpha.ui.vo.EventDTO; @@ -225,6 +226,12 @@ public class TransactionController implements ApplicationListener<WebServerIniti return transactionRowDTOS; } + @GetMapping("/ui/transaction/metrics") + @ResponseBody + public AlphaMetrics getMetrics() { + return getAlphaMetrics(); + } + private GlobalTransaction findGlobalTransactionByGlobalTxId(String globalTxId){ UriComponents uriComponents = UriComponentsBuilder .fromUriString("http://localhost:"; + serverPort + "/alpha/api/v1/transaction/"+globalTxId) @@ -235,6 +242,16 @@ public class TransactionController implements ApplicationListener<WebServerIniti return globalTransaction; } + private AlphaMetrics getAlphaMetrics(){ + UriComponents uriComponents = UriComponentsBuilder + .fromUriString("http://localhost:"; + serverPort + "/alpha/api/v1/metrics") + .build(); + ResponseEntity<AlphaMetrics> entity = restTemplate + .getForEntity(uriComponents.toUriString(), AlphaMetrics.class); + AlphaMetrics alphaMetrics = entity.getBody(); + return alphaMetrics; + } + @Override public void onApplicationEvent(WebServerInitializedEvent webServerInitializedEvent) { serverPort = webServerInitializedEvent.getWebServer().getPort(); diff --git a/alpha/alpha-ui/src/main/resources/static/js/alpha-dashboard.js b/alpha/alpha-ui/src/main/resources/static/js/alpha-dashboard.js index d64d657..d661bd7 100644 --- a/alpha/alpha-ui/src/main/resources/static/js/alpha-dashboard.js +++ b/alpha/alpha-ui/src/main/resources/static/js/alpha-dashboard.js @@ -18,10 +18,10 @@ $(document).ready(function () { $.ajax('/ui/transaction/statistics', { success: function (data) { - $('#statistics-total').text(data.total) - $('#statistics-successful').text(data.successful) - $('#statistics-compensated').text(data.compensated) - $('#statistics-failed').text(data.failed) + $('#statistics-total').text(digitUnit(data.total,0)); + $('#statistics-successful').text(digitUnit(data.successful,0)); + $('#statistics-compensated').text(digitUnit(data.compensated,0)); + $('#statistics-failed').text(digitUnit(data.failed,0)); }, error: function (state) { // TODO show message @@ -46,5 +46,57 @@ $(document).ready(function () { } }); + $.ajax('/ui/transaction/metrics', { + success: function (data) { + //events + $('#metrics-events-received').text(digitUnit(data.metrics.eventReceived,0)); + $('#metrics-events-accepted').text(digitUnit(data.metrics.eventAccepted,0)); + $('#metrics-events-rejected').text(digitUnit(data.metrics.eventRejected,0)); + $('#metrics-events-average-time').text(data.metrics.eventAvgTime+' ms / event'); + $('#metrics-events-received-progress').css('width',data.metrics.eventReceived==0?'0%':'100%'); + $('#metrics-events-accepted-progress').css('width',(data.metrics.eventAccepted/data.metrics.eventReceived)*100+'%'); + $('#metrics-events-rejected-progress').css('width',(data.metrics.eventRejected/data.metrics.eventReceived)*100+'%'); + //actors + $('#metrics-actors-received').text(digitUnit(data.metrics.actorReceived,0)); + $('#metrics-actors-accepted').text(digitUnit(data.metrics.actorAccepted,0)); + $('#metrics-actors-rejected').text(digitUnit(data.metrics.actorRejected,0)); + $('#metrics-actors-average-time').text(data.metrics.actorAvgTime+' ms / event'); + $('#metrics-actors-received-progress').css('width',data.metrics.actorReceived==0?'0%':'100%'); + $('#metrics-actors-accepted-progress').css('width',(data.metrics.actorAccepted/data.metrics.actorReceived)*100+'%'); + $('#metrics-actors-rejected-progress').css('width',(data.metrics.actorRejected/data.metrics.actorReceived)*100+'%'); + //persistence + $('#metrics-persistence-received').text(digitUnit(data.metrics.repositoryReceived,0)); + $('#metrics-persistence-accepted').text(digitUnit(data.metrics.repositoryAccepted,0)); + $('#metrics-persistence-rejected').text(digitUnit(data.metrics.repositoryRejected,0)); + $('#metrics-persistence-average-time').text(data.metrics.repositoryAvgTime+' ms / transaction'); + $('#metrics-persistence-received-progress').css('width',data.metrics.repositoryReceived==0?'0%':'100%'); + $('#metrics-persistence-accepted-progress').css('width',(data.metrics.repositoryAccepted/data.metrics.repositoryReceived)*100+'%'); + $('#metrics-persistence-rejected-progress').css('width',(data.metrics.repositoryRejected/data.metrics.repositoryReceived)*100+'%'); + //saga + $('#metrics-saga-begin').text(digitUnit(data.metrics.sagaBeginCounter,0)); + $('#metrics-saga-end').text(digitUnit(data.metrics.sagaEndCounter,0)); + $('#metrics-saga-average-time').text(data.metrics.sagaAvgTime+' ms / transaction'); + $('#metrics-saga-begin-progress').css('width',data.metrics.sagaBeginCounter==0?'0%':'100%'); + $('#metrics-saga-end-progress').css('width',(data.metrics.sagaEndCounter/data.metrics.sagaBeginCounter)*100+'%'); + //counter + $('#metrics-committed').text(digitUnit(data.metrics.committed,2)); + $('#metrics-compensated').text(digitUnit(data.metrics.compensated,2)); + $('#metrics-suspended').text(digitUnit(data.metrics.suspended,2)); + }, + error: function (state) { + // TODO show message + } + }); + function digitUnit(n, d) { + if (n >= 1000) { + var x = ('' + parseInt(n, 10)).length; + var d = Math.pow(10, x+1) + var arr = " kMGTPE"; + x -= x % 3; + return Math.round(n * d / Math.pow(10, x)) / d + arr[x / 3].trim(); + } else { + return n; + } + } }); \ No newline at end of file diff --git a/alpha/alpha-ui/src/main/resources/templates/index.html b/alpha/alpha-ui/src/main/resources/templates/index.html index 75f1056..7d4f7b5 100644 --- a/alpha/alpha-ui/src/main/resources/templates/index.html +++ b/alpha/alpha-ui/src/main/resources/templates/index.html @@ -16,219 +16,299 @@ --> <!DOCTYPE html> -<html xmlns:layout="http://www.w3.org/1999/xhtml"; xmlns:th="http://www.w3.org/1999/xhtml"; layout:decorate="~{fragments/main_layout}"> +<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> +<div layout:fragment="content" class="container-fluid"> + <!-- Page Heading --> + <h1 class="h3 mb-4 text-gray-800">Dashboard</h1> - <!-- Content Row --> - <div class="row"> + <!-- 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"> - <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 Transaction</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> + <!-- 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"> + <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 + Transaction </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> </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"> - <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 Transactions</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> + <!-- 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"> + <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 + Transactions </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> </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"> - <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 Transaction</div> - <div class="h5 mb-0 font-weight-bold text-gray-800" id="statistics-compensated">0</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"> + <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 + Transaction </div> - <div class="col-auto"> - <i class="fas fa-clipboard-list fa-2x text-gray-300"></i> + <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> </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"> - <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 Transactions</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> + <!-- 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"> + <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 + Transactions </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> </div> </div> + </div> - <!-- Content Row --> - <div class="row"> + <!-- 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">Health Overview</h6> - </div> - <!-- Card Body --> - <div class="card-body"> - <div class="chart-area"> - <canvas></canvas> + <!-- 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-8 mb-4"> + <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> + <div class="col-xl-4 col-md-8 mb-4"> + <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> + <div class="col-xl-4 col-md-8 mb-4"> + <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> </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> + <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> - <!-- Card Body --> - <div class="card-body"> - <div class="slow-topn"> + <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">Persistence<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> - <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">Health Overview</h6> - </div> - <!-- Card Body --> - <div class="card-body"> - <div class="chart-area"> - <canvas></canvas> - </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="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">System Info</h6> + + <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> - <!-- 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 class="row"> + <div class="col-xl-5 col-lg-5"> + <div class="mb-1 small">CPUS</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 class="col-xl-7 col-lg-7"> + <div class="mb-1 small" th:text="${systemInfo.cpus}"></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> + <div class="row"> + <div class="col-xl-5 col-lg-5"> + <div class="mb-1 small">SYSTEM LOAD</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 class="col-xl-7 col-lg-7"> + <div class="mb-1 small" th:text="${systemInfo.systemLoad}"></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> + <hr/> + <div class="row"> + <div class="col-xl-5 col-lg-5"> + <div class="mb-1 small">THREAD LIVE</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 class="col-xl-7 col-lg-7"> + <div class="mb-1 small" th:text="${systemInfo.threadsLive}"></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">THREAD DAEMON</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 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 layout:fragment="scripts"> - <script th:src="@{/js/alpha-dashboard.js}"></script> </div> +</div> +<div layout:fragment="scripts"> + <script th:src="@{/js/alpha-dashboard.js}"></script> +</div> </body> </html>
