feat(SFT-1608): add FM stats routes & change api url

solspace · Feb 6, 2025 · 2647942 · 2647942
1 parent 384c3a8
commit 2647942
Show file tree

Hide file tree

Showing 8 changed files with 369 additions and 19 deletions.
diff --git a/packages/client/src/app/pages/form-monitor/form-monitor.queries.ts b/packages/client/src/app/pages/form-monitor/form-monitor.queries.ts
@@ -4,6 +4,7 @@ import axios from 'axios';
 
 export const QKFormMonitor = {
   forms: ['form-monitor', 'forms'],
+  formStats: ['form-monitor', 'stats'],
   formTests: (id?: number) =>
     id !== undefined
       ? [...QKFormMonitor.forms, id, 'form-tests']
@@ -16,6 +17,32 @@ export const useFMForms = (): UseQueryResult<number[]> => {
   );
 };
 
+export const useFMFormStats = (): UseQueryResult<FormWithStats[]> => {
+  return useQuery(QKFormMonitor.formStats, () =>
+    axios
+      .get<FormWithStats[]>('/api/form-monitor/stats')
+      .then((res) => res.data)
+  );
+};
+
+interface FormStats {
+  success: number;
+  failed: number;
+  pending: number;
+  total: number;
+  percentage: {
+    success: number;
+    failed: number;
+    pending: number;
+  };
+}
+
+export interface FormWithStats {
+  formId: number;
+  formUrl: string;
+  stats: FormStats;
+}
+
 type FMTest = {
   id: string;
   formId: number;
@@ -26,7 +53,10 @@ type FMTest = {
   responseCode: number;
 };
 
-type FMTestsResponse = FMTest[];
+type FMTestsResponse = {
+  tests: FMTest[];
+  total: number;
+};
 
 export const useFMFormTestsQuery = (
   id?: number

diff --git a/packages/client/src/app/pages/form-monitor/form-monitor.styles.tsx b/packages/client/src/app/pages/form-monitor/form-monitor.styles.tsx
@@ -1,9 +1,11 @@
 import type { PropsWithChildren } from 'react';
 import React from 'react';
+import { Link } from 'react-router-dom';
 import { Breadcrumb } from '@components/breadcrumbs/breadcrumbs';
 import { ContentContainer } from '@components/layout/blocks/content-container';
 import { HeaderContainer } from '@components/layout/blocks/header-container';
 import { colors } from '@ff-client/styles/variables';
+import { spacings } from '@ff-client/styles/variables';
 import translate from '@ff-client/utils/translations';
 import styled from 'styled-components';
 
@@ -22,7 +24,7 @@ export const FormMonitorWrapper: React.FC<PropsWithChildren> = ({
 
       <div id="main-content">
         <ContentContainer>
-          <div id="content">{children}</div>
+          <LayoutContainer id="content">{children}</LayoutContainer>
         </ContentContainer>
       </div>
     </div>
@@ -67,3 +69,91 @@ export const StatusBadge = styled.div`
     background-color: ${colors.red500};
   }
 `;
+
+export const Cards = styled.ul`
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: ${spacings.lg};
+`;
+
+export const Card = styled(Link)`
+  border: 1px solid ${colors.gray200};
+  border-radius: 5px;
+
+  &:hover {
+    background-color: ${colors.gray050};
+    text-decoration: none;
+  }
+`;
+
+export const CardContent = styled.div`
+  display: flex;
+  justify-content: space-between;
+  border-radius: 5px;
+`;
+
+export const FormCardContent = styled.div`
+  padding: ${spacings.xl} ${spacings.xl};
+`;
+
+export const Title = styled.h2`
+  cursor: pointer;
+
+  color: #3d464e;
+
+  font-size: 20px;
+  font-weight: 700;
+  text-align: left;
+
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  transition: all 0.2s ease-out;
+
+  &:hover {
+    border: none;
+  }
+`;
+
+export const StatsChartContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${spacings.md};
+  padding: ${spacings.md};
+`;
+
+export const Legend = styled.div`
+  display: flex;
+  gap: ${spacings.lg};
+  margin-top: ${spacings.md};
+`;
+
+export const LegendItem = styled.div<{ color: string }>`
+  display: flex;
+  align-items: center;
+  gap: ${spacings.xs};
+
+  &:before {
+    content: '';
+    display: block;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background-color: ${(props) => props.color};
+  }
+`;
+
+export const LayoutContainer = styled.div`
+  gap: ${spacings.xl};
+  align-items: flex-start;
+
+  ${Cards} {
+    flex: 2;
+  }
+
+  ${StatsChartContainer} {
+    position: sticky;
+    top: ${spacings.xl};
+  }
+`;
diff --git a/packages/client/src/app/pages/form-monitor/form-monitor.tests.tsx b/packages/client/src/app/pages/form-monitor/form-monitor.tests.tsx
@@ -44,8 +44,8 @@ export const FMTests: React.FC = () => {
   return (
     <FormMonitorWrapper>
       {data === undefined && isFetching && <div>{translate('Loading...')}</div>}
-      {data && data.length === 0 && <FMEmptyTests />}
-      {data !== undefined && data.length > 0 && (
+      {data && data?.tests?.length === 0 && <FMEmptyTests />}
+      {data !== undefined && data?.tests?.length > 0 && (
         <TestTable>
           <thead>
             <tr>
@@ -57,7 +57,7 @@ export const FMTests: React.FC = () => {
             </tr>
           </thead>
           <tbody>
-            {data.map((test) => {
+            {data?.tests?.map((test) => {
               const form = forms.find((form) => form.id === test.formId);
               if (!form) {
                 return null;