From ee878137315bd188cd12de0bd893e4ee938484ec Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Mon, 24 Jul 2023 14:20:45 -0700
Subject: [PATCH] refactor: connect status

---
 .../DropdownConnectStatus.fragment.ts         |  8 ++-
 .../UserProfile/DropdownConnectStatus.vue     | 26 ++++-----
 composables/gql/gql.ts                        | 13 +++--
 composables/gql/graphql.ts                    | 29 ++++++----
 store/errors.ts                               |  2 +-
 store/server.fragment.ts                      | 55 ++++++++++++-------
 store/server.ts                               | 44 +++++++++++++--
 types/server.ts                               |  5 ++
 8 files changed, 127 insertions(+), 55 deletions(-)

diff --git a/components/UserProfile/DropdownConnectStatus.fragment.ts b/components/UserProfile/DropdownConnectStatus.fragment.ts
index 474293f45..6449224b8 100644
--- a/components/UserProfile/DropdownConnectStatus.fragment.ts
+++ b/components/UserProfile/DropdownConnectStatus.fragment.ts
@@ -1,7 +1,9 @@
 import { graphql } from '~/composables/gql/gql';
 
-export const ONLINE_QUERY = graphql(/* GraphQL */`
-  query OnlineStatus {
-    online
+export const SERVER_CLOUD_QUERY = graphql(/* GraphQL */`
+  query CloudStatus {
+    cloud {
+      ...FragmentCloud
+    }
   }
 `);
diff --git a/components/UserProfile/DropdownConnectStatus.vue b/components/UserProfile/DropdownConnectStatus.vue
index 37d5e3377..d54ea3207 100644
--- a/components/UserProfile/DropdownConnectStatus.vue
+++ b/components/UserProfile/DropdownConnectStatus.vue
@@ -1,35 +1,35 @@
 <script setup lang="ts">
 import { ExclamationTriangleIcon, CheckCircleIcon } from '@heroicons/vue/24/solid';
-import { provideApolloClient, useQuery } from '@vue/apollo-composable';
+import { storeToRefs } from 'pinia';
 
-import { ONLINE_QUERY } from './DropdownConnectStatus.fragment';
-import { useUnraidApiStore } from '~/store/unraidApi';
+import { useServerStore } from '~/store/server';
 
-const unraidApiStore = useUnraidApiStore();
+const serverStore = useServerStore();
+const { cloud } = storeToRefs(serverStore);
 
-const { loading, result } = provideApolloClient(unraidApiStore.unraidApiClient)(() => useQuery(ONLINE_QUERY));
-const online = computed(() => result.value ?? null);
+onMounted(() => {
+  console.debug('[DropdownConnectStatus:mounted] cloud', cloud.value);
+});
 
-watch(online, (newVal, oldVal) => {
-  console.log('[watch:online]', newVal, oldVal);
+watch(cloud, (newVal, oldVal) => {
+  console.log('[watch:cloud]', newVal, oldVal);
 });
 </script>
 
 <template>
   <li class="px-8px flex flex-col items-center">
-    <template v-if="loading">
+    <template v-if="!cloud">
       <BrandLoading class="w-36px mx-auto" />
       <span class="text-12px italic opacity-80">{{ 'Loading Connect status…' }}</span>
     </template>
     <span
       v-else
       class="w-full flex flex-row justify-start items-center gap-x-8px"
-      :title="online ? 'Connect is connected to Unraid cloud services' : 'Connect is not connected to Unraid cloud services'"
+      :title="!cloud.error ? 'Connect is connected to Unraid cloud services' : cloud.error"
     >
-      <!-- <span class="block w-12px h-12px bg-green-600 rounded-full"></span> -->
-      <CheckCircleIcon v-if="online" class="text-green-500 w-16px h-16px" />
+      <CheckCircleIcon v-if="!cloud.error" class="text-green-500 w-16px h-16px" />
       <ExclamationTriangleIcon v-else class="text-red-500 w-16px h-16px" />
-      <span>{{ online ? 'Connected' : 'Disconnected' }}</span>
+      <span>{{ !cloud.error ? 'Connected' : 'Not connected' }}</span>
     </span>
   </li>
 </template>
diff --git a/composables/gql/gql.ts b/composables/gql/gql.ts
index 4de976065..03ec9de76 100644
--- a/composables/gql/gql.ts
+++ b/composables/gql/gql.ts
@@ -13,12 +13,13 @@ import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-
  * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const documents = {
-    "\n  query OnlineStatus {\n    online\n  }\n": types.OnlineStatusDocument,
+    "\n  query CloudStatus {\n    cloud {\n      ...FragmentCloud\n    }\n  }\n": types.CloudStatusDocument,
+    "\n  fragment FragmentCloud on Cloud {\n    error\n    apiKey {\n      valid\n      error\n    }\n    cloud {\n      status\n      error\n    }\n    minigraphql {\n      status\n      error\n    }\n    relay {\n      status\n      error\n    }\n  }\n": types.FragmentCloudFragmentDoc,
     "\n  fragment FragmentConfig on Config {\n    error\n    valid\n  }\n": types.FragmentConfigFragmentDoc,
     "\n  fragment FragmentOwner on Owner {\n    avatar\n    username\n  }\n": types.FragmentOwnerFragmentDoc,
     "\n  fragment FragmentRegistration on Registration {\n    state\n    expiration\n    keyFile {\n      contents\n    }\n  }\n": types.FragmentRegistrationFragmentDoc,
     "\n  fragment FragmentVars on Vars {\n    regGen\n    regState\n    configError\n    configValid\n  }\n": types.FragmentVarsFragmentDoc,
-    "\n  query serverState {\n    owner {\n      ...FragmentOwner\n    }\n    info {\n      os {\n        hostname\n      }\n    }\n    registration {\n      ...FragmentRegistration\n    }\n    crashReportingEnabled\n    vars {\n      ...FragmentVars\n    }\n    config {\n      ...FragmentConfig\n    }\n    cloud {\n      error\n      apiKey {\n        valid\n        error\n      }\n      relay {\n        status\n        error\n      }\n      cloud {\n        status\n        error\n      }\n    }\n  }\n": types.serverStateDocument,
+    "\n  query serverState {\n    cloud {\n      ...FragmentCloud\n    }\n    config {\n      ...FragmentConfig\n    }\n    info {\n      os {\n        hostname\n      }\n    }\n    owner {\n      ...FragmentOwner\n    }\n    registration {\n      ...FragmentRegistration\n    }\n    vars {\n      ...FragmentVars\n    }\n  }\n": types.serverStateDocument,
 };
 
 /**
@@ -38,7 +39,11 @@ export function graphql(source: string): unknown;
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  query OnlineStatus {\n    online\n  }\n"): (typeof documents)["\n  query OnlineStatus {\n    online\n  }\n"];
+export function graphql(source: "\n  query CloudStatus {\n    cloud {\n      ...FragmentCloud\n    }\n  }\n"): (typeof documents)["\n  query CloudStatus {\n    cloud {\n      ...FragmentCloud\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  fragment FragmentCloud on Cloud {\n    error\n    apiKey {\n      valid\n      error\n    }\n    cloud {\n      status\n      error\n    }\n    minigraphql {\n      status\n      error\n    }\n    relay {\n      status\n      error\n    }\n  }\n"): (typeof documents)["\n  fragment FragmentCloud on Cloud {\n    error\n    apiKey {\n      valid\n      error\n    }\n    cloud {\n      status\n      error\n    }\n    minigraphql {\n      status\n      error\n    }\n    relay {\n      status\n      error\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -58,7 +63,7 @@ export function graphql(source: "\n  fragment FragmentVars on Vars {\n    regGen
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  query serverState {\n    owner {\n      ...FragmentOwner\n    }\n    info {\n      os {\n        hostname\n      }\n    }\n    registration {\n      ...FragmentRegistration\n    }\n    crashReportingEnabled\n    vars {\n      ...FragmentVars\n    }\n    config {\n      ...FragmentConfig\n    }\n    cloud {\n      error\n      apiKey {\n        valid\n        error\n      }\n      relay {\n        status\n        error\n      }\n      cloud {\n        status\n        error\n      }\n    }\n  }\n"): (typeof documents)["\n  query serverState {\n    owner {\n      ...FragmentOwner\n    }\n    info {\n      os {\n        hostname\n      }\n    }\n    registration {\n      ...FragmentRegistration\n    }\n    crashReportingEnabled\n    vars {\n      ...FragmentVars\n    }\n    config {\n      ...FragmentConfig\n    }\n    cloud {\n      error\n      apiKey {\n        valid\n        error\n      }\n      relay {\n        status\n        error\n      }\n      cloud {\n        status\n        error\n      }\n    }\n  }\n"];
+export function graphql(source: "\n  query serverState {\n    cloud {\n      ...FragmentCloud\n    }\n    config {\n      ...FragmentConfig\n    }\n    info {\n      os {\n        hostname\n      }\n    }\n    owner {\n      ...FragmentOwner\n    }\n    registration {\n      ...FragmentRegistration\n    }\n    vars {\n      ...FragmentVars\n    }\n  }\n"): (typeof documents)["\n  query serverState {\n    cloud {\n      ...FragmentCloud\n    }\n    config {\n      ...FragmentConfig\n    }\n    info {\n      os {\n        hostname\n      }\n    }\n    owner {\n      ...FragmentOwner\n    }\n    registration {\n      ...FragmentRegistration\n    }\n    vars {\n      ...FragmentVars\n    }\n  }\n"];
 
 export function graphql(source: string) {
   return (documents as any)[source] ?? {};
diff --git a/composables/gql/graphql.ts b/composables/gql/graphql.ts
index 601dc0ef5..0659db651 100644
--- a/composables/gql/graphql.ts
+++ b/composables/gql/graphql.ts
@@ -1586,10 +1586,15 @@ export type usersInput = {
   slim?: InputMaybe<Scalars['Boolean']['input']>;
 };
 
-export type OnlineStatusQueryVariables = Exact<{ [key: string]: never; }>;
+export type CloudStatusQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type OnlineStatusQuery = { __typename?: 'Query', online?: boolean | null };
+export type CloudStatusQuery = { __typename?: 'Query', cloud?: (
+    { __typename?: 'Cloud' }
+    & { ' $fragmentRefs'?: { 'FragmentCloudFragment': FragmentCloudFragment } }
+  ) | null };
+
+export type FragmentCloudFragment = { __typename?: 'Cloud', error?: string | null, apiKey: { __typename?: 'ApiKeyResponse', valid: boolean, error?: string | null }, cloud: { __typename?: 'CloudResponse', status: string, error?: string | null }, minigraphql: { __typename?: 'MinigraphqlResponse', status: MinigraphStatus, error?: string | null }, relay?: { __typename?: 'RelayResponse', status: string, error?: string | null } | null } & { ' $fragmentName'?: 'FragmentCloudFragment' };
 
 export type FragmentConfigFragment = { __typename?: 'Config', error?: ConfigErrorState | null, valid?: boolean | null } & { ' $fragmentName'?: 'FragmentConfigFragment' };
 
@@ -1602,23 +1607,27 @@ export type FragmentVarsFragment = { __typename?: 'Vars', regGen?: string | null
 export type serverStateQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type serverStateQuery = { __typename?: 'Query', crashReportingEnabled?: boolean | null, owner?: (
+export type serverStateQuery = { __typename?: 'Query', cloud?: (
+    { __typename?: 'Cloud' }
+    & { ' $fragmentRefs'?: { 'FragmentCloudFragment': FragmentCloudFragment } }
+  ) | null, config: (
+    { __typename?: 'Config' }
+    & { ' $fragmentRefs'?: { 'FragmentConfigFragment': FragmentConfigFragment } }
+  ), info?: { __typename?: 'Info', os?: { __typename?: 'Os', hostname?: string | null } | null } | null, owner?: (
     { __typename?: 'Owner' }
     & { ' $fragmentRefs'?: { 'FragmentOwnerFragment': FragmentOwnerFragment } }
-  ) | null, info?: { __typename?: 'Info', os?: { __typename?: 'Os', hostname?: string | null } | null } | null, registration?: (
+  ) | null, registration?: (
     { __typename?: 'Registration' }
     & { ' $fragmentRefs'?: { 'FragmentRegistrationFragment': FragmentRegistrationFragment } }
   ) | null, vars?: (
     { __typename?: 'Vars' }
     & { ' $fragmentRefs'?: { 'FragmentVarsFragment': FragmentVarsFragment } }
-  ) | null, config: (
-    { __typename?: 'Config' }
-    & { ' $fragmentRefs'?: { 'FragmentConfigFragment': FragmentConfigFragment } }
-  ), cloud?: { __typename?: 'Cloud', error?: string | null, apiKey: { __typename?: 'ApiKeyResponse', valid: boolean, error?: string | null }, relay?: { __typename?: 'RelayResponse', status: string, error?: string | null } | null, cloud: { __typename?: 'CloudResponse', status: string, error?: string | null } } | null };
+  ) | null };
 
+export const FragmentCloudFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"FragmentCloud"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Cloud"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}},{"kind":"Field","name":{"kind":"Name","value":"apiKey"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"valid"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"Field","name":{"kind":"Name","value":"cloud"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"Field","name":{"kind":"Name","value":"minigraphql"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"Field","name":{"kind":"Name","value":"relay"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}}]}}]} as unknown as DocumentNode<FragmentCloudFragment, unknown>;
 export const FragmentConfigFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"FragmentConfig"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Config"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}},{"kind":"Field","name":{"kind":"Name","value":"valid"}}]}}]} as unknown as DocumentNode<FragmentConfigFragment, unknown>;
 export const FragmentOwnerFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"FragmentOwner"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Owner"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"avatar"}},{"kind":"Field","name":{"kind":"Name","value":"username"}}]}}]} as unknown as DocumentNode<FragmentOwnerFragment, unknown>;
 export const FragmentRegistrationFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"FragmentRegistration"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Registration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"state"}},{"kind":"Field","name":{"kind":"Name","value":"expiration"}},{"kind":"Field","name":{"kind":"Name","value":"keyFile"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"contents"}}]}}]}}]} as unknown as DocumentNode<FragmentRegistrationFragment, unknown>;
 export const FragmentVarsFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"FragmentVars"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Vars"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"regGen"}},{"kind":"Field","name":{"kind":"Name","value":"regState"}},{"kind":"Field","name":{"kind":"Name","value":"configError"}},{"kind":"Field","name":{"kind":"Name","value":"configValid"}}]}}]} as unknown as DocumentNode<FragmentVarsFragment, unknown>;
-export const OnlineStatusDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"OnlineStatus"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"online"}}]}}]} as unknown as DocumentNode<OnlineStatusQuery, OnlineStatusQueryVariables>;
-export const serverStateDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"serverState"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"owner"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"FragmentOwner"}}]}},{"kind":"Field","name":{"kind":"Name","value":"info"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"os"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"hostname"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"registration"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"FragmentRegistration"}}]}},{"kind":"Field","name":{"kind":"Name","value":"crashReportingEnabled"}},{"kind":"Field","name":{"kind":"Name","value":"vars"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"FragmentVars"}}]}},{"kind":"Field","name":{"kind":"Name","value":"config"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"FragmentConfig"}}]}},{"kind":"Field","name":{"kind":"Name","value":"cloud"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}},{"kind":"Field","name":{"kind":"Name","value":"apiKey"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"valid"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"Field","name":{"kind":"Name","value":"relay"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"Field","name":{"kind":"Name","value":"cloud"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"FragmentOwner"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Owner"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"avatar"}},{"kind":"Field","name":{"kind":"Name","value":"username"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"FragmentRegistration"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Registration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"state"}},{"kind":"Field","name":{"kind":"Name","value":"expiration"}},{"kind":"Field","name":{"kind":"Name","value":"keyFile"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"contents"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"FragmentVars"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Vars"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"regGen"}},{"kind":"Field","name":{"kind":"Name","value":"regState"}},{"kind":"Field","name":{"kind":"Name","value":"configError"}},{"kind":"Field","name":{"kind":"Name","value":"configValid"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"FragmentConfig"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Config"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}},{"kind":"Field","name":{"kind":"Name","value":"valid"}}]}}]} as unknown as DocumentNode<serverStateQuery, serverStateQueryVariables>;
\ No newline at end of file
+export const CloudStatusDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"CloudStatus"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"cloud"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"FragmentCloud"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"FragmentCloud"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Cloud"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}},{"kind":"Field","name":{"kind":"Name","value":"apiKey"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"valid"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"Field","name":{"kind":"Name","value":"cloud"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"Field","name":{"kind":"Name","value":"minigraphql"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"Field","name":{"kind":"Name","value":"relay"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}}]}}]} as unknown as DocumentNode<CloudStatusQuery, CloudStatusQueryVariables>;
+export const serverStateDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"serverState"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"cloud"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"FragmentCloud"}}]}},{"kind":"Field","name":{"kind":"Name","value":"config"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"FragmentConfig"}}]}},{"kind":"Field","name":{"kind":"Name","value":"info"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"os"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"hostname"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"owner"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"FragmentOwner"}}]}},{"kind":"Field","name":{"kind":"Name","value":"registration"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"FragmentRegistration"}}]}},{"kind":"Field","name":{"kind":"Name","value":"vars"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"FragmentVars"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"FragmentCloud"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Cloud"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}},{"kind":"Field","name":{"kind":"Name","value":"apiKey"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"valid"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"Field","name":{"kind":"Name","value":"cloud"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"Field","name":{"kind":"Name","value":"minigraphql"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"Field","name":{"kind":"Name","value":"relay"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"FragmentConfig"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Config"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}},{"kind":"Field","name":{"kind":"Name","value":"valid"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"FragmentOwner"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Owner"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"avatar"}},{"kind":"Field","name":{"kind":"Name","value":"username"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"FragmentRegistration"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Registration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"state"}},{"kind":"Field","name":{"kind":"Name","value":"expiration"}},{"kind":"Field","name":{"kind":"Name","value":"keyFile"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"contents"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"FragmentVars"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Vars"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"regGen"}},{"kind":"Field","name":{"kind":"Name","value":"regState"}},{"kind":"Field","name":{"kind":"Name","value":"configError"}},{"kind":"Field","name":{"kind":"Name","value":"configValid"}}]}}]} as unknown as DocumentNode<serverStateQuery, serverStateQueryVariables>;
\ No newline at end of file
diff --git a/store/errors.ts b/store/errors.ts
index 4cb40630f..cb186fcc9 100644
--- a/store/errors.ts
+++ b/store/errors.ts
@@ -11,7 +11,7 @@ import type { Server } from '~/types/server';
  */
 setActivePinia(createPinia());
 
-export type ErrorType = 'account' | 'callback' | 'installKey' | 'server' | 'serverState';
+export type ErrorType = 'account' | 'callback' | 'installKey' | 'server' | 'serverState' | 'unraidApiState';
 export interface Error {
   actions?: ButtonProps[];
   debugServer?: Server;
diff --git a/store/server.fragment.ts b/store/server.fragment.ts
index 2bef07c8f..12881dd52 100644
--- a/store/server.fragment.ts
+++ b/store/server.fragment.ts
@@ -1,5 +1,27 @@
 import { graphql } from '~/composables/gql/gql';
 
+export const SERVER_CLOUD_FRAGMENT = graphql(/* GraphQL */`
+  fragment FragmentCloud on Cloud {
+    error
+    apiKey {
+      valid
+      error
+    }
+    cloud {
+      status
+      error
+    }
+    minigraphql {
+      status
+      error
+    }
+    relay {
+      status
+      error
+    }
+  }
+`);
+
 export const SERVER_CONFIG_FRAGMENT = graphql(/* GraphQL */`
   fragment FragmentConfig on Config {
     error
@@ -35,38 +57,33 @@ export const SERVER_VARS_FRAGMENT = graphql(/* GraphQL */`
 
 export const SERVER_STATE_QUERY = graphql(/* GraphQL */`
   query serverState {
-    owner {
-      ...FragmentOwner
+    cloud {
+      ...FragmentCloud
+    }
+    config {
+      ...FragmentConfig
     }
     info {
       os {
         hostname
       }
     }
+    owner {
+      ...FragmentOwner
+    }
     registration {
       ...FragmentRegistration
     }
-    crashReportingEnabled
     vars {
       ...FragmentVars
     }
-    config {
-      ...FragmentConfig
-    }
+  }
+`);
+
+export const SERVER_CLOUD_QUERY = graphql(/* GraphQL */`
+  query CloudStatus {
     cloud {
-      error
-      apiKey {
-        valid
-        error
-      }
-      relay {
-        status
-        error
-      }
-      cloud {
-        status
-        error
-      }
+      ...FragmentCloud
     }
   }
 `);
diff --git a/store/server.ts b/store/server.ts
index 78d522038..484121289 100644
--- a/store/server.ts
+++ b/store/server.ts
@@ -28,6 +28,7 @@ import type {
   ServerKeyTypeForPurchase,
   ServerPurchaseCallbackSendPayload,
   ServerState,
+  ServerStateCloudStatus,
   ServerStateConfigStatus,
   ServerStateData,
   ServerStateDataAction,
@@ -53,6 +54,7 @@ export const useServerStore = defineStore('server', () => {
   const apiKey = ref<string>(''); // @todo potentially move to a user store
   const apiVersion = ref<string>('');
   const avatar = ref<string>(''); // @todo potentially move to a user store
+  const cloud = ref<ServerStateCloudStatus>();
   const config = ref<ServerStateConfigStatus>();
   const connectPluginInstalled = ref<ServerconnectPluginInstalled>('');
   const connectPluginVersion = ref<string>('');
@@ -187,7 +189,7 @@ export const useServerStore = defineStore('server', () => {
 
   const serverDebugPayload = computed((): Server => {
     const payload = {
-      apiKey: apiKey.value,
+      apiKey: apiKey.value ? `${apiKey.value.substring(0, 6)}__[REDACTED]` : '',
       apiVersion: apiVersion.value,
       avatar: avatar.value,
       connectPluginInstalled: connectPluginInstalled.value,
@@ -483,7 +485,7 @@ export const useServerStore = defineStore('server', () => {
     }
   });
 
-  const stateDataError = computed(() => {
+  const stateDataError = computed((): Error | undefined => {
     if (!stateData.value?.error) { return undefined; }
     return {
       actions: [
@@ -499,9 +501,9 @@ export const useServerStore = defineStore('server', () => {
         },
       ],
       debugServer: serverDebugPayload.value,
-      heading: stateData.value?.heading,
+      heading: stateData.value?.heading ?? '',
       level: 'error',
-      message: stateData.value?.message,
+      message: stateData.value?.message ?? '',
       ref: `stateDataError__${state.value}`,
       type: 'serverState',
     };
@@ -637,13 +639,43 @@ export const useServerStore = defineStore('server', () => {
     if (newVal) { errorsStore.setError(newVal); }
   });
 
+  const cloudError = computed((): Error | undefined => {
+    if (!cloud.value?.error) { return undefined; }
+    return {
+      actions: [
+        {
+          click: () => {
+            errorsStore.openTroubleshoot({
+              email: email.value,
+              includeUnraidApiLogs: !!connectPluginInstalled.value,
+            });
+          },
+          icon: QuestionMarkCircleIcon,
+          text: 'Contact Support',
+        },
+      ],
+      debugServer: serverDebugPayload.value,
+      heading: 'Unraid Connect Error',
+      level: 'error',
+      message: cloud.value.error,
+      ref: 'cloudError',
+      type: 'unraidApiState',
+    };
+  });
+  watch(cloudError, (newVal, oldVal) => {
+    console.debug('[watch:deprecatedUnraidSSL]', newVal, oldVal);
+    if (oldVal && oldVal.ref) { errorsStore.removeErrorByRef(oldVal.ref); }
+    if (newVal) { errorsStore.setError(newVal); }
+  });
+
   const serverErrors = computed(() => {
     return [
       stateDataError.value,
-      invalidApiKey.value,
       tooManyDevices.value,
       pluginInstallFailed.value,
       deprecatedUnraidSSL.value,
+      invalidApiKey.value,
+      cloudError.value,
     ].filter(Boolean);
   });
   /**
@@ -669,6 +701,7 @@ export const useServerStore = defineStore('server', () => {
     if (typeof data?.apiKey !== 'undefined') { apiKey.value = data.apiKey; }
     if (typeof data?.apiVersion !== 'undefined') { apiVersion.value = data.apiVersion; }
     if (typeof data?.avatar !== 'undefined') { avatar.value = data.avatar; }
+    if (typeof data?.cloud !== 'undefined') { cloud.value = data.cloud; }
     if (typeof data?.config !== 'undefined') { config.value = data.config; }
     if (typeof data?.connectPluginInstalled !== 'undefined') { connectPluginInstalled.value = data.connectPluginInstalled; }
     if (typeof data?.connectPluginVersion !== 'undefined') { connectPluginVersion.value = data.connectPluginVersion; }
@@ -797,6 +830,7 @@ export const useServerStore = defineStore('server', () => {
     // state
     apiKey,
     avatar,
+    cloud,
     config,
     connectPluginInstalled,
     csrf,
diff --git a/types/server.ts b/types/server.ts
index 0af769d10..800357039 100644
--- a/types/server.ts
+++ b/types/server.ts
@@ -5,6 +5,10 @@ export interface ServerStateConfigStatus {
   error?: 'INVALID' | 'NO_KEY_SERVER' | 'UNKNOWN_ERROR' | 'WITHDRAWN';
   valid: boolean;
 }
+export interface ServerStateCloudStatus {
+  error: string | null;
+}
+
 export type ServerState = 'BASIC'
   | 'PLUS'
   | 'PRO'
@@ -35,6 +39,7 @@ export interface Server {
   apiKey?: string;
   apiVersion?: string;
   avatar?: string;
+  cloud?: ServerStateCloudStatus;
   config?: ServerStateConfigStatus | undefined;
   connectPluginInstalled?: ServerconnectPluginInstalled;
   connectPluginVersion?: string;