Skip to content

Update for pcp-dstat and Bootstrap 5 #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ianw wants to merge 12 commits into
base: master
Choose a base branch
from
Open

Update for pcp-dstat and Bootstrap 5 #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
08c6873
Update dependencies
ianw Oct 22, 2021
10f5fc8
Trim styles
ianw Oct 22, 2021
03e0e96
Conver to bootstrap 5
ianw Oct 22, 2021
c318ec7
Trim margin of overview panel
ianw Oct 22, 2021
d4cf417
Fix walking elements of input list
ianw Oct 22, 2021
3d8e83e
Use list-group-item for graphs
ianw Oct 22, 2021
9a2f011
Filter out blank lines
ianw Oct 22, 2021
6eccb4b
Replace remove .size() with .length
ianw Oct 22, 2021
21336c8
Fix focus panel chart selection for pcp-dstat
ianw Oct 22, 2021
ead04f4
Update generate_page.sh
ianw Oct 22, 2021
03de18a
Add a sample.csv and update docs
ianw Oct 22, 2021
acd4d2b
Fix refresh for embedded csv
ianw Oct 22, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 7 additions & 5 deletions css/bootstrap.min.css
View file
Open in desktop

Large diffs are not rendered by default.

138 changes: 0 additions & 138 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,71 +1,8 @@
html,body {
height: 100%;
}

#header {
position: fixed;
top: 0;
background-repeat: no-repeat;
margin: 0;
padding: 20 0 0 20;
width: 100%;
z-index: 99;
background-color: rgba(255, 255, 255, 0.94);
}

#header h1, #header #focus {
float: left;
}

#header #focus {
width: 200px;
height: 120px;
float: left;
margin-left:50px;
}

#header #menu-btn {
margin-right: 30px;
margin-top: 30px;
float: right;
font-size: 25px
}

#menu {
height: 50px;
display: none;
}

#menu:after {
content:"";
background: black;
height: 1px;
width: 50%;
}

#left-menu {
float: left;
}

#right-menu {
float: right;
margin-right: 30px;
font-size: 20px;
}


#focus .area {
fill: rgba(5, 103, 150, 0.69);
clip-path: url(#clip);
}

#content {
padding-top: 160px;
padding-left: 50px;
padding-right: 50px;
padding-bottom: 50px;
}

.axis path, .axis line {
fill: none;
stroke: #000;
Expand All @@ -80,85 +17,10 @@ html,body {
}


#header-bar {
position: absolute;
right:0;
left:0;
top:0;
height: 100px;
background-color: #ABC2EF;
}

body {
background-color: black;
}

#main {
min-height: 100%;
}

#dashboard, #main, #content {
background-color: rgb(254, 254, 254);
}

#dashboard {
margin-top: 25px;
}

.top {
background-color: #CCC;
margin-bottom: 20px;
}

.clickable {
cursor: pointer;
}

.list-group-item:first-child {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}

.list-group-item:last-child {
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}

.list-group-item {
border: 1px solid #60668C;
}

.list-group-item-compact {
width: 600px;
float: left;
}
.list-group-item-compact svg {
height: 50px !important;
}

.panel-left {
float: left;
}

.panel-clear {
clear: both;
}

.list-body {
margin-right: 10px;
margin-left: -30px;
}

.list-body p {
margin-left: 40px;
background-color: #D6EAFB;
width: 60px;
border-radius: 20px;
text-align: center;
display: inline;
padding: 0 5px 0 5px;
}

#drop-background {
position: absolute;
right: 0; left: 0; top: 0; bottom: 0;
Expand Down
4 changes: 3 additions & 1 deletion generate_page.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,15 +32,17 @@ main() {

html=`cat index.html | grep -v stylesheet | grep -v script | grep -v '</body>'`
echo $html
for js in js/{d3.min.js,jquery-2.1.4.js,nv.d3.min.js,dashboard.js,graph.js}; do
for js in js/{d3.min,jquery-3.6.0.min,nv.d3.min,bootstrap.bundle.min,dashboard,graph}.js; do
echo "<script type='text/javascript'>"
cat ${js}
echo
echo "</script>"
done
echo "<script type='text/javascript'>gCSVs=${gCSVs};</script>"
for css in css/*.css; do
echo "<style>"
cat ${css}
echo
echo "</style>"
done

Expand Down
10,742 changes: 748 additions & 9,994 deletions generate_page_example.html
View file
Open in desktop

Large diffs are not rendered by default.

Binary file modified images/example.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
173 changes: 96 additions & 77 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,87 +1,106 @@
<html>
<head>
<title>dstat</title>
<link rel="stylesheet" type="text/css" href="css/nv.d3.min.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<script src="js/jquery-2.1.4.js" type="text/javascript"></script>
<script src="js/d3.min.js" type="text/javascript"></script>
<script src="js/nv.d3.js" type="text/javascript"></script>
<script src="js/dashboard.js" type="text/javascript"></script>
<script src="js/graph.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<!doctype html>
<html lang="en">
<head>

<div id="main">
<div class="page-header" id="header">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/nv.d3.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />

<div id="menu">
<div class="btn-group" id="left-menu">
<div class="btn-group">
<button id="btn_xaxis" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn-default btn">
X axis <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#" onclick="change_xaxis('time')">Time</a></li>
<li class="divider"></li>
<li><a href="#" onclick="change_xaxis('seq')">Sequential</a></li>
</ul>
</div>
<div class="btn-group">
<div class="btn-group">
<button id="btn_xaxis" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn-default btn">
Interface <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#" onclick="change_interface('standard');">Standard</a></li>
<li class="divider"></li>
<li><a href="#" onclick="change_interface('compact')">Compact</a></li>
<title>dstat</title>

</head>
<body>
<script src="js/bootstrap.bundle.min.js" type="text/javascript"></script>
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="js/d3.min.js" type="text/javascript"></script>
<script src="js/nv.d3.min.js" type="text/javascript"></script>
<script src="js/dashboard.js" type="text/javascript"></script>
<script src="js/graph.js" type="text/javascript"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">dstat</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="granularityDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Granularity
</a>
<ul class="dropdown-menu" aria-labelledby="granularityDropdown">
<li><a class="dropdown-item" href="#" onclick="change_granularity(1, 'avg');">all ticks</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#" onclick="change_granularity(5, 'avg');">5 ticks / average</a></li>
<li><a class="dropdown-item"href="#" onclick="change_granularity(5, 'max');">5 ticks / maximum</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#" onclick="change_granularity(15, 'avg');">15 ticks / average</a></li>
<li><a class="dropdown-item" href="#" onclick="change_granularity(15, 'max');">15 ticks / maximum</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#" onclick="change_granularity(30, 'avg');">30 ticks / average</a></li>
<li><a class="dropdown-item" href="#" onclick="change_granularity(30, 'max');">30 ticks / maximum</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#" onclick="change_granularity(60, 'avg');">60 ticks / average</a></li>
<li><a class="dropdown-item" href="#" onclick="change_granularity(60, 'max');">60 ticks / maximum</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#" onclick="change_granularity(300, 'avg');">300 ticks / average</a></li>
<li><a class="dropdown-item" href="#" onclick="change_granularity(300, 'max');">300 ticks / maximum</a></li>
</ul>
</div>
</div>
<div class="btn-group">
<div class="btn-group">
<button id="btn_xaxis" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn-default btn">
Granularity <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#" onclick="change_granularity(1, 'avg');">all ticks</a></li>
<li class="divider"></li>
<li><a href="#" onclick="change_granularity(5, 'avg');">5 ticks / average</a></li>
<li><a href="#" onclick="change_granularity(5, 'max');">5 ticks / maximum</a></li>
<li class="divider"></li>
<li><a href="#" onclick="change_granularity(15, 'avg');">15 ticks / average</a></li>
<li><a href="#" onclick="change_granularity(15, 'max');">15 ticks / maximum</a></li>
<li class="divider"></li>
<li><a href="#" onclick="change_granularity(30, 'avg');">30 ticks / average</a></li>
<li><a href="#" onclick="change_granularity(30, 'max');">30 ticks / maximum</a></li>
<li class="divider"></li>
<li><a href="#" onclick="change_granularity(60, 'avg');">60 ticks / average</a></li>
<li><a href="#" onclick="change_granularity(60, 'max');">60 ticks / maximum</a></li>
<li class="divider"></li>
<li><a href="#" onclick="change_granularity(300, 'avg');">300 ticks / average</a></li>
<li><a href="#" onclick="change_granularity(300, 'max');">300 ticks / maximum</a></li>
</li>

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="xaxisDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
X-Axis
</a>
<ul class="dropdown-menu" aria-labelledby="xaxisDropdown">
<li><a class="dropdown-item" href="#" onclick="change_xaxis('time');">Time</a></li>
<li><a class="dropdown-item" href="#" onclick="change_xaxis('seq');">Sequential</a></li>
</ul>
</div>
</div>
</div>
<div class="btn-group" id="right-menu">
<a href"#" onclick="refresh();"><span class="glyphicon glyphicon-repeat"/></a>
</li>

<!-- disabled for now, not sure what this is supposed to do
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="compactDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
X-Axis
</a>
<ul class="dropdown-menu" aria-labelledby="compactDropdown">
<li><a class="dropdown-item" href="#" onclick="change_interface('standard');">Standard</a></li>
<li><a class="dropdown-item" href="#" onclick="change_interface('compact');">Compact</a></li>
</ul>
</li>
-->
</ul>
</div>
</div>


<h1>dstat</h1>
<div id="focus"></div>
<div id="menu-btn"><a href="#" onclick="toggle_menu();"><span class="glyphicon glyphicon-menu-hamburger"></a></span></div>
</div>
<div id="content">
<div id="drop-background"><div id="drop"><p>Drag & drop dstat files<img src="images/drop.png" alt=""/></p></div></div>
<div id="dashboard" class="container-fluid list-group"></div>
</nav>

<!-- drag and drop modal -->
<div id="drop-background">
<div id="drop">
<p>Drag & drop dstat files<img src="images/drop.png" alt=""/></p>
</div>
</div>
</div>

<!-- the "focus box" slider that allows you to narrow the range the graphs show -->
<div class="container-fluid">

<div class="row">
<div class="col">
<div class="d-flex justify-content-center" id="focus"></div>
<small class="d-flex justify-content-center text-muted">Slide to select time range</small>
</div> <!-- /col -->
</div> <!-- /row -->

<div class="row">
<div class="col">
<ul id="dashboard" class="list-group"></ul>
</div> <!-- /col -->
</div> <!-- /row -->

</div> <!-- container-fluid -->

</body>
</body>
</html>
7 changes: 7 additions & 0 deletions js/bootstrap.bundle.min.js
View file
Open in desktop

Large diffs are not rendered by default.

Loading