summaryrefslogtreecommitdiffstats
path: root/app/common/styles/elements
Commit message (Collapse)AuthorAgeFilesLines
* Add file upload componentDixsie Wolmers2019-11-271-39/+27
| | | | | | | | | | | | | | | 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
* Update loading spinnerDixsie Wolmers2019-11-271-16/+17
| | | | | | | | | 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
* Fix truncated button icons on SafariYoshie Muranaka2019-11-261-10/+0
| | | | | | | | | 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
* Update toast notificationYoshie Muranaka2019-10-221-9/+46
| | | | | | | | | | | | | | 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
* Update certificate management page consistencyDixsie Wolmers2019-10-214-31/+94
| | | | | | | | | | | | | | | | | | 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
* Fix IE11 icon alignment on header and system overviewDixsie Wolmers2019-10-181-1/+7
| | | | | | | | | | | | 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
* Clean up iconsYoshie Muranaka2019-10-023-78/+11
| | | | | | | | | | | | | | | 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
* Fix missing expiring/expired icons and warnning messages in certificate tablemiramurali232019-09-101-1/+4
| | | | | | | | | | | | | - 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
* Fix certificate management tabbingDixsie Wolmers2019-09-042-0/+26
| | | | | | | | | | | | - 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
* Add user role privilege tableYoshie Muranaka2019-08-271-0/+11
| | | | | | | | 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
* Add local user manual unlockYoshie Muranaka2019-08-231-0/+34
| | | | | | | | 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
* Create csr modalmiramurali232019-08-221-0/+2
| | | | | | | | | | | | | | | | | | 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
* Add boot option override and TPM enable toggleDixsie Wolmers2019-08-211-1/+10
| | | | | | | | | | | | | | | | | - 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>
* Update local user table to new designYoshie Muranaka2019-08-131-0/+16
| | | | | | | | | | | | | | | | | | | | | | 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
* Update overview page to use new UI patternsDerick Montague2019-08-122-26/+27
| | | | | | | | | | | | | | | | | | | | - 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>
* Update toggle componentDixsie Wolmers2019-08-092-25/+23
| | | | | | | | | | | | | | | | | - 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
* Add 403 $location redirect to http interceptor serviceYoshie Muranaka2019-07-241-0/+9
| | | | | | | | | | | | 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
* Clean up color valuesYoshie Muranaka2019-07-0913-224/+48
| | | | | | | | | | | | | 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
* Create certificate management pagebeccabroek2019-07-091-2/+10
| | | | | | | | | | | | | | | | | | | | | | | | | | | | 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>
* Fix the opacity of the loading screenEd Tanous2019-07-021-3/+1
| | | | | | | | | | | | | | | | | 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
* Consolidate button stylesYoshie Muranaka2019-06-214-33/+6
| | | | | | | | | | | | | | | | | | | | | | | | | 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
* Add remote logging serverYoshie Muranaka2019-06-211-1/+24
| | | | | | | | | | | | | 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
* Change button styles from rounded to straight cornersYoshie Muranaka2019-05-312-8/+6
| | | | | | | | | | | | | | 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
* Fix tablet alignment issues for event logsYoshie Muranaka2019-05-291-0/+7
| | | | | | | | | | | | | | | | | 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
* Center modals and fix sizingbeccabroek2019-03-261-23/+24
| | | | | | | | | | | | | | | | | | 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>
* Add role alert to toastsbeccabroek2019-02-061-10/+0
| | | | | | | | | | For accessibility reasons, 'role="alert" is required for toast messages. This notifies screen readers that an error or success message has appeared. Adds a service layer for toast messages that adds the role attribute to the message. Change-Id: Ic4dbf5556337eea589de5692c1b4c3323e771813 Signed-off-by: beccabroek <beccabroek@gmail.com>
* Form validation on login pagebeccabroek2019-02-023-74/+6
| | | | | | | | | | | | | | | | | | Using ngMessages, adds form validation to login page. Also creates a directive, hasError, to be used to validate form field by passing in a boolean. This is a proposed pattern to be used moving forward, as form validation is added to additional pages. Validation error messages are shown on $touched and on submit. Unreachable Server and Invalid username and password error messages remain until input is no longer $pristine after form submission. In addition, this removes unneeded and unused css styling Resolves openbmc/phosphor-webui#47 Change-Id: I7a067af67ac74d4cf2977d10f66445720ecae9eb Signed-off-by: beccabroek <beccabroek@gmail.com>
* Fix table headerIftekharul Islam2019-01-301-2/+2
| | | | | | | | | | Makes the table header in sensor page stay fixed after scrolling. Fixes the allignment of filter button. Resolves openbmc/phosphor-webui#28 Change-Id: If9b8b0848169b5924b811e67588ff57c8dae7c5c Signed-off-by: Iftekharul Islam <iffy.ryan@ibm.com>
* Add toast to Firmware pagebeccabroek2019-01-232-8/+0
| | | | | | | Replace error and success messages with toast notifications. Change-Id: I6c68568b7c9db4fd1f85b3de843289cf1bfba376 Signed-off-by: beccabroek <beccabroek@gmail.com>
* Add toast notifications to SNMP pagebeccabroek2019-01-152-0/+29
| | | | | | | | | | | | Design team proposed that our error and success messages be delivered as 'toast' messages on the right side of the screen. This brings in ngToast and implements notifications on SNMP page. Notifications will fade after 10 seconds or can be dismissed. https://github.com/tameraydin/ngToast Change-Id: I1053534cd1ab189ae5c2ac07e2a922acea231c70 Signed-off-by: beccabroek <beccabroek@gmail.com>
* Move to Bootstrap 4Gunnar Mills2018-11-151-4/+2
| | | | | | | | | | | | | | | | | | | | | Bootstrap < 4.1.2 has the following CVE: https://nvd.nist.gov/vuln/detail/CVE-2018-14041 Removed bootstrap-theme.css due to "Replaced the separate optional theme with configurable options via SCSS variables (e.g., $enable-gradients: true)." Added "width: 100%" to a few places where width 100% was no longer getting inherited. Moved a few elements and adjusted styles to get the same look as before. See https://getbootstrap.com/docs/4.0/migration/ for more information. Tested: Manually on a Witherspoon. Change-Id: I0a72665ac1ca6eacd0b553a585b1fb15e14ae62c Signed-off-by: Gunnar Mills <gmills@us.ibm.com>
* Display log events in user timebeccabroek2018-11-061-1/+6
| | | | | | | | | | | | | | | | | Allows user to display events in their timezone or in UTC. Previously allowed either ETC or UTC, but listed ETC as 'user timezone'. Updates date time page from GMT offset to UTC offset for overall consistency. Also updates overview page to list critical events in user timezone Resolves openbmc/phosphor-webui#36 Tested: changed timezone settings locally and validated that correct timezone and UTC offset was presented in the UI. Change-Id: I89ca5045eeb789527aa07f5b1baebaa3fbd6b1fa Signed-off-by: beccabroek <beccabroek@gmail.com>
* Set MAC address on "Save Settings"Gunnar Mills2018-05-252-0/+8
| | | | | | | | | Make a REST call to set the MAC address when the "Save Settings" button is pressed. Tested: Verified the MAC Address is set. Change-Id: I39f6d4688842b3453fd219795d07f819ba4ba481 Signed-off-by: Gunnar Mills <gmills@us.ibm.com>
* Display error if TFTP field emptyGunnar Mills2018-04-092-0/+12
| | | | | | | | | | | If either TFTP Server IP Address or File Name is empty for the "Download image file from TFTP server" function, return and display an error. Tested: Verified I see this error if either field is empty. Change-Id: I3da3353dad7cfb0f765d8a662412c3adb3fa4efd Signed-off-by: Gunnar Mills <gmills@us.ibm.com>
* Add "block" to active modalsGunnar Mills2018-02-271-1/+2
| | | | | | | | | | When a modal is active make it blocked so it can be viewed. The modals such as confirming activating an image were not visible. This change makes those modal visible when active. Tested: Activated several images on a Witherspoon system. Change-Id: I6667af017ea397344df6b6ed7e08949ffb4a3c55 Signed-off-by: Gunnar Mills <gmills@us.ibm.com>
* Modernize web GUI and make it installable on BMCEd Tanous2017-11-062-4/+4
| | | | | | | | | | | | | | | | | | | 1. Move from gulp server to webpack. This allows the proper compression to allow the webui to be embedded in the BMC. 2. Update js paths to use requires, not hardcoded paths. This was required to make the packaging work correctly. 3. Add babel config to do translation. 4. Update angularjs directive calls to use the angular 1.6 syntax for promises intead of success and fail. https://docs.angularjs.org/guide/migration#migrate1.5to1.6-ng-services-$http 5. As a consequence of using NPM/webpack, the versions of angular and associated modules that were checked in have been updated. Change-Id: Icb71e2eedb0d9a8943fc914f9dc4be11d0983c00 Signed-off-by: Ed Tanous <ed.tanous@intel.com> Signed-off-by: Brad Bishop <bradleyb@fuzziesquirrel.com>
* Revisiting log status info in header with better styesIftekharul Islam2017-10-091-2/+2
| | | | | Change-Id: I0b2ee399243f0bc3e5ed44bc578a0d153486ed55 Signed-off-by: Iftekharul Islam <iffy.ryan@ibm.com>
* changed modal behavior to animate/slide in from topand fixed overlay to fade ↵Michael Davis2017-10-091-7/+9
| | | | | | | in/out. Change-Id: I9942715f424b0e79196916551d161ccdbf94b7bf Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
* fixed sizes and positioning of iconsMichael Davis2017-10-091-2/+2
| | | | | Change-Id: Idc6930c87f61217f9bf4daab5b82c418606cdf80 Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
* fixed colors and textMichael Davis2017-10-091-1/+1
| | | | | Change-Id: Ib2d1caf520302555b3bfb7b49cb69ae68b6bcfa8 Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
* Updated master after merge conflictsIftekharul Islam2017-10-091-4/+2
| | | | | Change-Id: Ibea933c20071cc85201420ba1e31fedf9356f55b Signed-off-by: Iftekharul Islam <iffy.ryan@ibm.com>
* Accessibility fixes:Michael Davis2017-10-091-1/+5
| | | | | | | | | - changed buttons to spans since not being used in forms - added aria roles to html elements - changed low contrast colors Change-Id: I56e784b226baa7f9b24346446a0a023fcea633d4 Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
* loader animation added to pagesMichael Davis2017-10-091-4/+18
| | | | | Change-Id: Id8c890714d0a90ae913b6581cd655abcf6cd6781 Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
* fixed code to display proper icon when server is in off state.Michael Davis2017-10-091-1/+2
| | | | | Change-Id: Iad633b0986bf37ce63943ab64fdc3279bd419180 Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
* minor QA fixes to marginsMichael Davis2017-10-091-2/+2
| | | | | Change-Id: If3730f75e796f8f48fd036234711efa23e23f794 Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
* extended disabled status indicator to use "off" iconMichael Davis2017-10-091-1/+1
| | | | | Change-Id: If46c5dfa5656948747cbf4f2faacab9244f8e40c Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
* UI changes and fixes based on QA feedbackMichael Davis2017-10-091-1/+1
| | | | | Change-Id: I13bae30e86330a8831d35f1d8a2f7da821324e37 Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
* Event log: copy and UI fixes based on QA feedbackMichael Davis2017-10-091-1/+0
| | | | | Change-Id: Ife1b7e691f5fcf023616b9151cff6598d346c2c4 Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
* changes to global search filter:Michael Davis2017-10-091-4/+15
| | | | | | | | - Added clear button to clear input - changed submit to resize based on content Change-Id: Ida69f961effc261dc44319ba8710d9b4349ba847 Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
* fixed alignment and margins of global buttons to match designsMichael Davis2017-10-091-1/+1
| | | | | Change-Id: Ib932b23aa891a1dd3ad3942dc9c8fbcf94f87f2b Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
OpenPOWER on IntegriCloud