Add system collections to pane dropdown

app/src/constants.ts

@@ -21,3 +21,17 @@ export const DIRECTUS_LOGO = `
 ⠀⠀⠀⠀⠉⠉⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
 
 `;
+
+/**
+ * These are the system endpoints that don't have full/regular CRUD operations available.
+ */
+export const COLLECTIONS_DENY_LIST = [
+	'directus_activity',
+	'directus_collections',
+	'directus_fields',
+	'directus_migrations',
+	'directus_relations',
+	'directus_revisions',
+	'directus_sessions',
+	'directus_settings',
+];

app/src/interfaces/_system/system-collection/system-collection.vue

@@ -35,11 +35,10 @@ export default defineComponent({
 		const collectionsStore = useCollectionsStore();
 
 		const collections = computed(() => {
-			if (props.includeSystem) return collectionsStore.collections;
-
-			return collectionsStore.collections.filter(
-				(collection) => collection.collection.startsWith('directus_') === false
-			);
+			return [
+				...collectionsStore.collections.filter((collection) => collection.collection.startsWith('directus_') === false),
+				...(props.includeSystem ? collectionsStore.crudSafeSystemCollections : []),
+			];
 		});
 
 		const items = computed(() => {

app/src/panels/metric/index.ts

@@ -14,6 +14,9 @@ export default definePanel({
 			name: '$t:collection',
 			meta: {
 				interface: 'system-collection',
+				options: {
+					includeSystem: true,
+				},
 				width: 'half',
 			},
 		},

app/src/panels/time-series/index.ts

@@ -14,6 +14,9 @@ export default definePanel({
 			name: '$t:collection',
 			meta: {
 				interface: 'system-collection',
+				options: {
+					includeSystem: true,
+				},
 				width: 'half',
 			},
 		},

app/src/panels/time-series/time-series.vue

@@ -215,9 +215,9 @@ export default defineComponent({
 				},
 				markers: {
 					hover: {
-					  size: undefined,
-					  sizeOffset: 4,
-					}
+						size: undefined,
+						sizeOffset: 4,
+					},
 				},
 				fill: {
 					type: 'gradient',
@@ -292,10 +292,10 @@ export default defineComponent({
 						},
 					},
 					crosshairs: {
-	          stroke: {
-	              color: 'var(--border-normal)',
-	          },
-	      	},
+						stroke: {
+							color: 'var(--border-normal)',
+						},
+					},
 				},
 				yaxis: {
 					forceNiceScale: true,
@@ -330,23 +330,27 @@ export default defineComponent({
 	height: 100%;
 }
 </style>
+
 <style>
 .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
-	background-color: var(--background-subdued);
-	padding: 0 4px;
-	font-size:  10px !important;
-	font-weight: 600 !important;
 	margin-bottom: 0;
+	padding: 0 4px;
+	font-weight: 600 !important;
+	font-size: 10px !important;
+	background-color: var(--background-subdued);
 }
-.apexcharts-tooltip-series-group:last-child {
-	padding-bottom:  0;
-}
+
 .apexcharts-tooltip-y-group {
 	padding: 0 0 0 4px;
-	font-size:  10px !important;
 	font-weight: 600 !important;
+	font-size: 10px !important;
 }
+
 .apexcharts-tooltip-series-group {
 	padding: 0;
 }
-</style>
+
+.apexcharts-tooltip-series-group:last-child {
+	padding-bottom: 0;
+}
+</style>

app/src/stores/collections.ts

@@ -7,6 +7,8 @@ import { unexpectedError } from '@/utils/unexpected-error';
 import formatTitle from '@directus/format-title';
 import { defineStore } from 'pinia';
 import { TranslateResult } from 'vue-i18n';
+import { COLLECTIONS_DENY_LIST } from '@/constants';
+import { orderBy } from 'lodash';
 
 export const useCollectionsStore = defineStore({
 	id: 'collectionsStore',
@@ -24,6 +26,15 @@ export const useCollectionsStore = defineStore({
 				.filter(({ collection }) => collection.startsWith('directus_') === false)
 				.filter((collection) => collection.meta?.hidden !== false);
 		},
+		crudSafeSystemCollections(): Collection[] {
+			return orderBy(
+				this.collections.filter((collection) => {
+					return collection.collection.startsWith('directus_') === true;
+				}),
+				['collection'],
+				['asc']
+			).filter((collection) => COLLECTIONS_DENY_LIST.includes(collection.collection) === false);
+		},
 	},
 	actions: {
 		async hydrate() {