Server Admin

  1. Home
  2. Dashboard

Welcome back, Allie!

You have 12 new messages and 7 new notifications.
// date range picker $(function() { $('input[name="daterange"]').daterangepicker({ opens: 'left' }, function(start, end, label) { console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD')); }); })
File Usage
Disk Usage
MySQL® Disk Usage
MySQL® Databases
Email Accounts
Physical Memory Usage
FTP Accounts
Number of Processes
CPU Usage
IOPS
Server Performance
Traffic general overview
11.54/ 15 GB
Daily traffic
5.87/ 15 GB
Hourly traffic
Upload
Download
112233445566778899101011111212131314141515100100808060604040202000
Monitoring
CPU
RAM
HDD

CPU: 3.20 GHz

RAM: 12 GB

HDD: 1 TB

Unauthorized Threats has been Terminated

4 Subpicious Packet Data

3 Subpicious Login Attemption

10 Account try to Spam

15 Virus is try to Inject Server

Server List
// CPU - Server Performance var options1 = { series: [{ name: "CPU", data: [80, 50, 70, 40, 90, 30, 60, 40, 40, 50, 55, 40] }], chart: { height: 160, type: 'line', // line, bar, area toolbar: { show: false, }, zoom: { enabled: false }, }, responsive: [{ breakpoint: 1200, options: { chart: { height: 200, }, } }], colors: ['var(--chart-color2)'], dataLabels: { enabled: false }, stroke: { width: [3], curve: 'smooth', // straight, smooth //dashArray: [5] }, legend: { tooltipHoverFormatter: function(val, opts) { return val + ' - ' + opts.w.globals.series[opts.seriesIndex][opts.dataPointIndex] + '' } }, markers: { size: 0, hover: { sizeOffset: 6 } }, xaxis: { categories: ['Jan', 'Feb', 'March', 'Apr', 'May', 'Jun', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'], }, tooltip: { y: [{ title: { formatter: function(val) { return val + " (%)" } } }, { title: { formatter: function(val) { return val + " (%)" } } }] }, }; var chart = new ApexCharts(document.querySelector("#apex-CPU"), options1); chart.render(); // Memory - Server Performance var options2 = { series: [{ name: "Memory", data: [45, 55, 35, 25, 95, 25, 65, 5, 15, 35, 85, 15] }], chart: { height: 160, type: 'line', // line, bar, area toolbar: { show: false, }, zoom: { enabled: false }, }, responsive: [{ breakpoint: 1200, options: { chart: { height: 200, }, } }], colors: ['var(--chart-color3)'], dataLabels: { enabled: false }, stroke: { width: [3], curve: 'smooth', // straight, smooth //dashArray: [5] }, legend: { tooltipHoverFormatter: function(val, opts) { return val + ' - ' + opts.w.globals.series[opts.seriesIndex][opts.dataPointIndex] + '' } }, markers: { size: 0, hover: { sizeOffset: 6 } }, xaxis: { categories: ['Jan', 'Feb', 'March', 'Apr', 'May', 'Jun', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'], }, tooltip: { y: [{ title: { formatter: function(val) { return val + " (%)" } } }, { title: { formatter: function(val) { return val + " (%)" } } }] }, }; // Disk - Server Performance var options3 = { series: [{ name: "Disk", data: [22, 11, 15, 28, 10, 27, 23, 19, 15, 21, 26, 28] }], chart: { height: 160, type: 'line', // line, bar, area toolbar: { show: false, }, zoom: { enabled: false }, }, responsive: [{ breakpoint: 1200, options: { chart: { height: 200, }, } }], colors: ['var(--chart-color4)'], dataLabels: { enabled: false }, stroke: { width: [3], curve: 'smooth', // straight, smooth //dashArray: [5] }, legend: { tooltipHoverFormatter: function(val, opts) { return val + ' - ' + opts.w.globals.series[opts.seriesIndex][opts.dataPointIndex] + '' } }, markers: { size: 0, hover: { sizeOffset: 6 } }, xaxis: { categories: ['Jan', 'Feb', 'March', 'Apr', 'May', 'Jun', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'], }, tooltip: { y: [{ title: { formatter: function(val) { return val + " (%)" } } }, { title: { formatter: function(val) { return val + " (%)" } } }] }, }; // EtherNet - Server Performance var options4 = { series: [{ name: "Ethernet", data: [45, 10, 80, 20, 45, 55, 95, 10, 30, 20, 75, 40] }], chart: { height: 160, type: 'line', // line, bar, area toolbar: { show: false, }, zoom: { enabled: false }, }, responsive: [{ breakpoint: 1200, options: { chart: { height: 200, }, } }], colors: ['var(--chart-color3)'], dataLabels: { enabled: false }, stroke: { width: [3], curve: 'smooth', // straight, smooth //dashArray: [5] }, legend: { tooltipHoverFormatter: function(val, opts) { return val + ' - ' + opts.w.globals.series[opts.seriesIndex][opts.dataPointIndex] + '' } }, markers: { size: 0, hover: { sizeOffset: 6 } }, xaxis: { categories: ['Jan', 'Feb', 'March', 'Apr', 'May', 'Jun', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'], }, tooltip: { y: [{ title: { formatter: function(val) { return val + " (%)" } } }, { title: { formatter: function(val) { return val + " (%)" } } }] }, }; $("#server_performance a").on("click", function() { setTimeout(function() { var chart = new ApexCharts(document.querySelector("#apex-Memory"), options2); chart.render(); var chart = new ApexCharts(document.querySelector("#apex-Disk"), options3); chart.render(); var chart = new ApexCharts(document.querySelector("#apex-Ethernet"), options4); chart.render(); }, 700); }); // Traffic Overview var options5 = { series: [{ name: 'Upload', data: [13, 23, 20, 8, 13, 27, 33, 12, 67, 22, 43, 21, 49, 13, 23] }, { name: 'Download', data: [44, 55, 41, 67, 22, 43, 21, 49, 13, 23, 20, 8, 13, 27, 33] }], chart: { type: 'bar', height: 200, stacked: true, //stackType: '100%', toolbar: { show: false, }, }, colors: ['var(--chart-color1)', 'var(--chart-color5)'], responsive: [{ breakpoint: 480, options: { legend: { position: 'bottom', offsetX: -10, offsetY: 0 } } }], xaxis: { categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', ], }, fill: { opacity: 1 }, dataLabels: { enabled: false, }, legend: { position: 'bottom', }, tooltip: { y: [{ title: { formatter: function(val) { return val + " (GB)" } } }, { title: { formatter: function(val) { return val + " (GB)" } } }] }, }; var chart = new ApexCharts(document.querySelector("#apex-TrafficOverview"), options5); chart.render(); // Monitoring var options6 = { series: [32, 56, 12], chart: { type: 'donut', width: 340, toolbar: { show: false, }, }, responsive: [{ breakpoint: 1200, options: { chart: { width: 260 }, legend: { position: 'bottom' } } }], labels: ['CPU', 'RAM', 'HDD'], colors: ['var(--chart-color1)', 'var(--chart-color2)', 'var(--chart-color3)'], dataLabels: { enabled: false }, legend: { position: 'bottom', // top, bottom enabled: false } }; var chart = new ApexCharts(document.querySelector("#apex-Monitoring"), options6); chart.render(); // Datatable $('#myDataTable_no_filter').addClass('nowrap').dataTable({ responsive: true, searching: false, paging: false, ordering: false, info: false, });