936 lines
57 KiB
JavaScript
Executable File
936 lines
57 KiB
JavaScript
Executable File
import React from 'react';
|
|
import faker from 'faker/locale/en_US';
|
|
import {
|
|
Container,
|
|
Row,
|
|
Card,
|
|
CardBody,
|
|
UncontrolledTooltip,
|
|
Progress,
|
|
Table,
|
|
Nav,
|
|
NavItem,
|
|
NavLink,
|
|
CardTitle,
|
|
ListGroup,
|
|
ListGroupItem,
|
|
UncontrolledCollapse,
|
|
Col
|
|
} from './../../../components';
|
|
import { setupPage } from './../../../components/Layout/setupPage';
|
|
|
|
import { HeaderMain } from "../../components/HeaderMain";
|
|
|
|
import {
|
|
TinyLineChart
|
|
} from "./components/TinyLineChart";
|
|
import {
|
|
TinyAreaChart
|
|
} from "./components/TinyAreaChart";
|
|
import {
|
|
TinyArcChart
|
|
} from "./components/TinyArcChart";
|
|
|
|
|
|
/*eslint-disable */
|
|
const progressCompletion = [
|
|
"25",
|
|
"50",
|
|
"75",
|
|
"97"
|
|
];
|
|
/*eslint-enable */
|
|
|
|
const Reports = () => (
|
|
<Container>
|
|
<Row className="mb-2">
|
|
<Col lg={ 12 }>
|
|
<HeaderMain
|
|
title="Reports"
|
|
className="mb-3 mb-lg-5"
|
|
/>
|
|
</Col>
|
|
<Col xl={ 3 } lg={ 6 } className="mb-4 mb-lg-0">
|
|
<Card>
|
|
<CardBody className="bb-0">
|
|
<span className="d-flex">
|
|
<CardTitle tag="h6" className="mb-0 bb-0">
|
|
Temperatures
|
|
</CardTitle>
|
|
<span className="ml-auto justify-content-start">
|
|
<a href="javascript:;" className="ml-auto justify-content-start pr-2 text-decoration-none" id="TemperaturesTooltipSettings">
|
|
<i className="fa fa-fw fa-sliders"></i>
|
|
</a> <a href="javascript:;" id="TemperaturesTooltipAdd" className="text-decoration-none">
|
|
<i className="fa fa-fw fa-plus"></i>
|
|
</a>
|
|
</span>
|
|
<UncontrolledTooltip placement="top" target="TemperaturesTooltipSettings">
|
|
Settings
|
|
</UncontrolledTooltip>
|
|
<UncontrolledTooltip placement="top" target="TemperaturesTooltipAdd">
|
|
Add
|
|
</UncontrolledTooltip>
|
|
</span>
|
|
</CardBody>
|
|
<ListGroup flush>
|
|
<ListGroupItem tag="a" href="#" id="TemperaturesProcessorToggler" className="by-0 d-flex text-decoration-none">
|
|
Processor
|
|
<i className="fa fa-fw fa-angle-down ml-auto justify-content-end" id="TemperaturesProcessorTooltip"></i>
|
|
</ListGroupItem>
|
|
<UncontrolledTooltip placement="top" target="TemperaturesProcessorTooltip">
|
|
Show/Hide Section
|
|
</UncontrolledTooltip>
|
|
</ListGroup>
|
|
<UncontrolledCollapse toggler="#TemperaturesProcessorToggler" isOpen>
|
|
<CardBody className="pt-0">
|
|
<span className="d-flex mb-4">
|
|
<h1>39º</h1>
|
|
<span className="ml-auto text-right">
|
|
102º F <br />
|
|
<i className="fa fa-arrow-down fa-fw text-primary"></i>
|
|
</span>
|
|
</span>
|
|
<div className="d-flex justify-content-between mb-2">
|
|
<span className="d-flex align-items-center mr-2">Core 0</span>
|
|
<Progress value="25" className="mt-2 w-50 progress" style={{height: "5px"}} />
|
|
<span className="ml-2 text-inverse">86º</span>
|
|
</div>
|
|
<div className="d-flex justify-content-between mb-2">
|
|
<span className="d-flex align-items-center mr-2">Core 1</span>
|
|
<Progress value="59" className="mt-2 w-50 progress" style={{height: "5px"}} />
|
|
<span className="ml-2 text-inverse">40º</span>
|
|
</div>
|
|
<div className="d-flex justify-content-between mb-2">
|
|
<span className="d-flex align-items-center mr-2">Core 2</span>
|
|
<Progress value="25" className="mt-2 w-50 progress" style={{height: "5px"}} />
|
|
<span className="ml-2 text-inverse">86º</span>
|
|
</div>
|
|
<div className="d-flex justify-content-between mb-2">
|
|
<span className="d-flex align-items-center mr-2">Core 3</span>
|
|
<Progress value="59" className="mt-2 w-50 progress" style={{height: "5px"}} />
|
|
<span className="ml-2 text-inverse">40º</span>
|
|
</div>
|
|
</CardBody>
|
|
</UncontrolledCollapse>
|
|
<ListGroup flush>
|
|
<ListGroupItem tag="a" href="#" id="TemperaturesGraphicsToggler" className="by-0 d-flex text-decoration-none">
|
|
Graphics
|
|
<i className="fa fa-fw fa-angle-down ml-auto justify-content-end" id="TemperaturesGraphicsTooltip"></i>
|
|
</ListGroupItem>
|
|
<UncontrolledTooltip placement="top" target="TemperaturesGraphicsTooltip">
|
|
Show/Hide Section
|
|
</UncontrolledTooltip>
|
|
</ListGroup>
|
|
<UncontrolledCollapse toggler="#TemperaturesGraphicsToggler" isOpen>
|
|
<CardBody className="pt-0">
|
|
<span className="d-flex mb-3">
|
|
<h1>68º</h1>
|
|
<span className="ml-auto text-right">
|
|
102º F <br />
|
|
<i className="fa fa-arrow-up fa-fw text-danger"></i>
|
|
</span>
|
|
</span>
|
|
<div className="d-flex justify-content-between mb-2">
|
|
<span className="d-flex align-items-center mr-2">Core</span>
|
|
<Progress value="85" className="mt-2 w-50" style={{height: "5px"}} />
|
|
<span className="ml-2 text-inverse">86º</span>
|
|
</div>
|
|
</CardBody>
|
|
</UncontrolledCollapse>
|
|
<ListGroup flush>
|
|
<ListGroupItem tag="a" href="#" id="TemperaturesStorageToggler" className="by-0 d-flex text-decoration-none">
|
|
Storage
|
|
<i className="fa fa-fw fa-angle-down ml-auto justify-content-end" id="TemperaturesStorageTooltip"></i>
|
|
</ListGroupItem>
|
|
<UncontrolledTooltip placement="top" target="TemperaturesStorageTooltip">
|
|
Show/Hide Section
|
|
</UncontrolledTooltip>
|
|
</ListGroup>
|
|
<UncontrolledCollapse toggler="#TemperaturesStorageToggler" isOpen>
|
|
<CardBody className="pt-0">
|
|
<div className="mb-3 mt-2">
|
|
<TinyLineChart />
|
|
</div>
|
|
<div className="mb-3">
|
|
<span className="d-flex">
|
|
<span className="text-inverse">
|
|
Samsung 850 PRO
|
|
</span>
|
|
<span className="ml-auto">
|
|
512GB
|
|
</span>
|
|
</span>
|
|
<div className="d-flex justify-content-between">
|
|
<span className="d-flex align-items-center mr-2">SSD 0</span>
|
|
<Progress value="25" className="mt-2 w-50 progress" style={{height: "5px"}} />
|
|
<span className="ml-2 text-inverse">31º</span>
|
|
</div>
|
|
</div>
|
|
<div className="mb-3">
|
|
<span className="d-flex">
|
|
<span className="text-inverse">
|
|
WD Black
|
|
</span>
|
|
<span className="ml-auto">
|
|
1TB
|
|
</span>
|
|
</span>
|
|
<div className="d-flex justify-content-between">
|
|
<span className="d-flex align-items-center mr-2">HDD 1</span>
|
|
<Progress value="67" className="mt-2 w-50 progress" style={{height: "5px"}} />
|
|
<span className="ml-2 text-inverse">81º</span>
|
|
</div>
|
|
</div>
|
|
<div className="mb-0">
|
|
<span className="d-flex">
|
|
<span className="text-inverse">
|
|
Quantum PCI
|
|
</span>
|
|
<span className="ml-auto">
|
|
2TB
|
|
</span>
|
|
</span>
|
|
<div className="d-flex justify-content-between">
|
|
<span className="d-flex align-items-center mr-2">SSD 3</span>
|
|
<Progress value="35" className="mt-2 w-50 progress" style={{height: "5px"}} />
|
|
<span className="ml-2 text-inverse">21º</span>
|
|
</div>
|
|
</div>
|
|
</CardBody>
|
|
</UncontrolledCollapse>
|
|
</Card>
|
|
</Col>
|
|
<Col xl={ 3 } lg={ 6 } className="mb-4 mb-lg-0">
|
|
<Card className="mb-sm-4 mb-xl-0">
|
|
<CardBody className="bb-0">
|
|
<span className="d-flex">
|
|
<CardTitle tag="h6" className="mb-0 bb-0">
|
|
Usage
|
|
</CardTitle>
|
|
<span className="ml-auto justify-content-start">
|
|
<a href="javascript:;" className="ml-auto justify-content-start pr-2 text-decoration-none" id="UsageTooltipSettings">
|
|
<i className="fa fa-fw fa-sliders"></i>
|
|
</a> <a href="javascript:;" id="UsageTooltipAdd" className="text-decoration-none">
|
|
<i className="fa fa-fw fa-plus"></i>
|
|
</a>
|
|
</span>
|
|
<UncontrolledTooltip placement="top" target="UsageTooltipSettings">
|
|
Settings
|
|
</UncontrolledTooltip>
|
|
<UncontrolledTooltip placement="top" target="UsageTooltipAdd">
|
|
Add
|
|
</UncontrolledTooltip>
|
|
</span>
|
|
</CardBody>
|
|
<ListGroup flush>
|
|
<ListGroupItem tag="a" href="#" id="ProcessorToggler" className="by-0 d-flex text-decoration-none">
|
|
Processor
|
|
<i className="fa fa-fw fa-angle-down ml-auto justify-content-end" id="ProcessorTooltip"></i>
|
|
</ListGroupItem>
|
|
<UncontrolledTooltip placement="top" target="ProcessorTooltip">
|
|
Show/Hide Section
|
|
</UncontrolledTooltip>
|
|
</ListGroup>
|
|
<UncontrolledCollapse toggler="#ProcessorToggler" isOpen>
|
|
<CardBody className="pt-0">
|
|
<dl className="row mb-3">
|
|
<dt className="col-sm-5">CPU</dt>
|
|
<dd className="col-sm-7 text-right text-inverse">Intel Core i7</dd>
|
|
<dt className="col-sm-5">Base (Turbo)</dt>
|
|
<dd className="col-sm-7 text-right text-inverse">4 GHz (4.4 GHz)</dd>
|
|
<dt className="col-sm-8">Cores (Threads)</dt>
|
|
<dd className="col-sm-4 text-right text-inverse">4 (8)</dd>
|
|
</dl>
|
|
<Progress multi className="mt-2" style={{height: "5px"}}>
|
|
<Progress bar value="45" />
|
|
<Progress bar color="danger" value="15" />
|
|
</Progress>
|
|
</CardBody>
|
|
</UncontrolledCollapse>
|
|
<ListGroup flush>
|
|
<ListGroupItem tag="a" href="#" id="UsageLoadToggler" className="by-0 d-flex text-decoration-none">
|
|
Usage (Load)
|
|
<i className="fa fa-fw fa-angle-down ml-auto justify-content-end" id="UsageLoadTooltip"></i>
|
|
</ListGroupItem>
|
|
<UncontrolledTooltip placement="top" target="UsageLoadTooltip">
|
|
Show/Hide Section
|
|
</UncontrolledTooltip>
|
|
<UncontrolledCollapse toggler="#UsageLoadToggler" isOpen>
|
|
<CardBody className="pt-0">
|
|
<Table size="sm" className="mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" className="bt-0 bb-0 align-middle text-left">
|
|
<h1 className="pt-0">78%</h1>
|
|
</th>
|
|
<th scope="col" className="text-center bt-0 bb-0 align-bottom" width="5">
|
|
<p style={{ textOrientation: 'unset', lineHeight: '0' }} className="mb-0">
|
|
<i className="fa fa-fw fa-stop text-gray-300"></i>
|
|
<i className="fa fa-fw fa-stop text-gray-300"></i>
|
|
<i className="fa fa-fw fa-stop text-primary"></i>
|
|
<i className="fa fa-fw fa-stop text-primary"></i>
|
|
<i className="fa fa-fw fa-stop text-primary"></i>
|
|
</p>
|
|
</th>
|
|
<th scope="col" className="text-center bt-0 bb-0 align-bottom" width="5">
|
|
<p style={{ textOrientation: 'unset', lineHeight: '0' }} className="mb-0">
|
|
<i className="fa fa-fw fa-stop text-gray-300"></i>
|
|
<i className="fa fa-fw fa-stop text-gray-300"></i>
|
|
<i className="fa fa-fw fa-stop text-gray-300"></i>
|
|
<i className="fa fa-fw fa-stop text-primary"></i>
|
|
<i className="fa fa-fw fa-stop text-primary"></i>
|
|
</p>
|
|
</th>
|
|
<th scope="col" className="text-center bt-0 bb-0 align-bottom" width="5">
|
|
<p style={{ textOrientation: 'unset', lineHeight: '0' }} className="mb-0">
|
|
<i className="fa fa-fw fa-stop text-gray-300"></i>
|
|
<i className="fa fa-fw fa-stop text-gray-300"></i>
|
|
<i className="fa fa-fw fa-stop text-gray-300"></i>
|
|
<i className="fa fa-fw fa-stop text-gray-300"></i>
|
|
<i className="fa fa-fw fa-stop text-primary"></i>
|
|
</p>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td className="bt-0">Cores</td>
|
|
<td className="bt-0 text-center text-inverse">1</td>
|
|
<td className="bt-0 text-center text-inverse">2</td>
|
|
<td className="bt-0 text-center text-inverse">3</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Usage %</td>
|
|
<td className="text-center text-inverse">27</td>
|
|
<td className="text-center text-inverse">78</td>
|
|
<td className="text-center text-inverse">13</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Tendency</td>
|
|
<td className="text-center">
|
|
<i className="fa fa-arrow-down fa-fw text-danger"></i>
|
|
</td>
|
|
<td className="text-center">
|
|
<i className="fa fa-arrow-down fa-fw text-danger"></i>
|
|
</td>
|
|
<td className="text-center">
|
|
<i className="fa fa-arrow-down fa-fw text-danger"></i>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</Table>
|
|
</CardBody>
|
|
</UncontrolledCollapse>
|
|
</ListGroup>
|
|
<ListGroup flush>
|
|
<ListGroupItem tag="a" href="#" id="GraphicsToggler" className="by-0 d-flex text-decoration-none">
|
|
Graphics
|
|
<i className="fa fa-fw fa-angle-down ml-auto justify-content-end" id="GraphicsTooltip"></i>
|
|
</ListGroupItem>
|
|
<UncontrolledTooltip placement="top" target="GraphicsTooltip">
|
|
Show/Hide Section
|
|
</UncontrolledTooltip>
|
|
<UncontrolledCollapse toggler="#GraphicsToggler" isOpen>
|
|
<CardBody className="pt-0">
|
|
<dl className="row mb-0">
|
|
<dt className="col-sm-5">GPU Name</dt>
|
|
<dd className="col-sm-7 text-right text-inverse">NVIDIA GTX 980</dd>
|
|
<dt className="col-sm-5">Bus Width</dt>
|
|
<dd className="col-sm-7 text-right text-inverse">4 GHz (4.4 GHz)</dd>
|
|
<dt className="col-sm-7">Memory</dt>
|
|
<dd className="col-sm-5 text-right text-inverse">4096 GDDR5</dd>
|
|
</dl>
|
|
</CardBody>
|
|
</UncontrolledCollapse>
|
|
</ListGroup>
|
|
<ListGroup flush>
|
|
<ListGroupItem tag="a" href="#" id="UsageLoadToggler2" className="by-0 d-flex text-decoration-none">
|
|
Usage (Load)
|
|
<i className="fa fa-fw fa-angle-down ml-auto justify-content-end" id="UsageLoadTooltip2"></i>
|
|
</ListGroupItem>
|
|
<UncontrolledTooltip placement="top" target="UsageLoadTooltip2">
|
|
Show/Hide Section
|
|
</UncontrolledTooltip>
|
|
<UncontrolledCollapse toggler="#UsageLoadToggler2" isOpen>
|
|
<CardBody className="pt-0">
|
|
<Table size="sm">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" className="bt-0 bb-0 align-top text-left">
|
|
<h1 className="pt-0">85%</h1>
|
|
</th>
|
|
<th scope="col" className="text-right bt-0 bb-0 align-middle">
|
|
<TinyArcChart />
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td className="bt-0">Current Core Clock</td>
|
|
<td className="bt-0 text-right text-inverse">390Mhz</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Current Memory Clock</td>
|
|
<td className="text-right text-inverse">160MHz</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Memory Usage (%)</td>
|
|
<td className="text-right text-inverse">306MB (7%)</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Tendency</td>
|
|
<td className="text-right">
|
|
<i className="fa fa-arrow-down fa-fw text-danger"></i>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</Table>
|
|
</CardBody>
|
|
</UncontrolledCollapse>
|
|
</ListGroup>
|
|
</Card>
|
|
</Col>
|
|
<Col xl={ 6 } lg={ 12 }>
|
|
<Row>
|
|
<Col xl={ 6 } lg={ 6 }>
|
|
<Card className="mb-4">
|
|
<CardBody className="bb-0">
|
|
<span className="d-flex">
|
|
<CardTitle tag="h6" className="mb-0 bb-0">
|
|
Allocation
|
|
</CardTitle>
|
|
<span className="ml-auto justify-content-start">
|
|
<a href="javascript:;" className="ml-auto justify-content-start pr-2 text-decoration-none" id="AllocationTooltipSettings">
|
|
<i className="fa fa-fw fa-sliders"></i>
|
|
</a> <a href="javascript:;" id="AllocationTooltipAdd" className="text-decoration-none">
|
|
<i className="fa fa-fw fa-plus"></i>
|
|
</a>
|
|
</span>
|
|
<UncontrolledTooltip placement="top" target="AllocationTooltipSettings">
|
|
Settings
|
|
</UncontrolledTooltip>
|
|
<UncontrolledTooltip placement="top" target="AllocationTooltipAdd">
|
|
Add
|
|
</UncontrolledTooltip>
|
|
</span>
|
|
</CardBody>
|
|
<ListGroup flush>
|
|
<ListGroupItem tag="a" href="#" id="RamToggler" className="by-0 d-flex text-decoration-none">
|
|
RAM
|
|
<i className="fa fa-fw fa-angle-down ml-auto justify-content-end" id="RamTooltip"></i>
|
|
</ListGroupItem>
|
|
<UncontrolledTooltip placement="top" target="RamTooltip">
|
|
Show/Hide Section
|
|
</UncontrolledTooltip>
|
|
</ListGroup>
|
|
<UncontrolledCollapse toggler="#RamToggler" isOpen>
|
|
<CardBody className="pt-0">
|
|
<dl className="row mb-3">
|
|
<dt className="col-sm-5">Installed</dt>
|
|
<dd className="col-sm-7 text-right text-inverse">16GB DDR3</dd>
|
|
<dt className="col-sm-5">DRAM Freq</dt>
|
|
<dd className="col-sm-7 text-right text-inverse">4 GHz (4.4 GHz)</dd>
|
|
<dt className="col-sm-8">Cores (Threads)</dt>
|
|
<dd className="col-sm-4 text-right text-inverse">4 (8)</dd>
|
|
</dl>
|
|
<Progress multi className="mt-2 mb-3" style={{height: "5px"}}>
|
|
<Progress bar value="45" />
|
|
<Progress bar color="danger" value="15" />
|
|
</Progress>
|
|
<Table size="sm">
|
|
<tbody>
|
|
<tr>
|
|
<td className="bt-0">
|
|
<i className="fa fa fa-circle-o text-primary mr-1"></i>
|
|
In Use
|
|
</td>
|
|
<td className="text-right text-inverse bt-0">
|
|
796MB <i className="fa fa-arrow-up fa-fw text-gray-300"></i>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<i className="fa fa fa-circle-o text-danger mr-1"></i>
|
|
In Cache
|
|
</td>
|
|
<td className="text-right text-inverse">
|
|
180MB <i className="fa fa-arrow-down fa-fw text-gray-300"></i>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<i className="fa fa fa-circle-o text-gray-300 mr-1"></i>
|
|
Available
|
|
</td>
|
|
<td className="text-right text-inverse">
|
|
1672MB <i className="fa fa-arrow-down fa-fw text-gray-300"></i>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</Table>
|
|
<div>
|
|
<TinyAreaChart />
|
|
</div>
|
|
</CardBody>
|
|
</UncontrolledCollapse>
|
|
</Card>
|
|
</Col>
|
|
<Col xl={ 6 } lg={ 6 }>
|
|
<Card className="mb-4">
|
|
<CardBody className="bb-0">
|
|
<span className="d-flex">
|
|
<CardTitle tag="h6" className="mb-0 bb-0">
|
|
Cooling
|
|
</CardTitle>
|
|
<span className="ml-auto justify-content-start">
|
|
<a href="javascript:;" className="ml-auto justify-content-start pr-2 text-decoration-none" id="CoolingTooltipSettings">
|
|
<i className="fa fa-fw fa-sliders"></i>
|
|
</a> <a href="javascript:;" id="CoolingTooltipAdd" className="text-decoration-none">
|
|
<i className="fa fa-fw fa-plus"></i>
|
|
</a>
|
|
</span>
|
|
<UncontrolledTooltip placement="top" target="CoolingTooltipSettings">
|
|
Settings
|
|
</UncontrolledTooltip>
|
|
<UncontrolledTooltip placement="top" target="CoolingTooltipAdd">
|
|
Add
|
|
</UncontrolledTooltip>
|
|
</span>
|
|
</CardBody>
|
|
<ListGroup flush>
|
|
<ListGroupItem tag="a" href="#" id="FansToggler" className="by-0 d-flex text-decoration-none">
|
|
Fans
|
|
<i className="fa fa-fw fa-angle-down ml-auto justify-content-end" id="FansTooltip"></i>
|
|
</ListGroupItem>
|
|
<UncontrolledTooltip placement="top" target="FansTooltip">
|
|
Show/Hide Section
|
|
</UncontrolledTooltip>
|
|
</ListGroup>
|
|
<UncontrolledCollapse toggler="#FansToggler" isOpen>
|
|
<CardBody className="pt-0">
|
|
<div className="mb-2">
|
|
<span className="d-flex">
|
|
<span>
|
|
Left Fontal Fan
|
|
</span>
|
|
<span className="ml-auto text-inverse">
|
|
120mm
|
|
</span>
|
|
</span>
|
|
<input type="range" className="custom-range pb-0" id="leftFontalFan" />
|
|
<span className="d-flex">
|
|
<span>
|
|
<i className="fa fa-fw fa-leaf"></i>
|
|
</span>
|
|
<span className="ml-auto">
|
|
250RPM
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<div className="mb-4">
|
|
<span className="d-flex">
|
|
<span>
|
|
Right Fontal Fan
|
|
</span>
|
|
<span className="ml-auto text-inverse">
|
|
120mm
|
|
</span>
|
|
</span>
|
|
<input type="range" max="3" step="1" className="custom-range pb-0" id="leftFontalFan" />
|
|
<span className="d-flex">
|
|
<span>
|
|
<i className="fa fa-fw fa-leaf"></i>
|
|
</span>
|
|
<span className="ml-auto">
|
|
250RPM
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<Nav pills className="nav-fill">
|
|
<NavItem>
|
|
<NavLink href="#" active>
|
|
<i className="fa fa-sliders"></i>
|
|
</NavLink>
|
|
</NavItem>
|
|
<NavItem>
|
|
<NavLink href="#">
|
|
<i className="fa fa-leaf"></i>
|
|
</NavLink>
|
|
</NavItem>
|
|
<NavItem>
|
|
<NavLink href="#">
|
|
<i className="fa fa-dashboard"></i>
|
|
</NavLink>
|
|
</NavItem>
|
|
</Nav>
|
|
</CardBody>
|
|
</UncontrolledCollapse>
|
|
</Card>
|
|
</Col>
|
|
<Col xl={ 12 }>
|
|
<Card>
|
|
<CardBody className="bb-0 pb-0">
|
|
<span className="d-flex">
|
|
<CardTitle tag="h6" className="mb-0 bb-0">
|
|
Activity
|
|
</CardTitle>
|
|
<span className="ml-auto justify-content-start">
|
|
<a href="javascript:;" className="ml-auto justify-content-start pr-2" id="ActivityTooltipSettings">
|
|
<i className="fa fa-fw fa-sliders"></i>
|
|
</a> <a href="javascript:;" id="ActivityTooltipAdd">
|
|
<i className="fa fa-fw fa-plus"></i>
|
|
</a>
|
|
</span>
|
|
<UncontrolledTooltip placement="top" target="ActivityTooltipSettings">
|
|
Settings
|
|
</UncontrolledTooltip>
|
|
<UncontrolledTooltip placement="top" target="ActivityTooltipAdd">
|
|
Add
|
|
</UncontrolledTooltip>
|
|
</span>
|
|
</CardBody>
|
|
<CardBody>
|
|
<Nav tabs className="mb-3">
|
|
<NavItem>
|
|
<NavLink href="#" active>
|
|
Processes
|
|
</NavLink>
|
|
</NavItem>
|
|
<NavItem>
|
|
<NavLink href="#">
|
|
Network
|
|
</NavLink>
|
|
</NavItem>
|
|
<NavItem>
|
|
<NavLink href="#">
|
|
Storage
|
|
</NavLink>
|
|
</NavItem>
|
|
<NavItem>
|
|
<NavLink href="#">
|
|
Energy
|
|
</NavLink>
|
|
</NavItem>
|
|
</Nav>
|
|
<Row>
|
|
<Col lg={ 6 }>
|
|
<dl className="row mb-0">
|
|
<dt className="col-sm-5">
|
|
Operating System
|
|
</dt>
|
|
<dd className="col-sm-7 text-right text-inverse">
|
|
Windows 10 x64
|
|
</dd>
|
|
<dt className="col-sm-5">
|
|
Build
|
|
</dt>
|
|
<dd className="col-sm-7 text-right text-inverse">
|
|
9876
|
|
</dd>
|
|
</dl>
|
|
</Col>
|
|
<Col lg={ 6 }>
|
|
<dl className="row mb-0">
|
|
<dt className="col-sm-5">
|
|
Admin
|
|
</dt>
|
|
<dd className="col-sm-7 text-right text-inverse">
|
|
John Malkovich
|
|
</dd>
|
|
<dt className="col-sm-5">
|
|
Network
|
|
</dt>
|
|
<dd className="col-sm-7 text-right text-inverse">
|
|
Wireless Network
|
|
</dd>
|
|
</dl>
|
|
</Col>
|
|
</Row>
|
|
<Table hover className="mb-0" size="sm" responsive>
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" className="bt-0">
|
|
Process
|
|
</th>
|
|
<th scope="col" className="align-middle text-right bt-0">
|
|
Read
|
|
</th>
|
|
<th scope="col" className="align-middle text-right bt-0">
|
|
Threads
|
|
</th>
|
|
<th scope="col" className="align-middle text-right bt-0">
|
|
CPU
|
|
</th>
|
|
<th scope="col" className="align-middle text-right bt-0">
|
|
GPU
|
|
</th>
|
|
<th scope="col" className="align-middle text-right bt-0">
|
|
Memory
|
|
</th>
|
|
<th scope="col" className="align-middle text-right bt-0">
|
|
Tend
|
|
</th>
|
|
<th className="bt-0"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td className="align-middle text-nowrap">
|
|
<i className="fa fa fa-window-maximize mr-1"></i>
|
|
<span className="text-inverse">
|
|
Chrome
|
|
</span>
|
|
</td>
|
|
<td className="align-middle text-right">
|
|
30MB/s
|
|
</td>
|
|
<td className="align-middle text-right">
|
|
20
|
|
</td>
|
|
<td className="align-middle text-right">
|
|
24%
|
|
</td>
|
|
<td className="align-middle text-right">
|
|
56%
|
|
</td>
|
|
<td className="align-middle text-right">
|
|
7.9GB
|
|
</td>
|
|
<td className="align-middle text-right">
|
|
<i className="fa fa-arrow-down fa-fw text-danger"></i>
|
|
</td>
|
|
<td className="align-middle text-right">
|
|
<a href="#" id="tr1">
|
|
<i className="fa fa-fw fa-angle-down"></i>
|
|
</a>
|
|
<UncontrolledTooltip placement="top" target="tr1">
|
|
Show Details
|
|
</UncontrolledTooltip>
|
|
</td>
|
|
</tr>
|
|
<UncontrolledCollapse toggler="#tr1">
|
|
<tr>
|
|
<td colSpan="8" className="bt-0">
|
|
<samp className="small">{ faker.internet.ip() }</samp>
|
|
</td>
|
|
</tr>
|
|
</UncontrolledCollapse>
|
|
<tr>
|
|
<td className="align-middle text-nowrap">
|
|
<i className="fa fa fa-window-maximize mr-1"></i>
|
|
<span className="text-inverse">
|
|
Photoshop
|
|
</span>
|
|
</td>
|
|
<td className="align-middle text-right">
|
|
40MB/s
|
|
</td>
|
|
<td className="align-middle text-right">
|
|
60
|
|
</td>
|
|
<td claclassNamess="align-middle text-right">
|
|
25%
|
|
</td>
|
|
<td className="align-middle text-right">
|
|
10%
|
|
</td>
|
|
<td className="align-middle text-right">
|
|
1.1GB
|
|
</td>
|
|
<td className="align-middle text-right">
|
|
<i className="fa fa-arrow-up fa-fw text-success"></i>
|
|
</td>
|
|
<td className="align-middle text-right">
|
|
<a href="#" id="tr2">
|
|
<i className="fa fa-fw fa-angle-down"></i>
|
|
</a>
|
|
<UncontrolledTooltip placement="top" target="tr2">
|
|
Show Details
|
|
</UncontrolledTooltip>
|
|
</td>
|
|
</tr>
|
|
<UncontrolledCollapse toggler="#tr2">
|
|
<tr>
|
|
<td colSpan="8" className="bt-0">
|
|
<samp className="small">{ faker.internet.ip() }</samp>
|
|
</td>
|
|
</tr>
|
|
</UncontrolledCollapse>
|
|
<tr>
|
|
<td className="align-middle text-nowrap">
|
|
<i className="fa fa fa-window-maximize mr-1"></i>
|
|
<span className="text-inverse">
|
|
Chrome
|
|
</span>
|
|
</td>
|
|
<td className="align-middle text-right">
|
|
60MB/s
|
|
</td>
|
|
<td className="align-middle text-right">
|
|
60
|
|
</td>
|
|
<td className="align-middle text-right">
|
|
19%
|
|
</td>
|
|
<td className="align-middle text-right">
|
|
56%
|
|
</td>
|
|
<td className="align-middle text-right">
|
|
2.4GB
|
|
</td>
|
|
<td className="align-middle text-right">
|
|
<i className="fa fa-arrow-down fa-fw text-danger"></i>
|
|
</td>
|
|
<td className="align-middle text-right">
|
|
<a href="#" id="tr3">
|
|
<i className="fa fa-fw fa-angle-down"></i>
|
|
</a>
|
|
<UncontrolledTooltip placement="top" target="tr3">
|
|
Show Details
|
|
</UncontrolledTooltip>
|
|
</td>
|
|
</tr>
|
|
<UncontrolledCollapse toggler="#tr3">
|
|
<tr>
|
|
<td colSpan="8" className="bt-0">
|
|
<samp className="small">{ faker.internet.ip() }</samp>
|
|
</td>
|
|
</tr>
|
|
</UncontrolledCollapse>
|
|
<tr>
|
|
<td className="align-middle text-nowrap">
|
|
<i className="fa fa fa-window-maximize mr-1"></i>
|
|
<span className="text-inverse">
|
|
Safari
|
|
</span>
|
|
</td>
|
|
<td className="align-middle text-right">
|
|
10MB/s
|
|
</td>
|
|
<td className="align-middle text-right">
|
|
40
|
|
</td>
|
|
<td className="align-middle text-right">
|
|
19%
|
|
</td>
|
|
<td className="align-middle text-right">
|
|
56%
|
|
</td>
|
|
<td className="align-middle text-right">
|
|
1.1GB
|
|
</td>
|
|
<td className="align-middle text-right">
|
|
<i className="fa fa-arrow-up fa-fw text-success"></i>
|
|
</td>
|
|
<td className="align-middle text-right">
|
|
<a href="#" id="tr4">
|
|
<i className="fa fa-fw fa-angle-down"></i>
|
|
</a>
|
|
<UncontrolledTooltip placement="top" target="tr4">
|
|
Show Details
|
|
</UncontrolledTooltip>
|
|
</td>
|
|
</tr>
|
|
<UncontrolledCollapse toggler="#tr4">
|
|
<tr>
|
|
<td colSpan="8" className="bt-0">
|
|
<samp className="small">{ faker.internet.ip() }</samp>
|
|
</td>
|
|
</tr>
|
|
</UncontrolledCollapse>
|
|
<tr>
|
|
<td className="align-middle text-nowrap">
|
|
<i className="fa fa fa-window-maximize mr-1"></i>
|
|
<span className="text-inverse">
|
|
Chrome
|
|
</span>
|
|
</td>
|
|
<td className="align-middle text-right">
|
|
30MB/s
|
|
</td>
|
|
<td className="align-middle text-right">
|
|
10
|
|
</td>
|
|
<td className="align-middle text-right">
|
|
27%
|
|
</td>
|
|
<td className="align-middle text-right">
|
|
27%
|
|
</td>
|
|
<td className="align-middle text-right">
|
|
9.1GB
|
|
</td>
|
|
<td className="align-middle text-right">
|
|
<i className="fa fa-arrow-down fa-fw text-danger"></i>
|
|
</td>
|
|
<td className="align-middle text-right">
|
|
<a href="#" id="tr5">
|
|
<i className="fa fa-fw fa-angle-down"></i>
|
|
</a>
|
|
<UncontrolledTooltip placement="top" target="tr5">
|
|
Show Details
|
|
</UncontrolledTooltip>
|
|
</td>
|
|
</tr>
|
|
<UncontrolledCollapse toggler="#tr5">
|
|
<tr>
|
|
<td colSpan="8" className="bt-0">
|
|
<samp className="small">{ faker.internet.ip() }</samp>
|
|
</td>
|
|
</tr>
|
|
</UncontrolledCollapse>
|
|
<tr>
|
|
<td className="align-middle text-nowrap">
|
|
<i className="fa fa fa-window-maximize mr-1"></i>
|
|
<span className="text-inverse">
|
|
System
|
|
</span>
|
|
</td>
|
|
<td className="align-middle text-right">
|
|
70MB/s
|
|
</td>
|
|
<td className="align-middle text-right">
|
|
30
|
|
</td>
|
|
<td className="align-middle text-right">
|
|
10%
|
|
</td>
|
|
<td className="align-middle text-right">
|
|
19%
|
|
</td>
|
|
<td className="align-middle text-right">
|
|
8.8GB
|
|
</td>
|
|
<td className="align-middle text-right">
|
|
<i className="fa fa-arrow-up fa-fw text-success"></i>
|
|
</td>
|
|
<td className="align-middle text-right">
|
|
<a href="#" id="tr6">
|
|
<i className="fa fa-fw fa-angle-down"></i>
|
|
</a>
|
|
<UncontrolledTooltip placement="top" target="tr6">
|
|
Show Details
|
|
</UncontrolledTooltip>
|
|
</td>
|
|
</tr>
|
|
<UncontrolledCollapse toggler="#tr6">
|
|
<tr>
|
|
<td colSpan="8" className="bt-0">
|
|
<samp className="small">{ faker.internet.ip() }</samp>
|
|
</td>
|
|
</tr>
|
|
</UncontrolledCollapse>
|
|
</tbody>
|
|
</Table>
|
|
</CardBody>
|
|
</Card>
|
|
</Col>
|
|
</Row>
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
);
|
|
|
|
export default setupPage({
|
|
pageTitle: 'Reports'
|
|
})(Reports); |