Skip to content

Commit

Permalink
Improve information and fix a bug at loading (#114)
Browse files Browse the repository at this point in the history
  • Loading branch information
@pierre-yves-monnet
pierre-yves-monnet authored May 7, 2023
1 parent 0b239fb commit a87980d
Show file tree
Hide file tree
Showing 9 changed files with 166 additions and 113 deletions.
8 changes: 4 additions & 4 deletions pom.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,11 @@
<maven.compiler.target>${java.version}</maven.compiler.target>
<maven.compiler.source>${java.version}</maven.compiler.source>

<!-- 8.1.9 -->
<!--Version-->
<zeebe.version>8.2.0</zeebe.version>
<zeebe-client.version>8.2.3</zeebe-client.version>
<connector-core.version>0.8.1</connector-core.version>
<connector-validation.version>0.8.1</connector-validation.version>
<zeebe-client.version>8.2.4</zeebe-client.version>
<connector-core.version>0.9.0</connector-core.version>
<connector-validation.version>0.9.0</connector-validation.version>

<!-- Access file -->
<filestorage.version>1.1.0</filestorage.version>
Expand Down
8 changes: 4 additions & 4 deletions src/main/frontend/src/dashboard/Dashboard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

import React from 'react';
import {Button, Select, TextInput} from "carbon-components-react";
import {ArrowRepeat} from 'react-bootstrap-icons';
import {ArrowRepeat, XCircle} from 'react-bootstrap-icons';

import GeneralDashboard from "./GeneralDashboard";
import RunnerDashboard from "./RunnerDashboard";
Expand Down Expand Up @@ -55,10 +55,10 @@ class Dashboard extends React.Component {

render() {
// console.log("dashboard.render display="+JSON.stringify(this.state.display));
return (<div class={"container"}>
return (<div className={"container"}>
<GeneralDashboard dashboard={this.state.dashboard} dashboardComponent={this}
timestamp={this.state.dashboard.timestamp}/>
<div class="row">
<div className="row">
<div className="col-md-1">
<h1 className="title">Details</h1>
</div>
Expand Down Expand Up @@ -95,7 +95,7 @@ class Dashboard extends React.Component {
style={{marginLeft: "10px", fontSize: "10px"}}
disabled={this.state.display.loading}
onClick={() => this.setToggleFilter("showOnlyError")}>
Only Errors
<XCircle style={{color:"red"}}/> Only Errors
</button>
<button className={this.getButtonClass(this.state.display.showOnlyOverThreshold)}
style={{fontSize: "10px"}}
Expand Down
9 changes: 5 additions & 4 deletions src/main/frontend/src/dashboard/GeneralDashboard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ class GeneralDashboard extends React.Component {
// console.log("GeneralDashboard.render: period="+this.state.period);
return (
<div className="box container">
<div class="row">
<div className="row">
<div className="col-md-8">
<h1 className="title is-5"> total jobs in last period </h1>
</div>
Expand All @@ -53,7 +53,7 @@ class GeneralDashboard extends React.Component {
</Select>
</div>
</div>
<div class="row">
<div className="row">
<div className="col-md-8">
<h1 className="title is-5">
<span className="has-text-primary"
Expand All @@ -65,8 +65,9 @@ class GeneralDashboard extends React.Component {
</div>
</div>

<div class="row">
<progress className="progress is-large is-primary" value="1" max="1"></progress>
<div className="row">
<progress className="progress is-large is-primary" value={this.state.dashboard.totalExecutions}
max={this.state.dashboard.totalExecutionsSucceeded}></progress>
</div>
</div>

Expand Down
77 changes: 53 additions & 24 deletions src/main/frontend/src/dashboard/RunnerMonitoring.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@

import React from 'react';
import {Button, Tab, Tabs} from "react-bootstrap";
import { NumberInput} from "carbon-components-react";

import RestCallService from "../services/RestCallService";
import RunnerChart from "./RunnerChart";
Expand All @@ -22,14 +23,14 @@ class RunnerMonitoring extends React.Component {
this.state = {
runner: props.runnerDisplay,
timestamp: props.timestamp,
status:"",
status: "",
display: {
loading: false,
pageNumberErrors: 0,
pageNumberEExecutions: 0,
pageNumberOperations: 0,
},
operations:{}
operations: {}
};
this.refreshState = this.refreshState.bind(this);
}
Expand Down Expand Up @@ -62,7 +63,7 @@ class RunnerMonitoring extends React.Component {
<div>
<div style={{position: "absolute", top: "0", right: "0"}}>
<Button className="btn btn-success btn-sm"
onClick={() => this.refreshLoadAllStatistics()}
onClick={() => this.refreshLoadAllStatistics()}
disabled={this.state.display.loading}>
<ArrowRepeat/> Refresh
</Button>
Expand All @@ -72,7 +73,7 @@ class RunnerMonitoring extends React.Component {
<ControllerPage errorMessage={this.state.status} loading={this.state.display.loading}/>


<div style={{paddingTop: "10px"}}>
<div className="row" style={{paddingTop: "10px"}}>
<div>
<Button className={this.getCssStartButton()}
style={{borderRadius: "2px", border: "1px solid"}}
Expand All @@ -87,20 +88,33 @@ class RunnerMonitoring extends React.Component {
{this.state.labelBtnStop}
</Button>
</div>

</div>
<div style={{padding: "0px 0px 20px 0px"}}>
<div className="row" style={{paddingTop: "10px"}}>
<div className="col-md-4">
<NumberInput label="Threshold (in milliseconds)"
disabled={this.state.display.loading}
readonly="true"
value={this.state.runner.threshold}
onChange={(event) => {
this.setThreshold(event.target.value);
}}/>
</div>
</div>
<div className="row" style={{paddingTop: "10px"}}>
{this.state.runner.statistic.executions} total,
{this.state.runner.statistic.executionsSucceeded} succeeded,
{this.state.runner.statistic.executionsFailed} failed,
{this.state.runner.statistic.executionsBpmnErrors} BPMN Error
</div>
<progress class="progress is-small is-primary"
value="{this.state.runner.statistic.progressExecutionsSucceeded}"
max="{this.state.runner.statistic.progressExecutions}"></progress>
<div>
<i>Average {this.state.runner.performance.averageTimeInMs} ms,
Pic {this.state.runner.performance.picTimeInMs} ms</i>
<div className="row">
<progress class="progress is-small is-primary"
value="{this.state.runner.statistic.executionsSucceeded}"
max="{this.state.runner.statistic.executions}"></progress>

<div>
<i>Average {this.state.runner.performance.averageTimeInMs} ms,
Pic {this.state.runner.performance.picTimeInMs} ms</i>
</div>
</div>


Expand Down Expand Up @@ -149,7 +163,7 @@ class RunnerMonitoring extends React.Component {
{this.state.runner && this.state.runner.performance &&
this.state.runner.performance.listIntervals.map((interval, _index) =>
<tr>
<td>{interval.humanTimeSlot}</td>
<td style={{fontSize: "10px", whiteSpace: "nowrap"}}>{interval.humanTimeSlot}</td>
<td style={{textAlign: "right"}}>{interval.executions}</td>
<td style={{textAlign: "right"}}>{interval.executionSucceeded}</td>
<td style={{textAlign: "right"}}>{interval.executionBpmnErrors}</td>
Expand All @@ -174,8 +188,8 @@ class RunnerMonitoring extends React.Component {
</thead>
{this.state.operations && this.state.operations.errors &&
this.state.operations.errors.map((error, _index) =>
<tr>
<td>{error.executionTime}</td>
<tr >
<td style={{fontSize: "10px", whiteSpace: "nowrap"}}>{error.executionTime}</td>
<td>{error.status}</td>
<td>{error.errorCode}</td>
<td>{error.errorExplanation}</td>
Expand All @@ -195,8 +209,8 @@ class RunnerMonitoring extends React.Component {
</thead>
{this.state.operations && this.state.operations.executions &&
this.state.operations.executions.map((exec, _index) =>
<tr>
<td>{exec.executionTime}</td>
<tr style={this.getStyleRowOperation(exec)}>
<td style={{fontSize: "10px", whiteSpace: "nowrap"}}>{exec.executionTime}</td>
<td>{exec.status}</td>
<td style={{textAlign: "right"}}>{exec.durationms} ms</td>
</tr>
Expand All @@ -217,7 +231,7 @@ class RunnerMonitoring extends React.Component {
{this.state.operations && this.state.operations.operations &&
this.state.operations.operations.map((operation, _index) =>
<tr>
<td>{operation.executionTime}</td>
<td style={{fontSize: "10px", whiteSpace: "nowrap"}}>{operation.executionTime}</td>
<td>{operation.operation}</td>
<td>{operation.hostname}</td>

Expand Down Expand Up @@ -249,18 +263,32 @@ class RunnerMonitoring extends React.Component {

}

getStyleRowOperation(exec) {
if (exec.status === "ERROR")
return {backgroundColor: "#ffd7d9"};
return {};

}

stopRunner() {
console.log("RunnerMonitoring.stopRunner");
this.setState({labelBtnStop: "Stopping...", status:""});
this.setState({labelBtnStop: "Stopping...", status: ""});
var restCallService = RestCallService.getInstance();
restCallService.putJson('cherry/api/runner/stop?runnertype=' + this.state.runner.type, {}, this, this.operationRunnerCallback);
}

startRunner() {
console.log("RunnerMonitoring.startRunner");
this.setState({labelBtnStart: "Starting...",status: ""});
this.setState({labelBtnStart: "Starting...", status: ""});
var restCallService = RestCallService.getInstance();
restCallService.putJson('cherry/api/runner/start?runnertype=' + this.state.runner.type, {}, this,this.operationRunnerCallback);
restCallService.putJson('cherry/api/runner/start?runnertype=' + this.state.runner.type, {}, this, this.operationRunnerCallback);
}


setThreshold(value) {
let runnerinfo = this.state.runner;
runnerinfo.threshold = value;
this.setState({runner: runnerinfo})
}

operationRunnerCallback(httpResponse) {
Expand All @@ -271,11 +299,12 @@ class RunnerMonitoring extends React.Component {
} else {
let runnerinfo = this.state.runner;
runnerinfo.active = httpResponse.getData().active;
this.setState({runner:runnerinfo})
this.setState({runner: runnerinfo})
}
this.refreshState();
}


refreshState() {
if (this.state.runner.active) {
this.setState({labelBtnStart: "started", labelBtnStop: "stop"});
Expand Down Expand Up @@ -316,8 +345,8 @@ class RunnerMonitoring extends React.Component {
} else {

let operationsContent = this.state.operations;
if (! operationsContent) {
operationsContent={};
if (!operationsContent) {
operationsContent = {};
}
// Complete the variable
let operationsServer = httpPayload.getData();
Expand Down
46 changes: 38 additions & 8 deletions src/main/frontend/src/operationlog/OperationLog.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

import React from 'react';
import {Button} from "carbon-components-react";
import {ArrowRepeat} from "react-bootstrap-icons";
import {ArrowRepeat, XCircle} from "react-bootstrap-icons";
import ControllerPage from "../component/ControllerPage";
import RestCallService from "../services/RestCallService";

Expand All @@ -18,8 +18,11 @@ class OperationLog extends React.Component {
constructor(_props) {
super();
this.state = {
log: { operations:[]},
display: {loading:false}
log: {operations: []},
display: {
loading: false,
showOnlyError: false,
}
};
}

Expand All @@ -32,9 +35,17 @@ class OperationLog extends React.Component {
return (
<div className={"container"}>
<div className="row" style={{width: "100%"}}>
<div className="col-md-10">
<div className="col-md-4">
<h1 className="title">Operations Log</h1>
</div>
<div className="col-md-6">
<button className={this.getButtonClass(this.state.display.showOnlyError)}
style={{marginLeft: "10px", fontSize: "10px"}}
disabled={this.state.display.loading}
onClick={() => this.setToggleFilter("showOnlyError")}>
<XCircle style={{color: "red"}}/> Only Errors
</button>
</div>
<div className="col-md-2">
<Button className="btn btn-success btn-sm"
onClick={() => this.refreshListLog()}
Expand All @@ -56,25 +67,29 @@ class OperationLog extends React.Component {
<table id="runnersTable" className="table is-hoverable is-fullwidth">
<thead>
<tr>
<th>Time</th>
<th>Date</th>
<th>Runner</th>
<th>Operation</th>
<th>Message</th>
<th>hostname</th>
</tr>
</thead>
<tbody>
{this.state.log.operations ? this.state.log.operations.map((logitem, _index) =>
<tr style={this.getStyleRow(logitem)}>
<td >
<td style={{fontSize: "10px", whiteSpace: "nowrap"}}>
{logitem.executionTime}
</td>
<td>
{logitem.runnerType}
</td>
<td >
<td>
{logitem.operation}
</td>
<td >
<td style={{fontSize: "12px"}}>
{logitem.message}
</td>
<td>
{logitem.hostname}
</td>

Expand All @@ -89,10 +104,25 @@ class OperationLog extends React.Component {
)
}

getButtonClass(active) {
if (active)
return "btn btn-primary btn-sm";
return "btn btn-outline-primary btn-sm"
}

setToggleFilter(propertyName) {
let value = this.state.display[propertyName];
this.setDisplayProperty(propertyName, !value);
}

getStyleRow(logitem) {
if (this.state.display.showOnlyError && logitem.operation !== "ERROR")
return {display: "none"};
if (logitem.operation === "ERROR")
return {backgroundColor: "#ffd7d9"};
return {};
}

refreshListLog() {
let uri = 'cherry/api/operationlog/list?';
console.log("log.refreshListContent http[" + uri + "]");
Expand Down
1 change: 1 addition & 0 deletions src/main/java/io/camunda/cherry/operationlog/OperationLogRestController.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ public Map<String, Object> listOperations(@RequestParam(name = "nbhoursmonitorin
infoOperation.put("runnerType", t.runnerType);
infoOperation.put("executionTime", DateOperation.dateTimeToHumanString(t.executionTime, timezoneOffset));
infoOperation.put("operation", t.operation.toString());
infoOperation.put("message", t.message);
return infoOperation;
}).toList();
info.put("operations", listOperationsMap);
Expand Down
Loading

0 comments on commit a87980d

Please sign in to comment.