diff --git a/src/js/components/AppListComponent.jsx b/src/js/components/AppListComponent.jsx index 285e40f74..6f1bad3f1 100644 --- a/src/js/components/AppListComponent.jsx +++ b/src/js/components/AppListComponent.jsx @@ -159,7 +159,8 @@ var AppListComponent = React.createClass({ } filterCounts.appsStatusesCount[item.status]++; if (item.container != null && - item.container.volumes.filter(item => item.persistent != null) + item.container.volumes.filter(item => item.persistent != null || + item.external != null) .length > 0) { filterCounts.appsVolumesCount++; } @@ -216,7 +217,9 @@ var AppListComponent = React.createClass({ return false; } - return item.container.volumes.filter(item => item.persistent != null) + return item.container.volumes.filter(item => + item.persistent != null || + item.external != null) .length > 0; }); } diff --git a/src/js/components/AppPageComponent.jsx b/src/js/components/AppPageComponent.jsx index 48b182b66..55da6e4d8 100644 --- a/src/js/components/AppPageComponent.jsx +++ b/src/js/components/AppPageComponent.jsx @@ -304,7 +304,7 @@ var AppPageComponent = React.createClass({ var {appId, volumeId} = this.state; var volume = AppsStore.getVolumeById(appId, volumeId); - if (volume == null) { + if (volume == null || volumeId == null) { return null; } diff --git a/src/js/components/AppVolumesListItemComponent.jsx b/src/js/components/AppVolumesListItemComponent.jsx index be9918531..59dce851b 100644 --- a/src/js/components/AppVolumesListItemComponent.jsx +++ b/src/js/components/AppVolumesListItemComponent.jsx @@ -29,14 +29,14 @@ var AppVolumesListItemComponent = React.createClass({ var params = { appId: encodeURIComponent(volume.appId), - volumeId: encodeURIComponent(volume.persistenceId) + volumeId: encodeURIComponent(volume.persistenceId || volume.external.name) }; return ( - {volume.persistenceId} + {volume.persistenceId || volume.external.name} diff --git a/src/js/components/VolumeDetailsComponent.jsx b/src/js/components/VolumeDetailsComponent.jsx index d20e6f03c..0b4afb8b7 100644 --- a/src/js/components/VolumeDetailsComponent.jsx +++ b/src/js/components/VolumeDetailsComponent.jsx @@ -5,6 +5,45 @@ export default React.createClass({ propTypes: { volume: React.PropTypes.object }, + getTask: function (volume) { + if (volume.taskId == null) { + return null; + } + return ( +
+
Task Id
+
+ {volume.taskId} +
+
+ ); + }, + getSize: function (volume) { + var size = volume.persistent && volume.persistent.size || + volume.external && volume.external.size; + if (size == null) { + return null; + } + return ( +
+
Size (MiB)
+
{size}
+
+ ); + }, + getHost: function (volume) { + if (volume.host == null) { + return null; + } + return ( +
+
Host
+
+ {volume.host} +
+
+ ); + }, render: function () { const {volume} = this.props; if (volume == null) { @@ -17,20 +56,13 @@ export default React.createClass({
{volume.containerPath}
Mode
{volume.mode}
-
Size (MiB)
-
{volume.persistent.size}
+ {this.getSize(volume)}
Application
{volume.appId}
-
Task Id
-
- {volume.taskId} -
-
Host
-
- {volume.host} -
+ {this.getTask(volume)} + {this.getHost(volume)} ); } diff --git a/src/js/stores/AppsStore.js b/src/js/stores/AppsStore.js index 2451f441e..f64aeb641 100644 --- a/src/js/stores/AppsStore.js +++ b/src/js/stores/AppsStore.js @@ -302,7 +302,8 @@ var AppsStore = Util.extendObject(EventEmitter.prototype, { return null; } - return volumes.find((volume) => volume.persistenceId === volumeId); + return volumes.find((volume) => volume.persistenceId === volumeId || + volume.external.name === volumeId); }, getVolumes: function (appId) { @@ -313,7 +314,22 @@ var AppsStore = Util.extendObject(EventEmitter.prototype, { return null; } - return tasks + var networkVolumes = []; + + if (app.container != null && app.container.volumes != null) { + networkVolumes = app.container.volumes.filter( + volume => volume.external != null + ).map( + volume => { + volume.appId = appId; + volume.id = volume.external.name; + volume.status = VolumesConstants.STATUS.ATTACHED; + return volume; + } + ); + } + + return networkVolumes.concat(tasks // Get the first volume from a task with the same id as provided // by the router. This should be unique. .reduce((memo, task) => { @@ -338,7 +354,7 @@ var AppsStore = Util.extendObject(EventEmitter.prototype, { : VolumesConstants.STATUS.ATTACHED; return volume; })); - }, []); + }, [])); } });