Add new "Instances" top-level option

frontend/src/components/InstanceStatusHeader.vue

@@ -1,13 +1,13 @@
 <template>
-    <div class="ff-section-header flex flex-wrap border-b border-gray-300 text-gray-500 justify-between px-6 py-4">
+    <div class="ff-section-header flex flex-wrap border-b border-gray-300 text-gray-500 justify-between px-6 py-4 items-center">
         <div class="flex">
             <div class="w-full flex items-center md:w-auto mr-8 gap-x-2">
-                <slot name="hero" />
+                <slot name="hero"></slot>
             </div>
         </div>
         <ul v-if="hasTools">
             <li class="w-full md:w-auto flex-grow text-right">
-                <slot name="tools" />
+                <slot name="tools"></slot>
             </li>
         </ul>
     </div>

frontend/src/components/SideNavigationTeamOptions.vue

@@ -63,6 +63,11 @@ export default {
                 to: '/projects',
                 tag: 'team-projects',
                 icon: ProjectsIcon
+            }, {
+                label: 'Instances',
+                to: '/instances',
+                tag: 'team-instances',
+                icon: ProjectsIcon
             }, {
                 label: 'Devices',
                 to: '/devices',
@@ -131,11 +136,18 @@ export default {
                     return true
                 }
             }
+            // the high-level route link to "/instances"
+            if (route.to === '/instances') {
+                // highlight it if we are currently viewing a single instance
+                if (this.$route.path.indexOf('/instance') === 0) {
+                    return true
+                }
+            }
         },
         checkFeatures () {
             if (this.features['shared-library']) {
                 // insert billing in second slot of admin
-                this.routes.general.splice(3, 0, {
+                this.routes.general.splice(4, 0, {
                     label: 'Library',
                     to: '/library',
                     tag: 'shared-library',

frontend/src/pages/instance/index.vue

@@ -3,11 +3,7 @@
         <SideNavigationTeamOptions>
             <template #nested-menu>
                 <!-- TODO Read instance.application or pass in application details as a prop -->
-                <router-link :to="{name: 'Project', id: instance.id}">
-                    <nav-item :icon="icons.chevronLeft" label="Back to Application" data-nav="project-overview" />
-                </router-link>
-
-                <li class="ff-navigation-divider">{{ instance.name ?? 'Instance' }}</li>
+                <div class="ff-nested-title">Instance</div>
                 <router-link v-for="route in navigation" :key="route.label" :to="route.path">
                     <nav-item :icon="route.icon" :label="route.label" :data-nav="route.tag" />
                 </router-link>
@@ -23,11 +19,15 @@
         <div class="ff-instance-header">
             <InstanceStatusHeader>
                 <template #hero>
-                    <div class="flex-grow space-x-6 items-center inline-flex" data-el="instance-name">
-                        <div class="text-gray-800 text-xl font-bold">
+                    <div class="flex-grow items-center inline-flex flex-wrap" data-el="instance-name">
+                        <div class="text-gray-800 text-xl font-bold mr-6">
                             {{ instance.name }}
                         </div>
                         <InstanceStatusBadge v-if="instance.meta" :status="instance.meta.state" :pendingStateChange="instance.pendingStateChange" />
+                        <div class="w-full text-sm mt-1">
+                            Application:
+                            <router-link :to="{name: 'Project', params: {id: instance.id}}" class="text-blue-600 cursor-pointer hover:text-blue-700 hover:underline">{{ instance.name }}</router-link>
+                        </div>
                     </div>
                 </template>
                 <template #tools>

frontend/src/pages/team/Instances.vue

@@ -0,0 +1,81 @@
+<template>
+    <SectionTopMenu hero="Instances" />
+    <div class="space-y-6">
+        <ff-loading v-if="loading" message="Loading Instances..." />
+        <template v-else>
+            <ff-data-table
+                data-el="instances-table" :columns="columns" :rows="instances" :show-search="true" search-placeholder="Search Instances..."
+                :rows-selectable="true" @row-selected="openInstance"
+            >
+                <template v-if="instances.length == 0" #table>
+                    <div class="ff-no-data ff-no-data-large">
+                        You don't have any instances yet
+                    </div>
+                </template>
+            </ff-data-table>
+        </template>
+    </div>
+</template>
+
+<script>
+import { markRaw } from 'vue'
+
+import SectionTopMenu from '../../components/SectionTopMenu'
+import InstanceStatusBadge from '../instance/components/InstanceStatusBadge'
+
+import teamApi from '@/api/team'
+import permissionsMixin from '@/mixins/Permissions'
+
+export default {
+    name: 'TeamInstances',
+    components: {
+        SectionTopMenu
+    },
+    mixins: [permissionsMixin],
+    props: {
+        team: {
+            type: Object,
+            required: true
+        },
+        teamMembership: {
+            type: Object,
+            required: true
+        }
+    },
+    data () {
+        return {
+            loading: false,
+            instances: [],
+            columns: [
+                { label: 'Name', class: ['flex-grow'], key: 'name', sortable: true },
+                { label: 'Status', class: ['w-44'], key: 'status', sortable: true, component: { is: markRaw(InstanceStatusBadge) } },
+                { label: 'Updated', class: ['w-44'], key: 'updatedSince', sortable: true },
+                { label: 'Application', class: ['flex-grow-[0.5]'], key: 'name', sortable: true } // Todo: Currently showing project name
+            ]
+        }
+    },
+    watch: {
+        team: 'fetchData'
+    },
+    mounted () {
+        this.fetchData()
+    },
+    methods: {
+        fetchData: async function (newVal) {
+            this.loading = true
+            if (this.team.id) {
+                this.instances = (await teamApi.getTeamProjects(this.team.id)).projects
+            }
+            this.loading = false
+        },
+        openInstance (instance) {
+            this.$router.push({
+                name: 'Instance',
+                params: {
+                    id: instance.id
+                }
+            })
+        }
+    }
+}
+</script>

frontend/src/pages/team/Projects.vue

@@ -27,7 +27,6 @@
             </ff-data-table>
         </template>
     </div>
-    <router-view></router-view>
 </template>
 
 <script>

frontend/src/pages/team/routes.js

@@ -1,6 +1,7 @@
 import Team from '@/pages/team/index.vue'
 import TeamOverview from '@/pages/team/Overview.vue'
 import TeamProjects from '@/pages/team/Projects.vue'
+import TeamInstances from '@/pages/team/Instances.vue'
 import TeamDevices from '@/pages/team/Devices/index.vue'
 import TeamLibrary from '@/pages/team/Library.vue'
 import TeamMembers from '@/pages/team/Members/index.vue'
@@ -50,6 +51,14 @@ export default [
                     title: 'Team - Projects'
                 }
             },
+            {
+                path: 'instances',
+                name: 'Instances',
+                component: TeamInstances,
+                meta: {
+                    title: 'Team - Instances'
+                }
+            },
             {
                 name: 'TeamDevices',
                 path: 'devices',