Add password visibility toggle

This commit will add a new password visibility toggle directive.
The new directive was added to the local user management,
user modal password input fields.

Signed-of

Add password visibility toggle

This commit will add a new password visibility toggle directive.
The new directive was added to the local user management,
user modal password input fields.

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

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 ...

Update icons to fix sizing and overflow issues

Re-exported icon-control.svg and icon-replace.svg to
resolve issues around sizing and overflow. These new icons
will allow us to remove CSS 'hacks' in

Update icons to fix sizing and overflow issues

Re-exported icon-control.svg and icon-replace.svg to
resolve issues around sizing and overflow. These new icons
will allow us to remove CSS 'hacks' in place to prevent
unexpected focus state overflows and allow icon resizing
by changing the width on the icon class name. Small scss
updates were included to account for this fix.

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

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 ...

Fix the tabbing order in the primary and secondary navigation

The main navigation will follow a natural tabbing order.
When the secondary menu is expanded with the keyboard, the
first item in the se

Fix the tabbing order in the primary and secondary navigation

The main navigation will follow a natural tabbing order.
When the secondary menu is expanded with the keyboard, the
first item in the secondary menu will be in focus.
Tabbing after the last item in the secondary menu will return
focus to the primary menu.

- Restructures markup so secondary menu is nested in primary
navigation

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

show more ...

Add .ng-leave and .ng-enter rulesets for page transition

Adding ngAnimation dependency created added animation to pages during
route or location changes. Added transitions to create an elegant
trans

Add .ng-leave and .ng-enter rulesets for page transition

Adding ngAnimation dependency created added animation to pages during
route or location changes. Added transitions to create an elegant
transition.

Tested: I navigated to every page including logging in
and out in Chrome, Firefox and Safari to assure all
browsers handle the transition consistently.

Resolves openbmc/phosphor-webui#86

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

show more ...

Virtual media page

Adds page to manage virtual media devices. User selects file
and pushes 'start' button to establish websocket connection.
nbdServerService added to provide ability for user to nav

Virtual media page

Adds page to manage virtual media devices. User selects file
and pushes 'start' button to establish websocket connection.
nbdServerService added to provide ability for user to navigate
away from the page and return with the ability to see the current
active sessions.

Currently only supports 1 Virtual Media device.

Resolves openbmc/phosphor-webui#40

Tested: uploaded ubuntu image file, started the connection and
mounted virtual media device from host console. Able to see Ubuntu
image file. Also uploaded file and navigated away from the page,
checking that the websocket remained open and was sending /
recieving messages. Finally, tested that when connection
was stopped, 'USB disconnect' log was present in host console.

Change-Id: Ia3155d27cbcfef94c2753dde1303a151e08847cc
Signed-off-by: beccabroek <beccabroek@gmail.com>
Signed-off-by: Gunnar Mills <gmills@us.ibm.com>
Signed-off-by: Derick Montague <derick.montague@ibm.com>

show more ...

Fix system overview edit hostname form validation

- Add pattern for no spaces
- Fix character count
- Prepopulate hostname in input field
- Show error for invalid input
- Improve form accessibility

Fix system overview edit hostname form validation

- Add pattern for no spaces
- Fix character count
- Prepopulate hostname in input field
- Show error for invalid input
- Improve form accessibility
- Correct global disabled primary button style

Resolves openbmc/phosphor-webui#71

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

show more ...

Add dropdown caret to time owner dropdown on Date and Time Settings

- Use background-image strategy to add caret to dropdowns
- Standardize implementation by including mixin to dropdown__button
cl

Add dropdown caret to time owner dropdown on Date and Time Settings

- Use background-image strategy to add caret to dropdowns
- Standardize implementation by including mixin to dropdown__button
class and removing styled pseudo element

Resolves ibm-openbmc/dev#478

Tested: Running locally on Chrome only. Ran into network request
errors for newly added svg assets when mounting overlay

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

show more ...

Resolve accessibility isssues

- Remove unecessary aria-roles
- Associate label elements with form elements
- Remove extraneous markup on Network settings page
- Update generic markup to use definiti

Resolve accessibility isssues

- Remove unecessary aria-roles
- Associate label elements with form elements
- Remove extraneous markup on Network settings page
- Update generic markup to use definition list when appropriate
- Add aria-labels and aria-expanded to accordion triggers

Tested: Accessibility issues tested in using Lighthouse in Chrome
Developer tools Audit section and Dequeue Axe extension. Manually tested clicking on labels
set focus on the form elements. Visually tested of the Network
Settings page in Chrome, Firefox, and Safari to verify layout changes.

Resolves openbmc/phosphor-webui#76

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

show more ...

Update hex values to meet WCAG AA Guidelines for color contrast

- Change #3C6DF0 to #2D60E5
- Change #E62325 to #DA1416

Tested: I spot tested the Server Overview, the
Event log and

Update hex values to meet WCAG AA Guidelines for color contrast

- Change #3C6DF0 to #2D60E5
- Change #E62325 to #DA1416

Tested: I spot tested the Server Overview, the
Event log and System logs pages to verify color changes and overall
validate the update does not negatively impact the visual integrity
of the app.

Resolves openbmc/phosphor-webui#70

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

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 ...

Secondary button text color

Changes color of secondary button text to be more readable.

Resolves openbmc/phosphor-webui#66

Change-Id: I3d7622a3556139a8c984590bcc8db5c34cefc73e
Signed-off-by: becca

Secondary button text color

Changes color of secondary button text to be more readable.

Resolves openbmc/phosphor-webui#66

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

show more ...

Clean up headers

Updates headers to match style guide and makes them consistent
throughout pages in the GUI. Removes instances where a header
element existed and a different header style was being a

Clean up headers

Updates headers to match style guide and makes them consistent
throughout pages in the GUI. Removes instances where a header
element existed and a different header style was being applied.
For example, <h2 class="h4">

Tested: Ran GUI locally and verified that headers look consistent
and have the appropriate sizing while using Chrome, Firefox and
Safari.

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

show more ...

Fix layout for responsive design: Header

Get rid of "BMC host/IP address" & "server info" text, make the
buttons tighter and make more buttons visible in header so that
the information is more usefu

Fix layout for responsive design: Header

Get rid of "BMC host/IP address" & "server info" text, make the
buttons tighter and make more buttons visible in header so that
the information is more useful to users in tablet view.

Change-Id: I6b4166390b1828fca265e7bb56f51106b4e6f21b
Signed-off-by: Ryan Arnell <iffy.ryan@ibm.com>

show more ...

Fix login and overview pages in Safari

Bootstrap 4 columns in Safari are not working as expected,
causing issues with the layout on the login and overview
pages. Small CSS change resolves issue, see

Fix login and overview pages in Safari

Bootstrap 4 columns in Safari are not working as expected,
causing issues with the layout on the login and overview
pages. Small CSS change resolves issue, see
https://github.com/twbs/bootstrap/issues/24219

Tested: Layout appears to be fixed using Safari. No pages
are affected visually by the change when using Chrome or
Firefox.

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

show more ...