Introduce changes to the volumes list

This will show network volumes on the volumes list
mesosphere · Apr 7, 2016 · 4f488a7 · 4f488a7
1 parent ee96e01
commit 4f488a7
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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 (
       <tr>
         <td className={this.getHighlight("id")}>
           <Link to="volumeView" params={params}>
-            {volume.persistenceId}
+            {volume.persistenceId || volume.external.name}
           </Link>
         </td>
         <td className={this.getHighlight("host")}>

diff --git 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 (
+      <div>
+        <dt>Task Id</dt>
+        <dd>
+          <a href={volume.taskURI}>{volume.taskId}</a>
+        </dd>
+      </div>
+    );
+  },
+  getSize: function (volume) {
+    var size = volume.persistent && volume.persistent.size ||
+      volume.external && volume.external.size;
+    if (size == null) {
+      return null;
+    }
+    return (
+      <div>
+        <dt>Size (MiB)</dt>
+        <dd>{size}</dd>
+      </div>
+    );
+  },
+  getHost: function (volume) {
+    if (volume.host == null) {
+      return null;
+    }
+    return (
+      <div>
+        <dt>Host</dt>
+        <dd>
+          {volume.host}
+        </dd>
+      </div>
+    );
+  },
   render: function () {
     const {volume} = this.props;
     if (volume == null) {
@@ -17,20 +56,13 @@ export default React.createClass({
         <dd>{volume.containerPath}</dd>
         <dt>Mode</dt>
         <dd>{volume.mode}</dd>
-        <dt>Size (MiB)</dt>
-        <dd>{volume.persistent.size}</dd>
+        {this.getSize(volume)}
         <dt>Application</dt>
         <dd>
           <a href={volume.appURI}>{volume.appId}</a>
         </dd>
-        <dt>Task Id</dt>
-        <dd>
-          <a href={volume.taskURI}>{volume.taskId}</a>
-        </dd>
-        <dt>Host</dt>
-        <dd>
-          {volume.host}
-        </dd>
+        {this.getTask(volume)}
+        {this.getHost(volume)}
       </dl>
     );
   }

diff --git 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;
           }));
-      }, []);
+      }, []));
   }
 });