tosu
/
hackhpi23-cyber-range
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

timeline finish

This commit is contained in:
KyuDev 2023-04-13 23:47:30 +02:00
parent 7246d1c61b
commit 84c78e7dd3
2 changed files with 237 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
webserver/main.py
View File

@ -95,6 +95,11 @@ def cpdashy_logout_main():
# Main Dashboard start
def extract_time(json):
try:
return int(int(json['timestamp'].split("m")[0])*60 + int(json['timestamp'].split("m")[1].replace("m","").replace("s","").replace(" ","").replace("&nbp;","")))
except KeyError:
return 0
def cpdash_get_sidebar():
with open('templates/sidebar.html','r') as f:
@ -120,7 +125,21 @@ def cpdashy_1_main():
with open("database/temp/sim_start.txt","r") as f:
sim_start_timestamp_stamp = int(f.read().split(".")[0])
sim_start_timestamp = str(round((time.time() - sim_start_timestamp_stamp) / 60,3))
min, sec = divmod(time.time() - int(sim_start_timestamp_stamp),60)
sim_start_timestamp = str(int(min)) + "m " + str(int(round(sec,0))) + "s"
if not os.path.exists("database/temp/attack_start.txt"):
attack_start_timestamp = "0"
else:
with open("database/temp/attack_start.txt","r") as f:
attack_start_timestamp = int(f.read().split(".")[0])
min, sec = divmod(time.time() - int(attack_start_timestamp),60)
attack_start_timestamp = str(int(min)) + "m " + str(int(round(sec,0))) + "s"
with open("database/logs/blue.json","r") as f:
blue_logs_list_ori = json.load(f)
@ -128,6 +147,9 @@ def cpdashy_1_main():
for blue_log_now in blue_logs_list_ori:
min, sec = divmod(time.time() - int(blue_log_now["timestamp"]),60)
blue_log_now["timestamp"] = str(int(min)) + "m " + str(int(round(sec,0))) + "s"
blue_log_now["origin"] = "blue"
blue_log_now["timeline_class"] = "container_time_right"
blue_log_now["timeline_side"] = "right"
blue_logs_list.append(blue_log_now)
with open("database/logs/red.json","r") as f:
@ -136,14 +158,21 @@ def cpdashy_1_main():
for red_log_now in red_logs_list_ori:
min, sec = divmod(time.time() - int(red_log_now["timestamp"]),60)
red_log_now["timestamp"] = str(int(min)) + "m " + str(int(round(sec,0))) + "s"
red_log_now["origin"] = "red"
red_log_now["timeline_class"] = "container_time"
red_log_now["timeline_side"] = "left"
red_logs_list.append(red_log_now)
total_logs_list = []
total_logs_list.extend(blue_logs_list)
total_logs_list.extend(red_logs_list)
total_logs_list.sort(key=extract_time, reverse=True)
blue_logs_list.reverse()
red_logs_list.reverse()
total_logs_list.reverse()
return render_template("main/dashboard_main1.html",blue_logs_list=blue_logs_list,red_logs_list=red_logs_list,sim_running=sim_running,sim_start_timestamp=sim_start_timestamp,sidebar_html_insert=cpdash_get_sidebar().replace("active_state_class1","is-active"), profile_picture=user_data["picture"],profile_username=user_data["username"],profile_userid=user_data["userid"],profile_email=user_data["email"])
return render_template("main/dashboard_main1.html",total_logs_list=total_logs_list,attack_start_timestamp=attack_start_timestamp,blue_logs_list=blue_logs_list,red_logs_list=red_logs_list,sim_running=sim_running,sim_start_timestamp=sim_start_timestamp,sidebar_html_insert=cpdash_get_sidebar().replace("active_state_class1","is-active"), profile_picture=user_data["picture"],profile_username=user_data["username"],profile_userid=user_data["userid"],profile_email=user_data["email"])
else:
return redirect('/login')
@ -192,7 +221,7 @@ def api_red_logs():
print("red log received")
print(temp_json_n)
if temp_json_n["data"] == "Start of attack":
if temp_json_n["data"].lower() == "start of attack":
with open("database/temp/attack_start.txt",'w') as f:
f.write(str(temp_json_n["timestamp"]))

227
webserver/templates/main/dashboard_main1.html
View File

@ -8,7 +8,7 @@
<meta name="title" content="CyberRange">
<meta name="description" content="Teach and Test you employee about cyber attacks">
<!-- <meta http-equiv="refresh" content="3"> -->
<meta http-equiv="refresh" content="3">
<style>
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap");
@ -1302,13 +1302,17 @@
<div class="video anim" style="--delay: .4s">
<a href="#" style="text-decoration: none;color: #ff66d9;">
<div class="video-by" title="Time elapsed since the Attack started">Time since Attack start</div>
<div class="video-name padding_stat_n">xxx</div>
{% autoescape false %}
<div class="video-name padding_stat_n">{{ attack_start_timestamp }}</div>
{% endautoescape %}
</a>
</div>
<div class="video anim" style="--delay: .45s">
<a href="#" style="text-decoration: none;color: #ff66d9;">
<div class="video-by" title="Time since the sim started">Time since Sim start</div>
<div class="video-name padding_stat_n" id="time_since_sim_start_min"></div>
{% autoescape false %}
<div class="video-name padding_stat_n">{{ sim_start_timestamp }}</div>
{% endautoescape %}
</a>
</div>
<div class="video anim" style="--delay: .5s">
@ -1329,6 +1333,25 @@
<div class="main-header anim" style="--delay: 0.6s">Logs</div>
<div class="videos">
<div class="video anim" style="width: 203%;">
<div style="text-decoration: none;color: #ff6666;">
<div class="video-by">Attacker</div>
<div class="video-name padding_stat_n">
<table>
{% for red_log_now in red_logs_list %}
<tr>
{% autoescape false %}
<td>{{ red_log_now["timestamp"] }}</td>
{% endautoescape %}
<td style="color:white;font-size: 20px;">|</td>
<td style="color: white;font-weight: 700;">{{ red_log_now["data"] }}</td>
</tr>
{% endfor %}
</table>
</div>
</div>
</div>
<div class="video anim" style="width: 0;"></div>
<div class="video anim" style="width: 203%;">
<div style="text-decoration: none;color: #666eff;">
<div class="video-by">Defender</div>
@ -1348,26 +1371,185 @@
</div>
</div>
</div>
<div class="video anim" style="width: 0;"></div>
<div class="video anim" style="width: 203%;">
<div style="text-decoration: none;color: #ff6666;">
<div class="video-by">Attacker</div>
<div class="video-name padding_stat_n">
<table>
{% for red_log_now in red_logs_list %}
<tr>
<td>{{ red_log_now["timestamp"] }}</td>
<td style="color:white;font-size: 20px;">|</td>
<td style="color: white;font-weight: 700;">{{ red_log_now["data"] }}</td>
</tr>
{% endfor %}
</table>
</div>
</div>
</div>
</div><br>
<!-- timeline css -->
<style>
/* The actual timeline (the vertical ruler) */
.timeline {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
/* The actual timeline (the vertical ruler) */
.timeline::after {
content: '';
position: absolute;
width: 6px;
background-color: #252936;
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;
}
/* Container around content */
.container_time {
padding: 10px 40px;
position: relative;
background-color: inherit;
width: 50%;
}
/* The circles on the timeline */
.container_time::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
right: -17px;
background-color: #252936;
border: 4px solid #fd3737;
top: 15px;
border-radius: 50%;
z-index: 1;
}
.container_time_right {
padding: 10px 40px;
position: relative;
background-color: inherit;
width: 50%;
}
/* The circles on the timeline */
.container_time_right::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
right: -17px;
background-color: #252936;
border: 4px solid #5590ff;
top: 15px;
border-radius: 50%;
z-index: 1;
}
/* Place the container to the left */
.left {
left: 0;
}
/* Place the container to the right */
.right {
left: 50%;
}
/* Add arrows to the left container (pointing right) */
.left::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
right: 30px;
border: medium solid #252936;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent #252936;
}
/* Add arrows to the right container (pointing left) */
.right::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
left: 30px;
border: medium solid #252936;
border-width: 10px 10px 10px 0;
border-color: transparent #252936 transparent transparent;
}
/* Fix the circle for containers on the right side */
.right::after {
left: -16px;
}
/* The actual content */
.content_time {
padding: 20px 30px;
background-color: #252936;
position: relative;
border-radius: 6px;
}
/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
/* Place the timelime to the left */
.timeline::after {
left: 31px;
}
/* Full-width containers */
.container_time {
width: 100%;
padding-left: 70px;
padding-right: 25px;
}
/* Make sure that all arrows are pointing leftwards */
.container_time::before {
left: 60px;
border: medium solid #252936;
border-width: 10px 10px 10px 0;
border-color: transparent #252936 transparent transparent;
}
.container_time_right {
width: 100%;
padding-left: 70px;
padding-right: 25px;
}
/* Make sure that all arrows are pointing leftwards */
.container_time_right::before {
left: 60px;
border: medium solid #252936;
border-width: 10px 10px 10px 0;
border-color: transparent #252936 transparent transparent;
}
/* Make sure all circles are at the same spot */
.left::after, .right::after {
left: 15px;
}
/* Make all right containers behave like the left ones */
.right {
left: 0%;
}
}
</style>
<div>
<div class="timeline">
{% for blue_log_now in total_logs_list %}
<div class='{{ blue_log_now["timeline_class"] }} {{ blue_log_now["timeline_side"] }}' style="box-sizing: border-box;">
<div class="content_time" style="box-sizing: border-box;">
{% autoescape false %}
<h2>{{ blue_log_now["timestamp"] }}</h2>
<p>{{ blue_log_now["data"] }}</p>
{% endautoescape %}
</div>
</div>
{% endfor %}
</div>
</div>
</div>
<script>
if("{{ sim_running }}" == "True"){
@ -1377,7 +1559,6 @@
console.log("2")
document.getElementById("start_stop_sim_btn").innerHTML = "Start Simulation"
}
document.getElementById("time_since_sim_start_min").innerHTML = {{sim_start_timestamp}} + " min"
</script>
</div>
</div>