Added event type and custom icons per type

This commit is contained in:
Shay Nehmad 2019-08-07 11:08:30 +03:00
parent 47d37dcdd0
commit 9c1abf08a9
2 changed files with 11 additions and 2 deletions

View File

@ -30,11 +30,13 @@ class Report(flask_restful.Resource):
"events": [
{
"timestamp": "2019-08-01 14:48:46.112000",
"title": "Monkey perform an action",
"title": "Monkey performed an action",
"type": "MonkeyAction",
"message": "log1"
}, {
"timestamp": "2019-08-01 14:48:42.112000",
"title": "Analysis",
"type": "IslandAction",
"message": "log2"
}]
},
@ -46,6 +48,7 @@ class Report(flask_restful.Resource):
{
"timestamp": "2019-08-01 14:48:46.112000",
"title": "Analysis",
"type": "MonkeyAction",
"message": "log3"
}]
}

View File

@ -1,6 +1,12 @@
import React, {Component} from "react";
import {Timeline, TimelineEvent} from "react-event-timeline";
const eventTypeToIcon = {
"MonkeyAction": "fa fa-exclamation-circle fa-2x icon-warning",
"IslandAction": "fa fa-server fa-2x icon-info",
null: "fa fa-question-circle fa-2x icon-info",
};
export class EventsTimeline extends Component {
render() {
return (
@ -12,7 +18,7 @@ export class EventsTimeline extends Component {
key={event.timestamp}
createdAt={event.timestamp}
title={event.title}
icon={<i className="fa fa-circle icon-info" />}>
icon={<i className={eventTypeToIcon[event.type]} />}>
{event.message}
</TimelineEvent>
))