The current set of Javascript linting rules that we're using in this
project is outdated, and it has lead to a variety of competing styles
in the Javascript codebase.
Update the project's linting rules to match those provided by the latest
release of eslint-config-airbnb, but disable a bunch of rules that
aren't compatible with this project.
I've split this change into two commits. The first commit contains the
manual changes that I made to satisfy the new rules, and the second
commit contains all of the whitespace, quoting and commas changes that
were fixed automatically by eslint.
Signed-off-by: Kevin Lingerfelt <kl@buoyant.io>
This PR updates Material-UI from v3.6.1 to v4.7.1. The Material-UI
icon library has also been updated from v3.0.1 to v4.5.1.
Signed-off-by: Cintia Sanchez Garcia <cynthiasg@icloud.com>
This PR improves the UI for the Edges table in the dashboard, including changing column names, adding a "Secured" icon and showing an empty Edges table in the case of no returned edges.
Adds an Edges table to the resource detail view that shows the source,
destination name and identity for proxied connections to and from the resource
shown.
I noticed that the tables weren't maintaining sort order.
This branch fixes sorting by using lodash orderBy.
Before: Look at the tables, for example in the Service Mesh page, the meshed
resource table, or in Top Routes. Note that both these tables have a default
sort order, but do not appear sorted.
After: These tables should be sorted by their default order.
Makes the "overview" view of the Linkerd dashboard functional on mobile devices, with responsive tables and a minimized sidebar.
Also lines up the sidebar icons and makes them a uniform size on both desktop and mobile views.
This is a first step towards a fully-responsive dashboard.
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).
* Renames UNKNOWN in the tables to (default) which is less scary (#1946)
* adds a tooltip explaining what (default) is
* adds url props to the Top Routes page, so that they query can be populated by a url
* fixes a js error that occurs when switching pages
Adds the top routes metrics to the resource detail pages.
* Add a tabbed view to the resource detail page
Add the ability to query top routes from the detail tabs
* Move ConfigureProfilesMsg to its own module
Try to squish the metrics columns so that the data fits on the page without
having to scroll the table. This was mostly evident in the Tap and Top tables,
where a lot of the table content would be initially out of view.
This branch also includes an unrelated tiny fix for max error length, which had
been changed from 500 to 50 for testing, and had not been changed back
* Re-add sortable column headers to tables in web UI
* Display sort icons on all sortable columns
* Disable src/dst popover in top table
Signed-off-by: Kevin Lingerfelt <kl@buoyant.io>
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 ^)
remove toggle sorting functionality from TableComponent:
- tables displaying metrics allowed to toggle between being sorted and unsorted when clicking the same button. This was confusing behavior for the user.
- this PR removes the toggle functionality and introduces a BaseTable Component that extends antd's component without the capability to toggle
- Fixes: #566
Signed-off-by: Franziska von der Goltz <franziska@vdgoltz.eu>
Carol A. Scott
Kevin Lingerfelt
Cynthia S. Garcia
Risha Mars
Franziska von der Goltz