1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
import React, { Component } from 'react';
import './EventNode.scss';
import moment from 'moment';
class EventNode extends Component {
getColorClass() {
if(this.props.event.type === "StartupEvent")
return "green";
if(this.props.event.type === "WebhookAction")
return "blue";
return "purple";
}
getTitle() {
if(this.props.event.type === "StartupEvent")
return "Startup";
if(this.props.event.type === "WebhookAction")
return "Webhook";
return this.props.event.type;
}
getSubtitle() {
if(this.props.event.type === "StartupEvent") {
if(this.isWaiting())
return "Starting up.."
return "Listening for incoming connections";
}
if(this.props.event.type === "WebhookAction") {
if(this.props.event.messages.length)
return this.props.event.messages[this.props.event.messages.length - 1]
return "Incoming request from " + this.props.event['client-address'];
}
return this.props.event.type;
}
getDate() {
return moment.unix(this.props.event.timestamp).format("YYYY-MM-DD");
}
getTime() {
return moment.unix(this.props.event.timestamp).format("HH:mm");
}
getIconName() {
if(this.props.event.success === false)
return "alert"
if(this.props.event.type === "StartupEvent")
return "alert-circle";
return "check";
}
isWaiting() {
if(this.props.event.type === "StartupEvent") {
if(this.props.event['ws-started'] !== true || this.props.event['http-started'] !== true) {
return true;
}
} else if(this.props.event.waiting === true) {
return true;
}
return false;
}
getIconElement() {
if(this.isWaiting()) {
return (
<div className="icon spinner"></div>
);
}
return (
<i className={"icon mdi mdi-" + this.getIconName()} />
);
}
render() {
return (
<div className={"EventNode " + this.props.alignment + " " + this.getColorClass()}>
<span className="horizontal-line"></span>
<span className="timeline-icon"></span>
<div className="inner">
<div className="header">
{this.getIconElement()}
<p className="title">{this.getTitle()}</p>
<p className="subtitle">{this.getSubtitle()}</p>
</div>
<div className="body">
{this.props.children}
</div>
<svg className="vertical-arrow" viewBox="0 0 10 30">
<path d="M0,0 c0,5,0,5,5,10 c6,6,6,4,0,10 c-5,5,-5,5,-5,10" />
</svg>
</div>
</div>
);
}
}
export default EventNode;
|
