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 }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -60,6 +60,7 @@ header.action=Actions
|
||||
header.action.run=Run
|
||||
header.action.pause=Pause
|
||||
header.action.update=Edit
|
||||
header.action.copy=Copy
|
||||
header.status=Status
|
||||
|
||||
# event container
|
||||
@@ -514,12 +515,17 @@ header.rolloutgroup.target.message = Messages
|
||||
rollout.group.label.target.truncated = {0} targets has been truncated in the list due the target size limit of {1}
|
||||
|
||||
|
||||
prompt.groups = Groups
|
||||
prompt.number.of.groups = Number of groups
|
||||
prompt.tigger.threshold = Trigger threshold
|
||||
prompt.error.threshold = Error threshold
|
||||
prompt.distribution.set = Distribution Set
|
||||
button.rollout.groups.def.button = Define groups
|
||||
button.rollout.add.group = Add Group
|
||||
caption.configure.rollout = Configure Rollout
|
||||
caption.configure.rollout.groups = Configure Deployment Groups
|
||||
caption.update.rollout = Update Rollout
|
||||
caption.create.rollout = Create new Rollout
|
||||
prompt.target.filter = Custom Target Filter
|
||||
message.rollout.nonzero.group.number = Number of groups must be greater than zero
|
||||
message.rollout.max.group.number = Number of groups must not be greater than 500
|
||||
@@ -536,6 +542,26 @@ label.target.per.group = Targets per group :
|
||||
message.dist.already.assigned = Distribution {0} is already assigned to target
|
||||
message.error.creating.rollout = Server error. Error creating Rollout. Please contact the administrator
|
||||
message.error.starting.rollout = Server error. Error starting Rollout. Please contact the administrator
|
||||
caption.rollout.group.definition.desc = Define which groups the Rollout should have.
|
||||
header.target.percentage = Target percentage
|
||||
textfield.target.percentage = Target percentage
|
||||
textfield.rollout.group.default.name = Group {0}
|
||||
message.rollout.group.name.invalid = Enter a group name with a length between 1 and 64
|
||||
caption.rollout.tabs.simple = Number of Groups
|
||||
caption.rollout.tabs.advanced = Advanced Group definition
|
||||
caption.rollout.generate.groups = Generate the groups automatically with the specified thresholds.
|
||||
caption.rollout.action.type = Action type
|
||||
message.rollout.remaining.targets.error = Not all targets are addressed
|
||||
textfield.rollout.copied.name = Copy of {0}
|
||||
label.rollout.targets.in.group = {0} in {1}
|
||||
caption.rollout.start.type = Start type
|
||||
caption.rollout.start.manual = Manual
|
||||
caption.rollout.start.manual.desc = The user starts the rollout manually.
|
||||
caption.rollout.start.auto = Auto
|
||||
caption.rollout.start.auto.desc = The rollout is started as soon as it is created.
|
||||
caption.rollout.start.scheduled = Scheduled
|
||||
caption.rollout.start.scheduled.desc = The rollout starts as soon as it is ready and the set time has passed.
|
||||
label.rollout.calculating = Calculating groups ...
|
||||
#rollout - end
|
||||
|
||||
#Menu
|
||||
|
||||
Reference in New Issue
Block a user