Create Rollout UI with Groups definition (#369)
* Rollout creation UI with groups definition Signed-off-by: Dominik Herbst <dominik.herbst@bosch-si.com> * Improved code quality Signed-off-by: Dominik Herbst <dominik.herbst@bosch-si.com> * Added a legend to the Rollouts Creation UI's PieChart Signed-off-by: Dominik Herbst <dominik.herbst@bosch-si.com> * Updated color palette for pie chart. Using RolloutGroupCreate for validation. Displaying pie chart for group editing. Signed-off-by: Dominik Herbst <dominik.herbst@bosch-si.com> * Optimized ComboBoxBuilder Signed-off-by: Dominik Herbst <dominik.herbst@bosch-si.com> * Removed not necessary RPC interfaces. Signed-off-by: Dominik Herbst <dominik.herbst@bosch-si.com> * Fix Rollout verification count query. Improved UI style. Added dependency management for d3. Signed-off-by: Dominik Herbst <dominik.herbst@bosch-si.com> * Auto start and scheduled start of Rollouts Signed-off-by: Dominik Herbst <dominik.herbst@bosch-si.com> * Optimized RSQL Utility to avoid multiple joins on the same table. Signed-off-by: Dominik Herbst <dominik.herbst@bosch-si.com> * Fixed RSQL Utility to avoid multiple joins on the same table to only work with OR nodes. Optimized validation queries for rollout group creation. Signed-off-by: Dominik Herbst <dominik.herbst@bosch-si.com> * Asynchronous handling of groups validation in the create rollouts UI. Signed-off-by: Dominik Herbst <dominik.herbst@bosch-si.com> * Added loading indicator to create rollout UI. Signed-off-by: Dominik Herbst <dominik.herbst@bosch-si.com> * Avoid parallel validation for a user session. Signed-off-by: Dominik Herbst <dominik.herbst@bosch-si.com> * Fix issues after merge of master into branch. Signed-off-by: Dominik Herbst <dominik.herbst@bosch-si.com> * Improve code quality Signed-off-by: Dominik Herbst <dominik.herbst@bosch-si.com> * Refreshing the total target count after validation on the rollouts creation UI. Signed-off-by: Dominik Herbst <dominik.herbst@bosch-si.com> * Remove unused RolloutUpdate method. Optimization of the RolloutHelper. Comments for RolloutGroupsValidation and RSQLUtility with explanation. Signed-off-by: Dominik Herbst <dominik.herbst@bosch-si.com>
This commit is contained in:
Dominik Herbst
committed by
Kai Zimmermann
Kai Zimmermann
parent
430bf632cf
commit
833b0795e3
@@ -7,95 +7,207 @@
|
||||
* http://www.eclipse.org/legal/epl-v10.html
|
||||
*/
|
||||
@mixin rollout {
|
||||
.rollout-option-group{
|
||||
font-size:12px;
|
||||
font-weight:400;
|
||||
margin-left:8px;
|
||||
}
|
||||
|
||||
.rollout-action-type-layout {
|
||||
.v-caption-padding-right-style{
|
||||
padding-right:0px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.v-context-menu .v-context-menu-item-basic-icon-container{
|
||||
height:0px !important;
|
||||
width:0px !important;
|
||||
}
|
||||
|
||||
.v-context-menu .v-context-menu-item-basic{
|
||||
background-color: #feffff !important;
|
||||
border-radius: 4px;
|
||||
font-family : $app-font-family;
|
||||
font-size : $app-text-font-size;
|
||||
font-weight : normal;
|
||||
font-style : normal;
|
||||
}
|
||||
|
||||
|
||||
.v-context-menu{
|
||||
background-color: #feffff !important;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.v-context-menu .v-context-menu-item-basic:focus, .v-context-menu .v-context-menu-item-basic-submenu:focus, .v-context-menu .v-context-menu-item-basic-open {
|
||||
@include valo-gradient($color: $hawkbit-primary-color);
|
||||
background-color: $hawkbit-primary-color !important;
|
||||
color: #e8eef3;
|
||||
height: 30px;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.disable-action-type-layout{
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.action-type-padding{
|
||||
padding: 0 0px !important;
|
||||
}
|
||||
|
||||
.rollout-caption-links{
|
||||
font-weight: 400;
|
||||
height: 25px ;
|
||||
padding: 0px 4px ;
|
||||
}
|
||||
|
||||
.rollout-target-count-message{
|
||||
color: $info-message-color-grey;
|
||||
}
|
||||
|
||||
.rollout-table{
|
||||
.v-table-cell-wrapper {
|
||||
cursor: default;
|
||||
.rollout-option-group {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.rollout-action-type-layout {
|
||||
.v-caption-padding-right-style {
|
||||
padding-right: 0px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.v-context-menu .v-context-menu-item-basic-icon-container {
|
||||
height: 0px !important;
|
||||
width: 0px !important;
|
||||
}
|
||||
|
||||
.v-context-menu .v-context-menu-item-basic {
|
||||
background-color: #feffff !important;
|
||||
border-radius: 4px;
|
||||
font-family: $app-font-family;
|
||||
font-size: $app-text-font-size;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.v-context-menu {
|
||||
background-color: #feffff !important;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.v-context-menu .v-context-menu-item-basic:focus, .v-context-menu .v-context-menu-item-basic-submenu:focus, .v-context-menu .v-context-menu-item-basic-open {
|
||||
@include valo-gradient($color: $hawkbit-primary-color);
|
||||
background-color: $hawkbit-primary-color !important;
|
||||
color: #e8eef3;
|
||||
height: 30px;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.disable-action-type-layout {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.action-type-padding {
|
||||
padding: 0 0px !important;
|
||||
}
|
||||
|
||||
.rollout-caption-links {
|
||||
font-weight: 400;
|
||||
height: 25px;
|
||||
padding: 0px 4px;
|
||||
}
|
||||
|
||||
.rollout-target-count-message {
|
||||
color: $info-message-color-grey;
|
||||
}
|
||||
|
||||
.rollout-table {
|
||||
.v-table-cell-wrapper {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.v-grid-cell.centeralign {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.v-grid-cell {
|
||||
font-size: $v-font-size--small !important;
|
||||
height: 34px !important;
|
||||
}
|
||||
|
||||
.v-grid-row {
|
||||
height: 34px !important;
|
||||
}
|
||||
|
||||
.v-grid-cell.frozen {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.v-grid-cell.frozen + th {
|
||||
border-left: $v-grid-border-size solid $widget-border-color;
|
||||
}
|
||||
|
||||
.v-button-boldhide {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.groups-pie-chart {
|
||||
float: right;
|
||||
|
||||
svg {
|
||||
.pie {
|
||||
stroke: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.v-grid-cell.centeralign {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.v-grid-cell {
|
||||
font-size: $v-font-size--small !important;
|
||||
height: 34px !important;
|
||||
}
|
||||
|
||||
.v-grid-row{
|
||||
height: 34px !important;
|
||||
}
|
||||
|
||||
.v-grid-cell.frozen{
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.v-grid-cell.frozen + th{
|
||||
border-left: $v-grid-border-size solid $widget-border-color ;
|
||||
}
|
||||
|
||||
.v-button-boldhide{
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
/*
|
||||
First child is intended for unassigned targets and should not be repeated.
|
||||
*/
|
||||
.pie:nth-child(1) { fill: #CBCBCB }
|
||||
|
||||
.pie:nth-child(16n+2) { fill: #E20015 }
|
||||
.pie:nth-child(16n+3) { fill: #B90276 }
|
||||
.pie:nth-child(16n+4) { fill: #50237F }
|
||||
.pie:nth-child(16n+5) { fill: #005691 }
|
||||
.pie:nth-child(16n+6) { fill: #008ECF }
|
||||
.pie:nth-child(16n+7) { fill: #00A8B0 }
|
||||
.pie:nth-child(16n+8) { fill: #78BE20 }
|
||||
.pie:nth-child(16n+9) { fill: #006249 }
|
||||
.pie:nth-child(16n+10) { fill: #F07F8A }
|
||||
.pie:nth-child(16n+11) { fill: #DC80BA }
|
||||
.pie:nth-child(16n+12) { fill: #A791BF }
|
||||
.pie:nth-child(16n+13) { fill: #7FAAC8 }
|
||||
.pie:nth-child(16n+14) { fill: #7FC6E7 }
|
||||
.pie:nth-child(16n+15) { fill: #7FD3D7 }
|
||||
.pie:nth-child(16n+16) { fill: #BBDE8F }
|
||||
.pie:nth-child(16n+17) { fill: #7FB0A4 }
|
||||
|
||||
.pie-info {
|
||||
pointer-events: none;
|
||||
|
||||
rect {
|
||||
fill: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
text {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
fill: $hawkbit-primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.rollout-groups {
|
||||
|
||||
.v-button {
|
||||
margin: 0 3px 3px 3px;
|
||||
}
|
||||
|
||||
.rollout-group-name {
|
||||
border-left: 5px solid #000000;
|
||||
}
|
||||
.v-gridlayout-slot:nth-child(16n+8) .rollout-group-name { border-left-color: #E20015 }
|
||||
.v-gridlayout-slot:nth-child(16n+14) .rollout-group-name { border-left-color: #B90276 }
|
||||
.v-gridlayout-slot:nth-child(16n+20) .rollout-group-name { border-left-color: #50237F }
|
||||
.v-gridlayout-slot:nth-child(16n+26) .rollout-group-name { border-left-color: #005691 }
|
||||
.v-gridlayout-slot:nth-child(16n+32) .rollout-group-name { border-left-color: #008ECF }
|
||||
.v-gridlayout-slot:nth-child(16n+38) .rollout-group-name { border-left-color: #00A8B0 }
|
||||
.v-gridlayout-slot:nth-child(16n+44) .rollout-group-name { border-left-color: #78BE20 }
|
||||
.v-gridlayout-slot:nth-child(16n+50) .rollout-group-name { border-left-color: #006249 }
|
||||
.v-gridlayout-slot:nth-child(16n+56) .rollout-group-name { border-left-color: #F07F8A }
|
||||
.v-gridlayout-slot:nth-child(16n+62) .rollout-group-name { border-left-color: #DC80BA }
|
||||
.v-gridlayout-slot:nth-child(16n+68) .rollout-group-name { border-left-color: #A791BF }
|
||||
.v-gridlayout-slot:nth-child(16n+74) .rollout-group-name { border-left-color: #7FAAC8 }
|
||||
.v-gridlayout-slot:nth-child(16n+80) .rollout-group-name { border-left-color: #7FC6E7 }
|
||||
.v-gridlayout-slot:nth-child(16n+86) .rollout-group-name { border-left-color: #7FD3D7 }
|
||||
.v-gridlayout-slot:nth-child(16n+92) .rollout-group-name { border-left-color: #BBDE8F }
|
||||
.v-gridlayout-slot:nth-child(16n+98) .rollout-group-name { border-left-color: #7FB0A4 }
|
||||
}
|
||||
|
||||
.rollout-target-count-title {
|
||||
}
|
||||
|
||||
.rollout-target-count-loading {
|
||||
color: #ed473b;
|
||||
}
|
||||
|
||||
.rollout-group-unassigned {
|
||||
border-left: 5px solid #CBCBCB;
|
||||
padding-left: 5px;
|
||||
margin-bottom: 2px;
|
||||
font-size: $v-font-size * .7;
|
||||
}
|
||||
|
||||
.groups-legend {
|
||||
.v-slot .rollout-group-count {
|
||||
border-left: 5px solid transparent;
|
||||
padding-left: 5px;
|
||||
font-size: $v-font-size * .7;
|
||||
}
|
||||
|
||||
.v-slot:nth-child(16n+1) .rollout-group-count { border-left-color: #E20015 }
|
||||
.v-slot:nth-child(16n+2) .rollout-group-count { border-left-color: #B90276 }
|
||||
.v-slot:nth-child(16n+3) .rollout-group-count { border-left-color: #50237F }
|
||||
.v-slot:nth-child(16n+4) .rollout-group-count { border-left-color: #005691 }
|
||||
.v-slot:nth-child(16n+5) .rollout-group-count { border-left-color: #008ECF }
|
||||
.v-slot:nth-child(16n+6) .rollout-group-count { border-left-color: #00A8B0 }
|
||||
.v-slot:nth-child(16n+7) .rollout-group-count { border-left-color: #78BE20 }
|
||||
.v-slot:nth-child(16n+8) .rollout-group-count { border-left-color: #006249 }
|
||||
.v-slot:nth-child(16n+9) .rollout-group-count { border-left-color: #F07F8A }
|
||||
.v-slot:nth-child(16n+10) .rollout-group-count { border-left-color: #DC80BA }
|
||||
.v-slot:nth-child(16n+11) .rollout-group-count { border-left-color: #A791BF }
|
||||
.v-slot:nth-child(16n+12) .rollout-group-count { border-left-color: #7FAAC8 }
|
||||
.v-slot:nth-child(16n+13) .rollout-group-count { border-left-color: #7FC6E7 }
|
||||
.v-slot:nth-child(16n+14) .rollout-group-count { border-left-color: #7FD3D7 }
|
||||
.v-slot:nth-child(16n+15) .rollout-group-count { border-left-color: #BBDE8F }
|
||||
.v-slot:nth-child(16n+16) .rollout-group-count { border-left-color: #7FB0A4 }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user