summaryrefslogtreecommitdiff
path: root/src/components/Global
AgeCommit message (Collapse)AuthorFilesLines
2020-07-24Add table responsive layout and fix search icon visibilitySurenNeware1-0/+1
-Add responsive layout for all the tables. -Fix search icon visibility in search component. Signed-off-by: Suren Neware <sneware9@in.ibm.com> Change-Id: Ibb4f77cf322aeb3699b13ab6cbbdb6cc38efbdc4
2020-07-23Update global typographyDixsie Wolmers3-8/+1
Updated the following body, label, and heading styles to match new style guide: - Font sizes - Font weight - Line height - Color Signed-off-by: Dixsie Wolmers <dixsie@ibm.com> Change-Id: I014c968f6542b697fec8c3b9af781e64ac10794d
2020-07-23Overlapping search box and toolbar with selected rowsMateusz Gapski1-0/+1
More details: https://github.com/openbmc/webui-vue/issues/19 Signed-off-by: Mateusz Gapski <mateuszx.gapski@intel.com> Change-Id: I6c84f979baa1d381c8ae62781a2607d3de63169a
2020-07-23Add the updated icons for critical and exportSukanya Pandey1-2/+3
-the critical icon in the header and tables. -the export icon in the event log page. Signed-off-by: Sukanya Pandey <sukapan1@in.ibm.com> Change-Id: I5b3beedb8339ba6e6bbd34b43ea7698fc44f9e42
2020-07-23Fix browser warning of non-unique id on Hardware pageYoshie Muranaka1-3/+4
Adds a unique id to the global search component. The search component has an id attribute. When it is reused on the same page, like Hardware status, the id is no longer unique within the document. Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: I1226aa9da69b90b9a7da9ed3d053fde020babcc0
2020-07-22Add slot for an optional action in Alert componentYoshie Muranaka1-1/+4
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: Ia2891eaf6e22c367d3080a9a3cb2eff0a27563bf
2020-07-21Update LoadingBar componentDixsie Wolmers1-0/+2
Adds "striped" and "animated" prop to loading component to improve user experience when saving or loading on a page. Signed-off-by: Dixsie Wolmers <dixsie@ibm.com> Change-Id: Ie1c3c253172486a5915cdc79952271bad846cfde
2020-07-21Update use of Sass variables for better themingYoshie Muranaka3-3/+3
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-07-17Add test hooks to TableFilter componentYoshie Muranaka1-1/+7
Adding standardized test hooks to filter dropdown component, nested checkbox options and clear all button. Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: I46d7166f35eb51ebf5eb6a136266591884e93324
2020-07-17Refactor global TableFilter component and mixinYoshie Muranaka1-12/+53
Add key property to TableFilter component to make sure filtering is based on specific row property. Previously, the table filter was checking all row properties for matches. Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: I589886a0d487ac3ab8def585cc7286e61992afdb
2020-07-02Resolve LoadingBar accessibility issueDerick Montague1-5/+6
- Add an aria-label to the b-progress-bar component to meet accessibility guidelines - Nest b-progess-bar component in b-progress component in order to add aria-label to the correct element Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: I3b7d23026d4bcdb607fdbad24170e38116a7eb8a
2020-06-26Add test hooks to event logs pageYoshie Muranaka1-0/+1
- Add data-test-id test hooks to simplify the xpath queries needed to set up automation testing - Reduce the possibility of breaking automation tests when/if pages are updated Adds test hooks to table checkboxes, batch action delete button, inline row delete button. Will add hooks to table filter dropdown separately, because the component needs refactoring. Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: I84fef897bbe29ea410a3b7d663828ddd7c91aa88
2020-06-26Fix Search component default prop validationYoshie Muranaka1-1/+1
Changed placeholder prop validation to use a regular function instead of an arrow function to fix undefined errors where 'this' is undefined. Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: I315542aae3d53a169767fda0407d8379d1b13027
2020-06-13Add date filter on Event logs pageYoshie Muranaka1-0/+176
Created global TableDateFilter component that uses the BootstrapVue Datepicker with a native text input. This will allow users to manually enter a date in ISO format or use the Bootstrap calendar dropdown. Storing language preference from Login to use locale prop on BootstrapVue Datepicker component. Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: I66de9fb04451572c9a90f90d8522934b6204aed2
2020-06-12Global Search componentSurenNeware1-0/+64
Added global Search component to Sensors page. Signed-off-by: Suren Neware <sneware9@in.ibm.com> Change-Id: I3121cc4e582c782fa7e9937738cefbeddc23610e
2020-06-10Add batch actions and row action to Event LogsYoshie Muranaka1-18/+48
Adds ability to export and delete event logs by row or in a table batch action. - Modifications to TableRowAction component to allow single row export functionality Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: Ica50dd0868ac85cc2d6925a9448858b40da9c529
2020-05-05Import sass helpers to LoaderBar componentYoshie Muranaka1-0/+2
Fixes errors when trying to access Sass variables in LoaderBar component. Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: I9aa4baa2c1725a62bdbad36a5bda342563090b0a
2020-05-05Update Sass architecture to require helper importsDerick Montague6-0/+12
- 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-05Add export functionality to Sensors pageYoshie Muranaka2-1/+37
- Create TableToolbarExport component to be used as a slot in TableToolbar - Allows selected table items to be exported Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: I929347e046af8a5d5188e4c4fd9fc874e067cce5
2020-05-01Create LoadingBar componentYoshie Muranaka1-0/+85
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-21Create TableFilter componentYoshie Muranaka1-0/+93
Global TableFilter component and TableFilterMixin can be used with any table. The TableFilterMixin will return filtered data with items that match any of the filter tags. When the table search component is built, it should use the BoostrapVue Table :filter prop. - Filter by status added to Sensors table Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: I57ebab1686b2d267383cb0e1be252627bf42c98c
2020-04-16Create accessible InfoTooltip ComponentYoshie Muranaka1-0/+30
Adds a global reusable component that will display the info icon with accesible markup. Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: I5f7ee4a45e19ce851b3eff705d722517db07c0bf
2020-04-09Fix documentation errorDerick Montague1-7/+0
Using SCSS tokens in single file components results in a compile issue causing the documentation to white screen. Moving custom alert styles to the global alert .scss file to resolve this issue and to keep all alert styles in one place. Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: I047fa15c76cdfb842e5c00eea99e529595b94632
2020-03-31Add local user account manual unlockYoshie Muranaka1-2/+10
Adds ability to manually unlock user account if account service settings lockout duration set to 0. Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: I75351c5e03bd5403e8dc7679d8d98b90adb90277
2020-03-20Add alert message component and documentationDerick Montague2-4/+37
- Add custom alert component to simplify the use of custom alerts - Add documentation for using the custom alert - Update the login error alert to use the alert component instead of the Bootstrap-vue component. - Register alert component in enhanceApp - Replace Sass variables used in the StatusIcon component style block to use the Boostrap theme-color and gray Sass functions so the colors can be used in the Vuepress documentation custom components Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: Ibd93402c919a42bd5c24cc9e7c6c8fc6f17a4db4
2020-03-20Add buttons documentationDerick Montague1-0/+1
- Add documentation for how to use buttons - Update markup and CSS rulesets to support icons on the left or the right of text Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: Ic897f416e85824287360bc7ef5dc47c402d64eba
2020-03-13Revert "Add alert message component and documentation"Derick Montague1-33/+0
This reverts commit 71650fff20c0ad29eb05d770736386863324b64e. Reason for revert: Found an issue with Sass loader when compiling docs that needs to be addressed. Change-Id: Icdd1243665f60849bfb341594452687fcdaeebe2
2020-03-12Add alert message component and documentationDerick Montague1-0/+33
- Add custom alert component to simplify the use of custom alerts - Add documentation for using the custom alert - Update the login error alert to use the alert component instead of the Bootstrap-vue component. - Add the enhanceApp and bmcAppPlugin to extend vuepress to use both the BMC custom and Boostrap-Vue components along with the custom styles Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: I5c0b696ca47ddba0df18041d6c5ee7509bf23572
2020-03-10Remove unused colors from color paletteDerick Montague1-1/+5
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 user management pageYoshie Muranaka2-4/+4
Updated TableToolbar component to handle label translation outside of the component which is more consistent with bootstrap table component patterns. Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: Ic2e75e327f6a6067905c541f9a3ea55c5d103f4b
2020-03-02Fix styling for TableRowAction buttonYoshie Muranaka1-1/+1
Padding was off for buttons in the TableRowAction component because of specificity issues. Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: I0b11bce612c4e1fe9b07a3ca8e33febf57f944e0
2020-02-26Update language json structureYoshie Muranaka2-3/+3
Restructure language file to use consistent pattern across pages following loose guidelines. - Create buckets for common global labels - Create common component objects–appHeader, appNavigation, appPageTitle - Page specific labels should be nested in an object with a key prefixed with 'page' followed by the page title - Any 'major' child components should be nested inside page specific objects - Avoid any complex linked locale messages - Alphabetize object keys, alphabetize nested properties at end of object block Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: Ie4222b3ce24dec7af31b55b5a77425ca2f492789
2020-02-24Create TableRowAction componentYoshie Muranaka1-0/+40
Creating a reusable component to help ensure visual consistency and code reuse for table actions. Updated local user management table to use this new component. Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: Ib94df901c5b6a70ee3299f6844b60fa761842b13
2020-02-22Add batch actions to local user tableYoshie Muranaka1-0/+119
- Create TableToolbar component for table batch actions - Added Toast warning type and toast title message translations - Update vue-i18n package to latest v8.15.3 to use improved pluarlization features Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: I455beba4f56b8209b1201bbc5ff3f616e960d189
2020-02-22Add Reboot BMC pageYoshie Muranaka2-8/+9
Created a ControlStore with the intention to consolidate actions across multiple subnav pages under the 'Control' tab, instead of creating a dedicated RebootBmc store with one action. - Update PageSection component to make sectionTitle prop optional - Changed PageTitle computed property to data since the value doesn't change during the component lifecycle - Change PageSection <section> element to <div> to avoid accessibility issues Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: I2877e2a7b9bfee245c48d52c70859978b74be7f3
2020-02-22Create password visibility toggleYoshie Muranaka1-0/+57
Reusable component to show/hide password input fields, added to local user form. Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: I90fb865e51d99788a225812b057f4d8bacad1bc8
2020-02-19Add responsive layoutYoshie Muranaka1-5/+7
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-17Add Health status to app headerYoshie Muranaka1-2/+7
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-13Set up initial language translationDixsie Wolmers1-4/+4
- Add i18n internationalization plugin - Create json files for group 0 English and Spanish - Uses $t method to set up initial translations on login page - Meta title is translated using i18n in App.vue and PageTitle.Vue Signed-off-by: Dixsie Wolmers <dixsie@ibm.com> Change-Id: Ifce9f5e54d96f8b2a13239ad6178892f99fc4537
2020-02-13Update PageTitle component to use divYoshie Muranaka1-2/+2
Changed header element to div to fix accessiblity violation of having multiple header elements without unique aria-label properties. Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: I1e8aeaa6ee9142e16176eb47928916424ef4fba0
2020-01-31Change eslint rules to use vue recommendedDerick Montague3-3/+18
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 Mills3-18/+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 Montague3-3/+18
- 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-5/+5
- 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
2020-01-29Add host status pluginYoshie Muranaka1-0/+38
- Create WebSocket and get host state changes from server - Changed webpack devServer to https to allow for secure WebSocket creation (wss) - Updates to AppHeader to visually indicate changes in host state - Cleaned up api.js file - Check if user is logged in when creating WebSocket - Adds check if user is already authenticated so WebSocket is created when browser refreshed. - Add appliation header styles - Add sass loader config changes to allow sass variables to be used in single file components URL must use https protocol when running locally or the page will not load. Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: I35e89bdc09e1aa35a6215ef952409a8ed16dd9e1
2020-01-28Add page level layout componentsYoshie Muranaka3-0/+84
Adding components to help standardize type, size, spacing for common elements on a page. Also removed a conflicting class name and added modifications to the main container. The main container needed a min-height and height value set, which became apparent with added background color. Adding a background color will move us closer to agreed design solution to add a subtle background color instead of adding a border to separate main content from left hand navigation. Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: Ie63c4f0c0f3fd199fa0ca790065402e06a613691