feat: download api logs web component

app.vue

@@ -13,6 +13,7 @@ onBeforeMount(() => {
       <div class="flex flex-col gap-6 p-6">
         <h2>Vue Components</h2>
         <UserProfileCe :server="serverState" />
+        <ApiLogsCe />
         <AuthCe />
         <KeyActionsCe />
         <LaunchpadCe />
@@ -23,6 +24,7 @@ onBeforeMount(() => {
       <div class="flex flex-col gap-6 p-6">
         <h2>Web Components</h2>
         <connect-user-profile :server="JSON.stringify(serverState)"></connect-user-profile>
+        <connect-api-logs></connect-api-logs>
         <connect-auth></connect-auth>
         <connect-key-actions></connect-key-actions>
         <connect-launchpad></connect-launchpad>

components/ApiLogs.ce.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import { DEV_GRAPH_URL } from '~/helpers/urls';
+import { useServerStore } from '~/store/server';
+import 'tailwindcss/tailwind.css';
+import '~/assets/main.css';
+
+const { apiKey } = storeToRefs(useServerStore());
+
+const downloadUrl = computed(() => new URL(`/graphql/api/logs?apiKey=${apiKey.value}`, DEV_GRAPH_URL || window.location.origin));
+</script>
+
+<template>
+  <div class="whitespace-normal flex flex-col gap-y-6">
+    <span class="leading-8 max-w-3xl">
+      The primary method of support for Unraid Connect is through <a href="https://forums.unraid.net/forum/94-connect-plugin-support/" target="_blank" rel="noopener noreferrer">our forums</a> and <a href="https://discord.gg/unraid" target="_blank" rel="noopener noreferrer">Discord</a>. If you are asked to supply logs, please open a support request on our <a href="https://unraid.net/contact" target="_blank" rel="noopener noreferrer">Contact Page</a> and reply to the email message you receive with your logs attached. The logs may contain sensitive information so do not post them publicly.
+    </span>
+    <span>
+      <a
+        :href="downloadUrl.toString()"
+        rel="noopener noreferrer"
+        class="text-white text-14px text-center w-full flex-none flex flex-row items-center justify-center gap-x-8px px-8px py-8px cursor-pointer rounded-md bg-gradient-to-r from-red to-orange hover:from-red/60 hover:to-orange/60 focus:from-red/60 focus:to-orange/60"
+        target="_blank"
+        download
+      >
+        {{ 'Download' }}
+      </a>
+    </span>
+  </div>
+</template>
+
+<style lang="postcss">
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+</style>

helpers/urls.ts

@@ -4,6 +4,7 @@
 const ACCOUNT = 'https://account.unraid.net';
 const CONNECT_DOCS = 'https://docs.unraid.net/category/unraid-connect';
 const CONNECT_DASHBOARD = 'https://connect.myunraid.net';
+const DEV_GRAPH_URL = '';
 const PURCHASE = 'https://unraid.net/preflight';
 const PLUGIN_SETTINGS = '/Settings/ManagementAccess#UnraidNetSettings';
 
@@ -11,6 +12,7 @@ export {
   ACCOUNT,
   CONNECT_DASHBOARD,
   CONNECT_DOCS,
+  DEV_GRAPH_URL,
   PURCHASE,
   PLUGIN_SETTINGS,
 };

store/server.ts

@@ -16,6 +16,7 @@ export const useServerStore = defineStore('server', () => {
    * State
    */
   const avatar = ref<string>(''); // @todo potentially move to a user store
+  const apiKey = ref<string>(''); // @todo potentially move to a user store
   const description = ref<string>('');
   const deviceCount = ref<number>(0);
   const expireTime = ref<number>(0);
@@ -50,6 +51,7 @@ export const useServerStore = defineStore('server', () => {
 
   const server = computed<Server>(():Server => {
     return {
+      apiKey: apiKey.value,
       avatar: avatar.value,
       description: description.value,
       deviceCount: deviceCount.value,
@@ -204,6 +206,7 @@ export const useServerStore = defineStore('server', () => {
    */
   const setServer = (data: Server) => {
     console.debug('[setServer]', data);
+    if (data?.apiKey) apiKey.value = data.apiKey;
     if (data?.avatar) avatar.value = data.avatar;
     if (data?.description) description.value = data.description;
     if (data?.deviceCount) deviceCount.value = data.deviceCount;
@@ -229,6 +232,7 @@ export const useServerStore = defineStore('server', () => {
 
   return {
     // state
+    apiKey,
     avatar,
     description,
     deviceCount,

types/server.ts

@@ -20,6 +20,7 @@ export enum ServerState {
   ENOCONN = 'ENOCONN',
 }
 export interface Server {
+  apiKey?: string;
   avatar?: string;
   description?: string;
   deviceCount?: number;