Tomasz Owczarczyk
936
app/routes/Dashboards/Reports/Reports.js
Executable file
936
app/routes/Dashboards/Reports/Reports.js
Executable file
@@ -0,0 +1,936 @@
|
||||
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);
|
||||
Reference in New Issue
Block a user