feat: display troubleshoot report in text field

Signed-off-by: Alexander Trost <galexrt@googlemail.com>
koor-tech · Nov 6, 2023 · a287799 · a287799
1 parent cf8fed3
commit a287799
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 10 deletions.
diff --git a/pkg/server/http.go b/pkg/server/http.go
@@ -29,8 +29,9 @@ import (
 	"go.uber.org/fx"
 	"go.uber.org/zap"
 
-	// Services
+	// Connect Services - Need to be added here
 	serverauth "github.com/koor-tech/data-control-center/server/auth"
+	servercluster "github.com/koor-tech/data-control-center/server/cluster"
 	serverstats "github.com/koor-tech/data-control-center/server/stats"
 )
 
@@ -184,9 +185,10 @@ func StartHTTPServer() {
 		ceph.Module,
 		cephcache.Module,
 
-		// Connect Services
+		// Connect Services - Need to be added here
 		fx.Provide(
 			AsService(serverauth.New),
+			AsService(servercluster.New),
 			AsService(serverstats.New),
 		),
 

diff --git a/server/cluster/cluster.go b/server/cluster/cluster.go
@@ -5,6 +5,7 @@ import (
 	"time"
 
 	"connectrpc.com/connect"
+	"github.com/gin-gonic/gin"
 	clusterpb "github.com/koor-tech/data-control-center/gen/go/api/services/cluster/v1"
 	"github.com/koor-tech/data-control-center/gen/go/api/services/cluster/v1/clusterv1connect"
 	"github.com/koor-tech/data-control-center/pkg/config"
@@ -42,6 +43,13 @@ func New(p Params) (*Server, error) {
 	}, nil
 }
 
+func (s *Server) RegisterService(g *gin.RouterGroup) {
+	path, handler := clusterv1connect.NewClusterServiceHandler(s, connect.WithInterceptors(
+		s.auth.NewAuthInterceptor(),
+	))
+	g.Any(path+"/*path", gin.WrapH(handler))
+}
+
 func (s *Server) GetKoorCluster(ctx context.Context, req *connect.Request[clusterpb.GetKoorClusterRequest]) (*connect.Response[clusterpb.GetKoorClusterResponse], error) {
 	kc, _ := s.k.GetKoorCluster(s.Namespace)
 
@@ -57,7 +65,7 @@ func (s *Server) GetTroubleshootReport(ctx context.Context, req *connect.Request
 		Content string
 	}{}
 
-	// TODO
+	// TODO get k8s, rook pod versions, ceph version and the custom resource infos
 
 	report := ""
 	if len(reportContent) == 0 {

diff --git a/src/components/partials/Sidebar.vue b/src/components/partials/Sidebar.vue
@@ -76,7 +76,7 @@ const sidebarNavigation = ref<
     },
     {
         name: 'Troubleshooting',
-        href: { name: 'troubleshooting' },
+        href: { name: 'troubleshoot' },
         icon: markRaw(HelpBoxMultipleIcon),
         position: 'top',
         current: false,

diff --git a/src/pages/troubleshooting.vue → src/pages/troubleshoot.vue b/src/pages/troubleshooting.vue → src/pages/troubleshoot.vue
@@ -2,21 +2,29 @@
 import { ConnectError } from '@connectrpc/connect';
 import { useThrottleFn } from '@vueuse/core';
 import GenericDivider from '~/components/partials/GenericDivider.vue';
+import DataErrorBlock from '~/components/partials/data/DataErrorBlock.vue';
+import DataNoDataBlock from '~/components/partials/data/DataNoDataBlock.vue';
+import DataPendingBlock from '~/components/partials/data/DataPendingBlock.vue';
 import { useClusterStore } from '~/store/cluster';
 
 useHead({
-    title: 'Troubleshooting',
+    title: 'Troubleshoot',
 });
 definePageMeta({
-    title: 'Troubleshooting',
+    title: 'Troubleshoot',
     requiresAuth: true,
 });
 
 const { $grpc } = useNuxtApp();
 
 const clusterStore = useClusterStore();
 
-const { data: report, refresh } = useLazyAsyncData(
+const {
+    data: report,
+    error,
+    pending,
+    refresh,
+} = useLazyAsyncData(
     'cluster-troubleshoot_report',
     async () => {
         try {
@@ -53,9 +61,19 @@ const onSubmitThrottle = useThrottleFn(async (_) => {
                 Generate Troubleshoot Report
             </button>
         </div>
-        <div v-if="report" class="flex">
-            <GenericDivider />
-            <textarea :value="report.report" />
+        <div v-if="report" class="mt-4 flex flex-col">
+            <GenericDivider label="Report" />
+
+            <DataErrorBlock v-if="error" :retry="refresh" :message="error.value?.message" />
+            <DataPendingBlock v-else-if="pending" message="Loading Troubleshoot report" />
+            <DataNoDataBlock v-else-if="!report || !report.report" />
+            <textarea
+                v-else
+                :value="report.report"
+                rows="10"
+                name="comment"
+                class="mt-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+            />
         </div>
     </div>
 </template>