summaryrefslogtreecommitdiff
path: root/src/components/AppHeader/AppHeader.vue
AgeCommit message (Collapse)AuthorFilesLines
2022-06-20fix Modals, Tables and Pages: event logs, inventoty, post logs, operttions, ↵Maksim Zakharov1-99/+91
global styles
2022-06-07Delete main-container, add global scroll to pages, add global style for logs.Maksim Zakharov1-1/+1
2022-06-01Add PopoverSlot restyled DateTime and ServerPowerOrerations pages add reload ↵Maksim Zakharov1-16/+3
BMC.
2022-05-24Add depend: highcarts. Pages: power, analytical motherboard, memory, fans, ↵Maksim Zakharov1-5/+5
event logs, Fix styles, add global components.
2022-05-23Add pages: BMC, Ipv4/6, console settings. Fix routes: add console mixin, ↵Maksim Zakharov1-1/+0
disable fullscreen console, add global styles.
2022-04-29restyled navigation pannelMaksim Zakharov1-7/+5
2022-04-28restyled header and add subheaderMaksim Zakharov1-81/+154
2022-04-28restyled login pageMaksim Zakharov1-2/+26
2021-12-23Fixed routerKey prop eslint warningKenneth Fullbright1-1/+4
Eslint throws a warning to props that don't have a default value - Added a default value to the routerKey prop. Signed-off-by: Kenneth Fullbright <kennyneedsmilky@gmail.com> Change-Id: I2d9d4abd0512eeadf27f8941a0f391979eb9a80a
2021-12-20Fixed refresh system info on headerkennyneedsmilky1-1/+4
The refresh button in the App header previously only re-rendered the main mage section, this change also refreshes the app header and main content. Signed-off-by: Kenneth Fullbright <kennyneedsmilky@gmail.com> Change-Id: Iff7f3f14bca8ddfd815ccb1b87dd182c4bfd79ba
2021-09-03Update login page layoutDerick Montague1-1/+1
This update will: - Change the positioning of the form to be on the left - Add the built on OpenBMC logo to the bottom right corner of the screen - Add the ability to include a GUI custom name using a .env variable. If the variable is not present, the login page will not include the <h1> section heading element. - Remove the word "logo" from the alt attribute for the company logo image used in the application header and on the login page. Github story: https://github.com/openbmc/webui-vue/issues/63 Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: I83ac5aecff0b3858c3ab5f38ab1aaa603d59acf1
2021-08-27Add system information on Appheader pageSukanya Pandey1-9/+30
- Model type and serial number are newly added system info data on Appheader. - On small screens and below system information(model type, serial number and asset tag) will be hidden. - On large screen and below model type and serial number will be visible but asset tag will be hidden. - For all other screens all the system info will be visible. Signed-off-by: Sukanya Pandey <sukapan1@in.ibm.com> Change-Id: Ia844a26f658083cbd5fa9c8f3f6bea8b65ddcd11
2021-08-10IA update: Update control section to operationsSandeepa Singh1-1/+1
This is the third update to the information architecture changes and has the following changes: - The control section has been updated to operations - The server led page has been removed - The firmware page is moved to operations section Signed-off-by: Sandeepa Singh <sandeepa.singh@ibm.com> Change-Id: I2e23da447890d7bee51892e1f782d5f2db6dded4
2021-08-10IA update: Add logs and update overview iconDerick Montague1-1/+1
This is the first patchset of the information architecture changes. These changes are the result of several months of design research with users to improve the existing information architecture (IA). More information can we found in the Github story. This patchset will add a Logs section and move event logs and dumps from the Health section to the new Logs section. It will also update the icon used for the Overview page. Github story: https://github.com/openbmc/webui-vue/issues/56 Testing: 1. IBM build: - Logs contained Event logs and dumps - Both pages rendered when clicking link 2. Intel build - Logs contained Event logs only - Logs page rendered when clicking link 3. Tested default build - Logs contained Event logs only - Logs page rendered when clicking link Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: I4621837202cf5ad3469d6ea460d9a5bdc79c8816
2021-05-18Replace use of the term host with serverDerick Montague1-8/+8
This patchset focuses on the global store use for server power operations and impacts several pages in the interface. For consistency, both in the UI and the code base, we are replacing the term host with server. This change impacts both the user and the developer experience. Maintaining consistency in naming allows both developers and users to form a mental model of the overall system and will help remove confusion when interacting with the UI and editing the interface. Testing: 1. Tested shutdown, power on, and reboot and verified the icons and page sections in the site header and the server power operations page update as expected during power operations. 2. Verified the one-time boot operations alert is displayed to the user when changing the boot settings on the server power operations page 3 Tested factory reset and validated the correct information message is displayed to the user with the server power off and on when performing the factory reset functions. 4. Verified the SOL Console status icon updates correctly during power operations. 5. Verified the alert message is displayed on the firmware update page when the server is powered on. Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: I88499a746364ab80f16a8b350d550407d094e95d
2021-02-17Fix skip link 404 error on refresh bugDerick Montague1-1/+9
Problem: When a user uses the skip link anchor to skip the navigation, the route was being changed to /#main-content. This route does not exist. If a user were to manually refresh the page, it would return a 404. This link is critical to meet accessibility guidelines and is needed by users that navigate with a keyboard. The challenge is that we need to mirror a full page refresh on all route changes, so we set focus on the app-header element on each route change. When we click the skip to navigation link, there should not be a route change. All we need is to set focus on the <main> element so that the user can tab to the first tabbable element in the main content section. Solution: - Use a native <a> element with an attached click event handler - Prevent the default action of adding the hash to the URL - Create a global mixin to reuse for route changes and skip link activation - Emit an event that can be listened for to call the global mixin Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: I4c2301b02f608eeb376ed2d1bd809f3d5c1bf545
2021-02-16Add enhancements to BVToastMixinYoshie Muranaka1-4/+3
Adds ability to create toasts with multi-lined body content and options to include a timestamp and application refresh action. Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: I30b1da04a0e0b5f29a419950462d1ca35e207552
2020-12-16Show asset name in the app headerSukanya Pandey1-1/+15
Signed-off-by: Sukanya Pandey <sukapan1@in.ibm.com> Change-Id: If5394604d6c91b3604eaadb33178376fe6da672c
2020-11-12Resolve custom-event-name-casing lint warningsSukanya Pandey1-2/+2
Signed-off-by: Sukanya Pandey <sukapan1@in.ibm.com> Change-Id: I9eea4eac3b8cacc216fc9ad1011e51622622e75f
2020-11-03Update linting packages to use latestDerick Montague1-8/+8
- 99% of changes were small syntax changes that were changed by the lint command. There were a couple of small manual changes to meet the property order patterns established as part of the vue:recommended guidelines. There are rules that were set from errors to warnings and new stories are being opened to address those issues. Testing: - Successfully ran npm run serve - Successfully ran npm run lint - Verified functionality works as expected, e.g. success and failure use cases - Resolved any JavaScript errors thrown to the console Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: Ie082f31c73ccbe8a60afa8f88a9ef6dbf33d9fd2
2020-10-29Update button focus state for small screenDerick Montague1-8/+10
The focus state uses the box-shadow and two inset values. The first should match the background of the button or link container. The second is the actual color of the outline focus state. On smaller viewports, the menu stacks and is a different color. - Add mixin with optional color param for setting the color of the inset box-shadow that matches the container's background color - Add a focus state for the helper-menu at the smaller breakpoint - Remove the multiple :focus pseudo-selector declarations that remove the outline and set it when we set the initial focus state Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: I8eb046f892b395baba41dd62460d2a771bd1f92a
2020-10-23Add style to left sidebar and app headerSurenNeware1-23/+47
- Updated hover, active and focus state for left sidebar menu items. - Add style guide for top header navigation. - Add new white color logo. - Add focus and active state to current menu item. Signed-off-by: Suren Neware <sneware9@in.ibm.com> Change-Id: Ib97df4efda216f653ce0415c3f3ae9ae75bcb9cd
2020-10-23Add support for mutual TLSYoshie Muranaka1-0/+3
Adding check for 'IsAuthenticated' cookie in AuthenticationStore and adding a check in created hook for AppHeader component because it is visible on all authenticated pages. Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: Ic558c9c45fd3f5874c8c516cb6bc005cba4946e2
2020-10-21Show error toast notification on unauthorized accessSukanya Pandey1-0/+15
-When 403 status code which is an unauthorized access occured -show error toast notification. Signed-off-by: Sukanya Pandey <sukapan1@in.ibm.com> Change-Id: I55fa7052073f87f28c3584b68fd4e84247a4237e
2020-10-19Update relative path imports to use '@' aliasSurenNeware1-2/+2
- Add '@/' instead of '../../../' Signed-off-by: Suren Neware <sneware9@in.ibm.com> Change-Id: Ida1dc26f2bd62f38914a74b729ee8fd143c360ac
2020-10-16Add title attribute to header actionsSurenNeware1-6/+11
- Add title attrbute to refresh and avatar icons in app header. Signed-off-by: Suren Neware <sneware9@in.ibm.com> Change-Id: I89629548ecf5141e3c168fe7b5e1a60d1f86620c
2020-08-28Add Intel themeMateusz Gapski1-5/+2
Add Intel fonts, colours Signed-off-by: Mateusz Gapski <mateuszx.gapski@intel.com> Change-Id: Idbfa1422f2667515efb60e24f9a84b7d77d11fcd
2020-08-25Add link to header logoDixsie Wolmers1-5/+7
- Adds link to app header logo that will redirect to overview Signed-off-by: Dixsie Wolmers <dixsie@ibm.com> Change-Id: Ia17356ee89d732c30d681754d1c9c26c0ea6481b
2020-07-27Add application header test hooksDerick Montague1-8/+29
We are not able to easily pass the data attribute to the markup created by some of the Bootstrap-vue components. In these cases we are adding the data attribute to the parent container. Those elements will use the word container in the data attribute value. Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: I5f1cb43aaed9233415e9b7b9a7f71580f27f921d
2020-07-27Add ability to customize theme stylesYoshie Muranaka1-2/+0
Showcases how different themes/styles can be supported using .env variables. If an environemnt name is specified during the build process, an overrides file will be pulled in to allow modifications to color and font definitions. This commit includes possible style modifications with the openpower env name as an example. To see the openpower changes, add the variable definition VUE_APP_NAME="openpower" to your .env.development.local file or build using 'npm run build -- --mode openpower' - Moves helper imports into vue config to allow for specific import order - Removed helper imports in SFCs Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: Iaf7a59c24fda06a7b74e23f2f042fb3300cb2056
2020-07-22Intel environmentMateusz Gapski1-2/+13
add environment for Intel add logo as a placeholder Signed-off-by: Mateusz Gapski <mateuszx.gapski@intel.com> Change-Id: Iad1ef66ef73e7f9e0857122cc29729543cbf6682
2020-07-21Update use of Sass variables for better themingYoshie Muranaka1-6/+6
Use Bootstrap color functions for theme-colors and grays instead of directly referencing Sass variable to allow more flexible theming. Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: Id08b77ff6df3bdf99400dcdfe964853706f1070f
2020-06-24Responsive Site HeaderSurenNeware1-7/+42
- Changed Header shortcut menu Icon position - Fixed Media devices responsive layout Signed-off-by: Suren Neware <sneware9@in.ibm.com> Change-Id: I817d8f11d9fb720bb9e37f4a136cb19305144228
2020-06-17Profile settings pageSukanya Pandey1-49/+67
-To set the profile by setting password. -This commit adds a profile page which allows the user to change their password. In the future, the profile page will also contain user settings like language and timezone. The API called to change the user's password is '/redfish/v1/AccountService/Accounts/<userName>' Signed-off-by: Sukanya Pandey <sukapan1@in.ibm.com> Change-Id: Ie54a54beff8c85bc9ac5af21c35edc481b34cf44
2020-06-02Add link to app header status iconsDixsie Wolmers1-2/+2
Signed-off-by: Dixsie Wolmers <dixsie@ibm.com> Change-Id: Id7a303c415778351089786e894c42770e1810d01
2020-05-21Update EventLogStore request to use RedfishYoshie Muranaka1-3/+3
Changes to WebSocketPlugin to dispatch event log GET request when new event interfaces are received. By re-fetching the Redfish logs the health status icon in the application header will always reflect the visible event logs. The plugin was previously only updating the header status, so it was possible for the header status and event logs to be out of sync. - Changed to use Redfish endpoint for event log GET request /redfish/v1/Systems/system/LogServices/EventLog/Entries - Update AppHeader Health status icon to reflect changes made with Redfish log Severity property Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: I73a3a441dcbbb3a29ef9a51f961c062689cb5add
2020-05-16Add Redfish mapping for quiesced and dignostics modeYoshie Muranaka1-0/+2
- Add yellow warning icon Power status in app header for diagnostics mode Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: I8a0f18139da2a29f4bcc4025db3aada158f86026
2020-05-05Update Sass architecture to require helper importsDerick Montague1-0/+2
- Restructuring file strucure to support single file components use of Sass variables when imported into vuepress. - Creating a scalable file structure using Sass best practices Tested by building and testing both the vue web ui and the the documentation application. Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: Iddcefbf305c8dac978ee24e903df33b609e395e3
2020-05-01Create LoadingBar componentYoshie Muranaka1-1/+10
Create loading bar component to indicate when page data is 'loading'. Not every component view will need to show the loading bar (eg Reboot BMC). The LoadingBarMixin can be imported per component as needed. Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: I6735be37bc0a81f5bb2b7c93fb31a0e0ef9b40d1
2020-04-09Resolve header and nav accessibility violationsDerick Montague1-21/+35
- Add aria-label to nav sections in app-header and app-nav to meet accessibility guidelines. When application has multiple nav elements an aria-label is required to help screen readers identify the elements - Remove b-nav child of b-nav-bar in app-header to fix invalid markup generated by Bootstrap-vue components. Components were not used as expected by the component library - Replace b-nav-item with HTML <li> elements using nav-item css classes in order to use button elements. Bootstrap-vue generates <a> elements which is not the semantic HTML element to use for items that are not links to other sections of the application. - Removed aria-expanded and nav-open class from nav-trigger button - Update appHeader unit test Used a TDD approach to write all tests to fail and then updated the methods and actions to make the tests suceed. Each test resulting in a dispatched action should be called once only and with the expected action. Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: I18af3727708526f814b7ceb77a0c28fda9f3d9bd
2020-03-10Remove unused colors from color paletteDerick Montague1-3/+3
The color palette has been stripped down to a maximum of two colors shades per palette. This works for our design since components use a base color with a lighter color as an accent color. This change reduces the amount of CSS generated by Bootstrap when the CSS is compiled. Github Story: https://github.com/openbmc/webui-vue/issues/2 Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: I2ddb37f5c89c749a7303799c6f7499ddd83d5a92
2020-03-03Add translation to header and navigationYoshie Muranaka1-6/+6
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: I31a6c7a45a20c68efc367ba625c7b06b2d7ba47d
2020-02-19Add responsive layoutYoshie Muranaka1-6/+64
The main navigation will be collapsed until the viewport minimum width reaches the Bootstrap defined 'lg' breakpoint (defaults to 992px). - Adding motion variables and updating some CSS values to use existing Sass variables Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: Id159b84da6adf55fdb15842b0e33b1ede4eeceb4
2020-02-19Add refresh functionality in app headerYoshie Muranaka1-1/+4
Clicking refresh in the app header will update the :key value for the router-view component, and trigger a component re-render. Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: I15da6d2d04fc311dfc092fbe840add950180124f
2020-02-17Add Health status to app headerYoshie Muranaka1-1/+26
Added logging path and interface to websocket subscription data filter, to dynamically indicate Health status in the app header. - Update OverviewEvents to use highPriorityEvents data - Refactor EventLogStore Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: I35ad30b005c70625a5f6a69488d45db0fa049374
2020-02-14Clear application state on logoutDerick Montague1-3/+1
Remove the authError state property from the logout mutation since the the authError would not be in the true state after a successful login. Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: Ibfe8b07c4e9e37dfab4435596c12e9a36556a714
2020-01-31Change eslint rules to use vue recommendedDerick Montague1-3/+3
Resubmitting after reverted–original commit here https://gerrit.openbmc-project.xyz/c/openbmc/webui-vue/+/28763/7 - Ran npm run lint - Resolved eslint issues Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: I2b8b9244acddd483d0a72f9a5d156a79de9869a0
2020-01-29Revert "Change eslint rules to use vue recommended"Gunnar Mills1-3/+3
Merged accidentally. Although this one did have the proper +1s/+2s. The 2 underneath did not. The author will resubmit. This reverts commit 5e7ac49058e5dc37fd43ecf3c0d06f5dda14af5b. Change-Id: Iceb1de3a170cc0b592b183545c792aa3eb87bfee Signed-off-by: Gunnar Mills <gmills@us.ibm.com>
2020-01-29Change eslint rules to use vue recommendedDerick Montague1-3/+3
- Ran npm run lint - Resolved eslint issues Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: Icd433ca55321d8bceb941e2d13ebade72bd4981f
2020-01-29Fix linting in script blocks in vue filesDerick Montague1-14/+14
- Removed the .eslintrc and added the pretteri rules to the eslintrc file - Ran `npm run lint --fix` Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: I4e36c1967ae9b4d839ef88f1d47ffa20ab4e4991