Skip to content

Commit

Permalink
Merge pull request #4294 from jbee/PAYARA-4236-mc-ux
Browse files Browse the repository at this point in the history 
PAYARA-4236 Various UX improvements and small Additions
  • Loading branch information
@jbee
jbee authored Nov 4, 2019
2 parents c98a1f9 + 9727b1f commit 6bb7d73
Show file tree
Hide file tree
Showing 12 changed files with 1,166 additions and 514 deletions.
55 changes: 34 additions & 21 deletions appserver/monitoring-console/webapp/JS_DOCS.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,18 +28,26 @@ state changes in case of relead.
```
UI = { pages, settings }
pages = { *: PAGE }
PAGE = { name, id, numberOfColumns, widgets }
PAGE = { name, id, numberOfColumns, rotate, widgets }
name = string
id = string
numberOfColumns = number
rotate = boolean
widgets = [WIDGET] | { *: WIDGET }
settings = { display }
settings = { display, home, refresh, rotation }
display = boolean
home = string
refresh = { paused, interval }
rotation = { enabled, interval }
paused = boolean
enabled = boolean
interval = number
```
* `id` is derived from `name` and used as attribute name in `pages` object
* `widgets` can be ommitted for an empty page
* `numberOfColumns` can be ommitted
* `widgets` is allowed to be an array - if so it is made into an object using each widget's `series` for the attribute name
* `home` is the `PAGE.id` of the currently shown page

### Widget Model

Expand Down Expand Up @@ -267,29 +275,34 @@ The model creates a new jquery object that must be inserted into the DOM by the
* `assessments` help to understand or classify the given value qualitatively



### Navigation API
Describes the model expected by the `Navigation` component.
This component is the main page navigation at the top.

```
NAVIGATION = { pages, onChange }
pages = [PAGE_ITEM]
PAGE_ITEM = { label, id, active }
label = string
id = string
active = boolean
onChange = fn (id) => ()
```
* `onChange` is called when another page is selected passing the `PAGE_ITEM.id` of the selected page.


### Indicator API
Describes the model expected by the `Indicator` component.
This component gives feedback on the status of each widget.

```
INDOCATOR = { status, text }
INDICATOR = { status, text }
status = Status
text = string
```
```


### MENU API
Describes the model expected by the `MENU` component that is used for any of the text + icon menus or toolbars.

```
MENU = { id, groups }
groups = [BUTTON_GROUP | BUTTON]
BUTTON_GROUP = { icon, label, description, clickable, items }
items = [BUTTON]
clickable = boolean
BUTTON = { icon, label, description, disabled, hidden, onClick }
icon = string
label = string
description = string
disabled = boolean
hidden = boolean
onClick = fn () => ()
```
* `id` is optional
* `description` is optional
* if item in `MENU` array has `items` it is a `BUTTON_GROUP` otherwise it is a `BUTTON`
185 changes: 108 additions & 77 deletions appserver/monitoring-console/webapp/src/main/webapp/css/monitoring-console.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,9 @@
only if the new code is made subject to such option by the copyright
holder.
*/

body {
background-color: #002c3e;
font: 13px/1.231 helvetica,clean,sans-serif;
background-color: #003247;
font: 13px/1.231 'IBM Plex Sans', helvetica,clean,sans-serif;
color: white;
margin: 0;
padding: 0;
Expand All @@ -55,6 +54,7 @@ select {
background: white;
padding: 2px 5px;
border-radius: 2px;
margin-bottom: 2px;
}
input[type=text], input[type=number] {
border: 1px solid #ccc;
Expand All @@ -68,34 +68,38 @@ input[type=text] {
input[type=number] {
width: 60px;
}
input[type=checkbox] {
vertical-align: middle;
}
canvas {
position: relative;
position: relative;
}
button {
padding: 5px 1em;
margin: 0 1px;
font-weight: normal;
background-color: #F0981B;
background: rgb(240,152,27);
box-shadow: 0px 3px 3px rgba(67,68,69,0.05),
0px 2px 2px rgba(67,68,69,0.1),
0px 1px 1px rgba(67,68,69,0.15);
border-width: 0;
color: white;
color: #101012;
border-radius: 2px;
cursor: pointer;
line-height: 1.0;
font-weight: 500;
}
button:hover {
background-color: #F1A232;
background: rgba(240,152,27,0.9);
box-shadow: 0px 1px 1px rgba(16,16,18,0.3);
transform : translateY(1px);
}
#logo {
height: 30px;
top: 5px;
left: 15px;
position: absolute;
}
#newPage {
position: absolute;
left: 110px;
top: 5px;
}

#panel-trace {
position: absolute;
Expand All @@ -110,17 +114,14 @@ button:hover {
box-sizing: border-box;
margin-bottom: 40px;
}
#trace-chart-box {
position: relative;
#trace-widget {
background-color: #002433;
clear: both;
position: relative;
padding: 10px;
}
#trace-iconbar {
margin-bottom: 5px;
}
#trace-iconbar .btnIcon {
float: none;
#trace-chart-box {
position: relative;
clear: both;
}
#grid-console {
position: relative;
Expand All @@ -135,21 +136,13 @@ button:hover {
padding: 0 5px;
}
.widget-chart-box {
position: relative;
}
.btnIcon {
float: right;
z-index: 101;
margin: 0;
margin-left: 5px;
padding: 0;
color: #bbb;
background-color: transparent;
font-weight: bold;
position: absolute;
top: 40px;
}
button.btnIcon:hover {
color: white;
background-color: transparent;
.widget-title-bar {
position: absolute;
z-index: 101;
width: calc(100% - 20px);
}
.widget-title-bar h3 {
font-size: 130%;
Expand All @@ -174,41 +167,22 @@ button.btnIcon:hover {
font-style: normal;
margin-left: 0.5em;
color: white;
}
#layout-bar {
display: inline-block;
float: right;
text-align: right;
width: 50%;
}
#panel-iconbar {
padding: 0 10px;
}
#panel-iconbar button {
color: #bbb;
background-color: transparent;
padding: 5px;
font-size: 14px;
letter-spacing: -2px;
}
#panel-iconbar button:hover {
color: white;
}
#chart-grid {
width: 100%;
table-layout:fixed;
border-spacing: 5px;
border-collapse: separate;
border-collapse: separate;
padding-top: 5px;
}
#chart-grid td {
background-color: #002433;
padding: 10px;
vertical-align: top;
border: 2px solid #002433;
position: relative;
}
#chart-grid td.chart-selected h3 {
color: #00618A;
background-color: white;
background-color: #0096D6;
}
.stable {
background-color: rgba(153, 102, 255, 0.2);
Expand All @@ -227,6 +201,10 @@ button.btnIcon:hover {
transform: translate(-50%, -50%);
}

#panel-grid {
position: relative;
}

/**
* Widget Settings (Sizes and Visibility)
*/
Expand Down Expand Up @@ -255,6 +233,7 @@ button.btnIcon:hover {
#Settings table td:first-child {
width: 120px;
vertical-align: top;
padding-top: 5px;
}
#Settings a, #Settings a:visited {
color: white;
Expand Down Expand Up @@ -318,7 +297,10 @@ table.tags th, table.tags td {
/* Widget Legend */
.Legend {
margin: 0;
padding: 0 20px;
position: absolute;
bottom: 10px;
left: 15px;
padding: 0;
}
.Legend li {
display: inline-block;
Expand Down Expand Up @@ -349,6 +331,9 @@ table.tags th, table.tags td {
.Legend li.status-error strong {
color: red;
}
.Legend span, .Legend strong {
background-color: #002433;
}
@keyframes blinker {
50% {
opacity: 0.5;
Expand All @@ -361,7 +346,10 @@ table.tags th, table.tags td {
font-weight: bold;
padding: 5px 10px;
text-align: center;
margin: 5px;
position: absolute;
width: 50%;
margin: 15% 25%;
background-color: rgba(0,36,51,0.5);
}
.Indicator.status-missing {
border-color: Violet;
Expand All @@ -386,28 +374,71 @@ table.tags th, table.tags td {

/* Page Navigation */
#Navigation {
position: relative;
left: 50%;
transform: translateX(-50%);
display: inline-block;
}
#Navigation select {
background-color: #002c3e;
padding: 5px;
border-width: 0;
color: white;
font-size: 160%;
float: left;
margin-left: 40%;
margin-top: 6px;
font-weight: bold;
max-width: 400px;
font-size: 20px;
}

#Navigation h2 {
min-width: 100px;
font-weight: bold;
font-size: 140%;
/* Menus */
#Menu {
margin-top: 10px;
}
.Menu {
float: right;
font-size: 14px;
overflow: hidden;
}
.Menu strong {
display: inline-block;
margin: 0;
margin-top: 5px;
min-width: 20px;
text-align: left;
}
.Menu button {
color: white;
background-color: transparent;
padding: 0.5em 1em;
display: inline-block;
text-align: left;
border-radius: 0px;
box-shadow: none;
}
.Menu button:hover {
color: #434445;
background-color: #D2D8DA;
}
.Menu button:disabled {
color: #DAE0E2;
cursor: not-allowed;
}
.Menu .Item {
padding: 2px 0.75em;
float: left;
}
.Menu .Item a {
display: block;
}
.Menu .Group button {
float: none;
display: block;
white-space: nowrap;
width: 100%;
}
.Menu .Group {
display: none;
position: absolute;
z-index: 200;
background-color: #0096D6;
overflow: hidden;
padding: 0;
}
.Menu .Item:hover .Group {
display: block;
}
.widget .Menu .Group {
margin-left: -85px;
}
.Menu .clickable {
cursor: pointer;
}
Loading

0 comments on commit 6bb7d73

Please sign in to comment.