Fixes#1792.
This PR adds filter functionality to the web UI via an optional Material-UI <Toolbar> on the top of the table which contains the table's title and a filter icon. The toolbar only shows if the enableFilter={true} prop is passed down from the parent component. The PR modifies the MetricsTable test and adds tests for BaseTable and TopRoutesTable.
Note: The previous Ant-based UI allowed certain tables to be filtered by individual table column; this capacity is not part of this PR but can be added later if useful.
Imports lodash function individually, eliminate 'import _ from lodash'
This branch replaces imports of all of lodash (import _ from 'lodash' with per
function imports e..g import _isNil from 'lodash/isNil'. This reduces the bundle
size from~520 kb to ~160kb.
I've also taken the opportunity to replace our use of lodash functions with
native js functions where it makes sense (e.g. some maps, concats, sizes).
This branch includes some small appearance tweaks for tables in the app.
- Removes the restrictions on the MetricsTables for Authorities Grafana
links (Authorities Grafana dashboards were added in #1772)
- Fixes the tables overflowing their containers on the Overview page
- Allows tables to be denser, allowing for more data on screen
- Fixes the colour of the meshed status bar in the ServiceMesh page
- Rixes the ErrorModal icon alignment and colour
- Small appearance tweaks to the things in the table e.g. icons
Switch the dashboard's component library from antd to material-ui.
There are extensive changes to most of the frontend components in the app.
This branch changes all uses of antd components to their closest equivalent in
material. There is still a lot of polish that needs to go into the look of
individual components, but since the major component rewrites are done, I think
get this work in so that further work can be done in smaller branches.
Changes in this branch:
- add Material-UI 3.2.2 to the project
- replace all uses of antd with material-ui components
- remove antd from the project
- slight modifications of eslint rules
- restructuring of app components to be rendered under the Navigation
component
- deleted most of our css (replaced with material's inline styles)
- pinned package versions in package.json (mostly removing ^)
Use jest for assertions, removing the need for mocha and chai
- Clean up test dependencies
- Move dev dependencies to devDependencies
- yarn remove chai remove sinon-chai mocha
Jest is faster, has more flexibility to run a subset of the tests, and will allow
us to remove a bunch of our assertion libraries.
Many thanks to @grampelberg for prior work on this (#1000)
This PR:
- changes the test runner from karma to jest
- moves individual tests from /test/ to/js/components` where jest expects them
Tarun Pothulapati
Cynthia S. Garcia
Carol A. Scott
Risha Mars