Grafana Dashboard service completed

apps/api/src/lib/services/common.ts

@@ -350,6 +350,13 @@ export async function configureServiceType({
 				}
 			}
 		});
+	} else if (type === 'grafana') {
+		await prisma.service.update({
+			where: { id },
+			data: {
+				type
+			}
+		});
 	} else {
 		await prisma.service.update({
 			where: { id },

apps/api/src/lib/services/handlers.ts

@@ -69,6 +69,9 @@ export async function startService(request: FastifyRequest<ServiceStartStop>) {
         if (type === 'taiga') {
             return await startTaigaService(request)
         }
+        if (type === 'grafana') {
+            return await startGrafanaService(request)
+        }
         throw `Service type ${type} not supported.`
     } catch (error) {
         throw { status: 500, message: error?.message || error }
@@ -2590,3 +2593,57 @@ async function startTaigaService(request: FastifyRequest<ServiceStartStop>) {
     }
 }
 
+async function startGrafanaService(request: FastifyRequest<ServiceStartStop>) {
+    try {
+        const { id } = request.params;
+        const teamId = request.user.teamId;
+        const service = await getServiceFromDB({ id, teamId });
+        const { type, version, destinationDockerId, destinationDocker, serviceSecret, exposePort, persistentStorage } =
+            service;
+        const network = destinationDockerId && destinationDocker.network;
+        const port = getServiceMainPort('grafana');
+
+        const { workdir } = await createDirectories({ repository: type, buildId: id });
+        const image = getServiceImage(type);
+
+        const config = {
+            grafana: {
+                image: `${image}:${version}`,
+                volumes: [`${id}-grafana:/var/lib/grafana`],
+                environmentVariables: {}
+            }
+        };
+        if (serviceSecret.length > 0) {
+            serviceSecret.forEach((secret) => {
+                config.grafana.environmentVariables[secret.name] = secret.value;
+            });
+        }
+        const { volumeMounts } = persistentVolumes(id, persistentStorage, config)
+        const composeFile: ComposeFile = {
+            version: '3.8',
+            services: {
+                [id]: {
+                    container_name: id,
+                    image: config.grafana.image,
+                    volumes: config.grafana.volumes,
+                    environment: config.grafana.environmentVariables,
+                    ...(exposePort ? { ports: [`${exposePort}:${port}`] } : {}),
+                    labels: makeLabelForServices('grafana'),
+                    ...defaultComposeConfiguration(network),
+                }
+            },
+            networks: {
+                [network]: {
+                    external: true
+                }
+            },
+            volumes: volumeMounts
+        };
+        const composeFileDestination = `${workdir}/docker-compose.yaml`;
+        await fs.writeFile(composeFileDestination, yaml.dump(composeFile));
+        await startServiceContainers(destinationDocker.id, composeFileDestination)
+        return {}
+    } catch ({ status, message }) {
+        return errorHandler({ status, message })
+    }
+}

apps/api/src/lib/services/supportedVersions.ts

@@ -212,4 +212,15 @@ export const supportedServiceTypesAndVersions = [
 	// 		main: 80
 	// 	}
 	// },
+	{
+		name: 'grafana',
+		fancyName: 'Grafana Dashboard',
+		baseImage: 'grafana/grafana',
+		images: [],
+		versions: ['latest', '9.1.3', '9.1.2', '9.0.8', '8.3.11', '8.4.11', '8.5.11'],
+		recommendedVersion: 'latest',
+		ports: {
+			main: 3000
+		}
+	},
 ];

apps/ui/src/lib/components/svg/services/Grafana.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	export let isAbsolute = false;
+</script>
+
+<img
+	alt="grafana logo"
+	class={isAbsolute ? 'w-12 h-12 absolute top-0 left-0 -m-3 -mt-5' : 'w-8 h-8 mx-auto'}
+	src="/grafana.png"
+/>

apps/ui/src/lib/components/svg/services/ServiceIcons.svelte

@@ -42,4 +42,6 @@
 	<Icons.Searxng {isAbsolute} />
 {:else if type === 'weblate'}
 	<Icons.Weblate {isAbsolute} />
-{/if}
+{:else if type === 'grafana'}
+	<Icons.Grafana {isAbsolute} />
+{/if}

apps/ui/src/lib/components/svg/services/index.ts

@@ -17,4 +17,5 @@ export { default as Appwrite } from './Appwrite.svelte';
 export { default as Moodle } from './Moodle.svelte';
 export { default as GlitchTip }  from './GlitchTip.svelte';
 export { default as Searxng }  from './Searxng.svelte';
-export { default as Weblate }  from './Weblate.svelte';
+export { default as Weblate }  from './Weblate.svelte';
+export { default as Grafana }  from './Grafana.svelte';

apps/ui/src/routes/services/[id]/_ServiceLinks.svelte

@@ -75,4 +75,8 @@
 	<a href="https://weblate.org" target="_blank">
 		<Icons.Weblate />
 	</a>
+{:else if service.type === 'grafana'}
+	<a href="https://github.com/grafana/grafana" target="_blank">
+		<Icons.Grafana />
+	</a>
 {/if}