<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>DashBoard</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/dashBoard.css">
    <link rel="stylesheet" href="/css/header.css">
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/highcharts-more.js"></script>
    <script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>
    <script src="https://code.highcharts.com/modules/accessibility.js"></script>
    <script type="text/javascript" src="/js/dashBoard.js"></script>
    <script type="text/javascript" src="/js/header.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<style>
   
</style>
</head>
<body>
    <div class="menu">
        <div></div>
        <div class="select-dashboard"></div>
        <div class="unselect-record"></div>
        <div class="unselect-statistics"></div>
        <div class="unselect-system-manager"></div>
        <sec:authorize access="isAuthenticated()"><div>Log-Out</div></sec:authorize>
    </div>
<br>
<div class="first-box">
    <div class="cpu-use-guage-chart-container">
        <div class="cpu-use-title">
            CPU Use(%)
        </div>
        <div class="cpu-use-guage-chart">
            <div id="container-speed"></div>
            <div id="container-speed2"></div>
            <div id="container-speed3"></div>
            <div id="container-speed4"></div>
        </div>
    </div>
     <div class="use-grap-container">
    		<div id="cpu-use1"></div>
    		<div id="memory-use1"></div>
    		<div id="disk-use1"></div>
    		<div id="communication-session"></div>
	</div>
</div>
<div class="second-box">
	<div class="com-tr">
    	<div id='communication-transaction' style="position: relative;"></div>
	</div>
	<div class="kafka-container">
    	<div id='kafka'></div>
	</div>
</div>
	<div class="slide-button">^</div>
    <div class="event-box">
        <div class="event-container">
            <div class="menu-box">
            	<div class="menu-on alarm-event">
            		알람 이벤트
            	</div>
            	<div class="menu-off api">
            		API
            	</div>
            </div>	
            <div class="alarm-container">
                <div class="table-box">
                    <div class="search-bar test-bar">
                    	
                    </div>
                    <div class="table-round">
                        <div class=alarm-table-box>
                        	<table class="data-table" style="text-align: center;">
                        	</table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>