From d5fade9f7584b2888e8fa2ff8da088b4e8dbffa7 Mon Sep 17 00:00:00 2001 From: Matthias Hannig Date: Fri, 27 Jul 2018 18:18:48 +0200 Subject: [PATCH] show cache information --- client/components/api-status/cache.jsx | 30 ++++++++++ client/components/datetime/index.jsx | 4 +- client/components/datetime/parse.jsx | 16 ++++++ client/components/relativetime/timestamp.jsx | 6 +- .../components/routeservers/routes/page.jsx | 19 ++++++- .../routeservers/routes/pagination.jsx | 2 +- .../components/routeservers/status/index.jsx | 56 ++++++++++++++----- 7 files changed, 112 insertions(+), 21 deletions(-) create mode 100644 client/components/api-status/cache.jsx create mode 100644 client/components/datetime/parse.jsx diff --git a/client/components/api-status/cache.jsx b/client/components/api-status/cache.jsx new file mode 100644 index 0000000..f016c62 --- /dev/null +++ b/client/components/api-status/cache.jsx @@ -0,0 +1,30 @@ + +import React from 'react' +import {connect} from 'react-redux' + +import {parseServerTime} from 'components/datetime/parse' + +import moment from 'moment' + +/* + * Calculate age (generated_at), and set from_cache_status + */ +export const apiCacheStatus = function(apiStatus) { + if (apiStatus == {}) { + return null; + } + + const cacheStatus = apiStatus["cache_status"] || {}; + const cachedAt = cacheStatus.cached_at; + if (!cachedAt) { + return null; + } + + const fromCache = apiStatus.result_from_cache; + const ttl = parseServerTime(apiStatus.ttl); + const generatedAt = parseServerTime(cachedAt); + const age = ttl.diff(generatedAt); // ms + + return {fromCache, age, generatedAt, ttl}; +}; + diff --git a/client/components/datetime/index.jsx b/client/components/datetime/index.jsx index 96de70b..c50605a 100644 --- a/client/components/datetime/index.jsx +++ b/client/components/datetime/index.jsx @@ -10,6 +10,8 @@ import React from 'react' import moment from 'moment' +import {parseServerTime} from './parse' + export default class Datetime extends React.Component { render() { @@ -18,7 +20,7 @@ export default class Datetime extends React.Component { timefmt = 'LLLL'; } - let time = moment(this.props.value); + let time = parseServerTime(this.props.value); return ( {time.format(timefmt)} ); diff --git a/client/components/datetime/parse.jsx b/client/components/datetime/parse.jsx new file mode 100644 index 0000000..0fc3591 --- /dev/null +++ b/client/components/datetime/parse.jsx @@ -0,0 +1,16 @@ + +/* + * Some datetime parsing helper functions + */ + +import moment from 'moment' + + +window.moment = moment; + +export function parseServerTime(serverTime) { + const fmt = "YYYY-MM-DDTHH:mm:ss.SSSSSSSSZ"; // S was 4 byte short + return moment(serverTime, fmt); +} + + diff --git a/client/components/relativetime/timestamp.jsx b/client/components/relativetime/timestamp.jsx index b944084..d41373a 100644 --- a/client/components/relativetime/timestamp.jsx +++ b/client/components/relativetime/timestamp.jsx @@ -7,9 +7,9 @@ window.momnet = moment; export default class RelativeTimestamp extends React.Component { render() { - - let now = moment.utc() - let rel = moment(now._d.getTime() - (this.props.value / 1000.0 / 1000.0)) + const tsMs = this.props.value / 1000.0 / 1000.0; // nano -> micro -> milli + const now = moment.utc() + const rel = now.subtract(tsMs, 'ms'); return ( {rel.fromNow(this.props.suffix)} diff --git a/client/components/routeservers/routes/page.jsx b/client/components/routeservers/routes/page.jsx index 1d0b01b..63750e9 100644 --- a/client/components/routeservers/routes/page.jsx +++ b/client/components/routeservers/routes/page.jsx @@ -11,6 +11,8 @@ import Details from '../details' import Status from '../status' import PageHeader from 'components/page-header' +import {apiCacheStatus} from 'components/api-status/cache' + import ProtocolName from 'components/routeservers/protocols/name' @@ -106,6 +108,11 @@ class RoutesPage extends React.Component { } render() { + let cacheStatus = apiCacheStatus(this.props.routes.received.apiStatus); + if (this.props.anyLoading) { + cacheStatus = null; + } + return(
@@ -151,7 +158,8 @@ class RoutesPage extends React.Component {
- +
@@ -167,15 +175,21 @@ export default connect( let received = { loading: state.routes.receivedLoading, totalResults: state.routes.receivedTotalResults, + apiStatus: state.routes.receivedApiStatus }; let filtered = { loading: state.routes.filteredLoading, totalResults: state.routes.filteredTotalResults, + apiStatus: state.routes.filteredApiStatus }; let notExported = { loading: state.routes.notExportedLoading, totalResults: state.routes.notExportedTotalResults, + apiStatus: state.routes.notExportedApiStatus }; + let anyLoading = state.routes.receivedLoading || + state.routes.filteredLoading || + state.routes.notExportedLoading; return({ filterValue: state.routes.filterValue, routes: { @@ -183,7 +197,8 @@ export default connect( [ROUTES_FILTERED]: filtered, [ROUTES_NOT_EXPORTED]: notExported }, - routing: state.routing.locationBeforeTransitions + routing: state.routing.locationBeforeTransitions, + anyLoading: anyLoading }); } )(RoutesPage); diff --git a/client/components/routeservers/routes/pagination.jsx b/client/components/routeservers/routes/pagination.jsx index 02cfe83..b9acfd2 100644 --- a/client/components/routeservers/routes/pagination.jsx +++ b/client/components/routeservers/routes/pagination.jsx @@ -204,7 +204,7 @@ export class RoutesPaginationInfo extends React.Component { const perPage = this.props.pageSize; const start = this.props.page * perPage + 1; const end = Math.min(start + perPage - 1, totalResults); - if (this.props.totalPages == 1) { + if (this.props.totalPages <= 1) { let routes = "route"; if (totalResults > 1) { routes = "routes"; diff --git a/client/components/routeservers/status/index.jsx b/client/components/routeservers/status/index.jsx index 11ccaa5..9ca39f5 100644 --- a/client/components/routeservers/status/index.jsx +++ b/client/components/routeservers/status/index.jsx @@ -3,11 +3,13 @@ import React from 'react' import {connect} from 'react-redux' import Datetime from 'components/datetime' +import moment from 'moment' class Details extends React.Component { render() { + let rsStatus = this.props.details[this.props.routeserverId]; if (!rsStatus) { return null; @@ -19,26 +21,52 @@ class Details extends React.Component { return null; } - let lastReboot = rsStatus.last_reboot; if (lastReboot == "0001-01-01T00:00:00Z") { lastReboot = null; } + let cacheStatus = null; + if (this.props.cacheStatus) { + const s = this.props.cacheStatus; + cacheStatus = [ + + + + Generated {s.generatedAt.fromNow()}
+ Next refresh {s.ttl.fromNow()} + + , + + + + + + + ]; + }; + return ( -
- -
+ + + {lastReboot && + + + + } + + + + + + + + + + + {cacheStatus} + +
Last Reboot:
Last Reconfig:
{rsStatus.message}
); } }