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>
Replaces theme.spacing.unit in the TapQueryForm component, which is deprecated,
with theme.spacing(1), as part of the upgrade to Material-UI v4.
Signed-off-by: Cintia Sanchez Garcia <cynthiasg@icloud.com>
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>
Closes#3778.
Fixes a formatting issue in the dashboard Tap/Top form where if a longer
resource name was selected, the placement of the buttons was off.
Signed-off-by: Cintia Sanchez Garcia <cynthiasg@icloud.com>
This PR updates `react` and `react-dom` to version 16.11.0, and `react-router`
and `react-router-dom` to version 5.1.2.
The following breaking changes have been fixed as part of the upgrade:
- Change deprecated `componentWillUpdate` to `componentDidUpdate`
- Replace`react-url-query` library with `use-query-params` (a Hook) due
to the deprecation of some React lifecycle methods. This required some
changes in the Tap, Top, TapQueryForm and TopRoutes components.
Fixes#3617
Signed-off-by: Cintia Sanchez Garcia <cynthiasg@icloud.com>
The recent routes API changes caused the Top Routes tab to stop working, as it
wasn't looking for the changed structure of the response. This PR updates that
page to accept the new API response.
This PR also adds to fields to the Top Routes query form, so that the equivalent
of linkerd routes deploy --to deploy/authors will work in the dashboard.
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).
- Adds bundle analyzer so we can see the composition of our bundle.
- Stop importing all the locales of moment.js
- Use named imports for all places we use material-ui components
- Fix a bug where, due to the controller components being relabled
linkerd-, the service mesh page wasn't showing the correct statuses.
- Fixes some eslint warnings on tests
[web UI] Previously, we were specifying the display order to display the cli flags in the
QueryToCliCmd module. But this order is pretty standard for each command, and
I'd like to avoid hardcoding that list everywhere.
Move the handling of order into the QueryToCliCmd module.
Previously, we were passing in "tap" as the command name for both the tap and
top forms, resulting in the equivalent CLI command always being linkerd tap
regardless of whether you were in the Tap or Top view.
Fix this to correctly pass in tap or top depending on the page.
Separates out the querying and table display of route data, so that this module
can be easily placed in other places in the UI.
Adds usability improvements to the routes query form at /routes:
- displays CLI equivalent
- adds dropdown with populated options for service / namespace
As part of this work, made TapQueryCliCmd more generic, so it can work
for other CLI commands besides tap/top.
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 ^)
* Add a clear button to the tap and top query forms
Add clear functionality to Tap
Add clear functionality to Top
Fix a react key error when there were multiple unmeshed upstreams
Fix bug where tap results from other queries persisted when changing the query
Fix key error in autocomplete dropdown
Prevent error when trying to tap without having a namespace and resource
selected by disabling the tap button.
Fixes#1670
Signed-off-by: Mathis Wiehl <mathis.wiehl@sinnerschrader.com>
Problem
Previously, we'd display one row in top per sourcePod -> dstPod. When
viewing resources at a higher level though (e.g. deployments with multiple pods)
the src/dst column displays the resource at that level, and displaying multiple
rows with deploy/foo is confusing.
Solution
Key the top table off of the resource currently being requested, so
that all the rows are rolled up appropriately. In the popover for that column,
display a list of pods/ips that are rolled up.
This branch also adds a generic list of resources to the tap/top dropdown (you
were always able to tap them, but when I switched from autocomplete to select
for this dropdown, you lost the ability to type in arbitrary resources).
When a websocket connection is closed between Chrome and a server, we get a 1006 error code signifying abnormal closure of the websocket connection. It seems as if we only get this error on Chrome web clients. Firefox and Safari do not encounter this issue.
The solution is to suppress 1006 errors that occur in the web browser since the connection is closed anyway. There is no negative side effect that occurs when the connection is closed abnormally and so the error message is benign.
fixes#1630
Signed-off-by: Dennis Adjei-Baah <dennis@buoyant.io>
* Use url query params for tap/top form filters
* Add comment explaining react-url-query onChange handlers
Signed-off-by: Kevin Lingerfelt <kl@buoyant.io>
- Use an ant Select instead of Autocomplete for resource list, so that the user
can see all available tappable resources
- Fix bug where the authority autocomplete wasn't showing any options
- Adds "namespace/" as an option in the resource selection dropdown
This required some weird handling because we allow requests of the form
linkerd tap namespace/linkerd (taps namespace linkerd)
but not
linkerd tap namespace --namespace linkerd (does not work as intended,
taps every namespace)
Increase the MaxRps on the tap server to 100 RPS.
The max RPS for tap/top was increased in for the CLI #1531, but we were
still manually setting this to 1 RPS in the Web UI and Web server.
Remove the pervasive setting of MaxRps to 1 in the web frontend and server
Includes a substantial refactor of Top.jsx to move the websocket
and top-request-aggregation code into a self-contained module
so that this code can be shared by /top and by each resource
detail page.
(This refactor also helps separate concerns in that
page; since that page also makes 10 second requests to the stat
api to populate the autocompletes in the form).
The TopModule uses the startTap prop to figure out whether it
should start a websocket connection and make a tap request
when mounted. (This is because the resource detail pages
start tapping immediately upon load, whereas /top can only
start once you've entered a query.
I've removed the spinner and the awaitingWebSocketConnection
state field because that now belongs in the top module. I think a
similar refactor of tap would be good before we re-add it.
Add a Top page to the linkerd web UI. This is the web equivalent of #1435.
I've used the same fields as in the current implementation.
This branch also includes some slight refactors to the Tap code to enable code reuse.
The request processing logic is pretty similar to that in Tap.jsx, except that we can
immediately discard the result once we receive the response end and aggregate
that result into the top results. So the index of tap results will tend to be smaller
(unless they're long running requests like streaming). But we also add a similar
index of aggregated Top results, and discard oldest results if top has been
running for a long time.
* Add a Top page to the web UI
* Refactor Tap event parsing into common util code
* Small refactors to the TapQueryForm and the CliCmd display to accomodate Top
* Collate tap events based on the ID (src, dst, stream)
* Also refactor keying of req/rsp/end into requestInit/responseInit/responseEnd for clarity
* Use pod labels when present in top
* Fix bug where src/dst were switched in the Tap display table
Tap.jsx is really large and contains a lot of logic that pertains only to the Tap Query Form.
This PR tries to separate the concerns of the form and the query display from the main
Tap querying and rendering logic.
This will also allow us to easily reuse this form/CLI formatting for the Top page.
Changes in this PR:
* moves all the code for the form into its own component (TapQueryForm)
* moves the code that displays the current query into its own component (TapQueryCliCmd)
* formats the current tap query as the equivalent command line format that you
can paste into a terminal
Carol A. Scott
Kevin Lingerfelt
Cynthia S. Garcia
Risha Mars
Andrew Seigner
Mathis Wiehl
Dennis Adjei-Baah