mirror of https://github.com/linkerd/linkerd2.git
				
				
				
			
		
			
				
	
	
		
			64 lines
		
	
	
		
			1.9 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
			
		
		
	
	
			64 lines
		
	
	
		
			1.9 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
| import CardContent from '@material-ui/core/CardContent';
 | |
| import ConfigureProfilesMsg from './ConfigureProfilesMsg.jsx';
 | |
| import ErrorBanner from './ErrorBanner.jsx';
 | |
| import PropTypes from 'prop-types';
 | |
| import React from 'react';
 | |
| import Spinner from './util/Spinner.jsx';
 | |
| import TopRoutesTable from './TopRoutesTable.jsx';
 | |
| import Typography from '@material-ui/core/Typography';
 | |
| import _get from 'lodash/get';
 | |
| import _isEmpty from 'lodash/isEmpty';
 | |
| import _sortBy from 'lodash/sortBy';
 | |
| import { apiErrorPropType } from './util/ApiHelpers.jsx';
 | |
| import { processTopRoutesResults } from './util/MetricUtils.jsx';
 | |
| import withREST from './util/withREST.jsx';
 | |
| 
 | |
| const TopRoutesBase = ({ data, loading, error }) => {
 | |
|   let results = _get(data, '[0].ok.routes', []);
 | |
|   results = _sortBy(results, o => o.resource);
 | |
| 
 | |
|   const metricsByResource = results.map(r => {
 | |
|     return {
 | |
|       resource: r.resource,
 | |
|       rows: processTopRoutesResults(r.rows),
 | |
|     };
 | |
|   });
 | |
| 
 | |
|   return (
 | |
|     <React.Fragment>
 | |
|       {loading ? <Spinner /> : null}
 | |
|       {error ? <ErrorBanner message={error} /> : null}
 | |
|       {
 | |
|         metricsByResource.map(metric => {
 | |
|           return (
 | |
|             <CardContent key={metric.resource}>
 | |
|               <Typography variant="h5">{metric.resource}</Typography>
 | |
|               <TopRoutesTable rows={metric.rows} />
 | |
|             </CardContent>
 | |
|           );
 | |
|         })
 | |
|       }
 | |
|       { !loading && _isEmpty(metricsByResource) ? <ConfigureProfilesMsg /> : null }
 | |
|     </React.Fragment>
 | |
|   );
 | |
| };
 | |
| 
 | |
| TopRoutesBase.defaultProps = {
 | |
|   error: null,
 | |
| };
 | |
| 
 | |
| TopRoutesBase.propTypes = {
 | |
|   data: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
 | |
|   error: apiErrorPropType,
 | |
|   loading: PropTypes.bool.isRequired,
 | |
|   query: PropTypes.shape({}).isRequired,
 | |
| };
 | |
| 
 | |
| export default withREST(
 | |
|   TopRoutesBase,
 | |
|   ({ api, query }) => {
 | |
|     const queryParams = new URLSearchParams(query).toString();
 | |
|     return [api.fetchMetrics(`/api/routes?${queryParams}`)];
 | |
|   },
 | |
| );
 |