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).
Since we've switched to using css-in-js styling with material, we have very
little need for additional css libraries so support our ~30 lines of css. I'm
removing them in favour of a simpler configuration and inline styles.
As a result, displays better in the material UI version of the dashboard.
Also adds Success rate to data displayed on neighbour nodes.
* Rewrite octopus arm code to be more parameterized and flexible.
As a result, displays better in the material UI version of the dashboard.
* Add Success rate to data displayed on neighbour nodes
* Fix variablilty in grid spacing by fixing the max and min widths of the chart,
and by scrolling the overflow
* Center the octopus graph so it looks better at full width
* Also add padding, so that the drop shadows aren't cut off
Try to standardize theming and colours throughout the app:
- Move Material UI theme definition into its own file
- Use theme colours in success rate charts
- Remove all colour definitions from styles.css
- Remove unused styles in styles.css
- Audit bare h tag usage throughout the app; replace with Typography
- Standardize the colours to the theme for Progress.jsx
- Use theme colour in Spinner
- Default to warning in meshed status table bar chart
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
Use the same tap data we use to display the unmeshed resources in the Octopus
graph to add the unmeshed rows to the Inbound stat table.
The unmeshed rows are filtered by resource type, so if we're on a Deployments
page, only upstreams which are deployments will show in the table. (Others, such
as IPs, will still show in the octopus graph).
* Use the list of unmeshed resources to display unmeshed sources in the table
* Keep track of number of pods in unmeshed sources
When I deleted a resource, I noticed that hard refreshing the page resulted in
js errors that would break the UI (e.g. if you were on a pod page, and the pod's
deployment was deleted, the pod would no longer be found, and the page would
error). This PR better handles not-present resources so that the UI still shows
up and shows you that there aren't metrics for that resource.
Also clean up the undefined/undefined octopus node that would show up in that
case.
Draw customizable SVG paths for octopus arms.
This also combines all the unmeshed resources into a list and displays them in
one resource box, instead of adding one box per unmeshed resource. This helps
keep the box heights constant, which I want to draw the arrows.
A bunch of web UI tweaks:
- Add a small success rate chart to the metrics tables
- Improve latency formatting for seconds latencies
- Rename upstream/downstream to inbound/outbound
- Make Top table look consistent with rest of tables on page
- Fix widths of metrics column columns so that tables align
* 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.
Do a little more work to get the octopus graph closer to the mocks.
This version gives you a slightly better navigational sense of where
you are in the app, and gives you a clearer
view of the neighbouring stats
Add a basic top graph depicting the current resource's stats
and it's upstreams and downstreams.
Also add upstreams and downstreams tables for this resource
This will be styled more later, but just getting the basic components
and data onto the page.
Risha Mars