feat: Adds unhealthy events reason

frontend/common/constants.ts

@@ -435,8 +435,12 @@ const Constants = {
  },
  "event_type": "FLAG_UPDATED"
 }`,
+  featureHealth: {
+    unhealthyColor: '#D35400',
+  },
   featurePanelTabs: {
     ANALYTICS: 'analytics',
+    FEATURE_HEALTH: 'feature-health',
     HISTORY: 'history',
     IDENTITY_OVERRIDES: 'identity-overrides',
     LINKS: 'links',

frontend/common/types/responses.ts

@@ -639,12 +639,27 @@ export type SAMLAttributeMapping = {
 
 export type HealthEventType = 'HEALTHY' | 'UNHEALTHY'
 
+export type FeatureHealthEventReasonTextBlock = {
+  text: string
+  title?: string
+}
+
+export type FeatureHealthEventReasonUrlBlock = {
+  url: string
+  title?: string
+}
+
+export type HealthEventReason = {
+  text_blocks: FeatureHealthEventReasonTextBlock[]
+  url_blocks: FeatureHealthEventReasonUrlBlock[]
+}
+
 export type HealthEvent = {
   created_at: string
   environment: number
   feature: number
   provider_name: string
-  reason: string
+  reason: HealthEventReason | null
   type: HealthEventType
 }
 

frontend/web/components/CondensedFeatureRow.tsx

@@ -9,6 +9,7 @@ import FeatureValue from './FeatureValue'
 import SegmentOverridesIcon from './SegmentOverridesIcon'
 import IdentityOverridesIcon from './IdentityOverridesIcon'
 import Constants from 'common/constants'
+import Utils from 'common/utils/utils'
 
 export interface CondensedFeatureRowProps {
   disableControls?: boolean
@@ -27,6 +28,7 @@ export interface CondensedFeatureRowProps {
   isCompact?: boolean
   fadeEnabled?: boolean
   fadeValue?: boolean
+  hasUnhealthyEvents?: boolean
   index: number
 }
 
@@ -37,6 +39,7 @@ const CondensedFeatureRow: React.FC<CondensedFeatureRowProps> = ({
   environmentFlags,
   fadeEnabled,
   fadeValue,
+  hasUnhealthyEvents,
   index,
   isCompact,
   onChange,
@@ -53,7 +56,14 @@ const CondensedFeatureRow: React.FC<CondensedFeatureRowProps> = ({
     <Flex
       onClick={() => {
         if (disableControls) return
-        !readOnly && editFeature(projectFlag, environmentFlags?.[id])
+        !readOnly &&
+          editFeature(
+            projectFlag,
+            environmentFlags?.[id],
+            hasUnhealthyEvents
+              ? Constants.featurePanelTabs.FEATURE_HEALTH
+              : undefined,
+          )
       }}
       style={{ ...style }}
       className={classNames('flex-row', { 'fs-small': isCompact }, className)}

frontend/web/components/EditHealthProvider.tsx

@@ -12,6 +12,7 @@ import {
   useGetHealthProvidersQuery,
 } from 'common/services/useHealthProvider'
 import { components } from 'react-select'
+import InfoMessage from './InfoMessage'
 
 type EditHealthProviderType = {
   projectId: number
@@ -32,7 +33,6 @@ const CreateHealthProviderForm = ({ projectId }: { projectId: number }) => {
   const [createProvider, { error, isError, isLoading, isSuccess }] =
     useCreateHealthProviderMutation()
 
-  // TODO: Replace from list of provider options from API
   const providers = [{ name: 'Sample' }, { name: 'Grafana' }]
 
   const providerOptions = providers.map((provider) => ({
@@ -76,17 +76,17 @@ const CreateHealthProviderForm = ({ projectId }: { projectId: number }) => {
             options={providerOptions}
           />
         </Flex>
+        <div className='text-right'>
+          <Button
+            type='submit'
+            id='save-proj-btn'
+            disabled={isLoading || !selected}
+            className='ml-3'
+          >
+            {isLoading ? 'Creating' : 'Create'}
+          </Button>
+        </div>
       </Row>
-      <div className='text-right mt-4'>
-        <Button
-          type='submit'
-          id='save-proj-btn'
-          disabled={isLoading || !selected}
-          className='ml-3'
-        >
-          {isLoading ? 'Creating' : 'Create'}
-        </Button>
-      </div>
     </form>
   )
 }
@@ -137,13 +137,38 @@ const EditHealthProvider: FC<EditHealthProviderType> = ({
         unhealthy state in different environments.{' '}
         <Button
           theme='text'
-          href='' // TODO: Add docs
+          href='https://docs.flagsmith.com/advanced-use/feature-health'
           target='_blank'
           className='fw-normal'
         >
           Learn about Feature Health.
         </Button>
       </p>
+      <InfoMessage>
+        <div>
+          <strong>
+            Follow the documentation to configure alerting using the supported
+            providers.
+          </strong>
+        </div>
+        <div>
+          <span>
+            Sample provider:{' '}
+            <a href='https://docs.flagsmith.com/advanced-use/feature-health#sample-provider'>
+              https://docs.flagsmith.com/advanced-use/feature-health#sample-provider
+            </a>
+          </span>
+        </div>
+        <div>
+          <span>
+            Grafana provider:{' '}
+            <a href='https://docs.flagsmith.com/integrations/apm/grafana/#in-grafana-1'>
+              {' '}
+              https://docs.flagsmith.com/integrations/apm/grafana/#in-grafana-1
+            </a>
+          </span>
+        </div>
+      </InfoMessage>
 
       <label>Provider Name</label>
       <CreateHealthProviderForm projectId={projectId} />

frontend/web/components/FeatureRow.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect } from 'react'
+import React, { FC, useEffect, useMemo } from 'react'
 import TagValues from './tags/TagValues'
 import ConfirmToggleFeature from './modals/ConfirmToggleFeature'
 import ConfirmRemoveFeature from './modals/ConfirmRemoveFeature'
@@ -30,6 +30,7 @@ import Switch from './Switch'
 import AccountStore from 'common/stores/account-store'
 import CondensedFeatureRow from './CondensedFeatureRow'
 import { RouterChildContext } from 'react-router'
+import { useGetHealthEventsQuery } from 'common/services/useHealthEvents'
 
 interface FeatureRowProps {
   disableControls?: boolean
@@ -76,6 +77,11 @@ const FeatureRow: FC<FeatureRowProps> = ({
 }) => {
   const protectedTags = useProtectedTags(projectFlag, projectId)
 
+  const { data: healthEvents } = useGetHealthEventsQuery(
+    { projectId: String(projectFlag.project) },
+    { skip: !projectFlag?.project },
+  )
+
   useEffect(() => {
     const { feature } = Utils.fromParam()
     const { id } = projectFlag
@@ -89,6 +95,15 @@ const FeatureRow: FC<FeatureRowProps> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [environmentFlags, projectFlag])
 
+  const featureUnhealthyEvents = useMemo(
+    () =>
+      healthEvents?.filter(
+        (event) =>
+          event.type === 'UNHEALTHY' && event.feature === projectFlag.id,
+      ),
+    [healthEvents, projectFlag],
+  )
+
   const copyFeature = () => {
     Utils.copyToClipboard(projectFlag.name)
   }
@@ -168,6 +183,9 @@ const FeatureRow: FC<FeatureRowProps> = ({
       </Row>,
       <CreateFlagModal
         hideTagsByType={['UNHEALTHY']}
+        hasUnhealthyEvents={
+          isFeatureHealthEnabled && featureUnhealthyEvents?.length
+        }
         history={history}
         environmentId={environmentId}
         projectId={projectId}
@@ -187,6 +205,14 @@ const FeatureRow: FC<FeatureRowProps> = ({
     )
   }
 
+  const openFeatureHealthTab = (id: number) => {
+    editFeature(
+      projectFlag,
+      environmentFlags?.[id],
+      Constants.featurePanelTabs.FEATURE_HEALTH,
+    )
+  }
+
   const isReadOnly = readOnly || Utils.getFlagsmithHasFeature('read_only_mode')
   const isFeatureHealthEnabled = Utils.getFlagsmithHasFeature('feature_health')
 
@@ -208,6 +234,9 @@ const FeatureRow: FC<FeatureRowProps> = ({
         environmentFlags={environmentFlags}
         permission={permission}
         editFeature={editFeature}
+        hasUnhealthyEvents={
+          isFeatureHealthEnabled && featureUnhealthyEvents?.length
+        }
         onChange={onChange}
         style={style}
         className={className}
@@ -302,19 +331,39 @@ const FeatureRow: FC<FeatureRowProps> = ({
                   }
                 </Tooltip>
               )}
-              <TagValues projectId={`${projectId}`} value={projectFlag.tags}>
+              <TagValues
+                projectId={`${projectId}`}
+                value={projectFlag.tags}
+                onClick={(tag) => {
+                  if (tag?.type === 'UNHEALTHY') {
+                    openFeatureHealthTab(id)
+                  }
+                }}
+              >
                 {projectFlag.is_archived && (
                   <Tag className='chip--xs' tag={Constants.archivedTag} />
                 )}
               </TagValues>
               {!!isCompact && <StaleFlagWarning projectFlag={projectFlag} />}
               {isFeatureHealthEnabled && !!isCompact && (
-                <UnhealthyFlagWarning projectFlag={projectFlag} />
+                <UnhealthyFlagWarning
+                  featureUnhealthyEvents={featureUnhealthyEvents}
+                  onClick={(e) => {
+                    e?.stopPropagation()
+                    openFeatureHealthTab(id)
+                  }}
+                />
               )}
             </Row>
             {!isCompact && <StaleFlagWarning projectFlag={projectFlag} />}
             {isFeatureHealthEnabled && !isCompact && (
-              <UnhealthyFlagWarning projectFlag={projectFlag} />
+              <UnhealthyFlagWarning
+                featureUnhealthyEvents={featureUnhealthyEvents}
+                onClick={(e) => {
+                  e?.stopPropagation()
+                  openFeatureHealthTab(id)
+                }}
+              />
             )}
             {description && !isCompact && (
               <div

frontend/web/components/UnhealthyFlagWarning.tsx

@@ -1,51 +1,38 @@
 import { FC } from 'react'
 import Constants from 'common/constants'
-import { ProjectFlag } from 'common/types/responses'
+import { HealthEvent } from 'common/types/responses'
 import { IonIcon } from '@ionic/react'
 import { warning } from 'ionicons/icons'
-import { useGetTagsQuery } from 'common/services/useTag'
-import { useGetHealthEventsQuery } from 'common/services/useHealthEvents'
 
 type UnhealthyFlagWarningType = {
-  projectFlag: ProjectFlag
+  featureUnhealthyEvents?: HealthEvent[]
+  onClick?: (e?: React.MouseEvent) => void
 }
 
 const UnhealthyFlagWarning: FC<UnhealthyFlagWarningType> = ({
-  projectFlag,
+  featureUnhealthyEvents,
+  onClick,
 }) => {
-  const { data: tags } = useGetTagsQuery(
-    { projectId: String(projectFlag.project) },
-    { refetchOnFocus: false, skip: !projectFlag?.project },
-  )
-  const { data: healthEvents } = useGetHealthEventsQuery(
-    { projectId: String(projectFlag.project) },
-    { refetchOnFocus: false, skip: !projectFlag?.project },
-  )
-  const unhealthyTagId = tags?.find((tag) => tag.type === 'UNHEALTHY')?.id
-  const latestHealthEvent = healthEvents?.find(
-    (event) => event.feature === projectFlag.id,
-  )
-
-  if (
-    !unhealthyTagId ||
-    !projectFlag?.tags?.includes(unhealthyTagId) ||
-    latestHealthEvent?.type !== 'UNHEALTHY'
-  )
-    return null
+  if (!featureUnhealthyEvents?.length) return null
 
   return (
     <Tooltip
       title={
-        <div className='fs-caption' style={{ color: Constants.tagColors[16] }}>
-          {/* TODO: Provider info and link to issue will be provided by reason via the API */}
-          {latestHealthEvent.reason}
-          {latestHealthEvent.reason && (
+        <div
+          className='fs-caption'
+          style={{ color: Constants.featureHealth.unhealthyColor }}
+          onClick={onClick}
+        >
+          <div>
+            This feature has {featureUnhealthyEvents?.length} active alert
+            {featureUnhealthyEvents?.length > 1 ? 's' : ''}. Check them in the
+            'Feature Health' tab.
             <IonIcon
               style={{ marginBottom: -2 }}
               className='ms-1'
               icon={warning}
             />
-          )}
+          </div>
         </div>
       }
     >

frontend/web/components/modals/CreateFlag.js

@@ -49,6 +49,9 @@ import FeatureHistory from 'components/FeatureHistory'
 import WarningMessage from 'components/WarningMessage'
 import { getPermission } from 'common/services/usePermission'
 import { getChangeRequests } from 'common/services/useChangeRequest'
+import FeatureHealthTabContent from './FeatureHealthTabContent'
+import { IonIcon } from '@ionic/react'
+import { warning } from 'ionicons/icons'
 
 const CreateFlag = class extends Component {
   static displayName = 'CreateFlag'
@@ -1904,6 +1907,34 @@ const CreateFlag = class extends Component {
                                     </InfoMessage>
                                   </TabItem>
                                 )}
+                                {this.props.hasUnhealthyEvents && (
+                                  <TabItem
+                                    data-test='feature_health'
+                                    tabLabelString='Feature Health'
+                                    tabLabel={
+                                      <Row
+                                        className={`inline-block justify-content-center ${
+                                          true ? 'pr-1' : ''
+                                        }`}
+                                      >
+                                        Feature Health{' '}
+                                        <IonIcon
+                                          icon={warning}
+                                          style={{
+                                            color:
+                                              Constants.featureHealth
+                                                .unhealthyColor,
+                                            marginBottom: -2,
+                                          }}
+                                        />
+                                      </Row>
+                                    }
+                                  >
+                                    <FeatureHealthTabContent
+                                      projectId={projectFlag.project}
+                                    />
+                                  </TabItem>
+                                )}
                                 {hasIntegrationWithGithub &&
                                   projectFlag?.id && (
                                     <TabItem