feat: Implements feature healthcare UI (#5043)

Author: tiagoapolo

frontend/common/services/useHealthEvents.ts

@@ -0,0 +1,44 @@
+import { Res } from 'common/types/responses'
+import { Req } from 'common/types/requests'
+import { service } from 'common/service'
+
+export const healthService = service
+  .enhanceEndpoints({ addTagTypes: ['HealthEvents'] })
+  .injectEndpoints({
+    endpoints: (builder) => ({
+      getHealthEvents: builder.query<
+        Res['healthEvents'],
+        Req['getHealthEvents']
+      >({
+        providesTags: [{ id: 'LIST', type: 'HealthEvents' }],
+        query: (query: Req['getHealthEvents']) => ({
+          url: `projects/${query.projectId}/feature-health/events/`,
+        }),
+      }),
+      // END OF ENDPOINTS
+    }),
+  })
+
+export async function getHealthEvents(
+  store: any,
+  data: Req['getHealthEvents'],
+  options?: Parameters<
+    typeof healthService.endpoints.getHealthEvents.initiate
+  >[1],
+) {
+  return store.dispatch(
+    healthService.endpoints.getHealthEvents.initiate(data, options),
+  )
+}
+
+// END OF FUNCTION_EXPORTS
+
+export const {
+  useGetHealthEventsQuery,
+  // END OF EXPORTS
+} = healthService
+
+/* Usage examples:
+const { data, isLoading } = useGetHealthEventsQuery({ id: 2 }, {}) //get hook
+healthService.endpoints.getHealthEvents.select({id: 2})(store.getState()) //access data from any function
+*/

frontend/common/services/useHealthProvider.ts

@@ -0,0 +1,95 @@
+import { Res } from 'common/types/responses'
+import { Req } from 'common/types/requests'
+import { service } from 'common/service'
+
+export const healthProviderService = service
+  .enhanceEndpoints({ addTagTypes: ['HealthProviders'] })
+  .injectEndpoints({
+    endpoints: (builder) => ({
+      createHealthProvider: builder.mutation<
+        Res['healthProvider'],
+        Req['createHealthProvider']
+      >({
+        invalidatesTags: [{ id: 'LIST', type: 'HealthProviders' }],
+        query: (query: Req['createHealthProvider']) => ({
+          body: { name: query.name },
+          method: 'POST',
+          url: `projects/${query.projectId}/feature-health/providers/`,
+        }),
+      }),
+      deleteHealthProvider: builder.mutation<void, Req['deleteHealthProvider']>(
+        {
+          invalidatesTags: [{ id: 'LIST', type: 'HealthProviders' }],
+          query: (query: Req['deleteHealthProvider']) => ({
+            method: 'DELETE',
+            url: `projects/${query.projectId}/feature-health/providers/${query.providerId}/`,
+          }),
+        },
+      ),
+      getHealthProviders: builder.query<
+        Res['healthProviders'],
+        Req['getHealthProviders']
+      >({
+        providesTags: [{ id: 'LIST', type: 'HealthProviders' }],
+        query: (query: Req['getHealthProviders']) => ({
+          url: `projects/${query.projectId}/feature-health/providers/`,
+        }),
+      }),
+      // END OF ENDPOINTS
+    }),
+  })
+
+export async function getHealthProviders(
+  store: any,
+  data: Req['getHealthProviders'],
+  options?: Parameters<
+    typeof healthProviderService.endpoints.getHealthProviders.initiate
+  >[1],
+) {
+  return store.dispatch(
+    healthProviderService.endpoints.getHealthProviders.initiate(data, options),
+  )
+}
+
+export async function createHealthProvider(
+  store: any,
+  data: Req['createHealthProvider'],
+  options?: Parameters<
+    typeof healthProviderService.endpoints.createHealthProvider.initiate
+  >[1],
+) {
+  return store.dispatch(
+    healthProviderService.endpoints.createHealthProvider.initiate(
+      data,
+      options,
+    ),
+  )
+}
+
+export async function deleteHealthProvider(
+  store: any,
+  data: Req['deleteHealthProvider'],
+  options?: Parameters<
+    typeof healthProviderService.endpoints.deleteHealthProvider.initiate
+  >[1],
+) {
+  return store.dispatch(
+    healthProviderService.endpoints.deleteHealthProvider.initiate(
+      data,
+      options,
+    ),
+  )
+}
+// END OF FUNCTION_EXPORTS
+
+export const {
+  useCreateHealthProviderMutation,
+  useDeleteHealthProviderMutation,
+  useGetHealthProvidersQuery,
+  // END OF EXPORTS
+} = healthProviderService
+
+/* Usage examples:
+const { data, isLoading } = useGetHealthProvidersQuery({ id: 2 }, {}) //get hook
+healthProviderService.endpoints.getHealthProviders.select({id: 2})(store.getState()) //access data from any function
+*/

frontend/common/services/useTag.ts

@@ -68,8 +68,7 @@ export async function getTags(
   data: Req['getTags'],
   options?: Parameters<typeof tagService.endpoints.getTags.initiate>[1],
 ) {
-  store.dispatch(tagService.endpoints.getTags.initiate(data, options))
-  return Promise.all(store.dispatch(tagService.util.getRunningQueriesThunk()))
+  return store.dispatch(tagService.endpoints.getTags.initiate(data, options))
 }
 export async function createTag(
   store: any,

frontend/common/types/requests.ts

@@ -114,6 +114,10 @@ export type Req = {
   getPermission: { id: string; level: PermissionLevel }
   getAvailablePermissions: { level: PermissionLevel }
   getTag: { id: string }
+  getHealthEvents: { projectId: number | string }
+  getHealthProviders: { projectId: number }
+  createHealthProvider: { projectId: number; name: string }
+  deleteHealthProvider: { projectId: number; providerId: number }
   updateTag: { projectId: string; tag: Tag }
   deleteTag: {
     id: number

frontend/common/types/responses.ts

@@ -352,7 +352,7 @@ export type Tag = {
   label: string
   is_system_tag: boolean
   is_permanent: boolean
-  type: 'STALE' | 'NONE'
+  type: 'STALE' | 'UNHEALTHY' | 'NONE'
 }
 
 export type MultivariateFeatureStateValue = {
@@ -637,6 +637,23 @@ export type SAMLAttributeMapping = {
   idp_attribute_name: string
 }
 
+export type HealthEvent = {
+  created_at: string
+  environment: number
+  feature: number
+  provider_name: string
+  reason: string
+  type: 'HEALTHY' | 'UNHEALTHY'
+}
+
+export type HealthProvider = {
+  id: number
+  created_by: string
+  name: string
+  project: number
+  webhook_url: number
+}
+
 export type Res = {
   segments: PagedResponse<Segment>
   segment: Segment
@@ -671,6 +688,9 @@ export type Res = {
   availablePermissions: AvailablePermission[]
   tag: Tag
   tags: Tag[]
+  healthEvents: HealthEvent[]
+  healthProvider: HealthProvider
+  healthProviders: HealthProvider[]
   account: Account
   userEmail: {}
   groupAdmin: { id: string }