Skip to content

Commit

Permalink
Merge pull request #50 from pafernanr/devel
Browse files Browse the repository at this point in the history
Add demo pages and multiple UI improvements
  • Loading branch information
pafernanr authored May 19, 2024
2 parents 2bc2244 + ee8586b commit 511b6ac
Show file tree
Hide file tree
Showing 68 changed files with 33,768 additions and 84 deletions.
6 changes: 4 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
### SarCharts
SarCharts gets [sysstat](https://sysstat.github.io/) files from provided `sarfilespaths` and generates dynamic HTML Charts.

**[Live Demo](https://pafernanr.github.io/sarcharts/)**

### Requirements
`sadf` command is needed to read sar files. Hence [sysstat](https://sysstat.github.io/) package is required.

Expand All @@ -21,11 +23,11 @@ optional arguments:
-d {D,I,W,E}, --debug {D,I,W,E}
Set debug level. Default `W`.
-e EVENTFILE, --eventfile EVENTFILE
Add events csv file. Header: # date;hostname;event_name;event_description
Add events csv file. Header: # date;hostname;eventname;eventdescription
-f FROMDATE, --fromdate FROMDATE
Include metrics/events from this date.
-m METRICFILE, --metricfile METRICFILE
Add metrics csv file. Header: # date;hostname;metric_name;metric_value
Add metrics csv file. Header: # date;hostname;metricname;metricvalue
-o OUTPUTPATH, --outputpath OUTPUTPATH
Path to put output files. Default `./sarcharts`.
-t TODATE, --todate TODATE
Expand Down
6 changes: 4 additions & 2 deletions doc/README.md → docs/README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
### SarCharts
SarCharts gets [sysstat](https://sysstat.github.io/) files from provided `sarfilespaths` and generates dynamic HTML Charts.

**[Live Demo](https://pafernanr.github.io/sarcharts/)**

### Requirements
`sadf` command is needed to read sar files. Hence [sysstat](https://sysstat.github.io/) package is required.

Expand All @@ -21,11 +23,11 @@ optional arguments:
-d {D,I,W,E}, --debug {D,I,W,E}
Set debug level. Default `W`.
-e EVENTFILE, --eventfile EVENTFILE
Add events csv file. Header: # date;hostname;event_name;event_description
Add events csv file. Header: # date;hostname;eventname;eventdescription
-f FROMDATE, --fromdate FROMDATE
Include metrics/events from this date.
-m METRICFILE, --metricfile METRICFILE
Add metrics csv file. Header: # date;hostname;metric_name;metric_value
Add metrics csv file. Header: # date;hostname;metricname;metricvalue
-o OUTPUTPATH, --outputpath OUTPUTPATH
Path to put output files. Default `./sarcharts`.
-t TODATE, --todate TODATE
Expand Down
4 changes: 4 additions & 0 deletions docs/events.csv
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
# date;hostname;eventname;eventdescription
2024-05-14T13:24:43+02:00;pablolaptop.pegaso.lan;Backup Started; Server Backup was started at this time.
2024-05-14 14:24:43;pablolaptop.pegaso.lan;OOM;Out Of Memory detected.
2024-05-14 19:00;pablolaptop.pegaso.lan;DB Conn;Database connections is greater than 5000.
142 changes: 142 additions & 0 deletions docs/html/css/sarcharts.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
* {
font-size: 1em;
}
.container {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: min-content min-content min-content;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
"info hostlist"
"info chartlist"
"info activities";
padding: 0.3em;
border: 1px solid #ccc;
border-radius: 10px;
margin-bottom: 5px;
}

.info {
justify-self: center;
align-self: center;
grid-area: info;
width: min-content;
text-wrap: nowrap;
padding: 0em 1em;
}

.hostlist {
justify-self: left;
align-self: center;
grid-area: hostlist; }

.chartlist {
justify-self: left;
align-self: center;
grid-area: chartlist; }

.activities {
justify-self: left;
align-self: center;
grid-area: activities; }


div.activities ul, div.info ul, div.hostlist ul, div.chartlist ul {
padding: 0;
margin: 0;
list-style-type: none;
}

div.activities ul {
display: flex;
flex-wrap: wrap;
}
div.activities ul li {
display: inline;
padding: 0.3em;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 5px;
margin-left: 0.2em;
}
a:link, a:visited, a:active {
color: #5685bc;
text-decoration: none;
}
a:hover {
color:rgba(255, 0, 0, 0.650);
text-decoration: none;
}
div.chart {
height: 400px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 10px;
margin-bottom: 5px;
}
li.active {
background-color: #eee;
}
li.inactive {
background-color: #fff;
}
li.disabled {
color: #ccc;
background-color: #fff;
}
li.i_active {
background-color: #eee;
}
li.i_inactive {
background-color: #fff;
}
li.i_disabled {
color: #ccc;
background-color: #fff;
}
.zg-ul-select:not(.active)::after {
background-image: url('../img/chevron.svg');
}
#footer {
padding: 0.3em;
background-color: #eee;
border: solid 1px #000;
border-radius: 5px;
}
#eventname, #eventdescription {
display: none;
}
#copyright {
width: 20%;
border-bottom: 1px solid #5685bc;
border-top: 1px solid #5685bc;
font-size: 0.72em;
font-weight: bold;
margin: 0em auto 0em auto;
padding: 0.1em;
text-align: center;
}
#eventname {
width: 35%;
font-family: monospace;
border-bottom: 1px solid #5685bc;
border-top: 1px solid #5685bc;
margin: 0em auto 0em auto;
padding: 0.1em;
text-align: center;
}
#eventdescription {
margin-top: 0.5em;
font-family: monospace;
white-space: pre;
}
#eventdemo {
width: max-content;
margin: 0em auto 0em auto;
background-color: #ddd;
border: dashed 1px #000;
border-radius: 1em;
padding: 0.5em;
color: #000;
}
95 changes: 95 additions & 0 deletions docs/html/css/ul-select.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
ul.zg-ul-select {
min-width: 20em;
width: max-content;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
margin: 0;
padding: 0;
position:relative;
}
ul.zg-ul-select li {
width: auto;
font-weight: bold;
display: none;
padding: 3px 5px;
}
ul.zg-ul-select:not(.active) b {
font-weight:normal;
}
ul.zg-ul-select li.active {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border: 1px solid #aaa;
color: #111;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
ul.zg-ul-select.active {
width: max-content;
border: 1px solid #aaa;
position: absolute;
background-color:#FFF;
z-index:1;
}
ul.zg-ul-select.active li {
border: none;
display: block;
}
ul.zg-ul-select.active li:hover {
background-color: #0074d9;
color:#FFF;
}
ul.zg-ul-select.active li.active {
background-color: #c4e0f9;
}
ul.zg-ul-select.active li.active:hover {
background-color: #0074d9;
color:#FFF;
}

.selected--zg-ul-select {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #111;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
width: auto;
}
.selected--zg-ul-select.active {
border: 1px solid #111;
padding: 3px 5px;
}
.zg-ul-select:not(.active)::after {
content: ' ';
position: absolute;
right: 7px;
top: 3px;
background-image: url('../img/chevron.svg'); /* change path to chevron here, if needed */
width: 20px;
height: 20px;
background-size: contain;
pointer-events: none;
}
.selected--zg-ul-select.active .description { display:none }
.zg-ul-select:not(.active) li.active .description { display:none }
1 change: 1 addition & 0 deletions docs/html/img/chevron.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 14 additions & 0 deletions docs/html/js/chart.umd.js

Large diffs are not rendered by default.

7 changes: 7 additions & 0 deletions docs/html/js/chartjs-adapter-date-fns.bundle.min.js

Large diffs are not rendered by default.

7 changes: 7 additions & 0 deletions docs/html/js/chartjs-plugin-annotation.min.js

Large diffs are not rendered by default.

Loading

0 comments on commit 511b6ac

Please sign in to comment.