image: rofs, rwfs sizes; WEBUI: IBS Theme

4 files changed, 733 insertions, 4 deletions

diff --git a/meta-ibs/meta-ast2500/conf/machine/include/sila-ast2500.inc b/meta-ibs/meta-ast2500/conf/machine/include/sila-ast2500.inc
index 4e1691a358..6cededa6e6 100644
--- a/meta-ibs/meta-ast2500/conf/machine/include/sila-ast2500.inc
+++ b/meta-ibs/meta-ast2500/conf/machine/include/sila-ast2500.inc
@@ -18,5 +18,6 @@ SERIAL_CONSOLES = "115200;ttyS3 115200;ttyS4"
 
 FLASH_SIZE = "32768"
 FLASH_ROFS_OFFSET = "5632"
+FLASH_RWFS_OFFSET = "29696"
 
 IMAGE_FEATURES += "allow-root-login"
diff --git a/meta-ibs/meta-ast2500/recipes-kernel/linux/linux-aspeed/openbmc-flash-layout-32MB.dtsi b/meta-ibs/meta-ast2500/recipes-kernel/linux/linux-aspeed/openbmc-flash-layout-32MB.dtsi
index 8412e0ec17..874bfd4e3b 100644
--- a/meta-ibs/meta-ast2500/recipes-kernel/linux/linux-aspeed/openbmc-flash-layout-32MB.dtsi
+++ b/meta-ibs/meta-ast2500/recipes-kernel/linux/linux-aspeed/openbmc-flash-layout-32MB.dtsi
@@ -22,12 +22,12 @@ partitions {
 	};
 
 	rofs@580000 {
-		reg = <0x580000 0x1680000>;
+		reg = <0x580000 0x1780000>;
 		label = "rofs";
 	};
 
-	rwfs@1c00000 {
-		reg = <0x1c00000 0x400000>;
+	rwfs@1d00000 {
+		reg = <0x1d00000 0x300000>;
 		label = "rwfs";
 	};
 };
diff --git a/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0006-IBS-Global-Styles.patch b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0006-IBS-Global-Styles.patch
new file mode 100644
index 0000000000..6f6e7a3bd2
--- /dev/null
+++ b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0006-IBS-Global-Styles.patch
@@ -0,0 +1,727 @@
+From e52a0e1b581906319ab126da568f8722ffd51ecd Mon Sep 17 00:00:00 2001
+From: "Andrey V.Kosteltsev" <AKosteltsev@IBS.RU>
+Date: Mon, 20 Jun 2022 14:38:52 +0300
+Subject: [PATCH] IBS: Global Styles
+
+---
+ src/assets/styles/bmc/custom/_alert.scss    | 110 ++++++++---------
+ src/assets/styles/bmc/custom/_base.scss     |  44 ++++---
+ src/assets/styles/bmc/custom/_buttons.scss  | 130 +++++++++++++++++---
+ src/assets/styles/bmc/custom/_card.scss     |  24 +++-
+ src/assets/styles/bmc/custom/_dropdown.scss |   5 +-
+ src/assets/styles/bmc/custom/_forms.scss    | 123 ++++++++++++++----
+ src/assets/styles/bmc/custom/_tables.scss   |  33 ++---
+ 7 files changed, 328 insertions(+), 141 deletions(-)
+
+diff --git a/src/assets/styles/bmc/custom/_alert.scss b/src/assets/styles/bmc/custom/_alert.scss
+index 0e78ba64..d85e9127 100644
+--- a/src/assets/styles/bmc/custom/_alert.scss
++++ b/src/assets/styles/bmc/custom/_alert.scss
+@@ -1,70 +1,70 @@
+ .alert {
+-    display: flex;
+-    padding: $spacer;
+-    border-width: 0 0 0 3px;
+-    color: gray("800");
+-    margin-bottom: $spacer;
++  display: flex;
++  padding: $spacer;
++  border-width: 0 0 0 3px;
++  color: gray("800");
++  margin-bottom: $spacer;
+ 
+-    &.small {
+-      padding: $spacer / 2;
+-      font-size: 1rem;
+-    }
++  &.small {
++    padding: $spacer / 2;
++    font-size: 1rem;
++  }
+ 
+-    .close {
+-      font-weight: 300;
+-      opacity: 1;
+-    }
++  .close {
++    font-weight: 300;
++    opacity: 1;
++  }
+ 
+-    .alert-icon {
+-      display: inline-flex;
+-      align-items: flex-start;
+-      margin-right: $spacer;
+-      margin-bottom: $spacer;
++  .alert-icon {
++    display: inline-flex;
++    align-items: flex-start;
++    margin-right: $spacer;
++    margin-bottom: $spacer;
+ 
+-      @include media-breakpoint-up(sm) {
+-        margin-bottom: 0;
+-      }
++    @include media-breakpoint-up(sm) {
++      margin-bottom: 0;
+     }
++  }
+ 
+-    .alert-content {
+-      flex: 1 1 auto;
+-    }
++  .alert-content {
++    flex: 1 1 auto;
++  }
+ 
+-    .alert-title {
+-      margin-bottom: $spacer / 2;
+-    }
++  .alert-title {
++    margin-bottom: $spacer / 2;
++  }
+ 
+-    .alert-msg {
+-      p + p {
+-        margin-bottom: $spacer;
+-      }
+-
+-      p:last-of-type {
+-        margin-bottom: 0;
+-      }
++  .alert-msg {
++    p + p {
++      margin-bottom: $spacer;
+     }
+ 
+-    &.alert-info {
+-      border-left-color: theme-color("info");
+-      background-color: theme-color-light("info");
+-      fill: theme-color("info");
++    p:last-of-type {
++      margin-bottom: 0;
+     }
++  }
+ 
+-    &.alert-success {
+-      border-left-color: theme-color("success");
+-      background-color: theme-color-light("success");
+-      fill: theme-color("success");
+-    }
++  &.alert-info {
++    border-left-color: theme-color("info");
++    background-color: theme-color-light("info");
++    fill: theme-color("info");
++  }
+ 
+-    &.alert-danger {
+-      border-left-color: theme-color("danger");
+-      background-color: theme-color-light("danger");
+-      fill: theme-color("danger");
+-    }
++  &.alert-success {
++    border-left-color: theme-color("success");
++    background-color: theme-color-light("success");
++    fill: theme-color("success");
++  }
+ 
+-    &.alert-warning {
+-      border-left-color: theme-color("warning");
+-      background-color: theme-color-light("warning");
+-      fill: theme-color("warning");
+-    }
+-  }
+\ No newline at end of file
++  &.alert-danger {
++    border-left-color: theme-color("danger");
++    background-color: theme-color-light("danger");
++    fill: theme-color("danger");
++  }
++
++  &.alert-warning {
++    border-left-color: theme-color("warning");
++    background-color: theme-color-light("warning");
++    fill: theme-color("warning");
++  }
++}
+diff --git a/src/assets/styles/bmc/custom/_base.scss b/src/assets/styles/bmc/custom/_base.scss
+index c11e046c..baa92b10 100644
+--- a/src/assets/styles/bmc/custom/_base.scss
++++ b/src/assets/styles/bmc/custom/_base.scss
+@@ -1,50 +1,60 @@
+-dt,
+-legend,
+-label {
+-  color: gray("800");
+-  font-size: 14px;
+-  font-weight: 400;
+-  line-height: 1.4285;
+-}
+-
+ h1,
+ .h1 {
+-  font-size: 2.625rem;
+-  font-weight: 300;
++  font-size: 1.75rem !important;
++  font-weight: 700;
+   line-height: 1.238;
+ }
+ 
+ h2,
+ .h2 {
+-  font-size: 2.25rem;
+-  font-weight: 300;
++  font-size: 1.25rem !important;
++  font-weight: 500;
+   line-height: 1.3333;
+ }
+ 
+ h3,
+ .h3 {
+-  font-size: 1.75rem;
++  font-size: 1rem !important;
+   font-weight: 400;
+   line-height: 1.2857;
+ }
+ 
+ h4,
+ .h4 {
+-  font-size: 1.25rem;
++  font-size: 0.875rem !important;
+   font-weight: 400;
+   line-height: 1.3;
+ }
+ 
+ h5,
+ .h5 {
+-  font-size: 1rem;
++  font-size: 0.75rem !important;
+   font-weight: 500;
+   line-height: 1.375;
+ }
+ 
+ h6,
+ .h6 {
+-  font-size: 0.875rem;
++  font-size: 0.625rem !important;
+   font-weight: 500;
+   line-height: 1.2857;
+ }
++
++.page-section {
++  margin-bottom: 2rem !important;
++}
++
++.nav-link--current{
++  background-color: $red-light-background !important;
++  color: $red !important;
++  &:hover,
++  &:focus {
++    background-color: $red-light-background !important;
++    color: $red !important;
++  }
++}
++
++.btn-link:active {
++  background-color: $red-light-background !important;
++  color: $red !important;
++}
+diff --git a/src/assets/styles/bmc/custom/_buttons.scss b/src/assets/styles/bmc/custom/_buttons.scss
+index 2a7b8169..93d329f1 100644
+--- a/src/assets/styles/bmc/custom/_buttons.scss
++++ b/src/assets/styles/bmc/custom/_buttons.scss
+@@ -10,7 +10,7 @@
+     margin-right: $spacer / 4;
+   }
+   &:disabled {
+-    color: gray("600");
++    color: $red;
+     fill: currentColor;
+     box-shadow: none !important;
+     &:not(.btn-link) {
+@@ -21,27 +21,114 @@
+ }
+ 
+ .btn-primary {
+-  fill: currentColor;
+-  &:focus,
+-  &:not(:disabled):not(.disabled):active:focus {
+-    border-color: $white;
+-    box-shadow: inset 0 0 0 3px theme-color('primary'), inset 0 0 0 5px $white;
++  background-color: $red;
++  border-radius: $border-radius;
++  border: none;
++  box-shadow: 1px 2px 2px -1px #4f252566 inset;
++  &:hover {
++    background-color: $red-hover;
++  }
++  &:not(:disabled):not(.disabled):active:focus,
++  &:focus-visible {
++    border: none;
++    box-shadow: none;
++    background-color: $red-click;
++  }
++  &:focus {
++    border: none;
++    box-shadow: 0px 0px 0px 4px $red-shadow;
++    background-color: $red;
++  }
++  &:active {
++    border: none;
++    box-shadow: none;
++    background-color: $red;
+   }
+ }
+ 
+ .btn-secondary {
+-  fill: currentColor;
+-  &:focus,
+-  &:not(:disabled):not(.disabled):active:focus {
+-    border-color: $white;
+-    box-shadow: inset 0 0 0 3px theme-color('secondary'), inset 0 0 0 5px $white;
++  background-color: $gray-5;
++  color: $red;
++  border-radius: $border-radius;
++  border: none;
++  box-shadow: 1px 2px 4px -1px rgb(79 37 37 / 10%) inset;
++  font-style: normal;
++  font-weight: 600;
++  font-size: 16px;
++  line-height: 20px;
++  &:hover {
++    background-color: $gray-5-hover;
++    color: $red;
++  }
++  &:focus {
++    border: none;
++    box-shadow: 0px 0px 0px 4px $red-shadow;
++    color: $red;
++    background-color: $gray-5;
++  }
++  &:not(:disabled):not(.disabled):active:focus,
++  &:focus-visible {
++    border: none;
++    box-shadow: none;
++    color: $red;
++    background-color: $gray-20;
++  }
++}
++
++.btn-unstiled {
++  border: none;
++  &:focus {
++    box-shadow: none;
++  }
++  &:active {
++    box-shadow: none;
++  }
++}
++
++.btn-popover {
++  border: none;
++  color: $red;
++  height: 28px;
++  border-radius: $border-radius;
++  font-weight: 500;
++  font-size: 12px;
++  transition: ease-in 0.2s;
++  &:hover {
++    color: $white;
++    transition: ease-in 0.2s;
++  }
++  &:focus {
++    box-shadow: none;
++  }
++  &:active {
++    box-shadow: none;
++  }
++  &.selected-unit-button {
++    transition: ease-in 0.2s;
++    color: $white;
++  }
++  &.selected-choice-button {
++    transition: ease-in 0.2s;
++    color: $white;
++  }
++}
++
++.btn-toogle-popover {
++  justify-content: flex-start;
++  width: 25px;
++  height: 16px;
++  padding: 0;
++  &:focus {
++    box-shadow: none;
++  }
++  &:active {
++    box-shadow: none;
+   }
+ }
+ 
+ // Global style for all button link
+ .btn-link {
+-  font-weight: $headings-font-weight;
+-  fill: theme-color("primary");
++  color: $text-primary;
+   text-decoration: none !important;
+   &:hover {
+     background-color: gray("200");
+@@ -50,14 +137,19 @@
+   &:active {
+     background-color: gray("300");
+   }
+-  &:focus {
+-    box-shadow: inset 0 0 0 2px theme-color("primary");
+-    color: theme-color("primary");
+-    outline: none;
+-  }
+   &:disabled {
+     box-shadow: $btn-focus-box-shadow;
+   }
++  &.collapsed {
++    .icon-expand {
++      transform: rotate(180deg);
++      transition: 0.3s linear;
++    }
++    .icon-expand-right {
++      transform: rotate(180deg);
++      transition: 0.3s linear;
++    }
++  }
+ }
+ 
+ // Icon only buttons
+@@ -79,4 +171,4 @@
+ .input-action-btn {
+   padding: 7px;
+   margin: 1px;
+-}
+\ No newline at end of file
++}
+diff --git a/src/assets/styles/bmc/custom/_card.scss b/src/assets/styles/bmc/custom/_card.scss
+index 5f2a5962..34334687 100644
+--- a/src/assets/styles/bmc/custom/_card.scss
++++ b/src/assets/styles/bmc/custom/_card.scss
+@@ -1,5 +1,27 @@
+ .card {
++  border-radius: $border-radius;
+   .bg-success {
+     background-color: theme-color-light('success')!important;
+   }
+-}
+\ No newline at end of file
++}
++
++.card-header {
++  .card-header-tabs {
++    border: none !important;
++
++    .nav-link {
++      border: none !important;
++      color: $text-secondary;
++      font-weight: 500 !important;
++      background: none !important;
++      &:hover {
++        color: $red-hover
++      }
++    }
++
++    .nav-link.active {
++      color: $red-active !important;
++      text-decoration: underline;
++    }
++  }
++}
+diff --git a/src/assets/styles/bmc/custom/_dropdown.scss b/src/assets/styles/bmc/custom/_dropdown.scss
+index 969c4c68..8b2e2835 100644
+--- a/src/assets/styles/bmc/custom/_dropdown.scss
++++ b/src/assets/styles/bmc/custom/_dropdown.scss
+@@ -3,16 +3,19 @@
+   z-index: $zindex-dropdown + 1;
+   padding: 0;
+ }
++
+ .dropdown-item {
+   padding-left: $spacer/4;
+   margin-top: -1 * $spacer/4;
+ }
++
+ .b-dropdown-form {
+   padding: $spacer/2;
+   .form-group {
+     margin-bottom: $spacer/2;
+   }
+ }
++
+ // Table filter dropdown clear button style
+ .table-filter {
+   .dropdown-item {
+@@ -28,4 +31,4 @@
+       box-shadow: inset 0 0 0 2px theme-color("primary");
+     }
+   }
+-}
+\ No newline at end of file
++}
+diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss
+index 428a40c2..28287688 100644
+--- a/src/assets/styles/bmc/custom/_forms.scss
++++ b/src/assets/styles/bmc/custom/_forms.scss
+@@ -14,27 +14,15 @@
+   line-height: $form-line-height;
+ }
+ 
+-.form-group {
+-  margin-bottom: $spacer * 2;
+-}
+-
+ .custom-select,
+ .form-control,
+ .input-group-text {
+-  border-color: gray("500") !important;
+-  background-color: gray("100");
++  border-radius: $border-radius;
++  background-color: $white;
+ }
+ 
+ .custom-select,
+ .form-control {
+-  &:active {
+-    border: 1px solid $primary!important;
+-  }
+-  &:focus {
+-    color: theme-color("dark");
+-    background-color: gray("100");
+-    box-shadow: inset 0 0 0 3px gray("100"), inset 0 0 0 5px $primary !important;
+-  }
+   &:disabled {
+     background-color: gray("400");
+     color: gray("600");
+@@ -48,26 +36,51 @@
+   }
+ }
+ 
+-.custom-select,
+-.custom-control-label,
++.form-control::-webkit-outer-spin-button,
++.form-control::-webkit-inner-spin-button {
++  -webkit-appearance: none;
++  margin: 0;
++}
++.form-control[type='number'] {
++  -moz-appearance: textfield;
++}
++
+ .form-control {
+-  color: theme-color("dark") !important;
+-  font-size: 1rem;
++  color: $text-secondary;
++  border-radius: $border-radius;
++  border: none;
++  background-color: $gray-5;
++  &:focus {
++    color: $text-secondary;
++  }
++  &:hover {
++    background-color: $gray-5-hover;
++  }
+ }
+ 
+ // Inverted form colors
+ .form-background {
+-  background-color: gray("100");
++  background-color: none;
++  padding: 0 !important;
+   .custom-select,
+   .form-control {
+-    background-color: $white;
++    color: #0c1c29e6;
++    border-radius: $border-radius;
++    border: none;
++    background-color: $gray-5;
++    &:hover {
++      background-color: $gray-5-hover;
++    }
+     &:focus {
+-      background-color: $white;
++      border: 1px solid gray("400");
+     }
+     &:disabled {
+       background-color: gray("400");
+       color: gray("600");
+     }
++    &.is-valid {
++      border: 1px solid gray("400");
++    }
+   }
+ }
+ 
+@@ -76,12 +89,22 @@
+   line-height: $form-line-height;
+ }
+ 
++.custom-checkbox ::before {
++  box-shadow: none !important;
++  border: 2px solid $on-surface-secondary;
++  background-color: #fff;
++  border-radius: 3px;
++}
++
+ .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after,
+ .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before,
+ .custom-control-input:checked ~ .custom-control-label::before  {
+-  background-color: $black;
+-  border-color: $black;
++  background-color: $red;
++  border-color: $red;
+   cursor: pointer;
++  &:focus {
++    box-shadow: none !important;
++  }
+ }
+ 
+ .custom-control {
+@@ -94,8 +117,35 @@
+   }
+ }
+ 
+-.custom-control-input:focus ~ .custom-control-label::before{
+-  box-shadow: 0 0 0 2px  theme-color("primary");
++.custom-switch {
++  width: 28px;
++  height: 16px;
++}
++
++.custom-switch
++.custom-control-input:focus ~ .custom-control-label::before {
++  box-shadow: none;
++}
++
++.custom-switch
++.custom-control-input ~ .custom-control-label::after {
++  border: 1px solid $gray-20;
++  background: $white;
++}
++
++.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
++  border-color: $gray-20;
++}
++
++.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
++  background-color: rgba(4, 10, 15, 0.3);
++  border-color: $gray-20;
++}
++
++.custom-switch
++.custom-control-input ~ .custom-control-label::before {
++  border: 1px solid $gray-20;
++  background: rgba(4, 10, 15, 0.3);
+ }
+ 
+ .custom-control-label::after {
+@@ -130,3 +180,26 @@
+     background-position: right 3rem bottom 50%;
+   }
+ }
++// For invisible label of fields
++.invisible {
++  height: 0;
++  margin-bottom: 0;
++}  
++// Global style progress bar
++.progress {
++  height: 8px;
++  background-color: $gray-10;
++}
++
++.progress-bar {
++  background-color: $red;
++  border-radius: 4px;
++}
++
++.progress_bar_percent {
++  color: $red;
++}
++
++.system-control__radio label {
++  padding-top: 4px;
++}
+diff --git a/src/assets/styles/bmc/custom/_tables.scss b/src/assets/styles/bmc/custom/_tables.scss
+index e8b5a832..0403c5e5 100644
+--- a/src/assets/styles/bmc/custom/_tables.scss
++++ b/src/assets/styles/bmc/custom/_tables.scss
+@@ -1,18 +1,11 @@
+ .table {
+   position: relative;
+   z-index: $zindex-dropdown;
++  border-radius: 10px;
+ 
+   td {
+-    border-top: 1px solid gray("300");
+-    border-bottom: 1px solid gray("300");
+-    &:first-of-type {
+-      border-left: 1px solid gray("300");
+-    }
+-    &:last-of-type {
+-      border-right: 1px solid gray("300");
+-    }
+     vertical-align: middle;
+-
++    font-size: 0.875rem;
+     // Table action buttons
+     .btn-link {
+       width: 40px;
+@@ -26,16 +19,10 @@
+ 
+   // thead-light added for specificity
+   .thead-light th {
++    color: $text-primary;
++    background-color: $gray-2;
+     vertical-align: middle;
+-    border-top: 1px solid gray("300");
+     border-bottom: 1px solid gray("300");
+-    &:first-of-type {
+-      border-left: 1px solid gray("300");
+-    }
+-    &:last-of-type {
+-      border-right: 1px solid gray("300");
+-    }
+-    color: theme-color("dark");
+     &:focus {
+       outline: none;
+     }
+@@ -58,8 +45,7 @@
+   .b-table-details {
+     background-color: theme-color("light");
+     td {
+-      padding-left: calc(50px + (#{$table-cell-padding} * 2));
+-      padding-right: calc(50px + (#{$table-cell-padding} * 2));
++      padding: 0px 16px 16px 16px;
+     }
+     dl {
+       margin: 0;
+@@ -109,7 +95,6 @@
+     tr {
+ 
+       &:not(:first-child) > td[aria-colindex='1'] {
+-        border-top: 1px solid gray("300");
+         padding-top: 0.625rem;
+       }
+ 
+@@ -164,8 +149,10 @@
+       padding-left: 1rem;
+     }
+   }
++}
+ 
+-  .table.b-table.b-table-stacked-sm > tbody > tr > :first-child {
+-    border-top-width: 1px;
+-  }
++.table-responsive, .table-responsive-md {
++  margin-left: -15px;
++  margin-right: -15px;
++  margin-top: 0.5rem;
+ }
+-- 
+2.35.1
+
diff --git a/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue_%.bbappend b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue_%.bbappend
index 23665b13e1..ba1d1a9159 100644
--- a/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue_%.bbappend
+++ b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue_%.bbappend
@@ -7,7 +7,7 @@ LICENSE = "Apache-2.0"
 LIC_FILES_CHKSUM = "file://LICENSE;md5=e3fc50a88d0a364313df4b21ef20c29e"
 
 SRC_URI = "git://git@git.sila.ru/srv/pub/scm/git/openbmc/webui-vue.git;branch=sila;protocol=ssh"
-SRCREV  = "9123ef0673ac7a8e3e383d83a92ef65d8c89a399"
+SRCREV  = "60419af332cc79e751f246bfa665c19aa19d2932"
 
 SRC_URI += "\
     file://favicon.ico \
@@ -20,6 +20,7 @@ SRC_URI += "\
     file://0003-GlobalStore-Trim-assetTag-and-serialNumber.patch \
     file://0004-main-padding-right-when-media-gt-992px.patch \
     file://0005-AppLayout-refresh-UI-on-time.patch \
+    file://0006-IBS-Global-Styles.patch \
     "
 
 do_update_logo () {