diff --git a/client/app/scripts/actions/app-actions.js b/client/app/scripts/actions/app-actions.js
index 3e18f40ce..d3c5c767f 100644
--- a/client/app/scripts/actions/app-actions.js
+++ b/client/app/scripts/actions/app-actions.js
@@ -1,4 +1,5 @@
import debug from 'debug';
+import find from 'lodash/find';
import ActionTypes from '../constants/action-types';
import { saveGraph } from '../utils/file-utils';
@@ -792,3 +793,26 @@ export function shutdown() {
type: ActionTypes.SHUTDOWN
};
}
+
+export function getImagesForService(orgId, serviceId) {
+ return (dispatch, getState, { api }) => {
+ dispatch({
+ type: ActionTypes.REQUEST_SERVICE_IMAGES,
+ serviceId
+ });
+
+ api.getFluxImages(orgId, serviceId)
+ .then((services) => {
+ dispatch({
+ type: ActionTypes.RECEIVE_SERVICE_IMAGES,
+ service: find(services, s => s.ID === serviceId),
+ serviceId
+ });
+ }, ({ errors }) => {
+ dispatch({
+ type: ActionTypes.RECEIVE_SERVICE_IMAGES,
+ errors
+ });
+ });
+ };
+}
diff --git a/client/app/scripts/components/cloud-feature.js b/client/app/scripts/components/cloud-feature.js
new file mode 100644
index 000000000..013414421
--- /dev/null
+++ b/client/app/scripts/components/cloud-feature.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+class CloudFeature extends React.Component {
+ getChildContext() {
+ return {
+ store: this.context.serviceStore || this.context.store
+ };
+ }
+
+ render() {
+ if (process.env.WEAVE_CLOUD) {
+ return React.cloneElement(React.Children.only(this.props.children), {
+ params: this.context.router.params,
+ router: this.context.router
+ });
+ }
+
+ return null;
+ }
+}
+
+CloudFeature.contextTypes = {
+ store: React.PropTypes.object.isRequired,
+ router: React.PropTypes.object,
+ serviceStore: React.PropTypes.object
+};
+
+CloudFeature.childContextTypes = {
+ store: React.PropTypes.object,
+ router: React.PropTypes.object
+};
+
+export default connect()(CloudFeature);
diff --git a/client/app/scripts/components/node-details.js b/client/app/scripts/components/node-details.js
index 6b49acd5c..33d3ee180 100644
--- a/client/app/scripts/components/node-details.js
+++ b/client/app/scripts/components/node-details.js
@@ -18,6 +18,8 @@ import NodeDetailsInfo from './node-details/node-details-info';
import NodeDetailsRelatives from './node-details/node-details-relatives';
import NodeDetailsTable from './node-details/node-details-table';
import Warning from './warning';
+import CloudFeature from './cloud-feature';
+import NodeDetailsImageStatus from './node-details/node-details-image-status';
const log = debug('scope:node-details');
@@ -230,6 +232,9 @@ class NodeDetails extends React.Component {
}
return null;
})}
+
+
+
);
diff --git a/client/app/scripts/components/node-details/node-details-image-status.js b/client/app/scripts/components/node-details/node-details-image-status.js
new file mode 100644
index 000000000..ee5a8cb93
--- /dev/null
+++ b/client/app/scripts/components/node-details/node-details-image-status.js
@@ -0,0 +1,122 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import find from 'lodash/find';
+import map from 'lodash/map';
+import { CircularProgress } from 'weaveworks-ui-components';
+
+import { getImagesForService } from '../../actions/app-actions';
+
+const topologyWhitelist = ['services', 'deployments'];
+
+function getNewImages(images, currentId) {
+ // Assume that the current image is always in the list of all available images.
+ // Should be a safe assumption...
+ const current = find(images, i => i.ID === currentId);
+ const timestamp = new Date(current.CreatedAt);
+ return find(images, i => timestamp < new Date(i.CreatedAt)) || [];
+}
+
+class NodeDetailsImageStatus extends React.PureComponent {
+ constructor(props, context) {
+ super(props, context);
+
+ this.handleServiceClick = this.handleServiceClick.bind(this);
+ }
+
+ componentDidMount() {
+ if (this.shouldRender() && this.props.serviceId) {
+ this.props.getImagesForService(this.props.params.orgId, this.props.serviceId);
+ }
+ }
+
+ handleServiceClick() {
+ const { router, serviceId, params } = this.props;
+ router.push(`/flux/${params.orgId}/services/${encodeURIComponent(serviceId)}`);
+ }
+
+ shouldRender() {
+ const { currentTopologyId } = this.props;
+ return currentTopologyId && topologyWhitelist.includes(currentTopologyId);
+ }
+
+ renderImages() {
+ const { errors, containers, isFetching } = this.props;
+ const error = !isFetching && errors;
+
+ if (isFetching) {
+ return (
+
+ );
+ }
+
+ if (error) {
+ return (
+ Error: {JSON.stringify(map(errors, 'message'))}
+ );
+ }
+
+ if (!containers) {
+ return 'No service images found';
+ }
+
+ return (
+
+ {containers.map((container) => {
+ const statusText = getNewImages(container.Available, container.Current.ID).length > 0
+ ?
New image(s) available
+ : 'Image up to date';
+
+ return (
+
+
{container.Name}
+
{statusText}
+
+ );
+ })}
+
+
+ Container Image Status
+ {containers &&
+
+ }
+
+
+ {this.renderImages()}
+