Add file upload component

Created reusuable file upload component to be used on updated firmware page.
Component can:
-Upload file
-Display status icon
-Clear upload field

Made minor style change t

Add file upload component

Created reusuable file upload component to be used on updated firmware page.
Component can:
-Upload file
-Display status icon
-Clear upload field

Made minor style change to file upload on certificate management.

Tested in GUI.

Signed-off-by: Dixsie Wolmers <dixsiew@gmail.com>
Change-Id: I09bf56eee4d670681ea5e95c1807f8177c0e4c08

show more ...

Update loading spinner

Loader was updated with loading icon svg. Added inline style
for loading icon and added loader svg to status-icon directive.
Status icons will be used in file-upload component

Update loading spinner

Loader was updated with loading icon svg. Added inline style
for loading icon and added loader svg to status-icon directive.
Status icons will be used in file-upload component for firmware page update.

Signed-off-by: Dixsie Wolmers <dixsiew@gmail.com>
Change-Id: I15e6f9fa39a08fcc8cfe354f8ed4447aab6425a9

show more ...

Fix truncated button icons on Safari

Removing margin offset to fix issue with button icons being
visually truncated on Safari. Removing additional redundant
code around same icon/buttons.

Signed-of

Fix truncated button icons on Safari

Removing margin offset to fix issue with button icons being
visually truncated on Safari. Removing additional redundant
code around same icon/buttons.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Ie1ef89023a043a70a0126a21be57febb9afae19a

show more ...

Update toast notification

Added new toast notification types, warn and info,
and updated visual styling. All toasts will need
to be manually closed by clicking the 'X' close icon,
except a success t

Update toast notification

Added new toast notification types, warn and info,
and updated visual styling. All toasts will need
to be manually closed by clicking the 'X' close icon,
except a success toast which will be dismissed
automatically after 10 secs.

- Small updates to critical and success/on icon
- Added new colors for toast status background colors

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I9077109042621b2d3346b4121d6344da502b6b26

show more ...

Update certificate management page consistency

This change applies global styles to improve
page layout consistency and modal management

- Adds page and section styles
- Removes unused styles
- Cre

Update certificate management page consistency

This change applies global styles to improve
page layout consistency and modal management

- Adds page and section styles
- Removes unused styles
- Creates individual html files for modals
- Updates certificate modals to bootstrap modal
- Updates global styles for input file field in file-upload.scss

TODO:
- Update certificate table with table component in separate commit
- Update CSR modal to use global form-field styles in separate commit

Signed-off-by: Dixsie Wolmers <dixsiew@gmail.com>
Change-Id: I9b800cb684740da1a9168294433e726efb0f9d0e

show more ...

Fix IE11 icon alignment on header and system overview

Made height and width changes to icons on app header
and system overview to properly align icons in IE11.
Removes additional space in system ove

Fix IE11 icon alignment on header and system overview

Made height and width changes to icons on app header
and system overview to properly align icons in IE11.
Removes additional space in system overview quick
links.

Tested in Chrome, IE11, Safari, Edge.

Signed-off-by: Dixsie Wolmers <dixsiew@gmail.com>
Change-Id: I7ae24df3fe73ea3502565ed3ee2ccabb2506e098

show more ...

Clean up icons

Clean up duplicate svg icons from assets directory.
Created a statusIcon component to dynamically render
status icons instead of using background-image in
scss files.

- Moved/removed

Clean up icons

Clean up duplicate svg icons from assets directory.
Created a statusIcon component to dynamically render
status icons instead of using background-image in
scss files.

- Moved/removed on, off, critical, warning svg icons from
assets directory
- Updated background-image status icons to use <icon>
or <status-icon> directive

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Ic0f06d78b0861d6f60d40b2dcc0b80fd6dad2a88

show more ...

Fix missing expiring/expired icons and warnning messages in certificate table

- Confirmed with backend developer that we should be checking certificate expiration date with bmc date/time set
- Conve

Fix missing expiring/expired icons and warnning messages in certificate table

- Confirmed with backend developer that we should be checking certificate expiration date with bmc date/time set
- Converted both certificate expiration date and bmc date/time to EPOCH time to fix the bug

Tested: Go to Date and Time settings and change BMC time to be after or 30 days before a certificate expiration date.
Then either a warning or expiration icon and message will be displayed next to the date and message on top of the table.
To remove the expiration or warning date, upload a certificate that has an expiration date greater than 30 days after bmc time
set. The icon and warning message should now disappear.

Signed-off-by: Mira Murali <miramurali23@gmail.com>
Change-Id: I9389fe3cce5a555945adf9c56180897a6be047bf

show more ...

Fix certificate management tabbing

- Adds focus to "choose file" button when replacing certificate
- Adds input-file.scss to elements

Tested:
- Passes DAP
- Tabs correctly in all browsers

Signed-o

Fix certificate management tabbing

- Adds focus to "choose file" button when replacing certificate
- Adds input-file.scss to elements

Tested:
- Passes DAP
- Tabs correctly in all browsers

Signed-off-by: Dixsie Wolmers <dixsiew@gmail.com>
Change-Id: I48c61f4176bc3e3fe55425dafc79e8f2edb934b2

show more ...

Add user role privilege table

Created a directive to handle display of user privilege roles
on the local user management page.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I

Add user role privilege table

Created a directive to handle display of user privilege roles
on the local user management page.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I83caea33356012752c7a67301fa2a372f0c28620

show more ...

Add local user manual unlock

Enables manual unlock from the GUI when a user is locked out
due to failed login attempts above allowed threshold.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.

Add local user manual unlock

Enables manual unlock from the GUI when a user is locked out
due to failed login attempts above allowed threshold.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I63e28a4d6feed9eb6d4d09c0431d31e7bd6924c2

show more ...

Create csr modal

The CSR Modal allows users to generate a CSR code. Once the user
types in the necessary information to generate the CSR code, that modal
will then render the code and the user will

Create csr modal

The CSR Modal allows users to generate a CSR code. Once the user
types in the necessary information to generate the CSR code, that modal
will then render the code and the user will be able to either copy the
code or download the code in a txt file.

Tested: loaded onto Witherspoon and able to view on certificate
management page. Click on generate csr and type in necessary
(or any additional info), then click on generate CSR. The CSR
code is then visible and is able to be copied or downloaded. In
error state in which CSR code is unable to generate, the modal
closes and an error toast message appears. FYI: Sometimes you
have to reboot system in order for csr to successfully generate.y

Signed-off-by: Mira Murali <miramurali23@gmail.com>
Change-Id: I3cca09c494357496166164b5ee8ff99250ef981d

show more ...

Add boot option override and TPM enable toggle

- Adds ability to set a bootsource override to allowable target value
- Adds ability to enable or disable TPM required policy
- Replaces power operatio

Add boot option override and TPM enable toggle

- Adds ability to set a bootsource override to allowable target value
- Adds ability to enable or disable TPM required policy
- Replaces power operations confirm directive with bootstrap modal

Tested: Confirmed override settings saved to redfish but unable to verify
if settings are automatically set to disabled by petitboot after a
one time boot. Passes DAP.

Resolves openbmc/phosphor-webui#82
Resolves openbmc/phosphor-webui#90

Signed-off-by: Dixsie Wolmers <dixsiew@gmail.com>
Change-Id: If0ffd6f9328939d70c7958ee11fb90bd20a1e685
Signed-off-by: Gunnar Mills <gmills@us.ibm.com>

show more ...

Update local user table to new design

This commit will introduce a reusable data table component.
By creating a reusable component, we can ensure tables in the
GUI will look consistent and common ta

Update local user table to new design

This commit will introduce a reusable data table component.
By creating a reusable component, we can ensure tables in the
GUI will look consistent and common table actions (sort, select row)
are shared.

- Created new components directory to store shared components
- Add password-confirmation directive
- Remove some error handling from API utils so it can be
handled in the UI

TODO:
- Add show/hide toggle to password fields
- Enhance table component with icons
- Manual user unlock
- Batch table actions
- Role table

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I03c95874d2942a2450a5da2f1d2a8bb895aa1746

show more ...

Update overview page to use new UI patterns

- Use page, section, list-pair to establish
consistent layout
- Update header and overview page to use new
caret icon
- Reordered Server and BMC infor

Update overview page to use new UI patterns

- Use page, section, list-pair to establish
consistent layout
- Update header and overview page to use new
caret icon
- Reordered Server and BMC information to
accomodate small screen views
- Added chevron icons to create consistency
between header and server overview page
quick links
- Changed edit hostname text to use the
standard icon
- Added OR operator to short circuit the server
model, server serial number, and server manufacturer
to display N/A if the information is not available

Change-Id: I6619f5369ff290555142e85aa432e901c4f93d2d
Signed-off-by: Derick Montague <derick.montague@ibm.com>

show more ...

Update toggle component

- Adds text to indicate the current state of the toggle button to meet
accessibility guidelines
- Update size, color, and focus of toggle component to fix
DAP violations

Update toggle component

- Adds text to indicate the current state of the toggle button to meet
accessibility guidelines
- Update size, color, and focus of toggle component to fix
DAP violations
- Add page, section, and list-pair layout patterns established
on the power usage page to begin a pattern for consistent
page layout
- Add form__field and form__actions to help with form layout
consistency.

Tested: Verified toggle functions in the GUI and tested with screen reader. Passes DAP.

Signed-off-by: Dixsie Wolmers <dixsiew@gmail.com>
Change-Id: Iaa8646b1179cc307971065c455f4b9448095d1ec

show more ...

Add 403 $location redirect to http interceptor service

This is a temporary solution to redirect any 403 responses to
a dedicated 403 'Unauthorized' page. This could occur on inital
navigation to a p

Add 403 $location redirect to http interceptor service

This is a temporary solution to redirect any 403 responses to
a dedicated 403 'Unauthorized' page. This could occur on inital
navigation to a page or while attempting an operation.

Once permission role mapping is defined, the code should be updated
to handle 403 responses in context of user attempted actions.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Ia207f2bcdd87fb20888fe6a1588d0ccd310e484c

show more ...

Clean up color values

This update will clean up slight color variations in the
code base by creating and using Sass color variables
instead of hex values. Available colors are defined in
colors.scss

Clean up color values

This update will clean up slight color variations in the
code base by creating and using Sass color variables
instead of hex values. Available colors are defined in
colors.scss. Any usage of CSS color properties should
refer to the mapped color variables in colors.scss.

- Removed tags.scss file since tag components no longer used

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I045030a158469e59d07a9fa8cd8aa9f125f0d383

show more ...

Create certificate management page

Displays certificates and the ability to add up to one
of each type of certificate (as limited by the backend
implementation). HTTPS certificate and LDAP client ce

Create certificate management page

Displays certificates and the ability to add up to one
of each type of certificate (as limited by the backend
implementation). HTTPS certificate and LDAP client cert
are implemented in this commit, with the ability to add
more types as needed by adding them to the constants.js
CERTIFICATE_TYPES array.

Also provides the ability to replace a certificate once
it is added.

Resolves openbmc/phosphor-webui#43

Tested: loaded onto a witherspoon and able to view and
replace both the HTTPS certificate and the
LDAP certificate. GUI only allows to upload an
LDAP certificate if one doesn't already exist.
The GUI limits the user to one file per type as
expected at this time and provides the
appropriate validation messages. Alert messages
appear above the table if the certificate is
expired or within 30 days of expiring.

Change-Id: I345267280ecd3cb257e9304886cde9ebb69b1240
Signed-off-by: beccabroek <beccabroek@gmail.com>
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>

show more ...

Fix the opacity of the loading screen

Currently the loading screen has a 0.7 opacity, which leads to some
strange behaviors at times when changing screens. Old scopes pop under
new ones, leading to

Fix the opacity of the loading screen

Currently the loading screen has a 0.7 opacity, which leads to some
strange behaviors at times when changing screens. Old scopes pop under
new ones, leading to a page "jump" once the loading is complete.

Making the loading page fully opaque and removing the transition effect
reduces this behavior, and makes the page transitions feel cleaner.

Tested:
Loaded webui locally. Observed problem goes away when navigating
between pages. Navigated between several pages to verify, including
pages with a lot of static data.

Signed-off-by: Ed Tanous <ed.tanous@intel.com>
Change-Id: I5549d5c49901429f6e9c353524c6f7060725c2ea

show more ...

Consolidate button styles

This patchset will create consistent button styling according
to the styleguide and remove redundant button styles by creating
reusable button classes.

This patchset also

Consolidate button styles

This patchset will create consistent button styling according
to the styleguide and remove redundant button styles by creating
reusable button classes.

This patchset also implements a consistent strategy for including
icon assets. Currently, svg icons are imported as CSS background
images or inlined into the markup. Inlining an svg is preferred,
especially when used with buttons or links so the colors can
be easily changed for different states (hover, focus, disabled)
without having to request variants.
The icon provider allows us to inline svgs without cluttering
the markup. Webpack config was adjusted to use svg-inline-loader
when resolving svgs that are used by the icon provider directive.

- All svgs were optimized to remove unncessary information.
- Removed unused svg color variants
- Moved icons used by icon provider to separate directory to
avoid Webpack parsing the files twice
- Small changes to navigation icons

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I1ca214b74fc502e6b6e760cfee88b48110237c43

show more ...

Add remote logging server

Remote logging enables the user to configure a remote
server to stream out local logs. This feature will be
available on the Event Log page. The user can add a
remote serve

Add remote logging server

Remote logging enables the user to configure a remote
server to stream out local logs. This feature will be
available on the Event Log page. The user can add a
remote server, edit/change an existing server
configuration and remove/disable the remote server.

Resolves openbmc/phosphor-webui#68

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I8284cbdbdaaf85f5c95f237efc72290c66904b40

show more ...

Change button styles from rounded to straight corners

This will create more visual consistency between the components
in the GUI since there are elements, such as text fields and
dropdowns that are

Change button styles from rounded to straight corners

This will create more visual consistency between the components
in the GUI since there are elements, such as text fields and
dropdowns that are styled with straight corners.

- Removes border radius from buttons
- Removes some redundant styles
- Adds input types that aren't currently inheriting
defined styles

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I6ff1bde91e2e57df01484dd20003925cd914ffa2

show more ...

Fix tablet alignment issues for event logs

This will make sure our event log content is properly aligned
on tablet and desktop views. It will also make the date/time value
on the server overview pag

Fix tablet alignment issues for event logs

This will make sure our event log content is properly aligned
on tablet and desktop views. It will also make the date/time value
on the server overview page always display underneath the 'BMC time'
label in a destkop view–currently the date value will wrap to a
new line if the string is too long.

- Update markup to use Foundation grid layout classes on the
server overview event log table

Tested: Event log tables on server overview page and event
log page

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I7d765ebbe679f954e606d1d25e2182d983a7b3f3

show more ...

Center modals and fix sizing

Previously the modals were not centered on the screen and the size
of the modal was set to 50% of the screen, leading to a lot of white
space within modals with less con

Center modals and fix sizing

Previously the modals were not centered on the screen and the size
of the modal was set to 50% of the screen, leading to a lot of white
space within modals with less content. This sizes the modal based on
the amount of content within and centers the modal. Also adds the grey
modal overlay to the 'confirm network settings' modal to be consistent
with the other pages.

Resolves openbmc/phosphor-webui#35

Tested: Viewed all modals currently in GUI (Firmware page, network page,
and overview page) and modals were sized correctly and appeared
with the modal overlay in the background.

Change-Id: Ie35d179810d36b8bcbbf39dc1302e773387fa788
Signed-off-by: beccabroek <beccabroek@gmail.com>

show more ...