{% extends 'base/base.html' %}
{% load humanize %}
{% load static %}
{% load mathfilters %}
{% block title %}
Dashboard
{% endblock title %}

{% block page_title %}
Dashboard
{% endblock page_title %}

{% block custom_js_css_link %}
<link rel="stylesheet" type="text/css" href="{% static 'custom/custom.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'plugins/j-map/jquery-jvectormap.css' %}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/6.6.3/css/flag-icons.min.css" integrity="sha512-uvXdJud8WaOlQFjlz9B15Yy2Au/bMAvz79F7Xa6OakCl2jvQPdHD0hb3dEqZRdSwG4/sknePXlE7GiarwA/9Wg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
{% endblock custom_js_css_link %}

{% block breadcrumb_title %}
<span class="badge badge-soft-info">reNgine {{ RENGINE_CURRENT_VERSION }}</span>
{% endblock breadcrumb_title %}

{% block main_content %}
<div class="row">
	<div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12">
		<div class="card" id="tooltip-container">
			<div class="card-body">
				<i class="fa fa-info-circle text-muted float-end" data-bs-container="#tooltip-container" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Total Number of Targets/Domains"></i>
				<h4 class="mt-0 font-16">Total Targets</h4>
				<h2 class="text-primary my-3 text-center"><span data-plugin="counterup">{{domain_count|intcomma}}</span></h2>
				<div id="targets_chart"></div>
				<p class="text-success mb-0 mt-2"><span class="badge rounded-pill float-end">&nbsp;</span></p>
				<br>
				<br>
				<br>
			</div>
		</div>
	</div>
	<div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12">
		<div class="card" id="tooltip-container1">
			<div class="card-body">
				<i class="fa fa-info-circle text-muted float-end" data-bs-container="#tooltip-container1" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Total Number of Subdomains discovered by reNgine across all targets."></i>
				<h4 class="mt-0 font-16">Total Subdomains</h4>
				<h2 class="text-primary my-3 text-center"><span data-plugin="counterup">{{subdomain_count|intcomma}}</span></h2>
				<div id="subdomains_chart"></div>
				<br>
				<p class="text-success mb-0 mt-2"><span class="badge badge-soft-success rounded-pill float-end">Alive Subdomains: {{alive_count|intcomma}}</span></p>
				<br>
				<br>
			</div>
		</div>
	</div>
	<div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12">
		<div class="card" id="tooltip-container2">
			<div class="card-body">
				<i class="fa fa-info-circle text-muted float-end" data-bs-container="#tooltip-container2" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Total Endpoints/URLs discovered by reNgine across all targets & subdomains."></i>
				<h4 class="mt-0 font-16">Total Endpoints</h4>
				<h2 class="text-primary my-3 text-center">{{endpoint_count|intcomma}}</h2>
				<div id="endpoint_chart"></div>
				<br>
				<p class="text-success mb-0 mt-2"><span class="badge badge-soft-success rounded-pill float-end">Alive Endpoints: {{endpoint_alive_count|intcomma}}</span></p>
				<br>
				<br>
			</div>
		</div>
	</div>
	<div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12">
		<div class="card" id="tooltip-container3">
			<div class="card-body">
				<i class="fa fa-info-circle text-muted float-end" data-bs-container="#tooltip-container3" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Total Vulnerabilities discovered by reNgine across all targets, subdomains & endpoints."></i>
				<h4 class="mt-0 font-16 text-danger">Total Vulnerabilities</h4>
				<h2 class="text-danger my-3 text-center"><span data-plugin="counterup">{{total_vul_count|intcomma}}</span></h2>
				<div id="vuln_chart"></div>
				<p class="text-danger mb-0 mt-2"><span class="badge badge-soft-danger rounded-pill float-end"><b>{{critical_count}} Critical, {{high_count}} High, {{medium_count}} Medium</b></span></p>
				<br>
				<p class="text-danger mb-0 mt-2"><span class="badge badge-soft-primary rounded-pill float-end">{{low_count}} Low, {{info_count}} Info, {{unknown_count}} Unknown Vulnerabilities</span></p>
				<br>
			</div>
		</div>
	</div>
</div>
<div class="row">
	<div class="col-xl-3 col-lg-3 col-md-2 col-sm-12 col-12">
		<div class="card">
			<div class="card-body">
				<div class="d-flex align-items-start mb-3">
					<div class="w-100">
						<h5 class="mt-0 mb-0 font-15">
							<i class='mdi mdi-trending-up me-2 font-18 text-primary'></i> Activity Feed
						</h5>
					</div>
				</div>
				<div data-simplebar style="max-height: 650px;" class="p-2">
					<div class="track-order-list">
						<ul class="list-unstyled">
							{% for item in activity_feed %}
							<div class="d-flex align-items-start mt-3">
								<i class="mdi mdi-checkbox-blank-circle-outline me-1 {% if item.status == 0 %}
								text-danger
								{% elif item.status == 1 %}
								text-info
								{% elif item.status == 2 %}
								text-success
								{% endif %}"></i>
								<div class="w-100">
									<a class="mt-1 font-14 text-reset">
										<strong>{{item.title}}</strong>
										</br>
										<span class="text-muted">
											{% if item.status == 2 %} {% if item.title != 'Scan Completed' %} Completed {% endif %}{% elif item.status == 1 %} Initiated {% elif item.status == 0 %} {% if item.title != 'Scan aborted' %} Aborted {% endif %} {% endif %}</b>for <span class="badge badge-soft-info">{{item.scan_of.domain.name}}</span>
										</span>
										<br>
										<span>{{item.time|naturaltime}}</span>
									</a>
								</div>
							</div>
							{% empty %}
							Feed will be automatically generated while the scan is running.
							{% endfor %}
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="card">
			<div class="card-body">
				<div class="d-flex align-items-start mb-3">
					<div class="w-100">
						<h5 class="mt-0 mb-0 font-15">
							<i class='fa fa-bug me-2 font-18 text-danger'></i> Vulnerability Feed
						</h5>
					</div>
				</div>
				<div data-simplebar style="max-height: 910px;" class="p-2">
					<div class="track-order-list">
						<ul class="list-unstyled">
							{% for item in vulnerability_feed %}
							<div class="d-flex align-items-start mt-3">
								<i class="mdi mdi-checkbox-blank-circle-outline me-1 {% if item.severity == 0 %}
								text-primary
								{% elif item.severity == 1 %}
								text-low
								{% elif item.severity == 2 %}
								text-warning
								{% elif item.severity == 3 %}
								text-danger
								{% elif item.severity == 4 %}
								text-critical
								{% elif item.severity == -1 %}
								text-info
								{% endif %}"></i>
								<div class="w-100">
									<a href='scan/detail/vuln?query={{item.id}}' class="mt-1 font-14 text-muted">
										<strong class="
										{% if item.severity == 0 %}
										text-primary
										{% elif item.severity == 1 %}
										text-low
										{% elif item.severity == 2 %}
										text-warning
										{% elif item.severity == 3 %}
										text-danger
										{% elif item.severity == 4 %}
										text-critical
										{% elif item.severity == -1 %}
										text-info
										{% endif %}
										">{% if item.severity == 0 %}
										<span class='badge badge-soft-primary'>Info</span>
										{% elif item.severity == 1 %}
										<span class='badge badge-low'>Low</span>
										{% elif item.severity == 2 %}
										<span class='badge badge-soft-warning'>Medium</span>
										{% elif item.severity == 3 %}
										<span class='badge badge-soft-danger'>High</span>
										{% elif item.severity == 4 %}
										<span class='badge badge-critical'>Critical</span>
										{% elif item.severity == -1 %}
										<span class='badge badge-soft-info'>Unknown</span>
										{% endif %}{{item.name}}</strong>
										</br>
										detected on {{item.subdomain}}
										<br>
										<span class="text-muted">{{item.discovered_date|naturaltime}}</span>
									</a>
								</div>
							</div>
							{% empty %}
							Feed will be automatically generated once the vulnerability scan is completed.
							{% endfor %}
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="col-xl-9 col-lg-9 col-md-9 col-sm-12 col-12">
		<div class="row">
			<div class="col-12">
				<div class="card">
					<div class="card-body">
						<div class="row">
							<div class="col-9">
								<h4 class="header-title mb-0">Geographical Distribution of Assets</h4>
								<div id="world_map" style="height: 520px"></div>
							</div>
							<div class="col-3">
								<div class="table-responsive" data-simplebar style="max-height: 520px;">
									<table class="table table-borderless table-hover table-centered m-0">
										<thead class="table-light">
											<tr>
												<th>&nbsp;</th>
												<th>Country</th>
												<th>Assets</th>
											</tr>
										</thead>
										<tbody>
											{% for country in asset_countries %}
											<tr>
												<td><span class="fi fi-{{country.iso|lower}}"></span></td>
												<td>{{country.name}}</td>
												<td>{{country.count}}</td>
											</tr>
											{% endfor %}
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
				{% include 'base/_items/widgets/vulnerability_breakdown_by_severity_chart.html' %}
			</div>
			<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
				{% include 'base/_items/most_vuln_target.html' with most_vuln_widget_title='Most Vulnerable Target'%}
			</div>
			<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
				{% include 'base/_items/most_common_vuln.html' %}
			</div>
		</div>
		<div class="row">
			{% include 'base/_items/most_common_cve_cwe_tag_template.html' %}
		</div>
		<div class="row">
			<div class="col-xl-4">
				<div class="card">
					<div class="card-body">
						<h4 class="header-title mb-0">Most common IP Address</h4>
						<div id="cardCollpase8" class="collapse pt-3 show" dir="ltr">
							<div id="most_common_ip_chart" class="apex-charts"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-xl-4">
				<div class="card">
					<div class="card-body">
						<h4 class="header-title mb-0">Most common Ports</h4>
						<div id="cardCollpase8" class="collapse pt-3 show" dir="ltr">
							<div id="most_common_port_chart" class="apex-charts"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-xl-4">
				<div class="card">
					<div class="card-body">
						<h4 class="header-title mb-0">Most common Technology</h4>
						<div id="cardCollpase8" class="collapse pt-3 show" dir="ltr">
							<div id="most_common_tech_chart" class="apex-charts"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

{% endblock main_content %}


{% block page_level_script %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.29.0/apexcharts.min.js" integrity="sha512-fe6OklXva8AWoqdwgkE7Ni4uWgHGWxFQWZx4lYehzY2Qrst5YfogjAbnLd6egsoTrnjGI9/LYt1Ont2cKNbP2A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://apexcharts.com/samples/assets/irregular-data-series.js"></script>
<script src="https://apexcharts.com/samples/assets/ohlc.js"></script>
<script src="{% static 'plugins/j-map/jquery-jvectormap.min.js' %}"></script>
<script src="{% static 'plugins/j-map/maps/jquery-jvectormap-world-mill-en.js' %}"></script>
<script type="text/javascript">

$(document).ready(function() {
	get_most_vulnerable_target(slug='{{current_project.slug}}', scan_id=null, target_id=null, ignore_info=false);
	get_most_common_vulnerability(slug='{{current_project.slug}}', scan_id=null, target_id=null, ignore_info=false);
	// listener for info checkbox on most vulnerable target

	$('#ignore_info_most_vuln_checkbox').change(function() {
		if (this.checked) {
			var text_msg = 'Informational Vulnerabilities ignored in Most Vulnerable Targets.';
		}
		else{
			var text_msg = 'Informational Vulnerabilities included in Most Vulnerable Targets.';
		}
		get_most_vulnerable_target(slug='{{current_project.slug}}', scan_id=null, target_id=null, ignore_info=this.checked);
		get_most_vulnerable_target(slug='{{current_project.slug}}', scan_id=null, target_id=null, ignore_info=this.checked);
		Snackbar.show({
			text: text_msg,
			pos: 'top-right',
			duration: 2500
		});
	});

	$('#ignore_info_most_common_vuln_checkbox').change(function() {
		if (this.checked) {
			var text_msg = 'Informational Vulnerabilities ignored for Most Common Vulnerabilities.';
		}
		else{
			var text_msg = 'Informational Vulnerabilities included for Most Common Vulnerabilities.';
		}
		get_most_common_vulnerability(slug='{{current_project.slug}}', scan_id=null, target_id=null, ignore_info=this.checked);
		Snackbar.show({
			text: text_msg,
			pos: 'top-right',
			duration: 2500
		});
	});

	{% include 'base/_items/most_common_cve_cwe_tags.js' %}

	var label_dates = ['{{last_7_dates.6}}', '{{last_7_dates.5}}', '{{last_7_dates.4}}', '{{last_7_dates.3}}', '{{last_7_dates.2}}', '{{last_7_dates.1}}', '{{last_7_dates.0}}'];

	var fill_options = {
		type:"gradient",
		gradient: {
			type: "vertical",
			shadeIntensity: 1,
			inverseColors: !1,
			opacityFrom: .30,
			opacityTo: .05,
			stops: [35, 100]
		},
	}

	var target_chart_option = {
		chart: {
			type: "area",
			height: 50,
			sparkline: {
				enabled: !0
			}
		},
		stroke: {
			width: 2,
			curve: "smooth"
		},
		fill: {
			opacity: .2
		},
		series: [{
			name: "Targets Added",
			data: [{{targets_in_last_week.0}},{{targets_in_last_week.1}},{{targets_in_last_week.2}},{{targets_in_last_week.3}},{{targets_in_last_week.4}},{{targets_in_last_week.5}},{{targets_in_last_week.6}}]
		}],
		yaxis: {
			min: 0
		},
		labels: label_dates,
		colors: ['#2196f3'],
		subtitle: {
			text: "",
			offsetX: 10,
			offsetY: 35,
			style: {
				fontSize: "13px"
			}
		},
		fill: fill_options,
	};
	new ApexCharts(document.querySelector("#targets_chart"), target_chart_option).render();

	var subdomains_chart_options = {
		chart: {
			type: "area",
			height: 50,
			sparkline: {
				enabled: !0
			}
		},
		stroke: {
			width: 2,
			curve: "smooth"
		},
		fill: {
			opacity: .2
		},
		series: [{
			name: "Subdomains Discovered",
			data: [{{subdomains_in_last_week.0}},{{subdomains_in_last_week.1}},{{subdomains_in_last_week.2}},{{subdomains_in_last_week.3}},{{subdomains_in_last_week.4}},{{subdomains_in_last_week.5}},{{subdomains_in_last_week.6}}]
		}],
		yaxis: {
			min: 0
		},
		labels: label_dates,
		colors: ['#2196f3'],
		subtitle: {
			text: "",
			offsetX: 10,
			offsetY: 35,
			style: {
				fontSize: "13px"
			}
		},
		fill: fill_options,
	};
	new ApexCharts(document.querySelector("#subdomains_chart"), subdomains_chart_options).render();

	var endpoint_chart_options = {
		chart: {
			type: "area",
			height: 50,
			sparkline: {
				enabled: !0
			}
		},
		stroke: {
			width: 2,
			curve: "smooth"
		},
		fill: {
			opacity: .2
		},
		series: [{
			name: "Endpoints Discovered",
			data: [{{endpoints_in_last_week.0}},{{endpoints_in_last_week.1}},{{endpoints_in_last_week.2}},{{endpoints_in_last_week.3}},{{endpoints_in_last_week.4}},{{endpoints_in_last_week.5}},{{endpoints_in_last_week.6}}]
		}],
		yaxis: {
			min: 0
		},
		labels: label_dates,
		colors: ['#2196f3'],
		subtitle: {
			text: "",
			offsetX: 10,
			offsetY: 35,
			style: {
				fontSize: "13px"
			}
		},
		fill: fill_options,
	};
	new ApexCharts(document.querySelector("#endpoint_chart"), endpoint_chart_options).render();


	var vuln_chart_options = {
		chart: {
			type: "area",
			height: 50,
			sparkline: {
				enabled: !0
			}
		},
		stroke: {
			width: 2,
			curve: "smooth"
		},
		fill: {
			opacity: .2
		},
		series: [{
			name: "Vulnerabilities Discovered",
			data: [{{vulns_in_last_week.0}},{{vulns_in_last_week.1}},{{vulns_in_last_week.2}},{{vulns_in_last_week.3}},{{vulns_in_last_week.4}},{{vulns_in_last_week.5}},{{vulns_in_last_week.6}}]
		}],
		yaxis: {
			min: 0
		},
		labels: label_dates,
		colors: ['#e7515a'],
		subtitle: {
			text: "",
			offsetX: 10,
			offsetY: 35,
			style: {
				fontSize: "13px"
			}
		},
		fill: fill_options,
	};
	new ApexCharts(document.querySelector("#vuln_chart"), vuln_chart_options).render();


	// vulnerability summary pie chart
	var options = {
		chart: {
			type: 'donut',
			height: 320,
		},
		colors: ['#D50000', '#F44336', '#FF6D00', '#FFD600', '#2962FF', '#03A9F4'],
		dataLabels: {
			enabled: false
		},
		legend: {
			show: !0,
			position: "bottom",
			horizontalAlign: "center",
			verticalAlign: "middle",
			floating: !1,
			fontSize: "15px",
			offsetX: 0,
			offsetY: 7
		},
		plotOptions: {
			pie: {
				donut: {
					size: '70%',
					background: 'transparent',
					labels: {
						show: true,
						name: {
							show: true,
							fontSize: '29px',
							fontFamily: 'Nunito, sans-serif',
							color: undefined,
							offsetY: -10
						},
						value: {
							show: true,
							fontSize: '26px',
							fontFamily: 'Nunito, sans-serif',
							color: '20',
							offsetY: 16,
							formatter: function (val) {
								return val
							}
						},
						total: {
							show: true,
							showAlways: true,
							label: 'Total',
							color: '#888ea8',
							formatter: function (w) {
								return w.globals.seriesTotals.reduce( function(a, b) {
									return a + b
								}, 0)
							}
						}
					}
				}
			}
		},
		series: [{{critical_count}}, {{high_count}}, {{medium_count}}, {{low_count}}, {{info_count}}, {{unknown_count}}],
		labels: ['Critical', 'High', 'Medium', 'Low', 'Info', 'Unknown'],
		responsive: [{
			breakpoint: 1599,
			options: {
				chart: {
					height: 240
				},
				legend: {
					position: 'bottom'
				}
			},
			breakpoint: 1439,
			options: {
				chart: {
					width: '250px',
					height: '390px'
				},
			},
		}],
	}

	var chart = new ApexCharts(
		document.querySelector("#vulnerability-pie-chart"),
		options
	);

	chart.render()

	var options = {
		series: [{
			name: "Ip is Used By Subdomains",
			data: [{{most_used_ip.6.count}}, {{most_used_ip.5.count}}, {{most_used_ip.4.count}}, {{most_used_ip.3.count}}, {{most_used_ip.2.count}}, {{most_used_ip.1.count}}, {{most_used_ip.0.count}}]
		}],
		chart: {
			type: 'bar',
			height: 350
		},
		plotOptions: {
			bar: {
				borderRadius: 4,
				horizontal: true,
			}
		},
		dataLabels: {
			enabled: false
		},
		xaxis: {
			categories: ['{{most_used_ip.6.address}}', '{{most_used_ip.5.address}}', '{{most_used_ip.4.address}}', '{{most_used_ip.3.address}}', '{{most_used_ip.2.address}}', '{{most_used_ip.1.address}}', '{{most_used_ip.0.address}}'],
		}
	};

	var chart = new ApexCharts(document.querySelector("#most_common_ip_chart"), options);
	chart.render();

	var options = {
		series: [{
			name: "Ports used by IPs",
			data: [{{most_used_port.6.count}}, {{most_used_port.5.count}}, {{most_used_port.4.count}}, {{most_used_port.3.count}}, {{most_used_port.2.count}}, {{most_used_port.1.count}}, {{most_used_port.0.count}}]
		}],
		chart: {
			type: 'bar',
			height: 350
		},
		plotOptions: {
			bar: {
				borderRadius: 4,
				horizontal: true,
			}
		},
		dataLabels: {
			enabled: false
		},
		xaxis: {
			categories: ['{{most_used_port.6.number}}/{{most_used_port.6.service_name}}', '{{most_used_port.5.number}}/{{most_used_port.5.service_name}}', '{{most_used_port.4.number}}/{{most_used_port.4.service_name}}', '{{most_used_port.3.number}}/{{most_used_port.3.service_name}}', '{{most_used_port.2.number}}/{{most_used_port.2.service_name}}', '{{most_used_port.1.number}}/{{most_used_port.1.service_name}}', '{{most_used_port.0.number}}/{{most_used_port.0.service_name}}'],
		}
	};

	var chart = new ApexCharts(document.querySelector("#most_common_port_chart"), options);
	chart.render();


	var options = {
		series: [{
			name: "Tech used by Subdomains",
			data: [{{most_used_tech.6.count}}, {{most_used_tech.5.count}}, {{most_used_tech.4.count}}, {{most_used_tech.3.count}}, {{most_used_tech.2.count}}, {{most_used_tech.1.count}}, {{most_used_tech.0.count}}]
		}],
		chart: {
			type: 'bar',
			height: 350
		},
		plotOptions: {
			bar: {
				borderRadius: 4,
				horizontal: true,
			}
		},
		dataLabels: {
			enabled: false
		},
		xaxis: {
			categories: ['{{most_used_tech.6.name}}', '{{most_used_tech.5.name}}', '{{most_used_tech.4.name}}', '{{most_used_tech.3.name}}', '{{most_used_tech.2.name}}', '{{most_used_tech.1.name}}', '{{most_used_tech.0.name}}'],
		}
	};

	var chart = new ApexCharts(document.querySelector("#most_common_tech_chart"), options);
	chart.render();

	var countriesData = {
		{% for country in asset_countries %}
			"{{country.iso}}": {{country.count}},
		{% endfor %}
	};

	$('#world_map').vectorMap({
		map: 'world_mill_en',
		hoverOpacity: 0.7,
		hoverColor: false,
		regionStyle: {
				initial: {
					fill: '#d4dadd'
				}
			},
		backgroundColor: 'transparent',
		series: {
			regions: [{
				values: countriesData,
				scale: [
					{% for country in asset_countries %}
						shadeColor('#2C3E50', {{country.count}}),
					{% endfor %}
				],
				normalizeFunction: 'polynomial'
			}]
		},
		onRegionTipShow: function(e, el, code){
			if (code in countriesData) {
				el.html(el.html()+' (Total Assets : '+ countriesData[code]+')');
			}
			else{
				el.html(el.html()+' (Total Assets : 0)');
			}
		}
	});

});
</script>
{% endblock page_level_script %}