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).
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:
- adds a "meshed" badge to the namespace overview page instead
of a green checkmark (uses Chip)
- fixes aforementioned meshed indicator not showing up in firefox
- vertically centers the ( ! ) icons in the metrics tables
- vertically centers the dots in the metrics tables
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
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 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.
* Don't display RPS unit in metrics table
* Fix Tap and Top icons not being minimized correctly
* remove metric tooltip on RPS column
* Fix extra spacing on Tap/Top in sidebar
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
A bunch of small items.
This branch:
- filters out un-meshed resources from the Tap and Top autocompletes
- removes an un-rendered title attribute from the sidebar menu items
- formats latency in Tap with a comma
- prevents the grafana link from showing if there are 0 pods in a deployment
This PR started out as a PR to link to our Resource Detail dashboard in
addition to grafana in the resource list pages, but I decided to refactor
the way we deal with our svgs since I was here.
This branch:
- modifies the GrafanaLink component to consist of the grafana icon
that links to grafana adds links to the ResourceDetail page in all our metrics tables
- adds a jsx component we can use to wrap svgs so that we don't get
annoying 404s on images that we have to handle
- remove the relative paths hack for images
- removes unused svg files in /img
Currently conduit stat outputs a column that shows the number of meshed pods in the resource being
queried. The web UI does not have this information about meshed pod state.
This commit adds a meshed column for better UI parity with the stat command.
Signed-off-by: Dennis Adjei-Baah <dennis@buoyant.io>
This PR starts removing all references to the word "Conduit" in the web UI.
In the interest of not making huge changes all at once, I'll gradually start moving away
from the usage of "conduit" in the Web UI. For example, there are a lot of components that
have conduit in their names but they don't need to.
This branch is mostly component / variable names. There should be no visible changes except
the spinner is no longer a Conduit spinner.
See #1262 for visible branding changes.
- Rename ConduitLink to PrefixedLink
- Remove ConduitSpinner in favour of antd.Spin
- Remove css classnames that are conduit- centered
- Parameterize the current Product Name so that it's easier to change in the future
Tracking ticket: linkerd/linkerd#2018
Adds the ability to query by a new non-kubernetes resource type, "authorities",
in the StatSummary api.
This includes an extensive refactor of stat_summary.go to deal with non-kubernetes
resource types.
- Add documentation to Resource in the public api so we can use it for authority
- Handle non-k8s resource requests in the StatSummary endpoint
- Rewrite stat summary fetching and parsing to handle non-k8s resources
- keys stat summary metric handling by Resource instead of a generated string
- Adds authority to the CLI
- Adds /authorities to the Web UI
- Adds some more stat integration and unit tests
* Display proxy container errors in the Web UI
Add an error modal to display pod errors
Add icon to data tables to indicate errors are present
Display errors on the Service Mesh Overview Page and all the resource pages
* Web: remove ns column from tables on individual ns page
* Add prop types and tests for MetricsTable component
Signed-off-by: Kevin Lingerfelt <kl@buoyant.io>
* Add propType validation
When refactoring components, it is hard to know what is required and isn't.
Adds propTypes to the existing components and enables eslint errors for anything
moving forward. This should keep us documenting the API for components.
* Remove extra newline
On the individual namespace pages, the filter should not be shown, as all results that appear on the that page will be for on namespace.
Added a boolean property, showNamespaceFilter, to MetricsTable that allows you to define if the filter should be shown.
Tested that the filter is not shown on namespace pages.
Fixes#972
Signed-off-by: Kim Christensen <kimworking@gmail.com>
Previously, we would filter out stats coming from Conduit itself and from the kube-*
namespaces on some views in the Web UI. Remove this filtering, so that we display
all the resource information we get back from the Stat API. (Fixes#997)
On the Resource pages, the call to action would show up when there were no
metrics present, but that's actually not actionable by the user. Instead, I'm
going to show a blank table with a "no s detected" message.
* Remove special-case filtering out of kube-* namespaces, and conduit namespaces
* Remove the call to action for no metrics
* Linkify the namespace column for the resource pages
* Add an app-wide context for global props.
We've been passing the `api` object down from the top of the react tree. With
16.x, there's now the ability to have context that can inject anywhere in the
tree. This creates a top level context provider that contains most of the global
variables we've been using (api, appData, ...). It subsequently cleans up some
of the routes and nested components.
- Bumps `react-dom` to 16.3.2 (to match `react`).
- Adds `enzyme-context-patch` for now. This is fixed in enzyme master, but there
has not been a release yet. Needs to be removed when that is fixed.
* Use a default inside appData for controllerNamespace
* Update syntax of if to use curly brackets
- Update the `response_total` prometheus query of the StatSummary endpoint to also
break queries out by a `meshed` label.
- Add a 'Secured' column to the web UI/CLI stat displays, which indicate the percentage of traffic
starting and ending in the mesh
This meshed label is used in the CLI/Web UI to display a column of the percentage of traffic that
starts/ends in the mesh. (Which is a proxy indicator for whether that traffic is 'secured' when we
add TLS by default for intra mesh requests).
The `meshed` label is not yet added anywhere, so until it is supplied by the proxy, all traffic will
show up as 0% secured in the web/CLI.
Add namespaces as a top level resource in the Web UI
This PR does the following:
- Replace the deployments table in the service mesh page with namespaces
- Add a Namespaces index page that lists all namespaces and their stats
- Add an individual namespace page showing all resources for that namespace
- Make the incomplete mesh message more generic to any resource type
- Revamp rest of service mesh page to move off ListPods
Make the sidebar icon based and collapsed by default
I had to move the call to version check into the sidebar component, indicator
when the sidebar was minimized if there was a conduit update.
Currently I just have letters representing the icons for Deployments, RCs and Pods,
but we can change this in the future.
Enables filtering by one or more namespaces. Table updates are prevented
when the filter menu is open, as table updates will rerender the menu,
unselecting anything the user has selected but not confirmed.
* Add a namespace column to the metrics tables, support long resource names
* Add a test for GrafanaLink
* Change the PodList.jsx component to not use the ListPods api
* Expose pod stats in CLI, web UI, and Grafana
* Fix js api helpers test
* Add outbound traffic stats to pod dashboard
Signed-off-by: Kevin Lingerfelt <kl@buoyant.io>
* Link to Grafana from Conduit Dashboard
Previously the only way to access the Grafana dashboards was via direct
link, provided by the `conduit dashboard` command.
Add Grafana links throughout the Conduit Dashboard, next to all
Deployment objects. This change also modifies the behavior of the
ConduitLink helper, to enable linking to other deployments proxied by
the `conduit dashboard` command.
Part of #420
Signed-off-by: Andrew Seigner <siggy@buoyant.io>
* review feedback
Signed-off-by: Andrew Seigner <siggy@buoyant.io>
* review feedback, fix console, remove absolute
Signed-off-by: Andrew Seigner <siggy@buoyant.io>
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>
* Display more decimal points for truncated numbers, add hover info
* Filter completed pods out of web UI
* Decrease the polling interval from 10s to 2s
* Add more detailed pod categorization based on status
* Tweak filtering of pods, tweak explanations in status table
- reduce row spacing on tables to make them more compact
- Rename TabbedMetricsTable to MetricsTable since it's not tabbed any more
- Format latencies greater than 1000ms as seconds
- Make sidebar collapsible
- poll the /pods endpoint from the sidebar in order to refresh the list of deployments in the autocomplete
- display the conduit namespace in the service mesh details table
- Use floats rather than Col for more responsive layout (fixes#224)
Risha Mars
Kevin Lingerfelt
Dennis Adjei-Baah
Thomas Rampelberg
Kim Christensen
Andrew Seigner
Franziska von der Goltz