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
If you go to /top and select a namespace and then a resource, and then clear the
resource, there would be a javascript error that would cause the whole app not
to render. Fix this.
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>
There are two variables we use to control the volume of Top output,
maxRowsToDisplay, which controls how many rows are in the table, and
maxRowsToStore, which controls the size of the event index we keep in memory for
aggregating results.
Previously, we were only keeping in index maxRowsToDisplay rows, which for the
Resource Detail page was 10 (which is really small for high traffic rest-y
resource traffic - it causes rows to be deleted from the index too soon, and
then causes the data in the table to change a lot). Change this to store
maxRowsToStore rows, and also bump this to 50. This allows us to store results
for longer, and also ensures more consistent data over time.
Another fix for the appearance of the Top columns is to add fixed widths to the
metrics. This will prevent the table from wobbling from side to side.
Consolidate the source and destination columns into one column,
and add a direction column (To/From) so the user knows if the
displayed resource is src/dst.
The web client displays `Websocket [code]` on websocket close errors.
Modify the web client to render a more helpful error message to the
user. If a reason is present, render that, otherwise translate the
websocket error code into a message.
Fixes#1599
Signed-off-by: Andrew Seigner <siggy@buoyant.io>
* Use Tap data on Resource Detail page to display unmeshed resources
that send traffic to the specified resource.
* Don't update neighbors on every websocket recv; this causes too much rendering.
Instead, store in internal variable and update with the api results.
This branch uses the src data from tap to discern which unmeshed resources are
sending traffic to the specified resource. We then show this resource in the
octopus graph.
Note that tap is sampled data, so it's possible for an unmeshed resource to not
show up. Also, because we won't know about the resource until it appears in the
Tap results, results could pop into the chart at any time.
_.throttle setState for receiving websocket tap events to prevent continuous rerendering
Problem
We receive a lot of websocket events from the tap server. Previously, we
were processing each event as we received it, then calling setState after
processing to update the tables. Each call to setState triggered a re-render of
the whole table. We were rerendering multiplie times a second, causing the whole
page to become unresponsive.
Solution
Throttle setState for receiving websocket tap events to prevent
continuous rerendering. Store the tap events in an index outside of state, and
only update the state once every specified interval (currently 500ms).
We can now view entire namespaces with Top and the page won't crash!
To verify: Go to /top and try topping a 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.
Risha Mars
Mathis Wiehl
Dennis Adjei-Baah
Andrew Seigner
Kevin Lingerfelt