Add debug toolbar

Signed-off-by: Carl Schwan <carl@carlschwan.eu>

.gitignore

@@ -30,6 +30,7 @@
 !/apps/files_versions
 !/apps/lookup_server_connector
 !/apps/user_ldap
+!/apps/profiler
 !/apps/oauth2
 !/apps/provisioning_api
 !/apps/settings

apps/profiler/composer/composer/installed.php

@@ -5,7 +5,7 @@
         'type' => 'library',
         'install_path' => __DIR__ . '/../',
         'aliases' => array(),
-        'reference' => 'c2ac970afa95bfa323a1ac70cb5314851c645145',
+        'reference' => 'c6fd482edf33214a9ad4787e4cac278f871fa7c8',
         'name' => '__root__',
         'dev' => false,
     ),
@@ -16,7 +16,7 @@
             'type' => 'library',
             'install_path' => __DIR__ . '/../',
             'aliases' => array(),
-            'reference' => 'c2ac970afa95bfa323a1ac70cb5314851c645145',
+            'reference' => 'c6fd482edf33214a9ad4787e4cac278f871fa7c8',
             'dev_requirement' => false,
         ),
     ),

apps/profiler/src/ProfilerToolbar.vue

@@ -0,0 +1,208 @@
+<template>
+	<div id="profiler-toolbar">
+		<footer v-if="profile" class="bottom-bar">
+			<div role="button" class="toolbar-block" @click="openProfiler('info')">
+				<div class="text-v-center px-3" :class="background">
+					{{ profile.statusCode }}
+				</div>
+				<div class="text-v-center px-3">
+					{{ profile.collectors.router.controllerName }}::{{ profile.collectors.router.actionName }}
+				</div>
+				<div class="info">
+					<div><b>HTTP Status:</b> {{ profile.statusCode }} </div>
+					<div><b>Controller:</b> {{ profile.collectors.router.appName }}/{{ profile.collectors.router.controllerName }}::{{ profile.collectors.router.actionName }} </div>
+					<div><b>Profiled on:</b> {{ time }} </div>
+					<div><b>Token:</b> {{ profile.token }}</div>
+				</div>
+			</div>
+			<div role="button" class="toolbar-block text-v-center px-3" @click="openProfiler('event')">
+				{{ displayDuration(profile.collectors.event.runtime.duration + profile.collectors.event.autoloader.duration) }} ms
+				<div class="info" style="width: 225px">
+					<div><b>Total time:</b> {{ displayDuration(profile.collectors.event.runtime.duration + profile.collectors.event.autoloader.duration) }} ms</div>
+					<div><b>Boot:</b> {{ displayDuration(profile.collectors.event.boot.duration) }} ms</div>
+					<div v-if="profile.collectors.event.run_route">
+						<b>Run route:</b> {{ displayDuration(profile.collectors.event.run_route.duration) }} ms
+					</div>
+					<div v-if="profile.collectors.event.setup_fs">
+						<b>Setup filesystem:</b> {{ displayDuration(profile.collectors.event.setup_fs.duration) }} ms
+					</div>
+				</div>
+			</div>
+
+			<div role="button" class="toolbar-block text-v-center px-3" @click="openProfiler('db')">
+				{{ queriesNumber }} in {{ queriesTime }} ms
+				<div class="info" style="width: 225px">
+					<div><b>Number of queries:</b> {{ queriesNumber }}</div>
+					<div><b>Query time:</b> {{ queriesTime }} ms</div>
+				</div>
+			</div>
+
+			<div role="button" class="toolbar-block text-v-center px-3" @click="openProfiler('db')">
+				{{ stackElements.length }} AJAX requests
+				<div class="info" style="width: 500px; max-height: 600px; overflow-x: scroll">
+					<div v-for="(stackElement, index) in stackElements" :key="index">
+						<a :href="generateAjaxUrl(stackElement)">
+							{{ stackElement.url }}
+							in {{ (stackElement.duration).toFixed() }} ms
+							<span class="lighter">({{ stackElement.profile }})</span>
+						</a>
+					</div>
+				</div>
+			</div>
+		</footer>
+	</div>
+</template>
+
+<script>
+import { loadState } from '@nextcloud/initial-state'
+import { mapState } from 'vuex'
+import { generateUrl } from '@nextcloud/router'
+
+const token = loadState('profiler', 'request-token')
+
+export default {
+	name: 'ProfilerToolbar',
+	data() {
+		return {
+			token,
+		}
+	},
+	computed: {
+		profile() {
+			return this.profiles[this.token]
+		},
+		queriesNumber() {
+			return Object.values(this.profile.collectors.db.queries).length
+		},
+		queriesTime() {
+			return (Object.values(this.profile.collectors.db.queries).reduce((acc, query) => {
+				return query.executionMS + acc
+			}, 0) * 1000).toFixed(1)
+		},
+		background() {
+			if (!this.profile) {
+				return ''
+			}
+			if (this.profile.statusCode === 200) {
+				return 'status-success'
+			}
+			if (this.profile.statusCode === 500) {
+				return 'status-error'
+			}
+			return 'status-warning'
+		},
+		time() {
+			if (!this.profile) {
+				return ''
+			}
+			return new Date(this.profile.time * 1000).toUTCString()
+		},
+		...mapState(['profiles', 'stackElements']),
+	},
+	mounted() {
+		this.$store.dispatch('loadProfile', { token })
+	},
+	methods: {
+		displayDuration(time) {
+			return (time * 1000.0).toFixed(2)
+		},
+		generateAjaxUrl(stackElement) {
+			return generateUrl('/apps/profiler/profiler/db/{token}', {
+				token: stackElement.profile,
+			})
+		},
+		openProfiler(view) {
+			document.location = generateUrl('/apps/profiler/profiler/{view}/{token}', {
+				view,
+				token: this.token,
+			})
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.bottom-bar {
+	position: fixed;
+	width: 100%;
+	bottom: 0;
+	left: 0;
+	display: flex;
+	z-index: 10;
+	flex-direction: row;
+	background-color: #222;
+	justify-content: start;
+	height: 36px;
+	font-size: 12px;
+	border-bottom: 1px solid var(--color-border);
+
+	& > .toolbar-block {
+		height: 100%;
+	}
+
+	.pr-3, .px-3 {
+		padding-right: 1rem !important;
+	}
+
+	.pl-3, .px-3 {
+		padding-left: 1rem !important;
+	}
+
+	.lighter {
+		color: #ddd;
+	}
+
+	.text-v-center {
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.toolbar-block:hover {
+		position: relative;
+		background-color: #444;
+		border-radius: 0;
+		.info {
+			display: block;
+			padding: 10px;
+			max-width: 480px;
+			max-height: 480px;
+			word-wrap: break-word;
+			overflow: hidden;
+		}
+	}
+
+	.toolbar-block {
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		color: white;
+		.info {
+			background-color: #444;
+			bottom: 36px;
+			color: #F5F5F5;
+			display: none;
+			padding: .5rem;
+			position: absolute;
+
+			a {
+				color: #F5F5F5;
+			}
+		}
+	}
+}
+.status-success {
+	background-color: rgba(112, 196, 137, 0.75);
+}
+.status-error {
+	background-color: rgba(231, 55, 51, 0.65);
+}
+.status-warning {
+	background-color: rgba(213, 118, 41, 0.75);
+}
+.url {
+	margin-left: 48px;
+}
+</style>

apps/profiler/src/components/ProfileHeader.vue

@@ -25,10 +25,10 @@ export default {
 			if (!this.profile) {
 				return ''
 			}
-			if (this.profile.statusCode === '200') {
+			if (this.profile.statusCode === 200) {
 				return 'status-success'
 			}
-			if (this.profile.statusCode === '500') {
+			if (this.profile.statusCode === 500) {
 				return 'status-error'
 			}
 			return 'status-warning'
@@ -73,5 +73,4 @@ export default {
 .url {
 	margin-left: 48px;
 }
-
 </style>

apps/profiler/src/store.js

@@ -8,11 +8,15 @@ Vue.use(Vuex)
 export default new Store({
 	state: {
 		profiles: {},
+		stackElements: [],
 	},
 	mutations: {
 		addProfile(state, { token, profile }) {
 			Vue.set(state.profiles, token, profile)
 		},
+		addStackElement(state, stackElement) {
+			state.stackElements.push(stackElement)
+		},
 	},
 	getters: {
 		profile: (state) => (token) => {