Group apps and volumes in dropdown

src/views/Home.vue

@@ -11,7 +11,7 @@
           <Menu ref="createMenu" id="create_menu" :model="createMenuModel" :popup="true" />
           <Button type="button" label="Upload" icon="pi pi-upload" @click="onUploadMenu" aria-haspopup="true" aria-controls="upload_menu" style="margin-right: 10px" />
           <Menu ref="uploadMenu" id="upload_menu" :model="uploadMenuModel" :popup="true" />
-          <Dropdown v-model="activeResource" :options="resources" dataKey="id" @change="onAppChange" optionLabel="fqdn" placeholder="Select an App or Volume" style="margin-right: 10px" />
+          <Dropdown v-model="activeResource" :options="resourcesDropdownModel" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" dataKey="id" @change="onAppChange" placeholder="Select an App or Volume" style="margin-right: 10px" />
           <Button label="Logout" @click="onLogout" severity="secondary"/>
         </template>
       </TopBar>
@@ -91,6 +91,7 @@ export default {
       apps: [],
       volumes: [],
       resources: [],
+      resourcesDropdownModel: [],
       selectedAppId: '',
       activeResource: null,
       // contextMenuModel will have activeItem attached if any command() is called
@@ -237,7 +238,7 @@ export default {
     } else {
       this.apps = result.body ? result.body.apps.filter(a => !!a.manifest.addons.localstorage) : [];
     }
-    this.apps.forEach(function (a) { a.type = 'app'; });
+    this.apps.forEach(function (a) { a.type = 'app'; a.label = a.fqdn; });
 
     // load all volumes
     [error, result] = await safe(superagent.get(`${BASE_URL}/api/v1/volumes`).query({ access_token: localStorage.accessToken }));
@@ -247,10 +248,18 @@ export default {
     } else {
       this.volumes = result.body ? result.body.volumes : [];
     }
-    this.volumes.forEach(function (a) { a.type = 'volume'; a.fqdn = 'Volume: ' + a.name; });
+    this.volumes.forEach(function (a) { a.type = 'volume'; a.label = a.name; });
 
     this.resources = this.apps.concat(this.volumes);
 
+    this.resourcesDropdownModel = [{
+      label: 'Apps',
+      items: this.apps
+    }, {
+      label: 'Volumes',
+      items: this.volumes
+    }];
+
     const type = this.$route.params.type || 'app';
     const resourceId = this.$route.params.resourceId;