mirror of https://github.com/yldio/copilot.git
88 lines
2.3 KiB
JavaScript
88 lines
2.3 KiB
JavaScript
import React from 'react';
|
|
import { compose } from 'react-apollo';
|
|
import moment from 'moment';
|
|
import ServiceMetricsQuery from '@graphql/ServiceMetrics.gql';
|
|
import { withNotFound, GqlPaths } from '@containers/navigation';
|
|
import { LayoutContainer } from '@components/layout';
|
|
import { Title } from '@components/navigation';
|
|
import { ServiceMetrics as ServiceMetricsComponent } from '@components/service';
|
|
import { Loader, ErrorMessage } from '@components/messaging';
|
|
import { processInstancesMetrics } from '@state/selectors';
|
|
import get from 'lodash.get';
|
|
|
|
import {
|
|
withServiceMetricsPolling,
|
|
withServiceMetricsGql
|
|
} from '@containers/metrics';
|
|
|
|
// 'width' of graph, i.e. total duration of time it'll display and truncate data to
|
|
// amount of data we'll need to initially fetch
|
|
const GraphDurationSeconds = 90;
|
|
|
|
const ServiceMetrics = ({ service, loading, error }) => {
|
|
const _title = <Title>Metrics</Title>;
|
|
|
|
if (loading || !service) {
|
|
return (
|
|
<LayoutContainer center>
|
|
{_title}
|
|
<Loader />
|
|
</LayoutContainer>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<LayoutContainer>
|
|
{_title}
|
|
<ErrorMessage
|
|
title="Ooops!"
|
|
message="An error occurred while loading your metrics."
|
|
/>
|
|
</LayoutContainer>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<LayoutContainer>
|
|
{_title}
|
|
<ServiceMetricsComponent
|
|
metricsData={processInstancesMetrics(service.instances)}
|
|
graphDurationSeconds={GraphDurationSeconds}
|
|
/>
|
|
</LayoutContainer>
|
|
);
|
|
};
|
|
|
|
export default compose(
|
|
withServiceMetricsGql({
|
|
gqlQuery: ServiceMetricsQuery,
|
|
graphDurationSeconds: GraphDurationSeconds,
|
|
updateIntervalSeconds: 15,
|
|
variables: ({ match }) => ({ serviceSlug: match.params.service }),
|
|
props: ({ deploymentGroup, loading, error }) => ({
|
|
deploymentGroup,
|
|
service: get(deploymentGroup || {}, 'services', [])[0],
|
|
loading,
|
|
error
|
|
})
|
|
}),
|
|
withServiceMetricsPolling({
|
|
pollingInterval: 1000,
|
|
getPreviousEnd: ({ loading, error, service = [] }) => {
|
|
if (loading) {
|
|
return false;
|
|
}
|
|
|
|
return get(
|
|
service,
|
|
'instances[0].metrics[0].end',
|
|
moment()
|
|
.utc()
|
|
.format()
|
|
);
|
|
}
|
|
}),
|
|
withNotFound([GqlPaths.DEPLOYMENT_GROUP, GqlPaths.SERVICES])
|
|
)(ServiceMetrics);
|