[SDC] Full OnBoard health-check and NFoD support
Change-Id: I606f8a52c7e6d2bd5558f824957d890e552c5423
Signed-off-by: Avi Ziv <avi.ziv@amdocs.com>
diff --git a/openecomp-ui/resources/scss/modules/_entitlementPools.scss b/openecomp-ui/resources/scss/modules/_entitlementPools.scss
index 0e0a72a..ad0bb77 100644
--- a/openecomp-ui/resources/scss/modules/_entitlementPools.scss
+++ b/openecomp-ui/resources/scss/modules/_entitlementPools.scss
@@ -1,6 +1,5 @@
-.entitlement-pools-list-editor {
-
+.entitlement-pools-list-editor {
.list-editor-view-list {
.list-editor-item-view {
min-height: 110px;
@@ -8,13 +7,9 @@
}
.list-editor-item-view-field {
- .entitlement-pools-count, .entitlement-parameters, .contract-number, .type{
+ .entitlement-pools-count, .contract-number, .type{
color: $purple;
}
- .entitlement-parameters {
- @include ellipsis;
- margin-bottom: 2px;
- }
.entitlement-pools-count {
@extend .heading-1;
margin-top: -10px;
@@ -25,22 +20,29 @@
}
.entitlement-pools-modal {
- .validation-form-content {
- padding: 50px;
- }
.modal-body {
padding: 0;
}
+ .sdc-tab-content {
+ margin: 0;
+ }
.entitlement-pools-form {
- .tab-content {
- padding: 50px;
- }
.threshold-section {
display: flex;
justify-content: space-between;
.validation-input-wrapper {
flex: 0 0 46%;
}
+ }
+ .date-section {
+ display: flex;
+ justify-content: space-between;
+ .validation-input-wrapper {
+ flex: 0 0 46%;
+ }
+ }
+ .validation-form-content {
+ padding: 20px 50px;
}
}
.validation-buttons {
diff --git a/openecomp-ui/resources/scss/modules/_featureGroup.scss b/openecomp-ui/resources/scss/modules/_featureGroup.scss
index 8c45d8e..9d395f9 100644
--- a/openecomp-ui/resources/scss/modules/_featureGroup.scss
+++ b/openecomp-ui/resources/scss/modules/_featureGroup.scss
@@ -32,6 +32,14 @@
margin-top: 55px;
color: $dark-gray;
}
+ .validation-form-content {
+ padding: 0;
+ }
+
+ .nav.nav-tabs {
+ padding-left: 50px;
+ }
+
.tab-content {
padding: 50px;
.field-section {
diff --git a/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss b/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss
index 5de757b..d072849 100644
--- a/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss
+++ b/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss
@@ -16,23 +16,3 @@
}
}
}
-
-.license-key-groups-modal {
- .modal-body {
- padding: 0;
- }
- .license-key-groups-form {
- .validation-form-content {
- padding: 50px;
- .field-section {
- @extend .body-2-semibold;
- margin-bottom: 23px;
- width: 400px;
- color: $black;
- }
- }
- .validation-buttons {
- padding: 20px 50px;
- }
- }
-}
diff --git a/openecomp-ui/resources/scss/modules/_licenseModel.scss b/openecomp-ui/resources/scss/modules/_licenseModel.scss
index 3d65be6..fab091fe 100644
--- a/openecomp-ui/resources/scss/modules/_licenseModel.scss
+++ b/openecomp-ui/resources/scss/modules/_licenseModel.scss
@@ -1,20 +1,53 @@
-.license-model-type-modal {
+.license-model-modal {
.modal-body {
padding: 0;
}
- .validation-form-content {
- padding: 50px;
- .field-section {
- @extend .body-2-semibold;
- margin-bottom: 23px;
- width: 400px;
- color: $black;
- }
- textarea {
- height: 107px;
- }
+ .modal-header {
+ border-bottom: none;
+ padding-bottom: 30px;
+ }
+ .modal-body {
+ padding: 0;
}
- .validation-buttons {
- padding: 20px 50px;
- }
+ .sdc-tabs-list {
+ padding-left: 50px;
+ border-bottom: 1px solid $tlv-light-gray;
+ display: flex;
+ align-items: baseline;
+ }
+ .sdc-tab-content {
+ margin-top: 0;
+ }
+ .add-limit-button {
+ margin-left: auto;
+ margin-right: 50px;
+ padding-right: 0;
+ text-align: end;
+ }
+ .license-model-form {
+ .validation-form-content {
+ padding: 20px 50px;
+ }
+ .validation-buttons {
+ padding: 20px 50px;
+ }
+ &.license-agreement-form, &.feature-group-form {
+ .validation-form-content {
+ padding: 0;
+ }
+ .sdc-tab-content {
+ padding: 20px 50px;
+ }
+ }
+ }
+ .license-model-modal-buttons {
+ padding: 21px 50px;
+ display: flex;
+ justify-content: flex-end;
+ background-color: $tlv-gray;
+ margin-top: 2px;
+ .sdc-button {
+ margin-left: 20px;
+ }
+ }
}
diff --git a/openecomp-ui/resources/scss/modules/_licenseModelLimits.scss b/openecomp-ui/resources/scss/modules/_licenseModelLimits.scss
new file mode 100644
index 0000000..32fd128
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/_licenseModelLimits.scss
@@ -0,0 +1,121 @@
+.license-model-limits-view {
+ max-height: 490px;
+ overflow: auto;
+
+ .limit-editor-title {
+ padding: 10px 50px;
+ background-color: $blue;
+ color: $white;
+
+ }
+ .list-editor-view-add-title {
+ margin-right: 20px;
+ }
+
+ .no-limits-text {
+ padding-left: 50px;
+ }
+
+ .list-editor-view {
+ .list-editor-view-header {
+ border-bottom: none;
+ padding-top: 30px;
+ padding-bottom: 0;
+ }
+
+ .list-editor-view-list-scroller {
+ margin-top: 0;
+ margin-bottom: 30px;
+ }
+ .list-editor-view-list {
+ width: 100%;
+ .list-editor-item-view {
+ min-height: 50px;
+ height: 50px;
+ background-color: $tlv-light-gray;
+ border-color: transparent;
+ margin: 1px 0;
+ .list-editor-item-view-content {
+ padding-left: 0;
+ }
+ .svg-icon-wrapper.trashO {
+ margin-bottom: 0;
+ margin-right: 50px;
+ .svg-icon {
+ fill: $gray;
+ height: 16px;
+ width: 16px;
+ &:hover {
+ fill: $dark-gray;
+ }
+ }
+ }
+ &.selectable {
+ &:hover {
+ background-color: darken($tlv-light-gray, 4%);
+ cursor: pointer;
+ }
+ }
+ &:hover {
+ border-color: transparent;
+ cursor: default;
+ }
+ .list-editor-item-view-content {
+ .list-editor-item-view-field {
+ display: flex;
+ align-items: center;
+ white-space: nowrap;
+
+ &.limit-name {
+ .text.name {
+ @extend .body-1-semibold;
+ color: $blue;
+ text-transform: uppercase;
+ padding: 0px 10px;
+ }
+
+ border-right: 1px solid $light-gray;
+ margin-right: 22px;
+ flex: 0.4;
+ display: flex;
+ justify-content: center;
+ }
+
+ &.limit-description {
+ max-width: 300px;
+ margin-right: 22px;
+ }
+
+ &.limit-metric-details {
+ max-width: 300px;
+ }
+
+ .text.description, .text.name {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ }
+
+ }
+ }
+ }
+ }
+ .limit-editor{
+ .limit-editor-form {
+ .limit-editor-form-grid-section {
+ padding-bottom: 0;
+ }
+ .validation-form-content {
+ padding: 21px 45px;
+ }
+ .limit-editor-buttons {
+ display: flex;
+ justify-content: flex-end;
+ .sdc-button {
+ margin-left: 20px;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss
index 5c74e82..1c133a1 100644
--- a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss
+++ b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss
@@ -1,3 +1,21 @@
+$list-indentation: 20px;
+$arrow-margin: 30px;
+$icon-margin: 30px;
+$arrow-element-width: 30px;
+$list-item-padding: 15px;
+
+@mixin overview-tile-shadow() {
+ @include box-shadow(0.5px 0.8px 4px 0 rgba(24, 24, 25, 0.05));
+}
+
+// @mixin vlm-list-item-inset($color) {
+// @include box-shadow(inset 6px 0 0 0 $color);
+// }
+
+$la-color: $dark-blue;
+$fg-color: $blue;
+$lkg-ep-color: $light-blue;
+
.license-model-overview {
.overview-top-section {
.overview-title{
@@ -20,60 +38,61 @@
.vendor-data-view {
@extend .flex-column;
background-color: $tlv-gray;
- padding: 20px 30px;
+ padding: 13px 30px;
border: 1px solid $tlv-light-gray;
- @include border-shadow();
+ @include overview-tile-shadow();
.vendor-title {
margin-top:5px;
}
.vendor-name {
@extend .heading-4-semibold;
text-transform: none;
- padding-bottom: 15px;
+ padding-bottom: 10px;
border-bottom: 1px solid $tlv-light-gray;
}
- .vendor-description {
+ .vendor-description, .vendor-description-readonly {
@extend .flex;
@extend .body-1;
justify-content: space-between;
- margin-top: 10px;
overflow: hidden;
- border: 1px solid transparent;
- position: relative;
- left: -6px;
- width: 101%;
+ position: relative;
+ flex: initial;
+ }
+ &:not(.read-only) .vendor-description {
+ border: 1px solid transparent;
+ padding: 2px 0 2px 6px;
+ margin-top: 10px;
+
+ $hover-padding-right: 16px;
+ @include percent-plus-value($property: width, $percent: 100%, $value: -$hover-padding-right); // compensate for padding added on hover
&:hover {
- border: 1px solid $tlv-light-gray;
- background-position: 99% 12%;
- background-size: 15px;
- padding-right: 20px;
+ padding-right: $hover-padding-right;
+ width: 100%;
+ border: 1px solid $light-gray;
+ cursor: pointer;
+
+ background-position: calc(100% - 4px) 4px;
+ background-size: 14px;
background-image: url($pencil-icon);
background-repeat: no-repeat;
- cursor: pointer;
+ background-color: white;
+
+ .description-data:after {
+ background: white;
+ }
}
- &.read-only {
- border: none;
- }
- .description-data {
- @include multiline-ellipsis($lineCount: 3, $bgColor: $tlv-gray);
- }
}
.vendor-description-readonly {
- @extend .flex;
- @extend .body-1;
- justify-content: space-between;
- margin-top: 10px;
- overflow: hidden;
- border: none;
- height: 49px;
- margin-bottom: 15px;
- padding: 6px;
- position: relative;
- left:-6px;
+ margin-top: 16px;
}
+ .description-data {
+ @include multiline-ellipsis($lineCount: 3, $bgColor: $tlv-gray);
+ flex: initial;
+ }
+
.vendor-description-edit {
@extend .flex;
flex-direction: column;
@@ -84,6 +103,7 @@
width: 101%;
textarea {
padding-left: 6px;
+ resize: vertical;
}
.buttons-row {
@extend .flex;
@@ -133,12 +153,12 @@
margin-left: 20px;
justify-content: space-between;
border: 1px solid $tlv-light-gray;
- @include border-shadow();
+ @include overview-tile-shadow();
background-color: $tlv-gray;
.summary-count-item {
@extend .flex;
- @extend .heading-5-semibold;
- padding-top: 5px;
+ @extend .heading-5-semibold;
+ align-items: center;
padding-left: 45px;
padding-right: 45px;
border-bottom: 1px solid $tlv-light-gray;
@@ -184,9 +204,10 @@
}
}
}
- .vlm-list-tab-panel
- {
- @extend .flex;
+ .vlm-list-tab-panel {
+
+ @extend .flex;
+ margin-bottom: 7px;
.section-title {
flex: 1;
}
@@ -236,81 +257,33 @@
}
.vlm-list-view {
.vlm-list {
- .vlm-list-item {
- @include border-shadow();
- .list-item-icon-col {
- display: flex;
- flex-direction: column;
- justify-content: center;
- margin-left: 5px;
- }
- &.vlm-list-item-la {
- margin-left: 0;
- .list-item-icon-col {
- padding-left: 22px;
+ .vlm-list-item.orphan-list-item {
+ @include overview-tile-shadow();
+ margin-left: 0;
+
+ .vlm-list-item-title {
- }
- .la-icon {
- background-color: $gray;
- border-color: $gray;
- }
- .list-item-section {
- &:first-child {
- background-color: gray;
- }
- }
- }
- &.vlm-list-item-fg {
- cursor: default;
- margin-left: 0;
- border-left: 10px solid $gray;
- .list-item-arrow-col {
- margin-left: 0px;
- }
- .list-item-icon-col {
- padding-left: 22px;
- }
- .fg-icon {
- background-color: $gray;
- border-color: $gray;
- }
- }
- &.vlm-list-item-ep {
- margin-left: 0;
- border-left: 10px solid $gray;
- .list-item-icon-col {
- padding-left: 22px;
- }
- .ep-icon {
- background-color: $gray;
- border-color: $gray;
- }
- .list-item-section {
- &:first-child {
- display: flex;
- color: $white;
- min-width: 34px;
- }
- }
- }
- &.vlm-list-item-lkg {
- margin-left: 0;
- border-left: 10px solid $gray;
- .list-item-icon-col {
- padding-left: 22px;
- }
- .lkg-icon {
- background-color: $gray;
- border-color: $gray;
- }
- .list-item-section {
- &:first-child {
- display: flex;
- color: $white;
- min-width: 34px;
- }
- }
- }
+ .item-name {
+ color: $dark-gray;
+ }
+ }
+ .list-item-icon-col {
+ .overview-list-icon {
+ background-color: $gray;
+ border-color: $gray;
+ }
+ }
+ .list-item-section {
+ &:first-child {
+ display: flex;
+ color: $white;
+ min-width: $arrow-element-width;
+ }
+ &.list-item-icon-col {
+ margin-left: 65px;
+ margin-right: 65px - $list-item-padding;
+ }
+ }
}
}
}
@@ -328,18 +301,32 @@
@extend .flex;
border: 1px solid $tlv-light-gray;
margin-bottom: 0px;
- cursor: pointer;
- .list-item-icon-col {
- display: flex;
- flex-direction: column;
- justify-content: center;
-
- }
+ .clickable {
+ cursor: pointer;
+ }
+
.list-item-section {
- padding: 10px;
+ .count-value {
+ @extend .body-3;
+ }
+ &.list-item-icon-col {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 0;
+ margin-right: 40px - $list-item-padding;
+ margin-left: $icon-margin;
+ .overview-list-icon {
+ @extend .body-2;
+ }
+ }
+ padding: 15px;
+ &.list-item-arrow-col {
+ padding: 0;
+ }
.children-count {
@extend .body-1;
- line-height: 20px;
color: $gray;
padding-left: 5px;
.count-value {
@@ -347,9 +334,18 @@
}
}
.additional-data {
- padding-left: 50px;
+ padding-left: 60px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ *:last-child {
+ margin-top: 20px;
+ }
+ *:only-child {
+ margin-top: 0;
+ }
.additional-data-name {
- @extend .body-1-semibold;
+ @extend .body-2-semibold;
}
}
.additional-data-col-border {
@@ -359,128 +355,140 @@
}
}
.list-item-additional-data-col {
- @extend .body-1;
+ @extend .body-2;
@extend .flex;
- align-items: center;
- flex: 0.8;
+ align-items: stretch;
+ flex: 0.8;
+ margin-left: 30px;
+ padding-top: 17px;
+ padding-bottom: 11px;
}
.arrow-icon {
- align-self: center;
+ align-self: center;
+
}
.vlm-item-info {
flex: 1;
}
.vlm-list-item-title {
- @extend .flex;
+ @extend .flex;
+ align-items: baseline;
.item-name {
@extend .heading-5-semibold;
flex: 0 1 auto;
- margin-bottom: 4px;
+ margin-bottom: 4px;
+ text-transform: uppercase;
}
}
.vlm-list-item-description {
@extend .body-1;
- overflow: hidden;
+ @include multiline-ellipsis($lineCount: 3, $bgColor: $tlv-gray);
max-height: 38px;
}
&.vlm-list-item-la {
margin-top: 10px;
- border-left: 10px solid $dark-blue;
.la-icon {
- @include create-circle($circle-icon-size,$dark-blue,'LA');
+ @include create-circle($circle-icon-size,$la-color,'LA');
color: $white;
- }
+ }
+ .vlm-list-item-title {
+ .item-name {
+ color: $la-color;
+ }
+ }
.list-item-section {
&:first-child {
display: flex;
- color: $dark-blue;
- min-width: 34px;
+ color: $la-color;
+ min-width: $arrow-element-width;
}
}
.list-item-arrow-col {
flex: 0.01;
- margin-left: 14px;
+ margin-left: $arrow-margin;
+ justify-content: center;
}
- .list-item-icon-col {
- padding-left: 14px;
- padding-right: 30px;
- align-items: center;
- }
-
}
&.vlm-list-item-fg {
- border-left: 10px solid $blue;
- margin-left: 20px;
- margin-top: 10px;
+ margin-left: $list-indentation;
+ margin-top: 10px;
+ .fg-pipeline-separator {
+ color: $dark-gray;
+ padding: 0 5px;
+ }
+ .list-item-icon-col {
+ margin-left: 29px;
+ }
.fg-icon {
- @include create-circle($circle-icon-size,$blue,'FG');
+ @include create-circle($circle-icon-size,$fg-color,'FG');
color: $white;
- }
+ }
+
+ .vlm-list-item-title {
+ .item-name {
+ color: $fg-color;
+ }
+ }
.list-item-section {
&:first-child {
display: flex;
- color: $blue;
- min-width: 34px;
+ color: $fg-color;
+ min-width: $arrow-element-width;
}
}
.list-item-arrow-col {
flex: 0.01;
- margin-left: 26px;
- }
- .list-item-icon-col {
- padding-left: 22px;
- padding-right: 30px;
- align-items: center;
+ margin-left: $arrow-margin - $list-indentation;
+ padding-left: $list-indentation;
}
}
&.vlm-list-item-ep {
- margin-left: 40px;
+ margin-left: $list-indentation * 2;
margin-top: 10px;
- border-left: 10px solid $light-blue;
cursor: default;
.ep-icon {
- @include create-circle($circle-icon-size,$light-blue,'EP');
+ @include create-circle($circle-icon-size,$lkg-ep-color,'EP');
color: $white;
- }
- .list-item-icon-col {
- padding-left: 72px;
- padding-right: 30px;
- align-items: center;
- }
+ }
+ .vlm-list-item-title {
+ .item-name {
+ color: $lkg-ep-color;
+ }
+ }
.list-item-section {
&:first-child {
display: none;
- }
+ }
+ &.list-item-icon-col {
+ margin-left: 52px;
+ }
}
- .list-item-additional-data-col {
- margin-right: 20px;
- }
+
}
&.vlm-list-item-lkg {
margin-top: 10px;
- margin-left: 40px;
- border-left: 10px solid $light-blue;
+ margin-left: $list-indentation * 2;
cursor: default;
.lkg-icon {
- @include create-circle($circle-icon-size,$light-blue,'KG');
+ @include create-circle($circle-icon-size,$lkg-ep-color,'KG');
color: $white;
- }
- .list-item-icon-col {
- padding-left: 72px;
- padding-right: 30px;
- align-items: center;
- }
+ }
+ .vlm-list-item-title {
+ .item-name {
+ color: $lkg-ep-color;
+ }
+ }
.list-item-section {
&:first-child {
display: none;
- }
+ }
+ &.list-item-icon-col {
+ margin-left: 52px;
+ }
}
- .list-item-additional-data-col {
- margin-right: 20px;
- }
}
}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
index 07f86ab..87a852f 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
@@ -48,6 +48,9 @@
align-self: baseline;
color: $gray;
line-height: 10px;
+ &:first-letter {
+ text-transform: capitalize;
+ }
@include ellipsis(auto, inline-block, 178px);
}
@@ -56,7 +59,10 @@
@extend .heading-5-semibold;
color: $black;
@include ellipsis(auto, inline-block, 175px);
- line-height: inherit;
+ line-height: inherit;
+ &:first-letter {
+ text-transform: capitalize;
+ }
}
}
.catalog-tile-icon {
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss
index 5972bb2..d490fd6 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss
@@ -24,7 +24,10 @@
.catalog-tile-top {
.catalog-tile-item-name {
margin-top: 21px;
- line-height: inherit;
+ line-height: inherit;
+ &:first-letter {
+ text-transform: capitalize;
+ }
}
.catalog-tile-vsp-count {
@extend .body-3-semibold;