Skip to content

Commit

Permalink
- updated JS libraries for execution dashboard: jquery 3.5.1, ChartJS…
Browse files Browse the repository at this point in the history
… 2.9.3, tablesorter 2.31.3

- updated Nexial scripts with optimized and newer commands
- updated images and documentation (`README`)
- updated icons used in execution dashboard HTML, along with minor stylesheet updates

Signed-off-by: automike <[email protected]>
  • Loading branch information
mikeliucc committed Aug 4, 2020
1 parent 64e0bdb commit 973f5f8
Show file tree
Hide file tree
Showing 23 changed files with 1,336 additions and 8 deletions.
4 changes: 4 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -23,3 +23,7 @@
hs_err_pid*

*.iml
/resources/iframe.html
/**/*OLD*
/**/*.*OLD
/projects/agent-portal.smoke-qa/
25 changes: 17 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,30 @@
### Introduction
This project is an extension to [Nexial Automation Platform](https://github.com/nexiality/nexial-core/). Its main
goal is to provide insights into the executions of Nexial automation script. Its main output is an Execution Dashboard,
which can be rendered in a few different ways:
which can be rendered in a few different ways:<br/>

- Execution Dashboard displayed in portrait mode:<br/>
![](image/dashboard1.png)
<br/>
- Execution Dashboard displayed in landscape mode:<br/>
![](image/dashboard2.png)

Besides the chart and the execution summary grid, this dashboard also has the capability to drill
down to the next level of execution stats, and links to the actual execution output. As a web page,
the dashboard can be hosted in a variety of ways, making it highly accessible to its audience.
down to the next level of execution stats:<br/>
![](image/dashboard3.png)<br/>

.. and links to the corresponding execution summary:<br/>
![](image/dashboard4.png)<br/>

As a web page, the dashboard can be hosted in a variety of ways, making it highly accessible to its audience. It is
also easily to embed the execution dashboard as IFRAME into existing web pages and web applications.


### How It Works
[More details coming soon...]

At a high level, here's the flow:
1. Nexial is properly set up to use AWS S3 as its execution output storage:
1. Nexial is properly set up to use AWS S3 (or its alternative such as [MinIO](https://github.com/minio/minio) as its
execution output storage:
- use [`nexial-setup`](https://nexiality.github.io/documentation/userguide/BatchFiles#nexial-setupcmd--nexial-setupsh)
to set up one's Nexial for such capability.
2. Nexial executions are invoked with the following System variables assigned:
Expand All @@ -37,9 +45,10 @@ At a high level, here's the flow:
### How To Run It
To run the [`execution-summary`](execution-summary/artifact/script/execution-summary.xlsx) script, be sure to include
the following data variables from command line:
1. execdash.aws.accessKey - the `ACCESS_KEY` to access the S3 bucket used as Nexial execution output storage
2. execdash.aws.secretKey - the `SECRET_KEY` to access the S3 bucket used as Nexial execution output storage
3. execdash.aws.region - the region where the said S3 bucket is located
1. `execdash.aws.accessKey` - the `ACCESS_KEY` to access the S3 bucket used as Nexial execution output storage
2. `execdash.aws.secretKey` - the `SECRET_KEY` to access the S3 bucket used as Nexial execution output storage
3. `execdash.aws.region` - the region where the said S3 bucket is located
4. `execdash.aws.url` - (S3 alternative only) the URL of the target bucket; not necessary if AWS S3 is used
4. bucketName - the name of the said S3 bucket
5. artifactSubdir - the sub-directory under the said S3 bucket used as the base directory for all Nexial execution
output
Expand Down
1 change: 1 addition & 0 deletions execution-dashboard.iml
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,6 @@
<content url="file://$MODULE_DIR$" />
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
<orderEntry type="library" name="all" level="application" />
</component>
</module>
Binary file modified image/dashboard1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified image/dashboard2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added image/dashboard3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added image/dashboard4.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions projects/DUMMY/dummy
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
DO NOT DELETE. THIS FILE IS NEEDED TO MAINTAIN THE PARENT porjects DIRECTORY
3 changes: 3 additions & 0 deletions resources/config.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"execCount": 90
}
35 changes: 35 additions & 0 deletions resources/css/rightside.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
#nexialResultSummary {
padding: 0;
}

#nexial_result_chart_canvas {
width: 100%;
}

.summary_chart {
width: 100%;
min-height: 350px !important;
}

#summaryTable {
width: 100%;
height: 200px;
overflow: auto;
margin-top: 15px;
}

#execution_results {
width: 100%;
}

.icon_font_size {
font-size: 1em;
}

#summarystats_div label {
margin-left: 10px;
}

.summarystats_label {
margin-top: 5px;
}
279 changes: 279 additions & 0 deletions resources/css/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,279 @@
body {
margin: 3px 0 2px 0;
padding: 0;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11pt;
color: #333;
}

.nexial_result_summary {
background: inherit;
color: #555;
padding: 0;
}

.nexial_result_summary .section_title {
text-align: center;
font-size: 14pt;
font-weight: bold;
}

.nexial_result_summary #execution_results tr:nth-child(even) {
background-color: #eee;
}

.nexial_result_summary #execution_results th {
background-color: #fbffff;
font-size: 11px;
border-right: 1px solid #bbb;
padding: 5px 15px 5px 5px;
letter-spacing: 0.05em;
text-align: left;
border-bottom: 1px solid #ddd;
}

.nexial_result_summary #execution_results td {
border-right: 1px solid #bbb;
text-align: right;
}

.summary_chart {
float: left;
position: relative;
min-height: 450px;
width: 55%;
}

#chartjs-tooltip {
opacity: 1;
position: absolute;
background: rgba(50, 50, 50, .7);
color: white;
border-radius: 3px;
-webkit-transition: all .1s ease;
transition: all .1s ease;
pointer-events: none;
-webkit-transform: translate(0%, 0);
transform: translate(0%, 0);
min-width: 140px;
max-width: 200px;
}

.chartjs-tooltip-key {
display: inline-block;
width: 10px;
height: 10px;
margin-right: 10px;
}

.tooltip-table {
font-size: 8pt;
font-family: Tahoma, Arial, Helvetica, sans-serif;
color: rgba(255, 255, 255, 0.8);
margin: 0;
padding: 0;
}

.tooltip-table thead tr th {
padding-bottom: 5px !important;
}

.tooltip-label {
width: 64px !important;
}

canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}

.summary_table {
float: right;
overflow-y: auto;
overflow-x: hidden;
margin-top: 47px;
height: 395px;
width: 44%;
}

thead td {
display: table;
}

tbody th {
display: block;
}

tr td:last-child {
border: 0;
}

#summarystats_div {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 15px 0 0 0;
padding: 0 40px;
background-color: rgba(220, 220, 220, 0.25);
border-top: 1px solid rgba(220, 220, 220, 0.75);
border-bottom: 1px solid rgba(220, 220, 220, 0.75);
}

#summarystats_div label {
margin-left: 12px;
}

.summarystats_div {
width: 110px;
height: 18px;
padding: 5px;
text-align: center;
}

#execution_results {
border: 1px solid #ccc;
font-size: 11px;
overflow-y: auto;
width: 100%;
}

#execution_results th {
text-align: center;
background-color: #ddd !important;
}

#execution_results th#link {
max-width: 17px;
width: 17px;
}

#execution_results th#dateTime {
max-width: 75px;
width: 75px;
}

#execution_results th#total {
max-width: 25px;
width: 25px;
}

#execution_results th#pass {
max-width: 25px;
width: 25px;
}

#execution_results th#fail {
max-width: 18px;
width: 18px;
}

#execution_results th#passRate {
max-width: 35px;
width: 35px;
}

#execution_results th#duration {
max-width: 50px;
width: 50px;
}

#execution_results tbody tr:hover {
background-color: #ddd !important;
}

#execution_results td.link {
text-align: center !important;
padding: 0;
background: rgba(250, 250, 250, 0.35);
}

#execution_results td a.drilldownlink {
background: url(../images/drilldown.jpg) no-repeat 3px 2px;
background-size: 16px;
text-decoration: none;
font-size: 12pt;
padding-right: 4px;
}

#execution_results td a.downloadlink {
background: url(../images/excel_download.png) no-repeat 3px 2px;
background-size: 16px;
text-decoration: none;
font-size: 12pt;
padding-right: 4px;
}

#execution_results td a.exeoutputlink {
background: url(../images/report.png) no-repeat 3px 2px;
background-size: 16px;
text-decoration: none;
font-size: 12pt;
padding-right: 4px;
}

#execution_results td a.drilldownlink:hover,
#execution_results td a.downloadlink:hover,
#execution_results td a.exeoutputlink:hover {
background-color: rgba(135, 185, 200, 0.5);
box-shadow: 0 0 5px rgba(0, 0, 80, 0.95);
}

#execution_results td.dateTime {
text-align: left !important;
}

div.ctrl {
position: fixed;
float: right;
top: 5px;
right: 5px;
padding: 3px;
}

div.ctrl input.ctrl {
color: #eee;
background-color: rgba(10, 53, 96, 0.4);
border: 1px solid #777;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: rgba(0, 0, 0, 0.7) 1px 1px 3px;
padding: 4px 8px;
cursor: pointer;
margin: 0 5px;
}

th.sort-by {
padding-right: 10px;
position: relative;
}

.sort-by:before, .sort-by:after {
border: 4px solid transparent;
content: "";
display: block;
height: 0;
right: 3px;
top: 50%;
position: absolute;
width: 0;
}

.sort-by:before {
border-bottom-color: #666;
margin-top: -9px;
}

.sort-by:after {
border-top-color: #666;
margin-top: 0;
}

.lastMod {
clear: both;
display: block;
font-size: 9pt;
font-weight: normal;
color: #888;
}
Loading

0 comments on commit 973f5f8

Please sign in to comment.