feat(notification-channels): add the telegram channel form

The title lives on a SigNoz-owned receiver under telegram_configs, so stored
receivers still decode. A receiver without one sends its message alone.

.claude/rules/pytest.md

@@ -17,3 +17,4 @@ For the Python integration suite under `tests/`. Setup, running, and suite layou
 - **snake_case parametrize ids.** `ids=["fill_gaps", "fill_zero"]`, not camelCase.
 - **Name suite files with the two-digit prefix (`NN_*.py`).** `pyproject.toml` restricts collection to `[0-9][0-9]_*.py` (plus the bootstrap `setup.py` / `run.py`) — a file that doesn't match is silently never collected.
 - **Always run pytest from `tests/`.** `--import-mode=importlib` is what allows same-basename files across suites (`querier/01_logs.py` vs `rawexportdata/01_logs.py`), but it disables pytest's implicit `sys.path` injection — `import fixtures` only resolves via `pythonpath = ["."]` from that rootdir.
+- **After changing any `.py` file, run `make py-fmt` and `make py-lint`** from the repo root and fix what they report.

cmd/authz.go

@@ -93,17 +93,18 @@ func runGenerateAuthz(_ context.Context) error {
 	registry := coretypes.NewRegistry()
 
 	allowedResources := map[string]bool{
-		coretypes.NewResourceRef(coretypes.ResourceServiceAccount).String():                true,
-		coretypes.NewResourceRef(coretypes.ResourceRole).String():                          true,
-		coretypes.NewResourceRef(coretypes.ResourceMetaResourceFactorAPIKey).String():      true,
-		coretypes.NewResourceRef(coretypes.ResourceMetaResourceDashboard).String():         true,
-		coretypes.NewResourceRef(coretypes.ResourceMetaResourceLicense).String():           true,
-		coretypes.NewResourceRef(coretypes.ResourceMetaResourceSubscription).String():      true,
-		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceLogs).String():         true,
-		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceTraces).String():       true,
-		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceMetrics).String():      true,
-		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceMeterMetrics).String(): true,
-		coretypes.NewResourceRef(coretypes.ResourceMetaResourceQuickFilter).String():       true,
+		coretypes.NewResourceRef(coretypes.ResourceServiceAccount).String():                  true,
+		coretypes.NewResourceRef(coretypes.ResourceRole).String():                            true,
+		coretypes.NewResourceRef(coretypes.ResourceMetaResourceFactorAPIKey).String():        true,
+		coretypes.NewResourceRef(coretypes.ResourceMetaResourceDashboard).String():           true,
+		coretypes.NewResourceRef(coretypes.ResourceMetaResourceLicense).String():             true,
+		coretypes.NewResourceRef(coretypes.ResourceMetaResourceSubscription).String():        true,
+		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceLogs).String():           true,
+		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceTraces).String():         true,
+		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceMetrics).String():        true,
+		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceMeterMetrics).String():   true,
+		coretypes.NewResourceRef(coretypes.ResourceMetaResourceQuickFilter).String():         true,
+		coretypes.NewResourceRef(coretypes.ResourceMetaResourceNotificationChannel).String(): true,
 	}
 
 	allowedTypes := map[string]bool{}

docs/api/openapi.yml

@@ -1,5 +1,219 @@
 components:
   schemas:
+    AiobservabilitytypesBlobPart:
+      properties:
+        content:
+          type: string
+        mime_type:
+          nullable: true
+          type: string
+        modality:
+          type: string
+        type:
+          type: string
+      required:
+      - type
+      - modality
+      - content
+      type: object
+    AiobservabilitytypesChatMessage:
+      properties:
+        name:
+          nullable: true
+          type: string
+        parts:
+          $ref: '#/components/schemas/AiobservabilitytypesParts'
+        role:
+          type: string
+      required:
+      - role
+      - parts
+      type: object
+    AiobservabilitytypesCompactionPart:
+      properties:
+        content:
+          nullable: true
+          type: string
+        id:
+          nullable: true
+          type: string
+        type:
+          type: string
+      required:
+      - type
+      type: object
+    AiobservabilitytypesFilePart:
+      properties:
+        file_id:
+          type: string
+        mime_type:
+          nullable: true
+          type: string
+        modality:
+          type: string
+        type:
+          type: string
+      required:
+      - type
+      - modality
+      - file_id
+      type: object
+    AiobservabilitytypesGenericPart:
+      additionalProperties: {}
+      type: object
+    AiobservabilitytypesGenericServerToolCall:
+      additionalProperties: {}
+      type: object
+    AiobservabilitytypesGenericServerToolCallResponse:
+      additionalProperties: {}
+      type: object
+    AiobservabilitytypesInputMessages:
+      items:
+        $ref: '#/components/schemas/AiobservabilitytypesChatMessage'
+      type: array
+    AiobservabilitytypesOutputMessage:
+      properties:
+        finish_reason:
+          nullable: true
+          type: string
+        name:
+          nullable: true
+          type: string
+        parts:
+          $ref: '#/components/schemas/AiobservabilitytypesParts'
+        role:
+          type: string
+      required:
+      - role
+      - parts
+      type: object
+    AiobservabilitytypesOutputMessages:
+      items:
+        $ref: '#/components/schemas/AiobservabilitytypesOutputMessage'
+      type: array
+    AiobservabilitytypesPart:
+      discriminator:
+        mapping:
+          blob: '#/components/schemas/AiobservabilitytypesBlobPart'
+          compaction: '#/components/schemas/AiobservabilitytypesCompactionPart'
+          file: '#/components/schemas/AiobservabilitytypesFilePart'
+          reasoning: '#/components/schemas/AiobservabilitytypesReasoningPart'
+          server_tool_call: '#/components/schemas/AiobservabilitytypesServerToolCallPart'
+          server_tool_call_response: '#/components/schemas/AiobservabilitytypesServerToolCallResponsePart'
+          text: '#/components/schemas/AiobservabilitytypesTextPart'
+          tool_call: '#/components/schemas/AiobservabilitytypesToolCallRequestPart'
+          tool_call_response: '#/components/schemas/AiobservabilitytypesToolCallResponsePart'
+          uri: '#/components/schemas/AiobservabilitytypesUriPart'
+        propertyName: type
+      oneOf:
+      - $ref: '#/components/schemas/AiobservabilitytypesTextPart'
+      - $ref: '#/components/schemas/AiobservabilitytypesToolCallRequestPart'
+      - $ref: '#/components/schemas/AiobservabilitytypesToolCallResponsePart'
+      - $ref: '#/components/schemas/AiobservabilitytypesServerToolCallPart'
+      - $ref: '#/components/schemas/AiobservabilitytypesServerToolCallResponsePart'
+      - $ref: '#/components/schemas/AiobservabilitytypesBlobPart'
+      - $ref: '#/components/schemas/AiobservabilitytypesFilePart'
+      - $ref: '#/components/schemas/AiobservabilitytypesUriPart'
+      - $ref: '#/components/schemas/AiobservabilitytypesReasoningPart'
+      - $ref: '#/components/schemas/AiobservabilitytypesCompactionPart'
+      - $ref: '#/components/schemas/AiobservabilitytypesGenericPart'
+      type: object
+    AiobservabilitytypesParts:
+      items:
+        $ref: '#/components/schemas/AiobservabilitytypesPart'
+      type: array
+    AiobservabilitytypesReasoningPart:
+      properties:
+        content:
+          type: string
+        type:
+          type: string
+      required:
+      - type
+      - content
+      type: object
+    AiobservabilitytypesServerToolCallPart:
+      properties:
+        id:
+          nullable: true
+          type: string
+        name:
+          type: string
+        server_tool_call:
+          $ref: '#/components/schemas/AiobservabilitytypesGenericServerToolCall'
+        type:
+          type: string
+      required:
+      - type
+      - name
+      - server_tool_call
+      type: object
+    AiobservabilitytypesServerToolCallResponsePart:
+      properties:
+        id:
+          nullable: true
+          type: string
+        server_tool_call_response:
+          $ref: '#/components/schemas/AiobservabilitytypesGenericServerToolCallResponse'
+        type:
+          type: string
+      required:
+      - type
+      - server_tool_call_response
+      type: object
+    AiobservabilitytypesTextPart:
+      properties:
+        content:
+          type: string
+        type:
+          type: string
+      required:
+      - type
+      - content
+      type: object
+    AiobservabilitytypesToolCallRequestPart:
+      properties:
+        arguments: {}
+        id:
+          nullable: true
+          type: string
+        name:
+          type: string
+        type:
+          type: string
+      required:
+      - type
+      - name
+      type: object
+    AiobservabilitytypesToolCallResponsePart:
+      properties:
+        id:
+          nullable: true
+          type: string
+        response:
+          nullable: true
+        type:
+          type: string
+      required:
+      - type
+      - response
+      type: object
+    AiobservabilitytypesUriPart:
+      properties:
+        mime_type:
+          nullable: true
+          type: string
+        modality:
+          type: string
+        type:
+          type: string
+        uri:
+          type: string
+      required:
+      - type
+      - modality
+      - uri
+      type: object
     AlertmanagertypesChannel:
       properties:
         createdAt:
@@ -37,6 +251,7 @@ components:
           opsgenie: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelOpsgenieConfig'
           pagerduty: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelPagerdutyConfig'
           slack: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelSlackConfig'
+          telegram: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelTelegramConfig'
           webhook: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelWebhookConfig'
         propertyName: kind
       oneOf:
@@ -50,6 +265,7 @@ components:
       - $ref: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJiraConfig'
       - $ref: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJSMOpsConfig'
       - $ref: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelIncidentIOConfig'
+      - $ref: '#/components/schemas/AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelTelegramConfig'
       type: object
     AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelEmailConfig:
       properties:
@@ -159,6 +375,18 @@ components:
       - kind
       - spec
       type: object
+    AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelTelegramConfig:
+      properties:
+        kind:
+          enum:
+          - telegram
+          type: string
+        spec:
+          $ref: '#/components/schemas/AlertmanagertypesChannelTelegramConfig'
+      required:
+      - kind
+      - spec
+      type: object
     AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelWebhookConfig:
       properties:
         kind:
@@ -311,6 +539,7 @@ components:
       - jira
       - jsmops
       - incidentio
+      - telegram
       type: string
     AlertmanagertypesChannelListOrder:
       enum:
@@ -515,6 +744,31 @@ components:
       - title
       - value
       type: object
+    AlertmanagertypesChannelTelegramConfig:
+      properties:
+        apiUrl:
+          type: string
+        botToken:
+          format: password
+          type: string
+        chatId:
+          format: int64
+          type: integer
+        disableNotifications:
+          type: boolean
+        message:
+          type: string
+        messageThreadId:
+          type: integer
+        sendResolved:
+          nullable: true
+          type: boolean
+        title:
+          type: string
+      required:
+      - botToken
+      - chatId
+      type: object
     AlertmanagertypesChannelWebhookConfig:
       properties:
         bearerToken:
@@ -808,6 +1062,8 @@ components:
         - jsmops_configs
       - required:
         - incidentio_configs
+      - required:
+        - telegram_configs
       - required:
         - discord_configs
       - required:
@@ -828,8 +1084,6 @@ components:
         - victorops_configs
       - required:
         - sns_configs
-      - required:
-        - telegram_configs
       - required:
         - webex_configs
       - required:
@@ -905,7 +1159,7 @@ components:
           type: array
         telegram_configs:
           items:
-            $ref: '#/components/schemas/ConfigTelegramConfig'
+            $ref: '#/components/schemas/AlertmanagertypesTelegramReceiverConfig'
           type: array
         victorops_configs:
           items:
@@ -1049,7 +1303,7 @@ components:
           type: array
         telegram_configs:
           items:
-            $ref: '#/components/schemas/ConfigTelegramConfig'
+            $ref: '#/components/schemas/AlertmanagertypesTelegramReceiverConfig'
           type: array
         victorops_configs:
           items:
@@ -1120,6 +1374,34 @@ components:
       - timezone
       - startTime
       type: object
+    AlertmanagertypesTelegramReceiverConfig:
+      properties:
+        api_url:
+          $ref: '#/components/schemas/ConfigURLType2'
+        chat:
+          format: int64
+          type: integer
+        chat_file:
+          type: string
+        disable_notifications:
+          type: boolean
+        http_config:
+          $ref: '#/components/schemas/ConfigHTTPClientConfig'
+        message:
+          type: string
+        message_thread_id:
+          type: integer
+        parse_mode:
+          type: string
+        send_resolved:
+          type: boolean
+        title:
+          type: string
+        token:
+          type: string
+        token_file:
+          type: string
+      type: object
     AlertmanagertypesTestableNotificationChannel:
       properties:
         config:
@@ -3367,6 +3649,69 @@ components:
         repeatVariable:
           type: string
       type: object
+    DashboardtypesAIBuilderQuerySpec:
+      properties:
+        aggregations:
+          items:
+            $ref: '#/components/schemas/Querybuildertypesv5TraceAggregation'
+          nullable: true
+          type: array
+        bucketOptions:
+          $ref: '#/components/schemas/Querybuildertypesv5BucketOptions'
+        cursor:
+          type: string
+        disabled:
+          type: boolean
+        filter:
+          $ref: '#/components/schemas/Querybuildertypesv5Filter'
+        functions:
+          items:
+            $ref: '#/components/schemas/Querybuildertypesv5Function'
+          nullable: true
+          type: array
+        groupBy:
+          items:
+            $ref: '#/components/schemas/Querybuildertypesv5GroupByKey'
+          nullable: true
+          type: array
+        having:
+          $ref: '#/components/schemas/Querybuildertypesv5Having'
+        legend:
+          type: string
+        limit:
+          type: integer
+        limitBy:
+          $ref: '#/components/schemas/Querybuildertypesv5LimitBy'
+        name:
+          type: string
+        offset:
+          type: integer
+        order:
+          items:
+            $ref: '#/components/schemas/Querybuildertypesv5OrderBy'
+          nullable: true
+          type: array
+        secondaryAggregations:
+          items:
+            $ref: '#/components/schemas/Querybuildertypesv5SecondaryAggregation'
+          nullable: true
+          type: array
+        selectFields:
+          items:
+            $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
+          nullable: true
+          type: array
+        signal:
+          enum:
+          - traces
+          type: string
+        source:
+          $ref: '#/components/schemas/TelemetrytypesSource'
+        stepInterval:
+          $ref: '#/components/schemas/Querybuildertypesv5Step'
+      required:
+      - signal
+      type: object
     DashboardtypesAreaChartAppearance:
       properties:
         fillMode:
@@ -4420,6 +4765,7 @@ components:
     DashboardtypesQueryPlugin:
       discriminator:
         mapping:
+          signoz/AIBuilderQuery: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAIBuilderQuerySpec'
           signoz/BuilderQuery: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBuilderQuerySpec'
           signoz/ClickHouseSQL: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5ClickHouseQuery'
           signoz/CompositeQuery: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5CompositeQuery'
@@ -4429,6 +4775,7 @@ components:
         propertyName: kind
       oneOf:
       - $ref: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBuilderQuerySpec'
+      - $ref: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAIBuilderQuerySpec'
       - $ref: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5CompositeQuery'
       - $ref: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5QueryBuilderFormula'
       - $ref: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5PromQuery'
@@ -4438,12 +4785,25 @@ components:
     DashboardtypesQueryPluginKind:
       enum:
       - signoz/BuilderQuery
+      - signoz/AIBuilderQuery
       - signoz/CompositeQuery
       - signoz/Formula
       - signoz/PromQLQuery
       - signoz/ClickHouseSQL
       - signoz/TraceOperator
       type: string
+    DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAIBuilderQuerySpec:
+      properties:
+        kind:
+          enum:
+          - signoz/AIBuilderQuery
+          type: string
+        spec:
+          $ref: '#/components/schemas/DashboardtypesAIBuilderQuerySpec'
+      required:
+      - kind
+      - spec
+      type: object
     DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBuilderQuerySpec:
       properties:
         kind:
@@ -10225,6 +10585,16 @@ components:
           items:
             $ref: '#/components/schemas/SpantypesEvent'
           type: array
+        formatted_input:
+          $ref: '#/components/schemas/AiobservabilitytypesInputMessages'
+        formatted_output:
+          $ref: '#/components/schemas/AiobservabilitytypesOutputMessages'
+        formatter:
+          type: string
+        formatter_warnings:
+          items:
+            type: string
+          type: array
         has_error:
           type: boolean
         kind_string:
@@ -10267,6 +10637,10 @@ components:
       - attributes
       - events
       - references
+      - formatted_input
+      - formatted_output
+      - formatter
+      - formatter_warnings
       type: object
     SpantypesTraceAISummary:
       properties:
@@ -16134,9 +16508,12 @@ paths:
   /api/v1/traces/{traceID}/thread:
     get:
       deprecated: false
-      description: Returns the spans carrying gen_ai input or output messages in timestamp
-        order. Pass nextCursor as after or prevCursor as before to page, or spanId
-        to open the page around a span.
+      description: Returns the spans carrying gen_ai input or output messages, or
+        a tool execution, in timestamp order. Messages already in the OTel GenAI shape
+        are decoded into formatted_input and formatted_output, with formatter naming
+        the converter and formatter_warnings what it could not resolve. Pass nextCursor
+        as after or prevCursor as before to page, or spanId to open the page around
+        a span.
       operationId: GetTraceThread
       parameters:
       - description: Page size, at most 100. 0 means 20.

ee/query-service/rules/anomaly.go

@@ -277,10 +277,7 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (int, error) {
 		lb.Set(ruletypes.AlertRuleIDLabel, r.ID())
 		lb.Set(ruletypes.RuleSourceLabel, r.GeneratorURL())
 
-		annotations := make(ruletypes.Labels, 0, len(r.Annotations().Map()))
-		for name, value := range r.Annotations().Map() {
-			annotations = append(annotations, ruletypes.Label{Name: name, Value: expand(value)})
-		}
+		annotations := r.ExpandAnnotations(expand)
 		if smpl.IsMissing {
 			lb.Set(ruletypes.AlertNameLabel, "[No data] "+r.Name())
 			lb.Set(ruletypes.NoDataLabel, "true")

frontend/public/locales/en-GB/channels.json

@@ -136,5 +136,25 @@
   "slack_channel_help": "Specify channel or user, use #channel-name, @username (has to be all lowercase, no whitespace)",
   "api_key_required": "API Key is mandatory",
 	"to_required": "To field is mandatory",
-	"channel_name_required": "Channel name is mandatory"
-}
+	"channel_name_required": "Channel name is mandatory",
+  "channel_read_only_title": "You can view this channel but not change it",
+  "channel_read_only_help": "Changing a channel needs update permission on it. Ask an admin to grant it, or open the channel read-only.",
+  "telegram_tip": "Create a bot with @BotFather, add it to the chat, then paste its token and the chat's numeric id below.",
+  "telegram_tip_link": "Learn how",
+  "field_telegram_bot_token": "Bot token",
+  "help_telegram_bot_token": "The token BotFather returns, in the form 123456789:AA… .",
+  "field_telegram_chat_id": "Chat ID",
+  "help_telegram_chat_id": "The numeric chat the bot posts to, negative for groups and channels. Telegram's @username form is not accepted.",
+  "placeholder_telegram_chat_id": "e.g. -1001234567890",
+  "field_telegram_message_thread_id": "Topic ID (optional)",
+  "help_telegram_message_thread_id": "Posts into one topic of a forum group. Leave empty to post in the group itself.",
+  "field_telegram_message": "Message",
+  "help_telegram_message": "Template for the message body. Telegram HTML, so interpolated values are escaped.",
+  "field_telegram_api_url": "Bot API URL (optional)",
+  "help_telegram_api_url": "Point at a self-hosted Bot API server. Leave empty to use Telegram's.",
+  "field_telegram_disable_notifications": "Send silently",
+  "help_telegram_disable_notifications": "Delivers without a sound or vibration on the recipients' devices.",
+  "telegram_required_fields": "Bot token and chat ID are required",
+  "field_telegram_title": "Title",
+  "help_telegram_title": "Sent in bold above the message. Telegram HTML, so interpolated values are escaped."
+}

frontend/public/locales/en/channels.json

@@ -15,14 +15,104 @@
   "button_test_channel": "Test",
   "button_return": "Back",
   "field_channel_name": "Name",
+  "help_channel_name_immutable": "Renaming is blocked while alert rules and routing policies still reference a channel by name.",
   "field_send_resolved": "Send resolved alerts",
   "field_channel_type": "Type",
+  "channel_creation_done": "Successfully created the channel",
+  "channel_creation_failed": "An unexpected error occurred while creating this channel",
+  "channel_edit_done": "Channels Edited Successfully",
+  "channel_edit_failed": "An unexpected error occurred while updating this channel",
+  "selected_channel_invalid": "Channel type selected is invalid",
+  "username_no_password": "A Password must be provided with user name",
+  "test_unsupported": "Sorry, this channel type does not support test yet",
+  "channel_test_done": "An alert has been sent to this channel",
+  "channel_test_failed": "Failed to send a test message to this channel, please confirm that the parameters are set correctly",
+  "channel_test_unexpected": "An unexpected error occurred while sending a message to this channel, please try again",
+  "api_key_required": "API Key is mandatory",
+  "to_required": "To field is mandatory",
+  "channel_name_required": "Channel name is mandatory",
+  "page_title_view": "View Notification Channel",
+  "routing_key_required": "Routing Key is mandatory for creating pagerduty channel",
+  "tooltip_slack_url": "The URL of the slack [incoming webhook](https://docs.slack.dev/messaging/sending-messages-using-incoming-webhooks/) to send alerts to. Learn more about slack integration in the docs [here](https://signoz.io/docs/alerts-management/notification-channel/slack/).",
+  "field_slack_recipient": "Recipient",
+  "field_slack_title": "Title",
+  "field_slack_description": "Description",
+  "placeholder_slack_description": "Description",
+  "slack_channel_help": "Specify channel or user, use #channel-name, @username (has to be all lowercase, no whitespace)",
+  "field_slack_title_link": "Title link",
+  "field_slack_color": "Color",
+  "help_slack_color": "good, warning, danger, or a hex value like #439FE0. Templates are allowed.",
+  "placeholder_slack_color": "{{ if eq .Status \"firing\" }}danger{{ else }}good{{ end }}",
+  "field_slack_pretext": "Pretext",
+  "help_slack_pretext": "Shown above the attachment block",
+  "field_slack_fallback": "Fallback text",
+  "help_slack_fallback": "Plain text shown where the attachment cannot render, such as push notifications",
+  "field_slack_footer": "Footer",
+  "field_slack_fields": "Fields",
+  "help_slack_fields": "Extra entries rendered as a table inside the attachment",
+  "placeholder_slack_field_title": "Title",
+  "placeholder_slack_field_value": "Value",
+  "field_slack_field_short": "Short",
+  "add_slack_field": "Add field",
+  "remove_slack_field": "Remove field",
+  "field_slack_actions": "Actions",
+  "help_slack_actions": "Buttons rendered under the attachment. A button with a URL links out.",
+  "placeholder_slack_action_text": "Button text",
+  "placeholder_slack_action_url": "https://runbook.example.com",
+  "placeholder_slack_action_type": "button",
+  "placeholder_slack_action_name": "Name (Slack app callbacks)",
+  "placeholder_slack_action_value": "Value (Slack app callbacks)",
+  "placeholder_slack_action_style": "Style: default, primary or danger",
+  "placeholder_slack_action_confirm": "Confirmation prompt (optional)",
+  "add_slack_action": "Add action",
+  "remove_slack_action": "Remove action",
+  "tooltip_email_to": "Enter email addresses separated by commas.",
+  "help_email_to": "Email address(es) to send alerts to (comma separated)",
+  "field_email_to": "To",
+  "placeholder_email_to": "To",
+  "help_email_html": "Send email in html format",
+  "field_email_html": "Email body template",
+  "placeholder_email_html": "Email body template",
   "field_webhook_url": "Webhook URL",
   "tooltip_webhook_url": "The URL of the webhook to send alerts to. Learn more about webhook integration in the docs [here](https://signoz.io/docs/alerts-management/notification-channel/webhook/). Integrates with [Incident.io](https://signoz.io/docs/alerts-management/notification-channel/incident-io/), [Rootly](https://signoz.io/docs/alerts-management/notification-channel/rootly/), [Zenduty](https://signoz.io/docs/alerts-management/notification-channel/zenduty/) and [more](https://signoz.io/docs/alerts-management/notification-channel/webhook/#my-incident-management-tool-is-not-listed-can-i-still-integrate).",
-  "tooltip_slack_url": "The URL of the slack [incoming webhook](https://docs.slack.dev/messaging/sending-messages-using-incoming-webhooks/) to send alerts to. Learn more about slack integration in the docs [here](https://signoz.io/docs/alerts-management/notification-channel/slack/).",
+  "field_webhook_username": "User Name (optional)",
+  "field_webhook_password": "Password (optional)",
+  "help_webhook_username": "Leave empty for bearer auth or when authentication is not necessary.",
+  "help_webhook_password": "Specify a password or bearer token",
+  "webhook_url_required": "Webhook URL is mandatory",
+  "field_webhook_bearer_token": "Bearer token (optional)",
+  "help_webhook_bearer_token": "Sent as an Authorization: Bearer header. Leave the username and password empty when using it.",
   "tooltip_pager_routing_key": "Learn how to obtain the routing key from your PagerDuty account [here](https://signoz.io/docs/alerts-management/notification-channel/pagerduty/#obtaining-integration-or-routing-key).",
+  "field_pager_routing_key": "Routing Key",
+  "field_pager_description": "Description",
+  "field_pager_severity": "Severity",
+  "field_pager_details": "Additional Information",
+  "field_pager_component": "Component",
+  "field_pager_group": "Group",
+  "field_pager_class": "Class",
+  "field_pager_client": "Client",
+  "field_pager_client_url": "Client URL",
+  "placeholder_pager_description": "Description",
+  "help_pager_client": "Shows up as event source in Pagerduty",
+  "help_pager_client_url": "Shows up as event source link in Pagerduty",
+  "help_pager_class": "The class/type of the event",
+  "help_pager_details": "Specify a key-value format (must be a valid json)",
+  "help_pager_group": "A cluster or grouping of sources",
+  "help_pager_component": "The part or component of the affected system that is broke",
+  "help_pager_severity": "Severity of the incident, must be one of: must be one of the following: 'critical', 'warning', 'error' or 'info'",
+  "help_pager_description": "Shows up as description in pagerduty",
+  "pager_details_invalid_json": "Enter valid JSON, or clear the box to send no details",
   "tooltip_opsgenie_api_key": "Learn how to obtain the API key from your OpsGenie account [here](https://support.atlassian.com/opsgenie/docs/integrate-opsgenie-with-prometheus/).",
-  "tooltip_email_to": "Enter email addresses separated by commas.",
+  "field_opsgenie_api_key": "API Key",
+  "field_opsgenie_description": "Description",
+  "placeholder_opsgenie_description": "Description",
+  "field_opsgenie_message": "Message",
+  "field_opsgenie_priority": "Priority",
+  "placeholder_opsgenie_message": "Message",
+  "placeholder_opsgenie_priority": "Priority",
+  "help_opsgenie_message": "Shows up as message in opsgenie",
+  "help_opsgenie_priority": "Priority of the incident",
+  "help_opsgenie_description": "Shows up as description in opsgenie",
   "tooltip_ms_teams_url": "The URL of the Microsoft Teams [webhook](https://support.microsoft.com/en-us/office/create-incoming-webhooks-with-workflows-for-microsoft-teams-8ae491c7-0394-4861-ba59-055e33f75498) to send alerts to. Learn more about Microsoft Teams integration in the docs [here](https://signoz.io/docs/alerts-management/notification-channel/ms-teams/).",
   "tooltip_google_chat_url": "The URL of the Google Chat space [incoming webhook](https://developers.google.com/workspace/chat/quickstart/webhooks) to send alerts to. It must be an https URL on chat.googleapis.com.",
   "google_chat_webhook_url_invalid": "Webhook URL must be an https URL on chat.googleapis.com",
@@ -78,78 +168,41 @@
   "field_jsmops_tags": "Tags",
   "placeholder_jsmops_tags": "Type a tag and press Enter",
   "help_jsmops_tags": "Tags added to every alert.",
-  "incidentio_tip": "Create an HTTP alert source in incident.io (On-call \u2192 Alert routing \u2192 Sources) and paste its URL and token below.",
+  "incidentio_tip": "Create an HTTP alert source in incident.io (On-call → Alert routing → Sources) and paste its URL and token below.",
   "incidentio_tip_link": "Learn how",
   "field_incidentio_url": "Alert source URL",
   "help_incidentio_url": "The alert events URL from the source's setup page, e.g. https://api.incident.io/v2/alert_events/http/<source_config_id>.",
   "field_incidentio_token": "Token",
   "help_incidentio_token": "The alert source's secret token, from the same setup page.",
   "field_incidentio_title": "Title",
-  "help_incidentio_title": "Template for the alert title. Kept stable while the alert fires \u2014 incident.io ignores content updates on repeat events.",
+  "help_incidentio_title": "Template for the alert title. Kept stable while the alert fires — incident.io ignores content updates on repeat events.",
   "field_incidentio_description": "Description",
   "help_incidentio_description": "Template for the alert description. Markdown, rendered natively by incident.io.",
   "incidentio_required_fields": "Alert source URL and token are required",
+  "telegram_required_fields": "Bot token and chat ID are required",
   "incidentio_url_invalid": "URL must be an incident.io alert events URL (https://api.incident.io/v2/alert_events/http/<source_config_id>)",
   "field_incidentio_metadata": "Additional metadata",
   "help_incidentio_metadata": "Key-value pairs added to every alert's metadata, on top of the alert's labels (these win on a key clash). Values may use templates, e.g. {{ .CommonLabels.severity }}.",
   "placeholder_incidentio_metadata_key": "Key",
   "placeholder_incidentio_metadata_value": "Value",
   "button_incidentio_add_metadata": "Add metadata",
-  "field_slack_recipient": "Recipient",
-  "field_slack_title": "Title",
-  "field_slack_description": "Description",
-  "field_opsgenie_api_key": "API Key",
-  "field_opsgenie_description": "Description",
-  "placeholder_opsgenie_description": "Description",
-  "help_email_to": "Email address(es) to send alerts to (comma separated)",
-  "field_email_to": "To",
-  "placeholder_email_to": "To",
-  "help_email_html": "Send email in html format",
-  "field_email_html": "Email body template",
-  "placeholder_email_html": "Email body template",
-  "field_webhook_username": "User Name (optional)",
-  "field_webhook_password": "Password (optional)",
-  "field_pager_routing_key": "Routing Key",
-  "field_pager_description": "Description",
-  "field_pager_severity": "Severity",
-  "field_pager_details": "Additional Information",
-  "field_pager_component": "Component",
-  "field_pager_group": "Group",
-  "field_pager_class": "Class",
-  "field_pager_client": "Client",
-  "field_pager_client_url": "Client URL",
-  "field_opsgenie_message": "Message",
-  "field_opsgenie_priority": "Priority",
-  "placeholder_slack_description": "Description",
-  "placeholder_pager_description": "Description",
-  "placeholder_opsgenie_message": "Message",
-  "placeholder_opsgenie_priority": "Priority",
-  "help_pager_client": "Shows up as event source in Pagerduty",
-  "help_pager_client_url": "Shows up as event source link in Pagerduty",
-  "help_pager_class": "The class/type of the event",
-  "help_pager_details": "Specify a key-value format (must be a valid json)",
-  "help_pager_group": "A cluster or grouping of sources",
-  "help_pager_component": "The part or component of the affected system that is broke",
-  "help_pager_severity": "Severity of the incident, must be one of: must be one of the following: 'critical', 'warning', 'error' or 'info'",
-  "help_webhook_username": "Leave empty for bearer auth or when authentication is not necessary.",
-  "help_webhook_password": "Specify a password or bearer token",
-  "help_pager_description": "Shows up as description in pagerduty",
-  "help_opsgenie_message": "Shows up as message in opsgenie",
-  "help_opsgenie_priority": "Priority of the incident",
-  "help_opsgenie_description": "Shows up as description in opsgenie",
-  "channel_creation_done": "Successfully created the channel",
-  "channel_creation_failed": "An unexpected error occurred while creating this channel",
-  "channel_edit_done": "Channels Edited Successfully",
-  "channel_edit_failed": "An unexpected error occurred while updating this channel",
-  "selected_channel_invalid": "Channel type selected is invalid",
-  "username_no_password": "A Password must be provided with user name",
-  "test_unsupported": "Sorry, this channel type does not support test yet",
-  "channel_test_done": "An alert has been sent to this channel",
-  "channel_test_failed": "Failed to send a test message to this channel, please confirm that the parameters are set correctly",
-  "channel_test_unexpected": "An unexpected error occurred while sending a message to this channel, please try again",
-  "webhook_url_required": "Webhook URL is mandatory",
-  "slack_channel_help": "Specify channel or user, use #channel-name, @username (has to be all lowercase, no whitespace)",
-  "api_key_required": "API Key is mandatory",
-	"to_required": "To field is mandatory",
-	"channel_name_required": "Channel name is mandatory"
-}
+  "channel_read_only_title": "You can view this channel but not change it",
+  "channel_read_only_help": "Changing a channel needs update permission on it. Ask an admin to grant it, or open the channel read-only.",
+  "telegram_tip": "Create a bot with @BotFather, add it to the chat, then paste its token and the chat's numeric id below.",
+  "telegram_tip_link": "Learn how",
+  "field_telegram_bot_token": "Bot token",
+  "help_telegram_bot_token": "The token BotFather returns, in the form 123456789:AA… .",
+  "field_telegram_chat_id": "Chat ID",
+  "help_telegram_chat_id": "The numeric chat the bot posts to, negative for groups and channels. Telegram's @username form is not accepted.",
+  "placeholder_telegram_chat_id": "e.g. -1001234567890",
+  "field_telegram_message_thread_id": "Topic ID (optional)",
+  "help_telegram_message_thread_id": "Posts into one topic of a forum group. Leave empty to post in the group itself.",
+  "field_telegram_message": "Message",
+  "help_telegram_message": "Template for the message body. Telegram HTML, so interpolated values are escaped.",
+  "field_telegram_api_url": "Bot API URL (optional)",
+  "help_telegram_api_url": "Point at a self-hosted Bot API server. Leave empty to use Telegram's.",
+  "field_telegram_disable_notifications": "Send silently",
+  "help_telegram_disable_notifications": "Delivers without a sound or vibration on the recipients' devices.",
+  "field_telegram_title": "Title",
+  "help_telegram_title": "Sent in bold above the message. Telegram HTML, so interpolated values are escaped."
+}

frontend/src/AppRoutes/__tests__/Private.test.tsx

@@ -1454,10 +1454,9 @@ describe('PrivateRoute', () => {
 			await assertRedirectsTo(ROUTES.UN_AUTHORIZED);
 		});
 
-		it('should redirect VIEWER from /alerts/channels/new (ADMIN only)', async () => {
-			// After moving channels under /alerts, CHANNELS_NEW ('/alerts/channels/new')
-			// is an exact, ADMIN-only route with no overlapping non-exact ALL_CHANNELS
-			// route to match last, so a VIEWER is now correctly redirected.
+		it('lets a VIEWER reach /alerts/channels/new, which authz then gates', () => {
+			// CHANNELS_NEW runs on fine-grained authz, so the router no longer decides
+			// on the role: the page's own guard denies when `create` is not granted.
 			renderPrivateRoute({
 				initialRoute: ROUTES.CHANNELS_NEW,
 				appContext: {
@@ -1466,7 +1465,7 @@ describe('PrivateRoute', () => {
 				},
 			});
 
-			await assertRedirectsTo(ROUTES.UN_AUTHORIZED);
+			assertStaysOnRoute(ROUTES.CHANNELS_NEW);
 		});
 
 		it('should allow EDITOR to access /get-started-with-signoz-cloud route', () => {
@@ -1550,6 +1549,11 @@ describe('PrivateRoute', () => {
 			keyof typeof routeWithInitialAuthZSupport,
 			AuthzRouteCase
 		> = {
+			CHANNELS_NEW: { path: ROUTES.CHANNELS_NEW, deniedRoles: DENIED_ROLES },
+			CHANNELS_EDIT: {
+				path: ROUTES.CHANNELS_EDIT.replace(':channelId', 'channel-id-1'),
+				deniedRoles: DENIED_ROLES,
+			},
 			ALL_DASHBOARD: { path: ROUTES.ALL_DASHBOARD, deniedRoles: DENIED_ROLES },
 			DASHBOARD: {
 				path: ROUTES.DASHBOARD.replace(':dashboardId', 'dashboard-id-1'),

frontend/src/AppRoutes/__tests__/channelRoutes.test.ts

@@ -0,0 +1,28 @@
+import ROUTES from 'constants/routes';
+
+import routes from '../routes';
+
+/**
+ * The channel form renders inside the alerts page, which owns the tab strip.
+ * Pointing these routes at the standalone pages tears that page down on every
+ * open and rebuilds it on the way back, which reads as a full reload.
+ */
+describe('channel routes', () => {
+	const findRoute = (key: string): (typeof routes)[number] | undefined =>
+		routes.find((route) => route.key === key);
+
+	it('mounts the same component as the alerts list', () => {
+		const list = findRoute('LIST_ALL_ALERT');
+		const create = findRoute('CHANNELS_NEW');
+		const edit = findRoute('CHANNELS_EDIT');
+
+		expect(list?.component).toBeDefined();
+		expect(create?.component).toBe(list?.component);
+		expect(edit?.component).toBe(list?.component);
+	});
+
+	it('keeps the channel paths under /alerts', () => {
+		expect(ROUTES.CHANNELS_NEW.startsWith('/alerts')).toBe(true);
+		expect(ROUTES.CHANNELS_EDIT.startsWith('/alerts')).toBe(true);
+	});
+});

frontend/src/AppRoutes/routes.ts

@@ -7,8 +7,6 @@ import {
 	AlertOverview,
 	AllErrors,
 	ApiMonitoring,
-	ChannelsEdit,
-	ChannelsNew,
 	CreateNewAlerts,
 	DashboardPage,
 	DashboardPanelEditorPage,
@@ -242,14 +240,14 @@ const routes: AppRoutes[] = [
 	{
 		path: ROUTES.CHANNELS_NEW,
 		exact: true,
-		component: ChannelsNew,
+		component: ListAllALertsPage,
 		isPrivate: true,
 		key: 'CHANNELS_NEW',
 	},
 	{
 		path: ROUTES.CHANNELS_EDIT,
 		exact: true,
-		component: ChannelsEdit,
+		component: ListAllALertsPage,
 		isPrivate: true,
 		key: 'CHANNELS_EDIT',
 	},

frontend/src/api/channels/createEmail.ts

@@ -1,40 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { PayloadProps, Props } from 'types/api/channels/createEmail';
-
-/**
- * @deprecated Use the generated `useCreateChannel` hook (or `createChannel` fetcher) from
- * `api/generated/services/channels` instead. This hand-written client targets the
- * same endpoint and will be removed once call sites migrate.
- *
- * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
- */
-const create = async (
-	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
-	try {
-		const response = await axios.post<PayloadProps>('/channels', {
-			name: props.name,
-			email_configs: [
-				{
-					send_resolved: props.send_resolved,
-					to: props.to,
-					html: props.html,
-					headers: props.headers,
-				},
-			],
-		});
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		throw error;
-	}
-};
-
-export default create;

frontend/src/api/channels/createMsTeams.ts

@@ -1,40 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { PayloadProps, Props } from 'types/api/channels/createMsTeams';
-
-/**
- * @deprecated Use the generated `useCreateChannel` hook (or `createChannel` fetcher) from
- * `api/generated/services/channels` instead. This hand-written client targets the
- * same endpoint and will be removed once call sites migrate.
- *
- * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
- */
-const create = async (
-	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
-	try {
-		const response = await axios.post<PayloadProps>('/channels', {
-			name: props.name,
-			msteamsv2_configs: [
-				{
-					send_resolved: props.send_resolved,
-					webhook_url: props.webhook_url,
-					title: props.title,
-					text: props.text,
-				},
-			],
-		});
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		throw error;
-	}
-};
-
-export default create;

frontend/src/api/channels/createOpsgenie.ts

@@ -1,43 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { PayloadProps, Props } from 'types/api/channels/createOpsgenie';
-
-/**
- * @deprecated Use the generated `useCreateChannel` hook (or `createChannel` fetcher) from
- * `api/generated/services/channels` instead. This hand-written client targets the
- * same endpoint and will be removed once call sites migrate.
- *
- * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
- */
-const create = async (
-	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
-	try {
-		const response = await axios.post<PayloadProps>('/channels', {
-			name: props.name,
-			opsgenie_configs: [
-				{
-					api_key: props.api_key,
-					description: props.description,
-					priority: props.priority,
-					message: props.message,
-					details: {
-						...props.detailsArray,
-					},
-				},
-			],
-		});
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		throw error;
-	}
-};
-
-export default create;

frontend/src/api/channels/createPager.ts

@@ -1,48 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { PayloadProps, Props } from 'types/api/channels/createPager';
-
-/**
- * @deprecated Use the generated `useCreateChannel` hook (or `createChannel` fetcher) from
- * `api/generated/services/channels` instead. This hand-written client targets the
- * same endpoint and will be removed once call sites migrate.
- *
- * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
- */
-const create = async (
-	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
-	try {
-		const response = await axios.post<PayloadProps>('/channels', {
-			name: props.name,
-			pagerduty_configs: [
-				{
-					send_resolved: props.send_resolved,
-					routing_key: props.routing_key,
-					client: props.client,
-					client_url: props.client_url,
-					description: props.description,
-					severity: props.severity,
-					class: props.class,
-					component: props.component,
-					group: props.group,
-					details: {
-						...props.detailsArray,
-					},
-				},
-			],
-		});
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		throw error;
-	}
-};
-
-export default create;

frontend/src/api/channels/createSlack.ts

@@ -1,41 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { PayloadProps, Props } from 'types/api/channels/createSlack';
-
-/**
- * @deprecated Use the generated `useCreateChannel` hook (or `createChannel` fetcher) from
- * `api/generated/services/channels` instead. This hand-written client targets the
- * same endpoint and will be removed once call sites migrate.
- *
- * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
- */
-const create = async (
-	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
-	try {
-		const response = await axios.post<PayloadProps>('/channels', {
-			name: props.name,
-			slack_configs: [
-				{
-					send_resolved: props.send_resolved,
-					api_url: props.api_url,
-					channel: props.channel,
-					title: props.title,
-					text: props.text,
-				},
-			],
-		});
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		throw error;
-	}
-};
-
-export default create;

frontend/src/api/channels/createWebhook.ts

@@ -1,59 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { PayloadProps, Props } from 'types/api/channels/createWebhook';
-
-/**
- * @deprecated Use the generated `useCreateChannel` hook (or `createChannel` fetcher) from
- * `api/generated/services/channels` instead. This hand-written client targets the
- * same endpoint and will be removed once call sites migrate.
- *
- * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
- */
-const create = async (
-	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
-	try {
-		let httpConfig = {};
-		const username = props.username ? props.username.trim() : '';
-		const password = props.password ? props.password.trim() : '';
-
-		if (username !== '' && password !== '') {
-			httpConfig = {
-				basic_auth: {
-					username,
-					password,
-				},
-			};
-		} else if (username === '' && password !== '') {
-			httpConfig = {
-				authorization: {
-					type: 'Bearer',
-					credentials: password,
-				},
-			};
-		}
-
-		const response = await axios.post<PayloadProps>('/channels', {
-			name: props.name,
-			webhook_configs: [
-				{
-					send_resolved: props.send_resolved,
-					url: props.api_url,
-					http_config: httpConfig,
-				},
-			],
-		});
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		throw error;
-	}
-};
-
-export default create;

frontend/src/api/channels/delete.ts

@@ -1,30 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { PayloadProps, Props } from 'types/api/channels/delete';
-
-/**
- * @deprecated Use the generated `useDeleteChannelByID` hook (or `deleteChannelByID` fetcher) from
- * `api/generated/services/channels` instead. This hand-written client targets the
- * same endpoint and will be removed once call sites migrate.
- *
- * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
- */
-const deleteChannel = async (
-	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
-	try {
-		const response = await axios.delete<PayloadProps>(`/channels/${props.id}`);
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		throw error;
-	}
-};
-
-export default deleteChannel;

frontend/src/api/channels/editEmail.ts

@@ -1,40 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { PayloadProps, Props } from 'types/api/channels/editEmail';
-
-/**
- * @deprecated Use the generated `useUpdateChannelByID` hook (or `updateChannelByID` fetcher) from
- * `api/generated/services/channels` instead. This hand-written client targets the
- * same endpoint and will be removed once call sites migrate.
- *
- * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
- */
-const editEmail = async (
-	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
-	try {
-		const response = await axios.put<PayloadProps>(`/channels/${props.id}`, {
-			name: props.name,
-			email_configs: [
-				{
-					send_resolved: props.send_resolved,
-					to: props.to,
-					html: props.html,
-					headers: props.headers,
-				},
-			],
-		});
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		throw error;
-	}
-};
-
-export default editEmail;

frontend/src/api/channels/editMsTeams.ts

@@ -1,40 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { PayloadProps, Props } from 'types/api/channels/editMsTeams';
-
-/**
- * @deprecated Use the generated `useUpdateChannelByID` hook (or `updateChannelByID` fetcher) from
- * `api/generated/services/channels` instead. This hand-written client targets the
- * same endpoint and will be removed once call sites migrate.
- *
- * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
- */
-const editMsTeams = async (
-	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
-	try {
-		const response = await axios.put<PayloadProps>(`/channels/${props.id}`, {
-			name: props.name,
-			msteamsv2_configs: [
-				{
-					send_resolved: props.send_resolved,
-					webhook_url: props.webhook_url,
-					title: props.title,
-					text: props.text,
-				},
-			],
-		});
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		throw error;
-	}
-};
-
-export default editMsTeams;

frontend/src/api/channels/editOpsgenie.ts

@@ -1,44 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorResponse, ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { PayloadProps, Props } from 'types/api/channels/editOpsgenie';
-
-/**
- * @deprecated Use the generated `useUpdateChannelByID` hook (or `updateChannelByID` fetcher) from
- * `api/generated/services/channels` instead. This hand-written client targets the
- * same endpoint and will be removed once call sites migrate.
- *
- * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
- */
-const editOpsgenie = async (
-	props: Props,
-): Promise<SuccessResponseV2<PayloadProps> | ErrorResponse> => {
-	try {
-		const response = await axios.put<PayloadProps>(`/channels/${props.id}`, {
-			name: props.name,
-			opsgenie_configs: [
-				{
-					send_resolved: props.send_resolved,
-					api_key: props.api_key,
-					description: props.description,
-					priority: props.priority,
-					message: props.message,
-					details: {
-						...props.detailsArray,
-					},
-				},
-			],
-		});
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		throw error;
-	}
-};
-
-export default editOpsgenie;

frontend/src/api/channels/editPager.ts

@@ -1,48 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { PayloadProps, Props } from 'types/api/channels/editPager';
-
-/**
- * @deprecated Use the generated `useUpdateChannelByID` hook (or `updateChannelByID` fetcher) from
- * `api/generated/services/channels` instead. This hand-written client targets the
- * same endpoint and will be removed once call sites migrate.
- *
- * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
- */
-const editPager = async (
-	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
-	try {
-		const response = await axios.put<PayloadProps>(`/channels/${props.id}`, {
-			name: props.name,
-			pagerduty_configs: [
-				{
-					send_resolved: props.send_resolved,
-					routing_key: props.routing_key,
-					client: props.client,
-					client_url: props.client_url,
-					description: props.description,
-					severity: props.severity,
-					class: props.class,
-					component: props.component,
-					group: props.group,
-					details: {
-						...props.detailsArray,
-					},
-				},
-			],
-		});
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		throw error;
-	}
-};
-
-export default editPager;

frontend/src/api/channels/editSlack.ts

@@ -1,41 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { PayloadProps, Props } from 'types/api/channels/editSlack';
-
-/**
- * @deprecated Use the generated `useUpdateChannelByID` hook (or `updateChannelByID` fetcher) from
- * `api/generated/services/channels` instead. This hand-written client targets the
- * same endpoint and will be removed once call sites migrate.
- *
- * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
- */
-const editSlack = async (
-	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
-	try {
-		const response = await axios.put<PayloadProps>(`/channels/${props.id}`, {
-			name: props.name,
-			slack_configs: [
-				{
-					send_resolved: props.send_resolved,
-					api_url: props.api_url,
-					channel: props.channel,
-					title: props.title,
-					text: props.text,
-				},
-			],
-		});
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		throw error;
-	}
-};
-
-export default editSlack;

frontend/src/api/channels/editWebhook.ts

@@ -1,59 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { PayloadProps, Props } from 'types/api/channels/editWebhook';
-
-/**
- * @deprecated Use the generated `useUpdateChannelByID` hook (or `updateChannelByID` fetcher) from
- * `api/generated/services/channels` instead. This hand-written client targets the
- * same endpoint and will be removed once call sites migrate.
- *
- * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
- */
-const editWebhook = async (
-	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
-	try {
-		let httpConfig = {};
-		const username = props.username ? props.username.trim() : '';
-		const password = props.password ? props.password.trim() : '';
-
-		if (username !== '' && password !== '') {
-			httpConfig = {
-				basic_auth: {
-					username,
-					password,
-				},
-			};
-		} else if (username === '' && password !== '') {
-			httpConfig = {
-				authorization: {
-					type: 'Bearer',
-					credentials: password,
-				},
-			};
-		}
-
-		const response = await axios.put<PayloadProps>(`/channels/${props.id}`, {
-			name: props.name,
-			webhook_configs: [
-				{
-					send_resolved: props.send_resolved,
-					url: props.api_url,
-					http_config: httpConfig,
-				},
-			],
-		});
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		throw error;
-	}
-};
-
-export default editWebhook;

frontend/src/api/channels/get.ts

@@ -1,29 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { PayloadProps, Props } from 'types/api/channels/get';
-import { Channels } from 'types/api/channels/getAll';
-
-/**
- * @deprecated Use the generated `useGetChannelByID` hook (or `getChannelByID` fetcher) from
- * `api/generated/services/channels` instead. This hand-written client targets the
- * same endpoint and will be removed once call sites migrate.
- *
- * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
- */
-const get = async (props: Props): Promise<SuccessResponseV2<Channels>> => {
-	try {
-		const response = await axios.get<PayloadProps>(`/channels/${props.id}`);
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		throw error;
-	}
-};
-
-export default get;

frontend/src/api/channels/getAll.ts

@@ -1,28 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { Channels, PayloadProps } from 'types/api/channels/getAll';
-
-/**
- * @deprecated Use the generated `useListChannels` hook (or `listChannels` fetcher) from
- * `api/generated/services/channels` instead. This hand-written client targets the
- * same endpoint and will be removed once call sites migrate.
- *
- * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
- */
-const getAll = async (): Promise<SuccessResponseV2<Channels[]>> => {
-	try {
-		const response = await axios.get<PayloadProps>('/channels');
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		throw error;
-	}
-};
-
-export default getAll;

frontend/src/api/channels/testEmail.ts

@@ -1,33 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { PayloadProps, Props } from 'types/api/channels/createEmail';
-
-const testEmail = async (
-	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
-	try {
-		const response = await axios.post<PayloadProps>('/testChannel', {
-			name: props.name,
-			email_configs: [
-				{
-					send_resolved: true,
-					to: props.to,
-					html: props.html,
-					headers: props.headers,
-				},
-			],
-		});
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		throw error;
-	}
-};
-
-export default testEmail;

frontend/src/api/channels/testMsTeams.ts

@@ -1,33 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { PayloadProps, Props } from 'types/api/channels/createMsTeams';
-
-const testMsTeams = async (
-	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
-	try {
-		const response = await axios.post<PayloadProps>('/testChannel', {
-			name: props.name,
-			msteamsv2_configs: [
-				{
-					send_resolved: true,
-					webhook_url: props.webhook_url,
-					title: props.title,
-					text: props.text,
-				},
-			],
-		});
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		throw error;
-	}
-};
-
-export default testMsTeams;

frontend/src/api/channels/testOpsgenie.ts

@@ -1,36 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { PayloadProps, Props } from 'types/api/channels/createOpsgenie';
-
-const testOpsgenie = async (
-	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
-	try {
-		const response = await axios.post<PayloadProps>('/testChannel', {
-			name: props.name,
-			opsgenie_configs: [
-				{
-					api_key: props.api_key,
-					description: props.description,
-					priority: props.priority,
-					message: props.message,
-					details: {
-						...props.detailsArray,
-					},
-				},
-			],
-		});
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		throw error;
-	}
-};
-
-export default testOpsgenie;

frontend/src/api/channels/testPager.ts

@@ -1,41 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { PayloadProps, Props } from 'types/api/channels/createPager';
-
-const testPager = async (
-	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
-	try {
-		const response = await axios.post<PayloadProps>('/testChannel', {
-			name: props.name,
-			pagerduty_configs: [
-				{
-					send_resolved: true,
-					routing_key: props.routing_key,
-					client: props.client,
-					client_url: props.client_url,
-					description: props.description,
-					severity: props.severity,
-					class: props.class,
-					component: props.component,
-					group: props.group,
-					details: {
-						...props.detailsArray,
-					},
-				},
-			],
-		});
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		throw error;
-	}
-};
-
-export default testPager;

frontend/src/api/channels/testSlack.ts

@@ -1,34 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { PayloadProps, Props } from 'types/api/channels/createSlack';
-
-const testSlack = async (
-	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
-	try {
-		const response = await axios.post<PayloadProps>('/testChannel', {
-			name: props.name,
-			slack_configs: [
-				{
-					send_resolved: true,
-					api_url: props.api_url,
-					channel: props.channel,
-					title: props.title,
-					text: props.text,
-				},
-			],
-		});
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		throw error;
-	}
-};
-
-export default testSlack;

frontend/src/api/channels/testWebhook.ts

@@ -1,52 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { PayloadProps, Props } from 'types/api/channels/createWebhook';
-
-const testWebhook = async (
-	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
-	try {
-		let httpConfig = {};
-		const username = props.username ? props.username.trim() : '';
-		const password = props.password ? props.password.trim() : '';
-
-		if (username !== '' && password !== '') {
-			httpConfig = {
-				basic_auth: {
-					username,
-					password,
-				},
-			};
-		} else if (username === '' && password !== '') {
-			httpConfig = {
-				authorization: {
-					type: 'Bearer',
-					credentials: password,
-				},
-			};
-		}
-
-		const response = await axios.post<PayloadProps>('/testChannel', {
-			name: props.name,
-			webhook_configs: [
-				{
-					send_resolved: true,
-					url: props.api_url,
-					http_config: httpConfig,
-				},
-			],
-		});
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		throw error;
-	}
-};
-
-export default testWebhook;

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -4,6 +4,264 @@
  * * regenerate with 'pnpm generate:api'
  * SigNoz
  */
+export enum AiobservabilitytypesBlobPartDTOType {
+	blob = 'blob',
+}
+export interface AiobservabilitytypesBlobPartDTO {
+	/**
+	 * @type string
+	 */
+	content: string;
+	/**
+	 * @type string,null
+	 */
+	mime_type?: string | null;
+	/**
+	 * @type string
+	 */
+	modality: string;
+	/**
+	 * @type string
+	 * @enum blob
+	 */
+	type: AiobservabilitytypesBlobPartDTOType;
+}
+
+export enum AiobservabilitytypesTextPartDTOType {
+	text = 'text',
+}
+export interface AiobservabilitytypesTextPartDTO {
+	/**
+	 * @type string
+	 */
+	content: string;
+	/**
+	 * @type string
+	 * @enum text
+	 */
+	type: AiobservabilitytypesTextPartDTOType;
+}
+
+export enum AiobservabilitytypesToolCallRequestPartDTOType {
+	tool_call = 'tool_call',
+}
+export interface AiobservabilitytypesToolCallRequestPartDTO {
+	arguments?: unknown;
+	/**
+	 * @type string,null
+	 */
+	id?: string | null;
+	/**
+	 * @type string
+	 */
+	name: string;
+	/**
+	 * @type string
+	 * @enum tool_call
+	 */
+	type: AiobservabilitytypesToolCallRequestPartDTOType;
+}
+
+export enum AiobservabilitytypesToolCallResponsePartDTOType {
+	tool_call_response = 'tool_call_response',
+}
+export type AiobservabilitytypesToolCallResponsePartDTOResponse =
+	| unknown
+	| null;
+
+export interface AiobservabilitytypesToolCallResponsePartDTO {
+	/**
+	 * @type string,null
+	 */
+	id?: string | null;
+	/**
+	 * @nullable true
+	 */
+	response: AiobservabilitytypesToolCallResponsePartDTOResponse;
+	/**
+	 * @type string
+	 * @enum tool_call_response
+	 */
+	type: AiobservabilitytypesToolCallResponsePartDTOType;
+}
+
+export interface AiobservabilitytypesGenericServerToolCallDTO {
+	[key: string]: unknown;
+}
+
+export enum AiobservabilitytypesServerToolCallPartDTOType {
+	server_tool_call = 'server_tool_call',
+}
+export interface AiobservabilitytypesServerToolCallPartDTO {
+	/**
+	 * @type string,null
+	 */
+	id?: string | null;
+	/**
+	 * @type string
+	 */
+	name: string;
+	server_tool_call: AiobservabilitytypesGenericServerToolCallDTO;
+	/**
+	 * @type string
+	 * @enum server_tool_call
+	 */
+	type: AiobservabilitytypesServerToolCallPartDTOType;
+}
+
+export interface AiobservabilitytypesGenericServerToolCallResponseDTO {
+	[key: string]: unknown;
+}
+
+export enum AiobservabilitytypesServerToolCallResponsePartDTOType {
+	server_tool_call_response = 'server_tool_call_response',
+}
+export interface AiobservabilitytypesServerToolCallResponsePartDTO {
+	/**
+	 * @type string,null
+	 */
+	id?: string | null;
+	server_tool_call_response: AiobservabilitytypesGenericServerToolCallResponseDTO;
+	/**
+	 * @type string
+	 * @enum server_tool_call_response
+	 */
+	type: AiobservabilitytypesServerToolCallResponsePartDTOType;
+}
+
+export enum AiobservabilitytypesFilePartDTOType {
+	file = 'file',
+}
+export interface AiobservabilitytypesFilePartDTO {
+	/**
+	 * @type string
+	 */
+	file_id: string;
+	/**
+	 * @type string,null
+	 */
+	mime_type?: string | null;
+	/**
+	 * @type string
+	 */
+	modality: string;
+	/**
+	 * @type string
+	 * @enum file
+	 */
+	type: AiobservabilitytypesFilePartDTOType;
+}
+
+export enum AiobservabilitytypesUriPartDTOType {
+	uri = 'uri',
+}
+export interface AiobservabilitytypesUriPartDTO {
+	/**
+	 * @type string,null
+	 */
+	mime_type?: string | null;
+	/**
+	 * @type string
+	 */
+	modality: string;
+	/**
+	 * @type string
+	 * @enum uri
+	 */
+	type: AiobservabilitytypesUriPartDTOType;
+	/**
+	 * @type string
+	 */
+	uri: string;
+}
+
+export enum AiobservabilitytypesReasoningPartDTOType {
+	reasoning = 'reasoning',
+}
+export interface AiobservabilitytypesReasoningPartDTO {
+	/**
+	 * @type string
+	 */
+	content: string;
+	/**
+	 * @type string
+	 * @enum reasoning
+	 */
+	type: AiobservabilitytypesReasoningPartDTOType;
+}
+
+export enum AiobservabilitytypesCompactionPartDTOType {
+	compaction = 'compaction',
+}
+export interface AiobservabilitytypesCompactionPartDTO {
+	/**
+	 * @type string,null
+	 */
+	content?: string | null;
+	/**
+	 * @type string,null
+	 */
+	id?: string | null;
+	/**
+	 * @type string
+	 * @enum compaction
+	 */
+	type: AiobservabilitytypesCompactionPartDTOType;
+}
+
+export interface AiobservabilitytypesGenericPartDTO {
+	[key: string]: unknown;
+}
+
+export type AiobservabilitytypesPartDTO =
+	| AiobservabilitytypesTextPartDTO
+	| AiobservabilitytypesToolCallRequestPartDTO
+	| AiobservabilitytypesToolCallResponsePartDTO
+	| AiobservabilitytypesServerToolCallPartDTO
+	| AiobservabilitytypesServerToolCallResponsePartDTO
+	| AiobservabilitytypesBlobPartDTO
+	| AiobservabilitytypesFilePartDTO
+	| AiobservabilitytypesUriPartDTO
+	| AiobservabilitytypesReasoningPartDTO
+	| AiobservabilitytypesCompactionPartDTO
+	| AiobservabilitytypesGenericPartDTO;
+
+export type AiobservabilitytypesPartsDTO = AiobservabilitytypesPartDTO[];
+
+export interface AiobservabilitytypesChatMessageDTO {
+	/**
+	 * @type string,null
+	 */
+	name?: string | null;
+	parts: AiobservabilitytypesPartsDTO;
+	/**
+	 * @type string
+	 */
+	role: string;
+}
+
+export type AiobservabilitytypesInputMessagesDTO =
+	AiobservabilitytypesChatMessageDTO[];
+
+export interface AiobservabilitytypesOutputMessageDTO {
+	/**
+	 * @type string,null
+	 */
+	finish_reason?: string | null;
+	/**
+	 * @type string,null
+	 */
+	name?: string | null;
+	parts: AiobservabilitytypesPartsDTO;
+	/**
+	 * @type string
+	 */
+	role: string;
+}
+
+export type AiobservabilitytypesOutputMessagesDTO =
+	AiobservabilitytypesOutputMessageDTO[];
+
 export interface AlertmanagertypesChannelDTO {
 	/**
 	 * @type string
@@ -614,6 +872,55 @@ export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTy
 	spec: AlertmanagertypesChannelIncidentIOConfigDTO;
 }
 
+export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelTelegramConfigDTOKind {
+	telegram = 'telegram',
+}
+export interface AlertmanagertypesChannelTelegramConfigDTO {
+	/**
+	 * @type string
+	 */
+	apiUrl?: string;
+	/**
+	 * @type string
+	 * @format password
+	 */
+	botToken: string;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	chatId: number;
+	/**
+	 * @type boolean
+	 */
+	disableNotifications?: boolean;
+	/**
+	 * @type string
+	 */
+	message?: string;
+	/**
+	 * @type integer
+	 */
+	messageThreadId?: number;
+	/**
+	 * @type boolean,null
+	 */
+	sendResolved?: boolean | null;
+	/**
+	 * @type string
+	 */
+	title?: string;
+}
+
+export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelTelegramConfigDTO {
+	/**
+	 * @enum telegram
+	 * @type string
+	 */
+	kind: AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelTelegramConfigDTOKind;
+	spec: AlertmanagertypesChannelTelegramConfigDTO;
+}
+
 export type AlertmanagertypesChannelConfigDTO =
 	| AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelSlackConfigDTO
 	| AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelEmailConfigDTO
@@ -624,7 +931,8 @@ export type AlertmanagertypesChannelConfigDTO =
 	| AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelGoogleChatConfigDTO
 	| AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJiraConfigDTO
 	| AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJSMOpsConfigDTO
-	| AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelIncidentIOConfigDTO;
+	| AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelIncidentIOConfigDTO
+	| AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelTelegramConfigDTO;
 
 export enum AlertmanagertypesChannelDefectDTO {
 	none = 'none',
@@ -644,6 +952,7 @@ export enum AlertmanagertypesChannelKindDTO {
 	jira = 'jira',
 	jsmops = 'jsmops',
 	incidentio = 'incidentio',
+	telegram = 'telegram',
 }
 export enum AlertmanagertypesChannelListOrderDTO {
 	asc = 'asc',
@@ -2204,7 +2513,7 @@ export interface ConfigSNSConfigDTO {
 	topic_arn?: string;
 }
 
-export interface ConfigTelegramConfigDTO {
+export interface AlertmanagertypesTelegramReceiverConfigDTO {
 	api_url?: ConfigURLType2DTO;
 	/**
 	 * @type integer
@@ -2236,6 +2545,10 @@ export interface ConfigTelegramConfigDTO {
 	 * @type boolean
 	 */
 	send_resolved?: boolean;
+	/**
+	 * @type string
+	 */
+	title?: string;
 	/**
 	 * @type string
 	 */
@@ -2441,7 +2754,7 @@ export type AlertmanagertypesPostableChannelDTO = unknown & {
 	/**
 	 * @type array
 	 */
-	telegram_configs?: ConfigTelegramConfigDTO[];
+	telegram_configs?: AlertmanagertypesTelegramReceiverConfigDTO[];
 	/**
 	 * @type array
 	 */
@@ -2588,7 +2901,7 @@ export interface AlertmanagertypesReceiverDTO {
 	/**
 	 * @type array
 	 */
-	telegram_configs?: ConfigTelegramConfigDTO[];
+	telegram_configs?: AlertmanagertypesTelegramReceiverConfigDTO[];
 	/**
 	 * @type array
 	 */
@@ -4164,6 +4477,48 @@ export interface ConfigJiraConfigDTO {
 	wont_fix_resolution?: string;
 }
 
+export interface ConfigTelegramConfigDTO {
+	api_url?: ConfigURLType2DTO;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	chat?: number;
+	/**
+	 * @type string
+	 */
+	chat_file?: string;
+	/**
+	 * @type boolean
+	 */
+	disable_notifications?: boolean;
+	http_config?: ConfigHTTPClientConfigDTO;
+	/**
+	 * @type string
+	 */
+	message?: string;
+	/**
+	 * @type integer
+	 */
+	message_thread_id?: number;
+	/**
+	 * @type string
+	 */
+	parse_mode?: string;
+	/**
+	 * @type boolean
+	 */
+	send_resolved?: boolean;
+	/**
+	 * @type string
+	 */
+	token?: string;
+	/**
+	 * @type string
+	 */
+	token_file?: string;
+}
+
 export interface DashboardGridItemDTO {
 	content?: CommonJSONRefDTO;
 	/**
@@ -4211,195 +4566,10 @@ export interface DashboardGridLayoutSpecDTO {
 	repeatVariable?: string;
 }
 
-export enum DashboardtypesAreaFillModeDTO {
-	solid = 'solid',
-	gradient = 'gradient',
+export enum DashboardtypesAIBuilderQuerySpecDTOSignal {
+	traces = 'traces',
 }
-/**
- * @minimum 0
- * @maximum 1
- * @nullable
- */
-export type DashboardtypesFillOpacityDTO = number | null;
-
-export enum DashboardtypesLineInterpolationDTO {
-	linear = 'linear',
-	spline = 'spline',
-	step_after = 'step_after',
-	step_before = 'step_before',
-}
-export enum DashboardtypesLineStyleDTO {
-	solid = 'solid',
-	dashed = 'dashed',
-}
-export interface DashboardtypesSpanGapsDTO {
-	/**
-	 * @type string
-	 * @description The maximum gap size to connect when fillOnlyBelow is true. Gaps larger than this duration are left disconnected.
-	 */
-	fillLessThan?: string;
-	/**
-	 * @type boolean
-	 * @description Controls whether lines connect across null values. When false (default), all gaps are connected. When true, only gaps smaller than fillLessThan are connected.
-	 */
-	fillOnlyBelow?: boolean;
-}
-
-export interface DashboardtypesAreaChartAppearanceDTO {
-	fillMode?: DashboardtypesAreaFillModeDTO;
-	fillOpacity?: DashboardtypesFillOpacityDTO | null;
-	lineInterpolation?: DashboardtypesLineInterpolationDTO;
-	lineStyle?: DashboardtypesLineStyleDTO;
-	/**
-	 * @type boolean
-	 */
-	showPoints?: boolean;
-	spanGaps?: DashboardtypesSpanGapsDTO;
-}
-
-export interface DashboardtypesAxesDTO {
-	/**
-	 * @type boolean
-	 */
-	isLogScale?: boolean;
-	/**
-	 * @type number,null
-	 */
-	softMax?: number | null;
-	/**
-	 * @type number,null
-	 */
-	softMin?: number | null;
-}
-
-export enum DashboardtypesPrecisionOptionDTO {
-	NUMBER_0 = '0',
-	NUMBER_1 = '1',
-	NUMBER_2 = '2',
-	NUMBER_3 = '3',
-	NUMBER_4 = '4',
-	full = 'full',
-}
-export interface DashboardtypesPanelFormattingDTO {
-	decimalPrecision?: DashboardtypesPrecisionOptionDTO;
-	/**
-	 * @type string
-	 */
-	unit?: string;
-}
-
-export enum DashboardtypesLegendModeDTO {
-	list = 'list',
-}
-export enum DashboardtypesLegendPositionDTO {
-	bottom = 'bottom',
-	right = 'right',
-}
-export type DashboardtypesLegendDTOCustomColorsAnyOf = {
-	[key: string]: string;
-};
-
-/**
- * @nullable
- */
-export type DashboardtypesLegendDTOCustomColors =
-	DashboardtypesLegendDTOCustomColorsAnyOf | null;
-
-export interface DashboardtypesLegendDTO {
-	/**
-	 * @type object,null
-	 */
-	customColors?: DashboardtypesLegendDTOCustomColors;
-	mode?: DashboardtypesLegendModeDTO;
-	position?: DashboardtypesLegendPositionDTO;
-}
-
-export interface DashboardtypesThresholdWithLabelDTO {
-	/**
-	 * @type string
-	 */
-	color: string;
-	/**
-	 * @type string
-	 */
-	label?: string;
-	/**
-	 * @type string
-	 */
-	unit?: string;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	value: number;
-}
-
-export enum DashboardtypesStackModeDTO {
-	none = 'none',
-	normal = 'normal',
-	percent = 'percent',
-}
-export enum DashboardtypesTimePreferenceDTO {
-	global_time = 'global_time',
-	last_5_min = 'last_5_min',
-	last_15_min = 'last_15_min',
-	last_30_min = 'last_30_min',
-	last_1_hr = 'last_1_hr',
-	last_6_hr = 'last_6_hr',
-	last_1_day = 'last_1_day',
-	last_3_days = 'last_3_days',
-	last_1_week = 'last_1_week',
-	last_1_month = 'last_1_month',
-}
-export interface DashboardtypesAreaChartVisualizationDTO {
-	/**
-	 * @type boolean
-	 */
-	fillSpans?: boolean;
-	stack?: DashboardtypesStackModeDTO;
-	timePreference?: DashboardtypesTimePreferenceDTO;
-}
-
-export interface DashboardtypesAreaChartPanelSpecDTO {
-	axes?: DashboardtypesAxesDTO;
-	chartAppearance?: DashboardtypesAreaChartAppearanceDTO;
-	formatting?: DashboardtypesPanelFormattingDTO;
-	legend?: DashboardtypesLegendDTO;
-	/**
-	 * @type array,null
-	 */
-	thresholds?: DashboardtypesThresholdWithLabelDTO[] | null;
-	visualization?: DashboardtypesAreaChartVisualizationDTO;
-}
-
-export interface DashboardtypesBarChartVisualizationDTO {
-	/**
-	 * @type boolean
-	 */
-	fillSpans?: boolean;
-	/**
-	 * @type boolean
-	 */
-	stackedBarChart?: boolean;
-	timePreference?: DashboardtypesTimePreferenceDTO;
-}
-
-export interface DashboardtypesBarChartPanelSpecDTO {
-	axes?: DashboardtypesAxesDTO;
-	formatting?: DashboardtypesPanelFormattingDTO;
-	legend?: DashboardtypesLegendDTO;
-	/**
-	 * @type array,null
-	 */
-	thresholds?: DashboardtypesThresholdWithLabelDTO[] | null;
-	visualization?: DashboardtypesBarChartVisualizationDTO;
-}
-
-export interface DashboardtypesBasicVisualizationDTO {
-	timePreference?: DashboardtypesTimePreferenceDTO;
-}
-
-export interface Querybuildertypesv5LogAggregationDTO {
+export interface Querybuildertypesv5TraceAggregationDTO {
 	/**
 	 * @type string
 	 */
@@ -4638,13 +4808,274 @@ export interface TelemetrytypesTelemetryFieldKeyDTO {
 	unit?: string;
 }
 
-export enum Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5LogAggregationDTOSignal {
-	logs = 'logs',
-}
 export enum TelemetrytypesSourceDTO {
 	meter = 'meter',
 	'' = '',
 }
+export interface DashboardtypesAIBuilderQuerySpecDTO {
+	/**
+	 * @type array,null
+	 */
+	aggregations?: Querybuildertypesv5TraceAggregationDTO[] | null;
+	bucketOptions?: Querybuildertypesv5BucketOptionsDTO;
+	/**
+	 * @type string
+	 */
+	cursor?: string;
+	/**
+	 * @type boolean
+	 */
+	disabled?: boolean;
+	filter?: Querybuildertypesv5FilterDTO;
+	/**
+	 * @type array,null
+	 */
+	functions?: Querybuildertypesv5FunctionDTO[] | null;
+	/**
+	 * @type array,null
+	 */
+	groupBy?: Querybuildertypesv5GroupByKeyDTO[] | null;
+	having?: Querybuildertypesv5HavingDTO;
+	/**
+	 * @type string
+	 */
+	legend?: string;
+	/**
+	 * @type integer
+	 */
+	limit?: number;
+	limitBy?: Querybuildertypesv5LimitByDTO;
+	/**
+	 * @type string
+	 */
+	name?: string;
+	/**
+	 * @type integer
+	 */
+	offset?: number;
+	/**
+	 * @type array,null
+	 */
+	order?: Querybuildertypesv5OrderByDTO[] | null;
+	/**
+	 * @type array,null
+	 */
+	secondaryAggregations?: Querybuildertypesv5SecondaryAggregationDTO[] | null;
+	/**
+	 * @type array,null
+	 */
+	selectFields?: TelemetrytypesTelemetryFieldKeyDTO[] | null;
+	/**
+	 * @enum traces
+	 * @type string
+	 */
+	signal: DashboardtypesAIBuilderQuerySpecDTOSignal;
+	source?: TelemetrytypesSourceDTO;
+	stepInterval?: Querybuildertypesv5StepDTO;
+}
+
+export enum DashboardtypesAreaFillModeDTO {
+	solid = 'solid',
+	gradient = 'gradient',
+}
+/**
+ * @minimum 0
+ * @maximum 1
+ * @nullable
+ */
+export type DashboardtypesFillOpacityDTO = number | null;
+
+export enum DashboardtypesLineInterpolationDTO {
+	linear = 'linear',
+	spline = 'spline',
+	step_after = 'step_after',
+	step_before = 'step_before',
+}
+export enum DashboardtypesLineStyleDTO {
+	solid = 'solid',
+	dashed = 'dashed',
+}
+export interface DashboardtypesSpanGapsDTO {
+	/**
+	 * @type string
+	 * @description The maximum gap size to connect when fillOnlyBelow is true. Gaps larger than this duration are left disconnected.
+	 */
+	fillLessThan?: string;
+	/**
+	 * @type boolean
+	 * @description Controls whether lines connect across null values. When false (default), all gaps are connected. When true, only gaps smaller than fillLessThan are connected.
+	 */
+	fillOnlyBelow?: boolean;
+}
+
+export interface DashboardtypesAreaChartAppearanceDTO {
+	fillMode?: DashboardtypesAreaFillModeDTO;
+	fillOpacity?: DashboardtypesFillOpacityDTO | null;
+	lineInterpolation?: DashboardtypesLineInterpolationDTO;
+	lineStyle?: DashboardtypesLineStyleDTO;
+	/**
+	 * @type boolean
+	 */
+	showPoints?: boolean;
+	spanGaps?: DashboardtypesSpanGapsDTO;
+}
+
+export interface DashboardtypesAxesDTO {
+	/**
+	 * @type boolean
+	 */
+	isLogScale?: boolean;
+	/**
+	 * @type number,null
+	 */
+	softMax?: number | null;
+	/**
+	 * @type number,null
+	 */
+	softMin?: number | null;
+}
+
+export enum DashboardtypesPrecisionOptionDTO {
+	NUMBER_0 = '0',
+	NUMBER_1 = '1',
+	NUMBER_2 = '2',
+	NUMBER_3 = '3',
+	NUMBER_4 = '4',
+	full = 'full',
+}
+export interface DashboardtypesPanelFormattingDTO {
+	decimalPrecision?: DashboardtypesPrecisionOptionDTO;
+	/**
+	 * @type string
+	 */
+	unit?: string;
+}
+
+export enum DashboardtypesLegendModeDTO {
+	list = 'list',
+}
+export enum DashboardtypesLegendPositionDTO {
+	bottom = 'bottom',
+	right = 'right',
+}
+export type DashboardtypesLegendDTOCustomColorsAnyOf = {
+	[key: string]: string;
+};
+
+/**
+ * @nullable
+ */
+export type DashboardtypesLegendDTOCustomColors =
+	DashboardtypesLegendDTOCustomColorsAnyOf | null;
+
+export interface DashboardtypesLegendDTO {
+	/**
+	 * @type object,null
+	 */
+	customColors?: DashboardtypesLegendDTOCustomColors;
+	mode?: DashboardtypesLegendModeDTO;
+	position?: DashboardtypesLegendPositionDTO;
+}
+
+export interface DashboardtypesThresholdWithLabelDTO {
+	/**
+	 * @type string
+	 */
+	color: string;
+	/**
+	 * @type string
+	 */
+	label?: string;
+	/**
+	 * @type string
+	 */
+	unit?: string;
+	/**
+	 * @type number
+	 * @format double
+	 */
+	value: number;
+}
+
+export enum DashboardtypesStackModeDTO {
+	none = 'none',
+	normal = 'normal',
+	percent = 'percent',
+}
+export enum DashboardtypesTimePreferenceDTO {
+	global_time = 'global_time',
+	last_5_min = 'last_5_min',
+	last_15_min = 'last_15_min',
+	last_30_min = 'last_30_min',
+	last_1_hr = 'last_1_hr',
+	last_6_hr = 'last_6_hr',
+	last_1_day = 'last_1_day',
+	last_3_days = 'last_3_days',
+	last_1_week = 'last_1_week',
+	last_1_month = 'last_1_month',
+}
+export interface DashboardtypesAreaChartVisualizationDTO {
+	/**
+	 * @type boolean
+	 */
+	fillSpans?: boolean;
+	stack?: DashboardtypesStackModeDTO;
+	timePreference?: DashboardtypesTimePreferenceDTO;
+}
+
+export interface DashboardtypesAreaChartPanelSpecDTO {
+	axes?: DashboardtypesAxesDTO;
+	chartAppearance?: DashboardtypesAreaChartAppearanceDTO;
+	formatting?: DashboardtypesPanelFormattingDTO;
+	legend?: DashboardtypesLegendDTO;
+	/**
+	 * @type array,null
+	 */
+	thresholds?: DashboardtypesThresholdWithLabelDTO[] | null;
+	visualization?: DashboardtypesAreaChartVisualizationDTO;
+}
+
+export interface DashboardtypesBarChartVisualizationDTO {
+	/**
+	 * @type boolean
+	 */
+	fillSpans?: boolean;
+	/**
+	 * @type boolean
+	 */
+	stackedBarChart?: boolean;
+	timePreference?: DashboardtypesTimePreferenceDTO;
+}
+
+export interface DashboardtypesBarChartPanelSpecDTO {
+	axes?: DashboardtypesAxesDTO;
+	formatting?: DashboardtypesPanelFormattingDTO;
+	legend?: DashboardtypesLegendDTO;
+	/**
+	 * @type array,null
+	 */
+	thresholds?: DashboardtypesThresholdWithLabelDTO[] | null;
+	visualization?: DashboardtypesBarChartVisualizationDTO;
+}
+
+export interface DashboardtypesBasicVisualizationDTO {
+	timePreference?: DashboardtypesTimePreferenceDTO;
+}
+
+export interface Querybuildertypesv5LogAggregationDTO {
+	/**
+	 * @type string
+	 */
+	alias?: string;
+	/**
+	 * @type string
+	 */
+	expression?: string;
+}
+
+export enum Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5LogAggregationDTOSignal {
+	logs = 'logs',
+}
 export interface Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5LogAggregationDTO {
 	/**
 	 * @type array,null
@@ -4835,17 +5266,6 @@ export interface Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTyp
 	stepInterval?: Querybuildertypesv5StepDTO;
 }
 
-export interface Querybuildertypesv5TraceAggregationDTO {
-	/**
-	 * @type string
-	 */
-	alias?: string;
-	/**
-	 * @type string
-	 */
-	expression?: string;
-}
-
 export enum Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5TraceAggregationDTOSignal {
 	traces = 'traces',
 }
@@ -5404,6 +5824,18 @@ export interface DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDa
 	spec: DashboardtypesBuilderQuerySpecDTO;
 }
 
+export enum DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAIBuilderQuerySpecDTOKind {
+	'signoz/AIBuilderQuery' = 'signoz/AIBuilderQuery',
+}
+export interface DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAIBuilderQuerySpecDTO {
+	/**
+	 * @enum signoz/AIBuilderQuery
+	 * @type string
+	 */
+	kind: DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAIBuilderQuerySpecDTOKind;
+	spec: DashboardtypesAIBuilderQuerySpecDTO;
+}
+
 export enum DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5CompositeQueryDTOKind {
 	'signoz/CompositeQuery' = 'signoz/CompositeQuery',
 }
@@ -5695,6 +6127,7 @@ export interface DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQu
 
 export type DashboardtypesQueryPluginDTO =
 	| DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBuilderQuerySpecDTO
+	| DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAIBuilderQuerySpecDTO
 	| DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5CompositeQueryDTO
 	| DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5QueryBuilderFormulaDTO
 	| DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5PromQueryDTO
@@ -6373,6 +6806,7 @@ export interface DashboardtypesPostablePublicDashboardDTO {
 
 export enum DashboardtypesQueryPluginKindDTO {
 	'signoz/BuilderQuery' = 'signoz/BuilderQuery',
+	'signoz/AIBuilderQuery' = 'signoz/AIBuilderQuery',
 	'signoz/CompositeQuery' = 'signoz/CompositeQuery',
 	'signoz/Formula' = 'signoz/Formula',
 	'signoz/PromQLQuery' = 'signoz/PromQLQuery',
@@ -11452,6 +11886,16 @@ export interface SpantypesThreadSpanDTO {
 	 * @type array
 	 */
 	events: SpantypesEventDTO[];
+	formatted_input: AiobservabilitytypesInputMessagesDTO;
+	formatted_output: AiobservabilitytypesOutputMessagesDTO;
+	/**
+	 * @type string
+	 */
+	formatter: string;
+	/**
+	 * @type array
+	 */
+	formatter_warnings: string[];
 	/**
 	 * @type boolean
 	 */

frontend/src/api/generated/services/tracedetail/index.ts

@@ -261,7 +261,7 @@ export const invalidateGetTraceSummary = async (
 };
 
 /**
- * Returns the spans carrying gen_ai input or output messages in timestamp order. Pass nextCursor as after or prevCursor as before to page, or spanId to open the page around a span.
+ * Returns the spans carrying gen_ai input or output messages, or a tool execution, in timestamp order. Messages already in the OTel GenAI shape are decoded into formatted_input and formatted_output, with formatter naming the converter and formatter_warnings what it could not resolve. Pass nextCursor as after or prevCursor as before to page, or spanId to open the page around a span.
  * @summary Get thread view for a trace
  */
 export const getTraceThread = (

frontend/src/components/AlertBreadcrumb/AlertBreadcrumb.module.scss

@@ -1,5 +1,6 @@
 .breadcrumb {
-	padding-left: 16px;
+	/* the bar sat flush against the tab strip above it */
+	padding: var(--spacing-4) 16px var(--spacing-2);
 
 	ol {
 		align-items: center;

frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx

@@ -4,7 +4,11 @@ import { PANEL_TYPES } from 'constants/queryBuilder';
 import { Formula } from 'container/QueryBuilder/components/Formula';
 import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { IBuilderTraceOperator } from 'types/api/queryBuilder/queryBuilderData';
+import { getBuilderVariant } from 'lib/query/queryMode';
+import {
+	BuilderVariant,
+	IBuilderTraceOperator,
+} from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
 import { QueryBuilderField } from './queryBuilderFields.types';
@@ -60,8 +64,16 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 		[config],
 	);
 
+	const isAIQuery =
+		getBuilderVariant(currentQuery.builder) === BuilderVariant.AI;
+
 	useEffect(() => {
 		if (currentDataSource !== initialDataSource || newPanelType !== panelType) {
+			// AI queries are traces-only; BAR must not force metrics on them.
+			if (isAIQuery) {
+				handleSetConfig(newPanelType, DataSource.TRACES);
+				return;
+			}
 			if (newPanelType === PANEL_TYPES.BAR) {
 				handleSetConfig(PANEL_TYPES.BAR, DataSource.METRICS);
 				return;
@@ -74,15 +86,20 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 		initialDataSource,
 		currentDataSource,
 		newPanelType,
+		isAIQuery,
 	]);
 
 	useEffect(() => {
 		// always clear on mount and unmount to avoid stale data
+		// hosts opting into savePreviousQuery own the clear, as they may remount this builder mid-edit
+		if (savePreviousQuery) {
+			return undefined;
+		}
 		clearPreviousQuery();
 		return (): void => {
 			clearPreviousQuery();
 		};
-	}, []);
+	}, [savePreviousQuery]);
 
 	const resolvedConfig = useMemo(
 		() =>

frontend/src/container/AllAlertChannels/AlertChannels.tsx

@@ -1,77 +0,0 @@
-import { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { generatePath } from 'react-router-dom';
-import { Button } from 'antd';
-import type { ColumnsType } from 'antd/lib/table';
-import { ResizeTable } from 'components/ResizeTable';
-import ROUTES from 'constants/routes';
-import useComponentPermission from 'hooks/useComponentPermission';
-import { useNotifications } from 'hooks/useNotifications';
-import history from 'lib/history';
-import { useAppContext } from 'providers/App/App';
-import { Channels } from 'types/api/channels/getAll';
-
-import Delete from './Delete';
-
-function AlertChannels({ allChannels }: AlertChannelsProps): JSX.Element {
-	const { t } = useTranslation(['channels']);
-	const { notifications } = useNotifications();
-	const { user } = useAppContext();
-	const [action] = useComponentPermission(['new_alert_action'], user.role);
-
-	const onClickEditHandler = useCallback((id: string) => {
-		history.push(
-			generatePath(ROUTES.CHANNELS_EDIT, {
-				channelId: id,
-			}),
-		);
-	}, []);
-
-	const columns: ColumnsType<Channels> = [
-		{
-			title: t('column_channel_name'),
-			dataIndex: 'name',
-			key: 'name',
-			width: 100,
-		},
-		{
-			title: t('column_channel_type'),
-			dataIndex: 'type',
-			key: 'type',
-			width: 80,
-		},
-	];
-
-	if (action) {
-		columns.push({
-			title: t('column_channel_action'),
-			dataIndex: 'id',
-			key: 'action',
-			align: 'center',
-			width: 80,
-			render: (id: string): JSX.Element => (
-				<>
-					<Button onClick={(): void => onClickEditHandler(id)} type="link">
-						{t('column_channel_edit')}
-					</Button>
-					<Delete id={id} notifications={notifications} />
-				</>
-			),
-		});
-	}
-
-	return (
-		<ResizeTable
-			columns={columns}
-			dataSource={allChannels}
-			rowKey="id"
-			bordered
-		/>
-	);
-}
-
-interface AlertChannelsProps {
-	allChannels: Channels[];
-}
-
-export default AlertChannels;

frontend/src/container/AllAlertChannels/AllAlertChannels.styles.scss

@@ -1,4 +0,0 @@
-.alert-channels-container {
-	width: 100%;
-	padding: 0 var(--spacing-8);
-}

frontend/src/container/AllAlertChannels/Delete.tsx

@@ -1,54 +0,0 @@
-import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useQueryClient } from 'react-query';
-import { Button } from 'antd';
-import type { NotificationInstance } from 'antd/es/notification/interface';
-import deleteChannel from 'api/channels/delete';
-import APIError from 'types/api/error';
-
-function Delete({ notifications, id }: DeleteProps): JSX.Element {
-	const { t } = useTranslation(['channels']);
-	const [loading, setLoading] = useState(false);
-	const queryClient = useQueryClient();
-
-	const onClickHandler = async (): Promise<void> => {
-		try {
-			setLoading(true);
-			await deleteChannel({
-				id,
-			});
-
-			notifications.success({
-				message: 'Success',
-				description: t('channel_delete_success'),
-			});
-			// Invalidate and refetch
-			queryClient.invalidateQueries(['getChannels']);
-			setLoading(false);
-		} catch (error) {
-			notifications.error({
-				message: (error as APIError).getErrorCode(),
-				description: (error as APIError).getErrorMessage(),
-			});
-			setLoading(false);
-		}
-	};
-
-	return (
-		<Button
-			loading={loading}
-			disabled={loading}
-			type="link"
-			onClick={onClickHandler}
-		>
-			Delete
-		</Button>
-	);
-}
-
-interface DeleteProps {
-	notifications: NotificationInstance;
-	id: string;
-}
-
-export default Delete;

frontend/src/container/AllAlertChannels/__tests__/AlertChannels.test.tsx

@@ -1,84 +0,0 @@
-import ROUTES from 'constants/routes';
-import AlertChannels from 'container/AllAlertChannels';
-import { act, fireEvent, render, screen, waitFor } from 'tests/test-utils';
-
-const successNotification = jest.fn();
-jest.mock('hooks/useNotifications', () => ({
-	__esModule: true,
-	useNotifications: jest.fn(() => ({
-		notifications: {
-			success: successNotification,
-			error: jest.fn(),
-		},
-	})),
-}));
-
-jest.mock('react-router-dom', () => ({
-	...jest.requireActual('react-router-dom'),
-	useLocation: (): { pathname: string } => ({
-		pathname: `${process.env.FRONTEND_API_ENDPOINT}${ROUTES.ALL_CHANNELS}`,
-	}),
-}));
-
-describe('Alert Channels Settings List page', () => {
-	beforeEach(async () => {
-		jest.useFakeTimers();
-		jest.setSystemTime(new Date('2023-10-20'));
-		render(<AlertChannels />);
-		await waitFor(() =>
-			expect(screen.getByText('sending_channels_note')).toBeInTheDocument(),
-		);
-	});
-	afterEach(() => {
-		jest.restoreAllMocks();
-		jest.useRealTimers();
-	});
-	describe('Should display the Alert Channels page properly', () => {
-		it('Should check if "The alerts will be sent to all the configured channels." is visible', () => {
-			expect(screen.getByText('sending_channels_note')).toBeInTheDocument();
-		});
-		it('Should check if "New Alert Channel" Button is visble', () => {
-			expect(screen.getByText('button_new_channel')).toBeInTheDocument();
-		});
-		it('Should check if the help icon is visible and displays "tooltip_notification_channels', async () => {
-			const helpIcon = screen.getByRole('img', { name: /help/i });
-
-			fireEvent.mouseOver(helpIcon);
-
-			await waitFor(() => {
-				const tooltip = screen.getByText('tooltip_notification_channels');
-				expect(tooltip).toBeInTheDocument();
-			});
-		});
-	});
-	describe('Should check if the channels table is properly displayed', () => {
-		it('Should check if the table columns are properly displayed', () => {
-			expect(screen.getByText('column_channel_name')).toBeInTheDocument();
-			expect(screen.getByText('column_channel_type')).toBeInTheDocument();
-			expect(screen.getByText('column_channel_action')).toBeInTheDocument();
-		});
-
-		it('Should check if the data in the table is displayed properly', () => {
-			expect(screen.getByText('Dummy-Channel')).toBeInTheDocument();
-			expect(screen.getAllByText('slack')[0]).toBeInTheDocument();
-			expect(screen.getAllByText('column_channel_edit')[0]).toBeInTheDocument();
-			expect(screen.getAllByText('Delete')[0]).toBeInTheDocument();
-		});
-
-		it('Should check if clicking on Delete displays Success Toast "Channel Deleted Successfully"', async () => {
-			const deleteButton = screen.getAllByRole('button', { name: 'Delete' })[0];
-			expect(deleteButton).toBeInTheDocument();
-
-			act(() => {
-				fireEvent.click(deleteButton);
-			});
-
-			await waitFor(() => {
-				expect(successNotification).toHaveBeenCalledWith({
-					message: 'Success',
-					description: 'channel_delete_success',
-				});
-			});
-		});
-	});
-});

frontend/src/container/AllAlertChannels/__tests__/AlertChannelsNormalUser.test.tsx

@@ -1,78 +0,0 @@
-import ROUTES from 'constants/routes';
-import AlertChannels from 'container/AllAlertChannels';
-import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
-
-const successNotification = jest.fn();
-jest.mock('hooks/useNotifications', () => ({
-	__esModule: true,
-	useNotifications: jest.fn(() => ({
-		notifications: {
-			success: successNotification,
-			error: jest.fn(),
-		},
-	})),
-}));
-
-jest.mock('hooks/useComponentPermission', () => ({
-	__esModule: true,
-	default: jest.fn().mockImplementation(() => [false]),
-}));
-
-jest.mock('react-router-dom', () => ({
-	...jest.requireActual('react-router-dom'),
-	useLocation: (): { pathname: string } => ({
-		pathname: `${process.env.FRONTEND_API_ENDPOINT}${ROUTES.ALL_CHANNELS}`,
-	}),
-}));
-
-describe('Alert Channels Settings List page (Normal User)', () => {
-	beforeEach(async () => {
-		jest.useFakeTimers();
-		render(<AlertChannels />);
-		await waitFor(() =>
-			expect(screen.getByText('sending_channels_note')).toBeInTheDocument(),
-		);
-	});
-	afterEach(() => {
-		jest.restoreAllMocks();
-		jest.useRealTimers();
-	});
-	describe('Should display the Alert Channels page properly', () => {
-		it('Should check if "The alerts will be sent to all the configured channels." is visible', async () => {
-			await waitFor(() =>
-				expect(screen.getByText('sending_channels_note')).toBeInTheDocument(),
-			);
-		});
-
-		it('Should check if "New Alert Channel" Button is visble and disabled', async () => {
-			const newAlertButton = screen.getByRole('button', {
-				name: /button_new_channel/i,
-			});
-			await waitFor(() => expect(newAlertButton).toBeInTheDocument());
-			expect(newAlertButton).toBeDisabled();
-		});
-		it('Should check if the help icon is visible and displays "tooltip_notification_channels', async () => {
-			const helpIcon = screen.getByRole('img', { name: /help/i });
-			fireEvent.mouseOver(helpIcon);
-
-			await waitFor(() => {
-				const tooltip = screen.getByText('tooltip_notification_channels');
-				expect(tooltip).toBeInTheDocument();
-			});
-		});
-	});
-	describe('Should check if the channels table is properly displayed', () => {
-		it('Should check if the table columns are properly displayed', async () => {
-			expect(screen.getByText('column_channel_name')).toBeInTheDocument();
-			expect(screen.getByText('column_channel_type')).toBeInTheDocument();
-			expect(screen.queryByText('column_channel_action')).not.toBeInTheDocument();
-		});
-
-		it('Should check if the data in the table is displayed properly', async () => {
-			expect(screen.getByText('Dummy-Channel')).toBeInTheDocument();
-			expect(screen.getAllByText('slack')[0]).toBeInTheDocument();
-			expect(screen.queryByText('column_channel_edit')).not.toBeInTheDocument();
-			expect(screen.queryByText('Delete')).not.toBeInTheDocument();
-		});
-	});
-});

frontend/src/container/AllAlertChannels/__tests__/CreateAlertChannel.test.tsx

@@ -1,914 +0,0 @@
-import CreateAlertChannels from 'container/CreateAlertChannels';
-import { ChannelType } from 'container/CreateAlertChannels/config';
-import {
-	GoogleChatInitialConfig,
-	IncidentIOInitialConfig,
-	JiraInitialConfig,
-	JsmOpsInitialConfig,
-} from 'container/CreateAlertChannels/defaults';
-import {
-	googleChatDescriptionDefaultValue,
-	googleChatTitleDefaultValue,
-	opsGenieDescriptionDefaultValue,
-	opsGenieMessageDefaultValue,
-	opsGeniePriorityDefaultValue,
-	pagerDutyAdditionalDetailsDefaultValue,
-	pagerDutyDescriptionDefaultValue,
-	pagerDutySeverityTextDefaultValue,
-	slackDescriptionDefaultValue,
-	slackTitleDefaultValue,
-} from 'mocks-server/__mockdata__/alerts';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
-import {
-	act,
-	fireEvent,
-	render,
-	screen,
-	userEvent,
-	waitFor,
-} from 'tests/test-utils';
-
-import { testLabelInputAndHelpValue } from './testUtils';
-
-const successNotification = jest.fn();
-const errorNotification = jest.fn();
-jest.mock('hooks/useNotifications', () => ({
-	__esModule: true,
-	useNotifications: jest.fn(() => ({
-		notifications: {
-			success: successNotification,
-			error: errorNotification,
-		},
-	})),
-}));
-const showErrorModal = jest.fn();
-jest.mock('providers/ErrorModalProvider', () => ({
-	__esModule: true,
-	...jest.requireActual('providers/ErrorModalProvider'),
-	useErrorModal: jest.fn(() => ({
-		showErrorModal,
-	})),
-}));
-
-jest.mock('components/MarkdownRenderer/MarkdownRenderer', () => ({
-	MarkdownRenderer: jest.fn(() => <div>Mocked MarkdownRenderer</div>),
-}));
-
-describe('Create Alert Channel', () => {
-	afterEach(() => {
-		jest.clearAllMocks();
-	});
-	describe('Should check if the new alert channel is properly displayed with the cascading fields of slack channel', () => {
-		beforeEach(() => {
-			render(<CreateAlertChannels preType={ChannelType.Slack} />);
-		});
-		afterEach(() => {
-			jest.clearAllMocks();
-		});
-		it('Should check if the title is "New Notification Channels"', () => {
-			expect(screen.getByText('page_title_create')).toBeInTheDocument();
-		});
-		it('Should check if the name label and textbox are displayed properly', () => {
-			testLabelInputAndHelpValue({
-				labelText: 'field_channel_name',
-				testId: 'channel-name-textbox',
-			});
-		});
-		it('Should check if Send resolved alerts label and checkbox are displayed properly', () => {
-			testLabelInputAndHelpValue({
-				labelText: 'field_send_resolved',
-				testId: 'field-send-resolved-checkbox',
-			});
-		});
-		it('Should check if channel type label and dropdown are displayed properly', () => {
-			testLabelInputAndHelpValue({
-				labelText: 'field_channel_type',
-				testId: 'channel-type-select',
-			});
-		});
-		// Default Channel type (Slack) fields
-		it('Should check if the selected item in the type dropdown has text "Slack"', () => {
-			expect(screen.getByText('Slack')).toBeInTheDocument();
-		});
-		it('Should check if Webhook URL label and input are displayed properly', () => {
-			testLabelInputAndHelpValue({
-				labelText: 'field_webhook_url',
-				testId: 'webhook-url-textbox',
-			});
-		});
-		it('Should check if Recepient label, input, and help text are displayed properly', () => {
-			testLabelInputAndHelpValue({
-				labelText: 'field_slack_recipient',
-				testId: 'slack-channel-textbox',
-				helpText: 'slack_channel_help',
-			});
-		});
-
-		it('Should check if Title label and text area are displayed properly', () => {
-			testLabelInputAndHelpValue({
-				labelText: 'field_slack_title',
-				testId: 'title-textarea',
-			});
-		});
-		it('Should check if Title contains template', () => {
-			const titleTextArea = screen.getByTestId('title-textarea');
-
-			expect(titleTextArea).toHaveTextContent(slackTitleDefaultValue);
-		});
-		it('Should check if Description label and text area are displayed properly', () => {
-			testLabelInputAndHelpValue({
-				labelText: 'field_slack_description',
-				testId: 'description-textarea',
-			});
-		});
-		it('Should check if Description contains template', () => {
-			const descriptionTextArea = screen.getByTestId('description-textarea');
-
-			expect(descriptionTextArea).toHaveTextContent(slackDescriptionDefaultValue);
-		});
-		it('Should check if the form buttons are displayed properly (Save, Test, Back)', () => {
-			expect(screen.getByText('button_save_channel')).toBeInTheDocument();
-			expect(screen.getByText('button_test_channel')).toBeInTheDocument();
-			expect(screen.getByText('button_return')).toBeInTheDocument();
-		});
-		it('Should check if saving the form without filling the name displays error notification', async () => {
-			const saveButton = screen.getByRole('button', {
-				name: 'button_save_channel',
-			});
-
-			fireEvent.click(saveButton);
-
-			await waitFor(() =>
-				expect(errorNotification).toHaveBeenCalledWith({
-					message: 'Error',
-					description: 'channel_name_required',
-				}),
-			);
-		});
-		it('Should check if clicking on Test button shows "An alert has been sent to this channel" success message if testing passes', async () => {
-			server.use(
-				rest.post('http://localhost/api/v1/testChannel', (req, res, ctx) =>
-					res(
-						ctx.status(200),
-						ctx.json({
-							status: 'success',
-							data: 'test alert sent',
-						}),
-					),
-				),
-			);
-			const testButton = screen.getByRole('button', {
-				name: 'button_test_channel',
-			});
-
-			fireEvent.click(testButton);
-
-			await waitFor(() =>
-				expect(successNotification).toHaveBeenCalledWith({
-					message: 'Success',
-					description: 'channel_test_done',
-				}),
-			);
-		});
-		it('Should check if clicking on Test button shows "Something went wrong" error message if testing fails', async () => {
-			const testButton = screen.getByRole('button', {
-				name: 'button_test_channel',
-			});
-
-			act(() => {
-				fireEvent.click(testButton);
-			});
-
-			await waitFor(() => expect(showErrorModal).toHaveBeenCalled());
-		});
-	});
-	describe('New Alert Channel Cascading Fields Based on Channel Type', () => {
-		describe('Webhook', () => {
-			beforeEach(() => {
-				render(<CreateAlertChannels preType={ChannelType.Webhook} />);
-			});
-
-			it('Should check if the selected item in the type dropdown has text "Webhook"', () => {
-				expect(screen.getByText('Webhook')).toBeInTheDocument();
-			});
-			it('Should check if Webhook URL label and input are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_webhook_url',
-					testId: 'webhook-url-textbox',
-				});
-			});
-			it('Should check if Webhook User Name label, input, and help text are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_webhook_username',
-					testId: 'webhook-username-textbox',
-					helpText: 'help_webhook_username',
-				});
-			});
-			it('Should check if Password label and textbox, and help text are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'Password (optional)',
-					testId: 'webhook-password-textbox',
-					helpText: 'help_webhook_password',
-				});
-			});
-		});
-		describe('PagerDuty', () => {
-			beforeEach(() => {
-				render(<CreateAlertChannels preType={ChannelType.Pagerduty} />);
-			});
-
-			it('Should check if the selected item in the type dropdown has text "Pagerduty"', () => {
-				expect(screen.getByText('Pagerduty')).toBeInTheDocument();
-			});
-			it('Should check if Routing key label, required, and textbox are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_pager_routing_key',
-					testId: 'pager-routing-key-textbox',
-				});
-			});
-			it('Should check if Description label, required, info (Shows up as description in pagerduty), and text area are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_pager_description',
-					testId: 'pager-description-textarea',
-					helpText: 'help_pager_description',
-				});
-			});
-			it('Should check if the description contains default template', () => {
-				const descriptionTextArea = screen.getByTestId(
-					'pager-description-textarea',
-				);
-
-				expect(descriptionTextArea).toHaveTextContent(
-					pagerDutyDescriptionDefaultValue,
-				);
-			});
-			it('Should check if Severity label, info (help_pager_severity), and textbox are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_pager_severity',
-					testId: 'pager-severity-textbox',
-					helpText: 'help_pager_severity',
-				});
-			});
-			it('Should check if Severity contains the default template', () => {
-				const severityTextbox = screen.getByTestId('pager-severity-textbox');
-
-				expect(severityTextbox).toHaveValue(pagerDutySeverityTextDefaultValue);
-			});
-			it('Should check if Additional Information label, text area, and help text (help_pager_details) are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_pager_details',
-					testId: 'pager-additional-details-textarea',
-					helpText: 'help_pager_details',
-				});
-			});
-			it('Should check if Additional Information contains the default template', () => {
-				const detailsTextArea = screen.getByTestId(
-					'pager-additional-details-textarea',
-				);
-
-				expect(detailsTextArea).toHaveValue(pagerDutyAdditionalDetailsDefaultValue);
-			});
-			it('Should check if Group label, text area, and info (help_pager_group) are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_pager_group',
-					testId: 'pager-group-textarea',
-					helpText: 'help_pager_group',
-				});
-			});
-			it('Should check if Class label, text area, and info (help_pager_class) are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_pager_class',
-					testId: 'pager-class-textarea',
-					helpText: 'help_pager_class',
-				});
-			});
-			it('Should check if Client label, text area, and info (Shows up as event source in Pagerduty) are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_pager_client',
-					testId: 'pager-client-textarea',
-					helpText: 'help_pager_client',
-				});
-			});
-			it('Should check if Client input contains the default value "SigNoz Alert Manager"', () => {
-				const clientTextArea = screen.getByTestId('pager-client-textarea');
-
-				expect(clientTextArea).toHaveValue('SigNoz Alert Manager');
-			});
-			it('Should check if Client URL label, text area, and info (Shows up as event source link in Pagerduty) are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_pager_client_url',
-					testId: 'pager-client-url-textarea',
-					helpText: 'help_pager_client_url',
-				});
-			});
-			it('Should check if Client URL contains the default value "https://enter-signoz-host-n-port-here/alerts"', () => {
-				const clientUrlTextArea = screen.getByTestId('pager-client-url-textarea');
-
-				expect(clientUrlTextArea).toHaveValue(
-					'https://enter-signoz-host-n-port-here/alerts',
-				);
-			});
-		});
-		describe('Opsgenie', () => {
-			beforeEach(() => {
-				render(<CreateAlertChannels preType={ChannelType.Opsgenie} />);
-			});
-
-			it('Should check if the selected item in the type dropdown has text "Opsgenie"', () => {
-				expect(screen.getByText('Opsgenie')).toBeInTheDocument();
-			});
-
-			it('Should check if API key label, required, and textbox are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_opsgenie_api_key',
-					testId: 'opsgenie-api-key-textbox',
-					required: true,
-				});
-			});
-
-			it('Should check if Message label, required, info (Shows up as message in opsgenie), and text area are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_opsgenie_message',
-					testId: 'opsgenie-message-textarea',
-					helpText: 'help_opsgenie_message',
-					required: true,
-				});
-			});
-
-			it('Should check if Message contains the default template', () => {
-				const messageTextArea = screen.getByTestId('opsgenie-message-textarea');
-
-				expect(messageTextArea).toHaveValue(opsGenieMessageDefaultValue);
-			});
-
-			it('Should check if Description label, required, info (Shows up as description in opsgenie), and text area are displayed properly `{{ if gt (len .Alerts.Firing) 0 -}}', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_opsgenie_description',
-					testId: 'opsgenie-description-textarea',
-					helpText: 'help_opsgenie_description',
-					required: true,
-				});
-			});
-
-			it('Should check if Description label, required, info (Shows up as description in opsgenie), and text area are displayed properly `{{ if gt (len .Alerts.Firing) 0 -}}', () => {
-				const descriptionTextArea = screen.getByTestId(
-					'opsgenie-description-textarea',
-				);
-
-				expect(descriptionTextArea).toHaveTextContent(
-					opsGenieDescriptionDefaultValue,
-				);
-			});
-
-			it('Should check if Priority label, required, info (help_opsgenie_priority), and text area are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_opsgenie_priority',
-					testId: 'opsgenie-priority-textarea',
-					helpText: 'help_opsgenie_priority',
-					required: true,
-				});
-			});
-
-			it('Should check if Message contains the default template', () => {
-				const priorityTextArea = screen.getByTestId('opsgenie-priority-textarea');
-
-				expect(priorityTextArea).toHaveValue(opsGeniePriorityDefaultValue);
-			});
-		});
-		describe('Email', () => {
-			beforeEach(() => {
-				render(<CreateAlertChannels preType={ChannelType.Email} />);
-			});
-
-			it('Should check if the selected item in the type dropdown has text "Email"', () => {
-				expect(screen.getByText('Email')).toBeInTheDocument();
-			});
-			it('Should check if API key label, required, info(help_email_to), and textbox are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_email_to',
-					testId: 'email-to-textbox',
-					helpText: 'help_email_to',
-					required: true,
-				});
-			});
-		});
-		describe('Microsoft Teams', () => {
-			beforeEach(() => {
-				render(<CreateAlertChannels preType={ChannelType.MsTeams} />);
-			});
-
-			it('Should check if the selected item in the type dropdown has text "msteams"', () => {
-				expect(screen.getByText('Microsoft Teams')).toBeInTheDocument();
-			});
-
-			it('Should check if Webhook URL label and input are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_webhook_url',
-					testId: 'webhook-url-textbox',
-				});
-			});
-
-			it('Should check if Title label and text area are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_slack_title',
-					testId: 'title-textarea',
-				});
-			});
-
-			it('Should check if Title contains template', () => {
-				const titleTextArea = screen.getByTestId('title-textarea');
-
-				expect(titleTextArea).toHaveTextContent(slackTitleDefaultValue);
-			});
-			it('Should check if Description label and text area are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_slack_description',
-					testId: 'description-textarea',
-				});
-			});
-
-			it('Should check if Description contains template', () => {
-				const descriptionTextArea = screen.getByTestId('description-textarea');
-
-				expect(descriptionTextArea).toHaveTextContent(slackDescriptionDefaultValue);
-			});
-		});
-		describe('Google Chat', () => {
-			const validWebhookUrl =
-				'https://chat.googleapis.com/v1/spaces/AAAA/messages?key=dummy_key&token=dummy_token';
-
-			beforeEach(() => {
-				render(<CreateAlertChannels preType={ChannelType.GoogleChat} />);
-			});
-
-			// paste instead of type: a per-keystroke re-render of the whole form
-			// pushes these tests past the 5s jest timeout on slower CI runners
-			async function fillField(
-				user: ReturnType<typeof userEvent.setup>,
-				testId: string,
-				value: string,
-			): Promise<void> {
-				await user.click(screen.getByTestId(testId));
-				await user.paste(value);
-			}
-
-			it('Should check if the selected item in the type dropdown has text "Google Chat"', () => {
-				expect(screen.getByText('Google Chat')).toBeInTheDocument();
-			});
-
-			it('Should check if Webhook URL label and input are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_webhook_url',
-					testId: 'webhook-url-textbox',
-				});
-			});
-
-			it('Should check if Title contains the google chat template', () => {
-				expect(screen.getByTestId('title-textarea')).toHaveTextContent(
-					googleChatTitleDefaultValue,
-				);
-			});
-
-			it('Should check if Description contains the google chat template', () => {
-				expect(screen.getByTestId('description-textarea')).toHaveTextContent(
-					googleChatDescriptionDefaultValue,
-				);
-			});
-
-			it('Should check if saving with a webhook url outside chat.googleapis.com displays error notification', async () => {
-				const user = userEvent.setup();
-
-				await fillField(user, 'channel-name-textbox', 'gchat-channel');
-				await fillField(user, 'webhook-url-textbox', 'https://example.com/webhook');
-
-				await user.click(screen.getByTestId('save-channel-button'));
-
-				await waitFor(() =>
-					expect(errorNotification).toHaveBeenCalledWith({
-						message: 'Error',
-						description: 'google_chat_webhook_url_invalid',
-					}),
-				);
-			});
-
-			it('Should check if saving sends a googlechat_configs payload', async () => {
-				let requestBody: unknown;
-				server.use(
-					rest.post('http://localhost/api/v1/channels', async (req, res, ctx) => {
-						requestBody = await req.json();
-						return res(
-							ctx.status(201),
-							ctx.json({ status: 'success', data: 'channel created' }),
-						);
-					}),
-				);
-
-				const user = userEvent.setup();
-
-				await fillField(user, 'channel-name-textbox', 'gchat-channel');
-				await fillField(user, 'webhook-url-textbox', validWebhookUrl);
-
-				await user.click(screen.getByTestId('save-channel-button'));
-
-				await waitFor(() =>
-					expect(successNotification).toHaveBeenCalledWith({
-						message: 'Success',
-						description: 'channel_creation_done',
-					}),
-				);
-
-				expect(requestBody).toStrictEqual({
-					name: 'gchat-channel',
-					googlechat_configs: [
-						{
-							webhook_url: validWebhookUrl,
-							title: GoogleChatInitialConfig.title,
-							text: GoogleChatInitialConfig.text,
-							send_resolved: true,
-						},
-					],
-				});
-			});
-		});
-		describe('Jira', () => {
-			const validSite = 'https://acme.atlassian.net';
-
-			const fillRequired = async (
-				user: ReturnType<typeof userEvent.setup>,
-				site: string,
-			): Promise<void> => {
-				await user.type(screen.getByTestId('channel-name-textbox'), 'jira-channel');
-				await user.type(screen.getByTestId('jira-site-textbox'), site);
-				await user.type(screen.getByTestId('jira-email-textbox'), 'me@acme.com');
-				await user.type(screen.getByTestId('jira-api-token-textbox'), 'tok123');
-				await user.type(screen.getByTestId('jira-project-textbox'), 'KAN');
-			};
-
-			beforeEach(() => {
-				render(<CreateAlertChannels preType={ChannelType.Jira} />);
-			});
-
-			it('Should check if the selected item in the type dropdown has text "Jira"', () => {
-				expect(screen.getByText('Jira')).toBeInTheDocument();
-			});
-
-			it('Should check if the Site URL field is displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_jira_site',
-					testId: 'jira-site-textbox',
-				});
-			});
-
-			it('Should prefill the issue type with Task', () => {
-				expect(screen.getByTestId('jira-issue-type-textbox')).toHaveValue('Task');
-			});
-
-			it('Should show the service-account recommendation tip linking to the docs', () => {
-				expect(screen.getByTestId('jira-service-account-tip')).toBeInTheDocument();
-				expect(
-					screen.getByRole('link', { name: 'jira_service_account_tip_link' }),
-				).toHaveAttribute(
-					'href',
-					'https://signoz.io/docs/alerts-management/notification-channel/jira/#use-a-service-account-recommended',
-				);
-			});
-
-			it('Should display an error when the site is not an atlassian.net URL', async () => {
-				const user = userEvent.setup({ delay: null });
-				await fillRequired(user, 'https://example.com');
-
-				await user.click(screen.getByTestId('save-channel-button'));
-
-				await waitFor(() =>
-					expect(errorNotification).toHaveBeenCalledWith({
-						message: 'Error',
-						description: 'jira_site_invalid',
-					}),
-				);
-			}, 15000);
-
-			it('Should send a jira_configs payload with basic auth', async () => {
-				let requestBody: unknown;
-				server.use(
-					rest.post('http://localhost/api/v1/channels', async (req, res, ctx) => {
-						requestBody = await req.json();
-						return res(
-							ctx.status(201),
-							ctx.json({ status: 'success', data: 'channel created' }),
-						);
-					}),
-				);
-
-				const user = userEvent.setup({ delay: null });
-				await fillRequired(user, validSite);
-				await user.click(screen.getByText('jira_advanced_section'));
-				await user.type(
-					screen.getByTestId('jira-wont-fix-resolution-textbox'),
-					"Won't Do",
-				);
-
-				await user.click(screen.getByTestId('save-channel-button'));
-
-				await waitFor(() =>
-					expect(successNotification).toHaveBeenCalledWith({
-						message: 'Success',
-						description: 'channel_creation_done',
-					}),
-				);
-
-				expect(requestBody).toStrictEqual({
-					name: 'jira-channel',
-					jira_configs: [
-						{
-							site: validSite,
-							project: 'KAN',
-							issue_type: 'Task',
-							summary: JiraInitialConfig.summary,
-							description: JiraInitialConfig.description,
-							send_resolved: true,
-							wont_fix_resolution: "Won't Do",
-							http_config: {
-								basic_auth: { username: 'me@acme.com', password: 'tok123' },
-							},
-						},
-					],
-				});
-			}, 15000);
-
-			it('Should block save when the reopen window is below the 1m minimum', async () => {
-				const user = userEvent.setup({ delay: null });
-				await fillRequired(user, validSite);
-
-				await user.click(screen.getByText('jira_advanced_section'));
-				await user.type(screen.getByTestId('jira-reopen-duration-textbox'), '30s');
-
-				// the rule surfaces an inline message, not just a red border
-				await expect(
-					screen.findByText('jira_reopen_duration_invalid'),
-				).resolves.toBeInTheDocument();
-
-				await user.click(screen.getByTestId('save-channel-button'));
-
-				await waitFor(() =>
-					expect(errorNotification).toHaveBeenCalledWith({
-						message: 'Error',
-						description: 'jira_reopen_duration_invalid',
-					}),
-				);
-			}, 15000);
-		});
-		describe('JSM Ops', () => {
-			beforeEach(() => {
-				render(<CreateAlertChannels preType={ChannelType.JsmOps} />);
-			});
-
-			it('Should show "Jira Service Management Ops" as the selected type', () => {
-				expect(screen.getByText('Jira Service Management Ops')).toBeInTheDocument();
-			});
-
-			it('Should display the API key field properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_jsmops_api_key',
-					testId: 'jsmops-api-key-textbox',
-				});
-			});
-
-			it('Should show the tip linking to the JSM Ops docs', () => {
-				expect(screen.getByTestId('jsmops-tip')).toBeInTheDocument();
-				expect(
-					screen.getByRole('link', { name: 'jsmops_tip_link' }),
-				).toHaveAttribute(
-					'href',
-					'https://signoz.io/docs/alerts-management/notification-channel/jsm-ops/',
-				);
-			});
-
-			it('Should block save when the API key is missing', async () => {
-				const user = userEvent.setup();
-				await user.type(
-					screen.getByTestId('channel-name-textbox'),
-					'jsmops-channel',
-				);
-
-				await user.click(screen.getByTestId('save-channel-button'));
-
-				await waitFor(() =>
-					expect(errorNotification).toHaveBeenCalledWith({
-						message: 'Error',
-						description: 'api_key_required',
-					}),
-				);
-			});
-
-			it('Should send a jsmops_configs payload with prefilled defaults', async () => {
-				let requestBody: unknown;
-				server.use(
-					rest.post('http://localhost/api/v1/channels', async (req, res, ctx) => {
-						requestBody = await req.json();
-						return res(
-							ctx.status(201),
-							ctx.json({ status: 'success', data: 'channel created' }),
-						);
-					}),
-				);
-
-				const user = userEvent.setup();
-				await user.type(
-					screen.getByTestId('channel-name-textbox'),
-					'jsmops-channel',
-				);
-				await user.type(screen.getByTestId('jsmops-api-key-textbox'), 'key-abc');
-
-				await user.click(screen.getByTestId('save-channel-button'));
-
-				await waitFor(() =>
-					expect(successNotification).toHaveBeenCalledWith({
-						message: 'Success',
-						description: 'channel_creation_done',
-					}),
-				);
-
-				expect(requestBody).toStrictEqual({
-					name: 'jsmops-channel',
-					jsmops_configs: [
-						{
-							api_key: 'key-abc',
-							send_resolved: true,
-							message: JsmOpsInitialConfig.message,
-							description: JsmOpsInitialConfig.description,
-							priority: JsmOpsInitialConfig.priority,
-							tags: JsmOpsInitialConfig.tags?.join(','),
-						},
-					],
-				});
-			});
-		});
-		describe('incident.io', () => {
-			const incidentIOURL =
-				'https://api.incident.io/v2/alert_events/http/01M0D1JNVBGBGVTWX053EM12XV';
-
-			beforeEach(() => {
-				render(<CreateAlertChannels preType={ChannelType.IncidentIO} />);
-			});
-
-			it('Should display the URL and token fields with the docs tip', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_incidentio_url',
-					testId: 'incidentio-url-textbox',
-				});
-				testLabelInputAndHelpValue({
-					labelText: 'field_incidentio_token',
-					testId: 'incidentio-token-textbox',
-				});
-				expect(screen.getByTestId('incidentio-tip')).toBeInTheDocument();
-				expect(
-					screen.getByRole('link', { name: 'incidentio_tip_link' }),
-				).toHaveAttribute(
-					'href',
-					'https://signoz.io/docs/alerts-management/notification-channel/incidentio/',
-				);
-			});
-
-			it('Should block save when the URL or token is missing', async () => {
-				const user = userEvent.setup();
-				await user.type(
-					screen.getByTestId('channel-name-textbox'),
-					'incidentio-channel',
-				);
-
-				await user.click(screen.getByTestId('save-channel-button'));
-
-				await waitFor(() =>
-					expect(errorNotification).toHaveBeenCalledWith({
-						message: 'Error',
-						description: 'incidentio_required_fields',
-					}),
-				);
-			});
-
-			it('Should display an error when the URL is not an alert events URL', async () => {
-				const user = userEvent.setup();
-				await user.type(
-					screen.getByTestId('channel-name-textbox'),
-					'incidentio-channel',
-				);
-				await user.type(
-					screen.getByTestId('incidentio-url-textbox'),
-					'https://api.incident.io/v2/incidents',
-				);
-				await user.type(screen.getByTestId('incidentio-token-textbox'), 'tok-abc');
-
-				await user.click(screen.getByTestId('save-channel-button'));
-
-				await waitFor(() =>
-					expect(errorNotification).toHaveBeenCalledWith({
-						message: 'Error',
-						description: 'incidentio_url_invalid',
-					}),
-				);
-			}, 15000);
-
-			it('Should send an incidentio_configs payload with prefilled defaults', async () => {
-				let requestBody: unknown;
-				server.use(
-					rest.post('http://localhost/api/v1/channels', async (req, res, ctx) => {
-						requestBody = await req.json();
-						return res(
-							ctx.status(201),
-							ctx.json({ status: 'success', data: 'channel created' }),
-						);
-					}),
-				);
-
-				const user = userEvent.setup();
-				await user.type(
-					screen.getByTestId('channel-name-textbox'),
-					'incidentio-channel',
-				);
-				await user.type(
-					screen.getByTestId('incidentio-url-textbox'),
-					incidentIOURL,
-				);
-				await user.type(screen.getByTestId('incidentio-token-textbox'), 'tok-abc');
-
-				await user.click(screen.getByTestId('incidentio-metadata-add'));
-				await user.type(screen.getByTestId('incidentio-metadata-key-0'), 'team');
-				await user.type(screen.getByTestId('incidentio-metadata-value-0'), 'core');
-
-				await user.click(screen.getByTestId('save-channel-button'));
-
-				await waitFor(() =>
-					expect(successNotification).toHaveBeenCalledWith({
-						message: 'Success',
-						description: 'channel_creation_done',
-					}),
-				);
-
-				expect(requestBody).toStrictEqual({
-					name: 'incidentio-channel',
-					incidentio_configs: [
-						{
-							url: incidentIOURL,
-							token: 'tok-abc',
-							send_resolved: true,
-							title: IncidentIOInitialConfig.title,
-							description: IncidentIOInitialConfig.description,
-							metadata: { team: 'core' },
-						},
-					],
-				});
-			}, 15000);
-		});
-		describe('Changing the channel type', () => {
-			async function selectType(
-				user: ReturnType<typeof userEvent.setup>,
-				optionText: string,
-			): Promise<void> {
-				// the type dropdown opens on the inner search input of the antd select
-				await user.click(screen.getByRole('combobox'));
-				await user.click(await screen.findByTitle(optionText));
-			}
-
-			it('Should check if switching to Google Chat and back swaps the prefilled templates', async () => {
-				const user = userEvent.setup();
-				render(<CreateAlertChannels preType={ChannelType.Slack} />);
-
-				await selectType(user, 'Google Chat');
-
-				await waitFor(() =>
-					expect(screen.getByTestId('title-textarea')).toHaveTextContent(
-						googleChatTitleDefaultValue,
-					),
-				);
-				expect(screen.getByTestId('description-textarea')).toHaveTextContent(
-					googleChatDescriptionDefaultValue,
-				);
-
-				await selectType(user, 'Slack');
-
-				await waitFor(() =>
-					expect(screen.getByTestId('title-textarea')).toHaveTextContent(
-						slackTitleDefaultValue,
-					),
-				);
-				expect(screen.getByTestId('description-textarea')).toHaveTextContent(
-					slackDescriptionDefaultValue,
-				);
-			});
-
-			it('Should check if switching to Pagerduty prefills the pagerduty description and not the opsgenie one', async () => {
-				const user = userEvent.setup();
-				render(<CreateAlertChannels preType={ChannelType.Opsgenie} />);
-
-				await selectType(user, 'Pagerduty');
-
-				await waitFor(() =>
-					expect(screen.getByTestId('pager-description-textarea')).toHaveTextContent(
-						pagerDutyDescriptionDefaultValue,
-					),
-				);
-			});
-		});
-	});
-});

frontend/src/container/AllAlertChannels/__tests__/CreateAlertChannelNormalUser.test.tsx

@@ -1,336 +0,0 @@
-import CreateAlertChannels from 'container/CreateAlertChannels';
-import { ChannelType } from 'container/CreateAlertChannels/config';
-import {
-	opsGenieDescriptionDefaultValue,
-	opsGenieMessageDefaultValue,
-	opsGeniePriorityDefaultValue,
-	pagerDutyAdditionalDetailsDefaultValue,
-	pagerDutyDescriptionDefaultValue,
-	pagerDutySeverityTextDefaultValue,
-	slackDescriptionDefaultValue,
-	slackTitleDefaultValue,
-} from 'mocks-server/__mockdata__/alerts';
-import { render, screen } from 'tests/test-utils';
-
-import { testLabelInputAndHelpValue } from './testUtils';
-
-jest.mock('components/MarkdownRenderer/MarkdownRenderer', () => ({
-	MarkdownRenderer: jest.fn(() => <div>Mocked MarkdownRenderer</div>),
-}));
-
-describe('Create Alert Channel (Normal User)', () => {
-	afterEach(() => {
-		jest.clearAllMocks();
-	});
-	describe('Should check if the new alert channel is properly displayed with the cascading fields of slack channel', () => {
-		beforeEach(() => {
-			render(<CreateAlertChannels preType={ChannelType.Slack} />);
-		});
-		it('Should check if the title is "New Notification Channels"', () => {
-			expect(screen.getByText('page_title_create')).toBeInTheDocument();
-		});
-		it('Should check if the name label and textbox are displayed properly', () => {
-			testLabelInputAndHelpValue({
-				labelText: 'field_channel_name',
-				testId: 'channel-name-textbox',
-			});
-		});
-		it('Should check if Send resolved alerts label and checkbox are displayed properly', () => {
-			testLabelInputAndHelpValue({
-				labelText: 'field_send_resolved',
-				testId: 'field-send-resolved-checkbox',
-			});
-		});
-		it('Should check if channel type label and dropdown are displayed properly', () => {
-			testLabelInputAndHelpValue({
-				labelText: 'field_channel_type',
-				testId: 'channel-type-select',
-			});
-		});
-		// Default Channel type (Slack) fields
-		it('Should check if the selected item in the type dropdown has text "Slack"', () => {
-			expect(screen.getByText('Slack')).toBeInTheDocument();
-		});
-		it('Should check if Webhook URL label and input are displayed properly', () => {
-			testLabelInputAndHelpValue({
-				labelText: 'field_webhook_url',
-				testId: 'webhook-url-textbox',
-			});
-		});
-		it('Should check if Recepient label, input, and help text are displayed properly', () => {
-			testLabelInputAndHelpValue({
-				labelText: 'field_slack_recipient',
-				testId: 'slack-channel-textbox',
-				helpText: 'slack_channel_help',
-			});
-		});
-
-		it('Should check if Title label and text area are displayed properly', () => {
-			testLabelInputAndHelpValue({
-				labelText: 'field_slack_title',
-				testId: 'title-textarea',
-			});
-		});
-		it('Should check if Title contains template', () => {
-			const titleTextArea = screen.getByTestId('title-textarea');
-
-			expect(titleTextArea).toHaveTextContent(slackTitleDefaultValue);
-		});
-		it('Should check if Description label and text area are displayed properly', () => {
-			testLabelInputAndHelpValue({
-				labelText: 'field_slack_description',
-				testId: 'description-textarea',
-			});
-		});
-		it('Should check if Description contains template', () => {
-			const descriptionTextArea = screen.getByTestId('description-textarea');
-
-			expect(descriptionTextArea).toHaveTextContent(slackDescriptionDefaultValue);
-		});
-		it('Should check if the form buttons are displayed properly (Save, Test, Back)', () => {
-			expect(screen.getByText('button_save_channel')).toBeInTheDocument();
-			expect(screen.getByText('button_test_channel')).toBeInTheDocument();
-			expect(screen.getByText('button_return')).toBeInTheDocument();
-		});
-	});
-	describe('New Alert Channel Cascading Fields Based on Channel Type', () => {
-		describe('Webhook', () => {
-			beforeEach(() => {
-				render(<CreateAlertChannels preType={ChannelType.Webhook} />);
-			});
-
-			it('Should check if the selected item in the type dropdown has text "Webhook"', () => {
-				expect(screen.getByText('Webhook')).toBeInTheDocument();
-			});
-			it('Should check if Webhook URL label and input are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_webhook_url',
-					testId: 'webhook-url-textbox',
-				});
-			});
-			it('Should check if Webhook User Name label, input, and help text are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_webhook_username',
-					testId: 'webhook-username-textbox',
-					helpText: 'help_webhook_username',
-				});
-			});
-			it('Should check if Password label and textbox, and help text are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'Password (optional)',
-					testId: 'webhook-password-textbox',
-					helpText: 'help_webhook_password',
-				});
-			});
-		});
-		describe('PagerDuty', () => {
-			beforeEach(() => {
-				render(<CreateAlertChannels preType={ChannelType.Pagerduty} />);
-			});
-
-			it('Should check if the selected item in the type dropdown has text "Pagerduty"', () => {
-				expect(screen.getByText('Pagerduty')).toBeInTheDocument();
-			});
-			it('Should check if Routing key label, required, and textbox are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_pager_routing_key',
-					testId: 'pager-routing-key-textbox',
-				});
-			});
-			it('Should check if Description label, required, info (Shows up as description in pagerduty), and text area are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_pager_description',
-					testId: 'pager-description-textarea',
-					helpText: 'help_pager_description',
-				});
-			});
-			it('Should check if the description contains default template', () => {
-				const descriptionTextArea = screen.getByTestId(
-					'pager-description-textarea',
-				);
-
-				expect(descriptionTextArea).toHaveTextContent(
-					pagerDutyDescriptionDefaultValue,
-				);
-			});
-			it('Should check if Severity label, info (help_pager_severity), and textbox are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_pager_severity',
-					testId: 'pager-severity-textbox',
-					helpText: 'help_pager_severity',
-				});
-			});
-			it('Should check if Severity contains the default template', () => {
-				const severityTextbox = screen.getByTestId('pager-severity-textbox');
-
-				expect(severityTextbox).toHaveValue(pagerDutySeverityTextDefaultValue);
-			});
-			it('Should check if Additional Information label, text area, and help text (help_pager_details) are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_pager_details',
-					testId: 'pager-additional-details-textarea',
-					helpText: 'help_pager_details',
-				});
-			});
-			it('Should check if Additional Information contains the default template', () => {
-				const detailsTextArea = screen.getByTestId(
-					'pager-additional-details-textarea',
-				);
-
-				expect(detailsTextArea).toHaveValue(pagerDutyAdditionalDetailsDefaultValue);
-			});
-			it('Should check if Group label, text area, and info (help_pager_group) are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_pager_group',
-					testId: 'pager-group-textarea',
-					helpText: 'help_pager_group',
-				});
-			});
-			it('Should check if Class label, text area, and info (help_pager_class) are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_pager_class',
-					testId: 'pager-class-textarea',
-					helpText: 'help_pager_class',
-				});
-			});
-			it('Should check if Client label, text area, and info (Shows up as event source in Pagerduty) are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_pager_client',
-					testId: 'pager-client-textarea',
-					helpText: 'help_pager_client',
-				});
-			});
-			it('Should check if Client input contains the default value "SigNoz Alert Manager"', () => {
-				const clientTextArea = screen.getByTestId('pager-client-textarea');
-
-				expect(clientTextArea).toHaveValue('SigNoz Alert Manager');
-			});
-			it('Should check if Client URL label, text area, and info (Shows up as event source link in Pagerduty) are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_pager_client_url',
-					testId: 'pager-client-url-textarea',
-					helpText: 'help_pager_client_url',
-				});
-			});
-			it('Should check if Client URL contains the default value "https://enter-signoz-host-n-port-here/alerts"', () => {
-				const clientUrlTextArea = screen.getByTestId('pager-client-url-textarea');
-
-				expect(clientUrlTextArea).toHaveValue(
-					'https://enter-signoz-host-n-port-here/alerts',
-				);
-			});
-		});
-		describe('Opsgenie', () => {
-			beforeEach(() => {
-				render(<CreateAlertChannels preType={ChannelType.Opsgenie} />);
-			});
-
-			it('Should check if the selected item in the type dropdown has text "Opsgenie"', () => {
-				expect(screen.getByText('Opsgenie')).toBeInTheDocument();
-			});
-
-			it('Should check if API key label, required, and textbox are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_opsgenie_api_key',
-					testId: 'opsgenie-api-key-textbox',
-					required: true,
-				});
-			});
-
-			it('Should check if Message label, required, info (Shows up as message in opsgenie), and text area are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_opsgenie_message',
-					testId: 'opsgenie-message-textarea',
-					helpText: 'help_opsgenie_message',
-					required: true,
-				});
-			});
-
-			it('Should check if Message contains the default template', () => {
-				const messageTextArea = screen.getByTestId('opsgenie-message-textarea');
-
-				expect(messageTextArea).toHaveValue(opsGenieMessageDefaultValue);
-			});
-
-			it('Should check if Description label, required, info (Shows up as description in opsgenie), and text area are displayed properly `{{ if gt (len .Alerts.Firing) 0 -}}', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_opsgenie_description',
-					testId: 'opsgenie-description-textarea',
-					helpText: 'help_opsgenie_description',
-					required: true,
-				});
-			});
-
-			it('Should check if Description label, required, info (Shows up as description in opsgenie), and text area are displayed properly `{{ if gt (len .Alerts.Firing) 0 -}}', () => {
-				const descriptionTextArea = screen.getByTestId(
-					'opsgenie-description-textarea',
-				);
-
-				expect(descriptionTextArea).toHaveTextContent(
-					opsGenieDescriptionDefaultValue,
-				);
-			});
-
-			it('Should check if Priority label, required, info (help_opsgenie_priority), and text area are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_opsgenie_priority',
-					testId: 'opsgenie-priority-textarea',
-					helpText: 'help_opsgenie_priority',
-					required: true,
-				});
-			});
-
-			it('Should check if Message contains the default template', () => {
-				const priorityTextArea = screen.getByTestId('opsgenie-priority-textarea');
-
-				expect(priorityTextArea).toHaveValue(opsGeniePriorityDefaultValue);
-			});
-		});
-		describe('Email', () => {
-			beforeEach(() => {
-				render(<CreateAlertChannels preType={ChannelType.Email} />);
-			});
-
-			it('Should check if the selected item in the type dropdown has text "Email"', () => {
-				expect(screen.getByText('Email')).toBeInTheDocument();
-			});
-			it('Should check if API key label, required, info(help_email_to), and textbox are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_email_to',
-					testId: 'email-to-textbox',
-					helpText: 'help_email_to',
-					required: true,
-				});
-			});
-		});
-		describe('Microsoft Teams', () => {
-			beforeEach(() => {
-				render(<CreateAlertChannels preType={ChannelType.MsTeams} />);
-			});
-
-			it('Should check if the selected item in the type dropdown has text "Microsoft Teams"', () => {
-				expect(screen.getByText('Microsoft Teams')).toBeInTheDocument();
-			});
-
-			it('Should check if the form buttons are displayed properly (Save, Test, Back)', () => {
-				expect(
-					screen.getByRole('button', { name: 'button_save_channel' }),
-				).toBeInTheDocument();
-				expect(
-					screen.getByRole('button', { name: 'button_test_channel' }),
-				).toBeInTheDocument();
-				expect(
-					screen.getByRole('button', { name: 'button_return' }),
-				).toBeInTheDocument();
-			});
-			it.skip('Should check if save and test buttons are disabled', () => {
-				expect(
-					screen.getByRole('button', { name: 'button_save_channel' }),
-				).toBeDisabled();
-				expect(
-					screen.getByRole('button', { name: 'button_test_channel' }),
-				).toBeDisabled();
-			});
-		});
-	});
-});

frontend/src/container/AllAlertChannels/__tests__/EditAlertChannel.test.tsx

@@ -1,120 +0,0 @@
-import EditAlertChannels from 'container/EditAlertChannels';
-import {
-	editAlertChannelInitialValue,
-	editSlackDescriptionDefaultValue,
-	slackTitleDefaultValue,
-} from 'mocks-server/__mockdata__/alerts';
-import { render, screen } from 'tests/test-utils';
-
-import { testLabelInputAndHelpValue } from './testUtils';
-
-const successNotification = jest.fn();
-const errorNotification = jest.fn();
-jest.mock('hooks/useNotifications', () => ({
-	__esModule: true,
-	useNotifications: jest.fn(() => ({
-		notifications: {
-			success: successNotification,
-			error: errorNotification,
-		},
-	})),
-}));
-
-jest.mock('components/MarkdownRenderer/MarkdownRenderer', () => ({
-	MarkdownRenderer: jest.fn(() => <div>Mocked MarkdownRenderer</div>),
-}));
-
-describe('Should check if the edit alert channel is properly displayed', () => {
-	beforeEach(() => {
-		render(
-			<EditAlertChannels
-				channelId="3"
-				initialValue={editAlertChannelInitialValue}
-			/>,
-		);
-	});
-	afterEach(() => {
-		jest.clearAllMocks();
-	});
-	it('Should check if the title is "Edit Notification Channels"', () => {
-		expect(screen.getByText('page_title_edit')).toBeInTheDocument();
-	});
-
-	it('Should check if the name label and textbox are displayed properly', () => {
-		testLabelInputAndHelpValue({
-			labelText: 'field_channel_name',
-			testId: 'channel-name-textbox',
-			value: 'Dummy-Channel',
-		});
-	});
-	it('Should check if Send resolved alerts label and checkbox are displayed properly and the checkbox is checked', () => {
-		testLabelInputAndHelpValue({
-			labelText: 'field_send_resolved',
-			testId: 'field-send-resolved-checkbox',
-		});
-		expect(screen.getByTestId('field-send-resolved-checkbox')).toBeChecked();
-	});
-
-	it('Should check if channel type label and dropdown are displayed properly', () => {
-		testLabelInputAndHelpValue({
-			labelText: 'field_channel_type',
-			testId: 'channel-type-select',
-		});
-	});
-
-	it('Should check if the selected item in the type dropdown has text "Slack"', () => {
-		expect(screen.getByText('Slack')).toBeInTheDocument();
-	});
-
-	it('Should check if Webhook URL label and input are displayed properly', () => {
-		testLabelInputAndHelpValue({
-			labelText: 'field_webhook_url',
-			testId: 'webhook-url-textbox',
-			value:
-				'https://discord.com/api/webhooks/dummy_webhook_id/dummy_webhook_token/slack',
-		});
-	});
-
-	it('Should check if Recepient label, input, and help text are displayed properly', () => {
-		testLabelInputAndHelpValue({
-			labelText: 'field_slack_recipient',
-			testId: 'slack-channel-textbox',
-			helpText: 'slack_channel_help',
-			value: '#dummy_channel',
-		});
-	});
-
-	it('Should check if Title label and text area are displayed properly', () => {
-		testLabelInputAndHelpValue({
-			labelText: 'field_slack_title',
-			testId: 'title-textarea',
-		});
-	});
-
-	it('Should check if Title contains template', () => {
-		const titleTextArea = screen.getByTestId('title-textarea');
-
-		expect(titleTextArea).toHaveTextContent(slackTitleDefaultValue);
-	});
-
-	it('Should check if Description label and text area are displayed properly', () => {
-		testLabelInputAndHelpValue({
-			labelText: 'field_slack_description',
-			testId: 'description-textarea',
-		});
-	});
-
-	it('Should check if Description contains template', () => {
-		const descriptionTextArea = screen.getByTestId('description-textarea');
-
-		expect(descriptionTextArea).toHaveTextContent(
-			editSlackDescriptionDefaultValue,
-		);
-	});
-
-	it('Should check if the form buttons are displayed properly (Save, Test, Back)', () => {
-		expect(screen.getByText('button_save_channel')).toBeInTheDocument();
-		expect(screen.getByText('button_test_channel')).toBeInTheDocument();
-		expect(screen.getByText('button_return')).toBeInTheDocument();
-	});
-});

frontend/src/container/AllAlertChannels/__tests__/EditAlertChannelSave.test.tsx

@@ -1,186 +0,0 @@
-import EditAlertChannels from 'container/EditAlertChannels';
-import { editAlertChannelInitialValue } from 'mocks-server/__mockdata__/alerts';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-
-jest.mock('hooks/useNotifications', () => ({
-	__esModule: true,
-	useNotifications: jest.fn(() => ({
-		notifications: { success: jest.fn(), error: jest.fn() },
-	})),
-}));
-
-jest.mock('components/MarkdownRenderer/MarkdownRenderer', () => ({
-	MarkdownRenderer: jest.fn(() => <div>Mocked MarkdownRenderer</div>),
-}));
-
-interface EditRequest {
-	id: string;
-	body: { name: string; slack_configs: { send_resolved: boolean }[] };
-}
-
-// Captures the PUT /channels/:id request the edit form fires, so assertions can
-// run against the real HTTP payload instead of a hand-mocked api client.
-function mockEditChannel(): { calls: EditRequest[] } {
-	const result: { calls: EditRequest[] } = { calls: [] };
-	server.use(
-		rest.put('http://localhost/api/v1/channels/:id', async (req, res, ctx) => {
-			result.calls.push({
-				id: req.params.id as string,
-				body: await req.json(),
-			});
-			return res(
-				ctx.status(200),
-				ctx.json({ status: 'success', data: 'channel updated' }),
-			);
-		}),
-	);
-	return result;
-}
-
-describe('EditAlertChannels save', () => {
-	afterEach(() => jest.clearAllMocks());
-
-	it('sends the channelId in the edit request (regression: empty id)', async () => {
-		const edit = mockEditChannel();
-		render(
-			<EditAlertChannels
-				channelId="3"
-				initialValue={editAlertChannelInitialValue}
-			/>,
-		);
-
-		const user = userEvent.setup();
-		await user.click(screen.getByTestId('save-channel-button'));
-
-		await waitFor(() => expect(edit.calls).toHaveLength(1));
-		expect(edit.calls[0].id).toBe('3');
-	});
-
-	it('blocks jira save when the reopen window is below the 1m minimum', async () => {
-		const edit = mockEditChannel();
-		const jiraInitialValue = {
-			type: 'jira',
-			name: 'jira-channel',
-			site: 'https://acme.atlassian.net',
-			username: 'user@acme.io',
-			password: 'token',
-			project: 'OPS',
-			issue_type: 'Task',
-			send_resolved: true,
-			reopen_duration: '30s',
-		};
-
-		const { unmount } = render(
-			<EditAlertChannels channelId="3" initialValue={jiraInitialValue} />,
-		);
-		const user = userEvent.setup();
-		await user.click(screen.getByTestId('save-channel-button'));
-		expect(edit.calls).toHaveLength(0);
-		unmount();
-
-		render(
-			<EditAlertChannels
-				channelId="3"
-				initialValue={{ ...jiraInitialValue, reopen_duration: '72h' }}
-			/>,
-		);
-		await user.click(screen.getByTestId('save-channel-button'));
-		await waitFor(() => expect(edit.calls).toHaveLength(1));
-	});
-
-	it('preserves the jira wont-fix resolution on save', async () => {
-		const edit = mockEditChannel();
-		render(
-			<EditAlertChannels
-				channelId="3"
-				initialValue={{
-					type: 'jira',
-					name: 'jira-channel',
-					site: 'https://acme.atlassian.net',
-					username: 'user@acme.io',
-					password: 'token',
-					project: 'OPS',
-					issue_type: 'Task',
-					send_resolved: true,
-					wont_fix_resolution: "Won't Do",
-				}}
-			/>,
-		);
-		const user = userEvent.setup();
-		await user.click(screen.getByTestId('save-channel-button'));
-
-		await waitFor(() => expect(edit.calls).toHaveLength(1));
-		expect(edit.calls[0].body).toStrictEqual({
-			name: 'jira-channel',
-			jira_configs: [
-				{
-					site: 'https://acme.atlassian.net',
-					project: 'OPS',
-					issue_type: 'Task',
-					send_resolved: true,
-					wont_fix_resolution: "Won't Do",
-					http_config: {
-						basic_auth: { username: 'user@acme.io', password: 'token' },
-					},
-				},
-			],
-		});
-	});
-
-	it('sends an incidentio_configs payload when editing an incident.io channel', async () => {
-		const edit = mockEditChannel();
-		render(
-			<EditAlertChannels
-				channelId="4"
-				initialValue={{
-					type: 'incidentio',
-					name: 'incidentio-channel',
-					url: 'https://api.incident.io/v2/alert_events/http/01M0D1JNVBGBGVTWX053EM12XV',
-					token: 'tok-abc',
-					send_resolved: true,
-					metadata: { env: 'prod' },
-				}}
-			/>,
-		);
-
-		const user = userEvent.setup();
-		await user.click(screen.getByTestId('save-channel-button'));
-
-		await waitFor(() => expect(edit.calls).toHaveLength(1));
-		expect(edit.calls[0].id).toBe('4');
-		expect(edit.calls[0].body).toStrictEqual({
-			name: 'incidentio-channel',
-			incidentio_configs: [
-				{
-					url: 'https://api.incident.io/v2/alert_events/http/01M0D1JNVBGBGVTWX053EM12XV',
-					token: 'tok-abc',
-					send_resolved: true,
-					metadata: { env: 'prod' },
-				},
-			],
-		});
-	});
-
-	it('persists send_resolved toggle in the edit request', async () => {
-		const edit = mockEditChannel();
-		render(
-			<EditAlertChannels
-				channelId="3"
-				initialValue={editAlertChannelInitialValue}
-			/>,
-		);
-
-		const user = userEvent.setup();
-		const sendResolved = screen.getByTestId('field-send-resolved-checkbox');
-		expect(sendResolved).toBeChecked();
-
-		await user.click(sendResolved);
-		await user.click(screen.getByTestId('save-channel-button'));
-
-		await waitFor(() => expect(edit.calls).toHaveLength(1));
-		expect(edit.calls[0].id).toBe('3');
-		expect(edit.calls[0].body.slack_configs[0].send_resolved).toBe(false);
-	});
-});

frontend/src/container/AllAlertChannels/__tests__/testUtils.ts

@@ -1,31 +0,0 @@
-import { screen } from 'tests/test-utils';
-
-export const testLabelInputAndHelpValue = ({
-	labelText,
-	testId,
-	helpText,
-	required = false,
-	value,
-}: {
-	labelText: string;
-	testId: string;
-	helpText?: string;
-	required?: boolean;
-	value?: string;
-}): void => {
-	const label = screen.getByText(labelText);
-	expect(label).toBeInTheDocument();
-
-	const input = screen.getByTestId(testId);
-	expect(input).toBeInTheDocument();
-
-	if (helpText !== undefined) {
-		expect(screen.getByText(helpText)).toBeInTheDocument();
-	}
-	if (required) {
-		expect(input).toBeRequired();
-	}
-	if (value) {
-		expect(input).toHaveValue(value);
-	}
-};

frontend/src/container/AllAlertChannels/index.tsx

@@ -1,95 +0,0 @@
-import { useCallback, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useQuery } from 'react-query';
-import { Plus } from '@signozhq/icons';
-import { Tooltip, Flex } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import getAll from 'api/channels/getAll';
-import logEvent from 'api/common/logEvent';
-import Spinner from 'components/Spinner';
-import TextToolTip from 'components/TextToolTip';
-import ROUTES from 'constants/routes';
-import useComponentPermission from 'hooks/useComponentPermission';
-import history from 'lib/history';
-import { isUndefined } from 'lodash-es';
-import { useAppContext } from 'providers/App/App';
-import { SuccessResponseV2 } from 'types/api';
-import { Channels } from 'types/api/channels/getAll';
-import APIError from 'types/api/error';
-
-import AlertChannelsComponent from './AlertChannels';
-import { Button, ButtonContainer, RightActionContainer } from './styles';
-
-import './AllAlertChannels.styles.scss';
-
-const { Text } = Typography;
-
-function AlertChannels(): JSX.Element {
-	const { t } = useTranslation(['channels']);
-	const { user } = useAppContext();
-	const [addNewChannelPermission] = useComponentPermission(
-		['add_new_channel'],
-		user.role,
-	);
-	const onToggleHandler = useCallback(() => {
-		history.push(ROUTES.CHANNELS_NEW);
-	}, []);
-
-	const { isLoading, data, error } = useQuery<
-		SuccessResponseV2<Channels[]>,
-		APIError
-	>(['getChannels'], {
-		queryFn: () => getAll(),
-	});
-
-	useEffect(() => {
-		if (!isUndefined(data?.data)) {
-			logEvent('Alert Channel: Channel list page visited', {
-				number: data?.data?.length,
-			});
-		}
-	}, [data?.data]);
-
-	if (error) {
-		return <Typography>{error.getErrorMessage()}</Typography>;
-	}
-
-	if (isLoading || isUndefined(data?.data)) {
-		return <Spinner tip={t('loading_channels_message')} height="90vh" />;
-	}
-
-	return (
-		<div className="alert-channels-container">
-			<ButtonContainer>
-				<Text truncate={1} color="muted">
-					{t('sending_channels_note')}
-				</Text>
-
-				<RightActionContainer>
-					<TextToolTip
-						text={t('tooltip_notification_channels')}
-						url="https://signoz.io/docs/setup-alerts-notification/"
-					/>
-
-					<Tooltip
-						title={
-							!addNewChannelPermission
-								? 'Ask an admin to create alert channel'
-								: undefined
-						}
-					>
-						<Button onClick={onToggleHandler} disabled={!addNewChannelPermission}>
-							<Flex align="center" justify="center" gap={4}>
-								<Plus size="md" /> {t('button_new_channel')}
-							</Flex>
-						</Button>
-					</Tooltip>
-				</RightActionContainer>
-			</ButtonContainer>
-
-			<AlertChannelsComponent allChannels={data?.data || []} />
-		</div>
-	);
-}
-
-export default AlertChannels;

frontend/src/container/AllAlertChannels/styles.ts

@@ -1,26 +0,0 @@
-import { Button as ButtonComponent } from 'antd';
-import styled from 'styled-components';
-
-export const RightActionContainer = styled.div`
-	&&& {
-		display: flex;
-		align-items: center;
-	}
-`;
-
-export const ButtonContainer = styled.div`
-	&&& {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		margin-top: 1rem;
-		margin-bottom: 1rem;
-		padding-right: 1rem;
-	}
-`;
-
-export const Button = styled(ButtonComponent)`
-	&&& {
-		margin-left: 1rem;
-	}
-`;

frontend/src/container/CreateAlertChannels/CreateAlertChannels.styles.scss

@@ -1,13 +0,0 @@
-.create-alert-channels-container {
-	width: 100%;
-	border: 1px solid var(--l1-border);
-	background: var(--l2-background);
-	border-radius: 3px;
-
-	padding: 16px;
-
-	.form-alert-channels-title {
-		margin-top: 0px;
-		margin-bottom: 16px;
-	}
-}

frontend/src/container/CreateAlertChannels/channelConfig.test.ts

@@ -0,0 +1,148 @@
+import { AlertmanagertypesGettableNotificationChannelDTO } from 'api/generated/services/sigNoz.schemas';
+
+import { toChannelConfig, toPostableChannel } from './channelConfig';
+import { toChannelFormState } from './channelFormValues';
+import { ChannelFormValues, ChannelKind } from './types';
+
+const slackValues: ChannelFormValues = {
+	name: 'prod alerts',
+	apiUrl: 'https://hooks.slack.com/services/T/B/X',
+	channel: '#alerts',
+	title: 'title template',
+	titleLink: 'https://signoz.io',
+	text: 'body template',
+	pretext: 'pretext',
+	fallback: 'fallback',
+	footer: 'footer',
+	color: 'danger',
+	fields: [{ title: 'env', value: 'prod', short: true }],
+	actions: [{ type: 'button', text: 'Runbook', url: 'https://runbook' }],
+	sendResolved: true,
+};
+
+describe('toChannelConfig', () => {
+	it('sends every field the slack spec models, new ones included', () => {
+		expect(toChannelConfig(ChannelKind.slack, slackValues)).toStrictEqual({
+			kind: 'slack',
+			spec: {
+				apiUrl: 'https://hooks.slack.com/services/T/B/X',
+				channel: '#alerts',
+				title: 'title template',
+				titleLink: 'https://signoz.io',
+				text: 'body template',
+				pretext: 'pretext',
+				fallback: 'fallback',
+				footer: 'footer',
+				color: 'danger',
+				fields: [{ title: 'env', value: 'prod', short: true }],
+				actions: [{ type: 'button', text: 'Runbook', url: 'https://runbook' }],
+				sendResolved: true,
+			},
+		});
+	});
+
+	it('drops what a user left blank but keeps a false they chose', () => {
+		expect(
+			toChannelConfig(ChannelKind.webhook, {
+				url: 'https://example.com/hook',
+				username: '',
+				password: undefined,
+				bearerToken: '',
+				sendResolved: false,
+			}),
+		).toStrictEqual({
+			kind: 'webhook',
+			spec: { url: 'https://example.com/hook', sendResolved: false },
+		});
+	});
+
+	it('drops an attachment list the user emptied instead of sending []', () => {
+		expect(
+			toChannelConfig(ChannelKind.slack, {
+				...slackValues,
+				fields: [],
+				actions: [],
+			}).spec,
+		).not.toHaveProperty('fields');
+	});
+
+	it.each(Object.values(ChannelKind))('stamps the config as %s', (kind) => {
+		expect(toChannelConfig(kind, slackValues).kind).toBe(kind);
+	});
+
+	it('sends only the selected kind s fields, not another kind s leftovers', () => {
+		const config = toChannelConfig(ChannelKind.msteams, {
+			webhookUrl: 'https://teams.example.com/hook',
+			title: 'shared title',
+			// left over from a kind the user switched away from
+			routingKey: 'pagerduty-key',
+			apiUrl: 'https://hooks.slack.com/services/T/B/X',
+		});
+
+		expect(config.spec).toStrictEqual({
+			webhookUrl: 'https://teams.example.com/hook',
+			title: 'shared title',
+		});
+	});
+});
+
+describe('toPostableChannel', () => {
+	it('lets the api generate the immutable name from the display name', () => {
+		expect(toPostableChannel(ChannelKind.slack, slackValues)).toMatchObject({
+			generateName: true,
+			displayName: 'prod alerts',
+		});
+	});
+
+	it('leaves the display name out of the spec', () => {
+		expect(
+			toPostableChannel(ChannelKind.slack, slackValues).config.spec,
+		).not.toHaveProperty('name');
+	});
+});
+
+describe('toChannelFormState', () => {
+	it('round-trips a channel back into the form it was built from', () => {
+		const channel = {
+			id: '1',
+			name: 'prod-alerts',
+			displayName: 'prod alerts',
+			createdAt: '2026-09-01T00:00:00Z',
+			updatedAt: '2026-09-01T00:00:00Z',
+			config: toChannelConfig(ChannelKind.slack, slackValues),
+		} as AlertmanagertypesGettableNotificationChannelDTO;
+
+		const { kind, values } = toChannelFormState(channel);
+
+		expect(kind).toBe(ChannelKind.slack);
+		expect(toChannelConfig(kind, values)).toStrictEqual(channel.config);
+		expect(values.name).toBe('prod alerts');
+	});
+});
+
+describe('jira reopen duration', () => {
+	it.each([
+		['72h', '3d'],
+		['1440m', '1d'],
+		['7d', '1w'],
+		['90m', '1h30m'],
+		['3d', '3d'],
+	])('sends %s as %s, the only spelling the api accepts back', (typed, sent) => {
+		expect(
+			toChannelConfig(ChannelKind.jira, {
+				site: 'https://acme.atlassian.net',
+				project: 'OPS',
+				issueType: 'Task',
+				email: 'a@b.c',
+				apiToken: 'tok',
+				reopenDuration: typed,
+			}).spec,
+		).toMatchObject({ reopenDuration: sent });
+	});
+
+	it('leaves a duration it cannot parse for the validator to reject', () => {
+		expect(
+			toChannelConfig(ChannelKind.jira, { reopenDuration: 'tomorrow' }).spec,
+		).toMatchObject({ reopenDuration: 'tomorrow' });
+	});
+});

frontend/src/container/CreateAlertChannels/channelConfig.ts

@@ -0,0 +1,182 @@
+import {
+	AlertmanagertypesChannelConfigDTO,
+	AlertmanagertypesChannelEmailConfigDTO,
+	AlertmanagertypesChannelGoogleChatConfigDTO,
+	AlertmanagertypesChannelIncidentIOConfigDTO,
+	AlertmanagertypesChannelJiraConfigDTO,
+	AlertmanagertypesChannelJSMOpsConfigDTO,
+	AlertmanagertypesChannelMSTeamsConfigDTO,
+	AlertmanagertypesChannelOpsgenieConfigDTO,
+	AlertmanagertypesChannelPagerdutyConfigDTO,
+	AlertmanagertypesChannelSlackConfigDTO,
+	AlertmanagertypesChannelTelegramConfigDTO,
+	AlertmanagertypesChannelWebhookConfigDTO,
+	AlertmanagertypesPostableNotificationChannelDTO,
+	AlertmanagertypesTestableNotificationChannelDTO,
+	AlertmanagertypesUpdatableNotificationChannelDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { pick } from 'lodash-es';
+import { omitBlank } from 'utils/omitBlank';
+
+import { ChannelFormValues, ChannelKind, ChannelSpecFormValues } from './types';
+import { canonicalJiraReopenDuration } from './utils';
+
+/**
+ * The fields each kind sends. `satisfies` ties every entry to that kind's
+ * generated spec, so a key the API does not model fails to compile.
+ * An untouched field is dropped rather than sent empty, because the API
+ * applies its own default only for an absent key.
+ */
+const SPEC_FIELDS = {
+	[ChannelKind.slack]: [
+		'apiUrl',
+		'channel',
+		'title',
+		'titleLink',
+		'text',
+		'pretext',
+		'fallback',
+		'footer',
+		'color',
+		'fields',
+		'actions',
+		'sendResolved',
+	] as const satisfies readonly (keyof AlertmanagertypesChannelSlackConfigDTO)[],
+	[ChannelKind.webhook]: [
+		'url',
+		'username',
+		'password',
+		'bearerToken',
+		'sendResolved',
+	] as const satisfies readonly (keyof AlertmanagertypesChannelWebhookConfigDTO)[],
+	[ChannelKind.email]: [
+		'to',
+		'html',
+		'headers',
+		'sendResolved',
+	] as const satisfies readonly (keyof AlertmanagertypesChannelEmailConfigDTO)[],
+	[ChannelKind.pagerduty]: [
+		'routingKey',
+		'client',
+		'clientUrl',
+		'description',
+		'severity',
+		'component',
+		'group',
+		'class',
+		'url',
+		'details',
+		'sendResolved',
+	] as const satisfies readonly (keyof AlertmanagertypesChannelPagerdutyConfigDTO)[],
+	[ChannelKind.opsgenie]: [
+		'apiKey',
+		'apiUrl',
+		'message',
+		'description',
+		'source',
+		'priority',
+		'details',
+		'sendResolved',
+	] as const satisfies readonly (keyof AlertmanagertypesChannelOpsgenieConfigDTO)[],
+	[ChannelKind.msteams]: [
+		'webhookUrl',
+		'title',
+		'text',
+		'sendResolved',
+	] as const satisfies readonly (keyof AlertmanagertypesChannelMSTeamsConfigDTO)[],
+	[ChannelKind.googlechat]: [
+		'webhookUrl',
+		'title',
+		'text',
+		'sendResolved',
+	] as const satisfies readonly (keyof AlertmanagertypesChannelGoogleChatConfigDTO)[],
+	[ChannelKind.jira]: [
+		'site',
+		'project',
+		'issueType',
+		'email',
+		'apiToken',
+		'summary',
+		'description',
+		'priority',
+		'labels',
+		'resolveTransition',
+		'reopenTransition',
+		'wontFixResolution',
+		'reopenDuration',
+		'customFields',
+		'sendResolved',
+	] as const satisfies readonly (keyof AlertmanagertypesChannelJiraConfigDTO)[],
+	[ChannelKind.jsmops]: [
+		'apiKey',
+		'message',
+		'description',
+		'priority',
+		'tags',
+		'sendResolved',
+	] as const satisfies readonly (keyof AlertmanagertypesChannelJSMOpsConfigDTO)[],
+	[ChannelKind.incidentio]: [
+		'url',
+		'token',
+		'title',
+		'description',
+		'metadata',
+		'sendResolved',
+	] as const satisfies readonly (keyof AlertmanagertypesChannelIncidentIOConfigDTO)[],
+	[ChannelKind.telegram]: [
+		'botToken',
+		'chatId',
+		'apiUrl',
+		'title',
+		'message',
+		'messageThreadId',
+		'disableNotifications',
+		'sendResolved',
+	] as const satisfies readonly (keyof AlertmanagertypesChannelTelegramConfigDTO)[],
+} satisfies Record<ChannelKind, readonly (keyof ChannelSpecFormValues)[]>;
+
+export function toChannelConfig(
+	kind: ChannelKind,
+	values: ChannelFormValues,
+): AlertmanagertypesChannelConfigDTO {
+	const spec: Record<string, unknown> = omitBlank(
+		pick(values, SPEC_FIELDS[kind]),
+	);
+
+	// the API answers a read with the duration prometheus would print, and
+	// rejects anything spelled differently
+	if (kind === ChannelKind.jira && typeof spec.reopenDuration === 'string') {
+		spec.reopenDuration = canonicalJiraReopenDuration(spec.reopenDuration);
+	}
+
+	// The generated config type is a union whose every member fixes `kind` to a
+	// single literal, so a plain ChannelKind never matches one. Asserted once
+	// here instead of ten times.
+	return { kind, spec } as unknown as AlertmanagertypesChannelConfigDTO;
+}
+
+export function toPostableChannel(
+	kind: ChannelKind,
+	values: ChannelFormValues,
+): AlertmanagertypesPostableNotificationChannelDTO {
+	return {
+		// the API derives the immutable dns1123 name from the display name
+		generateName: true,
+		displayName: values.name ?? '',
+		config: toChannelConfig(kind, values),
+	};
+}
+
+export function toUpdatableChannel(
+	kind: ChannelKind,
+	values: ChannelFormValues,
+): AlertmanagertypesUpdatableNotificationChannelDTO {
+	return { config: toChannelConfig(kind, values) };
+}
+
+export function toTestableChannel(
+	kind: ChannelKind,
+	values: ChannelFormValues,
+): AlertmanagertypesTestableNotificationChannelDTO {
+	return { config: toChannelConfig(kind, values) };
+}

frontend/src/container/CreateAlertChannels/channelFormValues.ts

@@ -0,0 +1,25 @@
+import { AlertmanagertypesGettableNotificationChannelDTO } from 'api/generated/services/sigNoz.schemas';
+
+import { ChannelFormValues, ChannelKind } from './types';
+
+export interface ChannelFormState {
+	kind: ChannelKind;
+	values: ChannelFormValues;
+}
+
+/**
+ * The form edits the spec the API returns, so loading a channel lifts its
+ * display name alongside that spec rather than remapping field by field.
+ */
+export function toChannelFormState(
+	channel: AlertmanagertypesGettableNotificationChannelDTO,
+): ChannelFormState {
+	return {
+		kind: channel.config.kind as string as ChannelKind,
+		values: {
+			...channel.config.spec,
+			// the API keeps `name` immutable and exposes the editable label separately
+			name: channel.displayName,
+		},
+	};
+}

frontend/src/container/CreateAlertChannels/channelRoundTrip.test.ts

@@ -0,0 +1,148 @@
+import { AlertmanagertypesGettableNotificationChannelDTO } from 'api/generated/services/sigNoz.schemas';
+
+import { toChannelConfig, toUpdatableChannel } from './channelConfig';
+import { toChannelFormState } from './channelFormValues';
+import { ChannelKind } from './types';
+
+/**
+ * Loading a channel and saving it again without touching anything must send the
+ * API exactly what it returned. A field the form model drops silently loses a
+ * user's configuration on the next save, because the update replaces the whole
+ * config.
+ */
+const SPECS: Record<string, Record<string, unknown>> = {
+	slack: {
+		apiUrl: 'https://hooks.slack.com/services/T/B/X',
+		channel: '#ops',
+		title: 'title',
+		titleLink: 'https://signoz.io',
+		text: 'body',
+		pretext: 'pre',
+		fallback: 'fall',
+		footer: 'foot',
+		color: 'danger',
+		fields: [{ title: 'env', value: 'prod', short: true }],
+		actions: [{ type: 'button', text: 'Runbook', url: 'https://runbook' }],
+		sendResolved: true,
+	},
+	webhook: {
+		url: 'https://example.com/hook',
+		username: 'u',
+		password: 'p',
+		bearerToken: 't',
+		sendResolved: true,
+	},
+	email: {
+		to: 'oncall@signoz.io',
+		html: '<p>a</p>',
+		headers: { 'X-Team': 'ops' },
+		sendResolved: true,
+	},
+	pagerduty: {
+		routingKey: 'k',
+		client: 'c',
+		clientUrl: 'https://c',
+		description: 'd',
+		severity: 'critical',
+		component: 'comp',
+		group: 'grp',
+		class: 'cls',
+		url: 'https://events.pagerduty.com',
+		details: { firing: '{{ .Alerts.Firing }}' },
+		sendResolved: true,
+	},
+	opsgenie: {
+		apiKey: 'k',
+		apiUrl: 'https://api.opsgenie.com',
+		message: 'm',
+		description: 'd',
+		source: 's',
+		priority: 'P1',
+		details: { env: 'prod' },
+		sendResolved: true,
+	},
+	msteams: {
+		webhookUrl: 'https://teams',
+		title: 't',
+		text: 'b',
+		sendResolved: true,
+	},
+	googlechat: {
+		webhookUrl: 'https://chat.googleapis.com/v1/spaces/A',
+		title: 't',
+		text: 'b',
+		sendResolved: true,
+	},
+	jira: {
+		site: 'https://acme.atlassian.net',
+		project: 'OPS',
+		issueType: 'Task',
+		email: 'a@b.c',
+		apiToken: 'tok',
+		summary: 's',
+		description: 'd',
+		priority: 'High',
+		labels: ['one', 'two'],
+		resolveTransition: 'Done',
+		reopenTransition: 'Reopen',
+		wontFixResolution: 'WontFix',
+		// the API only ever returns the canonical spelling
+		reopenDuration: '3d',
+		customFields: { customfield_1: 'v' },
+		sendResolved: true,
+	},
+	jsmops: {
+		apiKey: 'k',
+		message: 'm',
+		description: 'd',
+		priority: 'P2',
+		tags: 'prod,db',
+		sendResolved: true,
+	},
+	telegram: {
+		botToken: 'tok',
+		chatId: -1001234567890,
+		apiUrl: 'https://telegram.example.com',
+		title: '<b>{{ .CommonLabels.alertname }}</b>',
+		message: '<b>{{ .CommonLabels.alertname }}</b>',
+		messageThreadId: 42,
+		disableNotifications: true,
+		sendResolved: true,
+	},
+	incidentio: {
+		url: 'https://api.incident.io/v2/alert_events/http/abc',
+		token: 'tok',
+		title: 't',
+		description: 'd',
+		metadata: { team: 'ops' },
+		sendResolved: true,
+	},
+};
+
+describe('load then save round trip', () => {
+	it.each(Object.keys(SPECS))('keeps every %s field', (kind) => {
+		const channel = {
+			id: '1',
+			name: `${kind}-channel`,
+			displayName: `${kind} channel`,
+			createdAt: '2026-01-01T00:00:00Z',
+			updatedAt: '2026-01-01T00:00:00Z',
+			config: { kind, spec: SPECS[kind] },
+		} as unknown as AlertmanagertypesGettableNotificationChannelDTO;
+
+		const { kind: loadedKind, values } = toChannelFormState(channel);
+		const saved = toUpdatableChannel(loadedKind, values);
+
+		expect(loadedKind).toBe(kind as ChannelKind);
+		expect(saved.config).toStrictEqual(channel.config);
+	});
+
+	it('never sends the display name inside the spec', () => {
+		const config = toChannelConfig(ChannelKind.slack, {
+			name: 'prod alerts',
+			apiUrl: 'https://hooks.slack.com/x',
+		});
+
+		expect(config.spec).not.toHaveProperty('name');
+	});
+});

frontend/src/container/CreateAlertChannels/config.ts

@@ -1,194 +0,0 @@
-export interface Channel {
-	send_resolved?: boolean;
-	name: string;
-	filter?: Partial<Array<LabelFilterStatement>>;
-}
-
-export interface SlackChannel extends Channel {
-	api_url?: string;
-	channel?: string;
-	title?: string;
-	text?: string;
-}
-
-export interface WebhookChannel extends Channel {
-	api_url?: string;
-	// basic auth
-	username?: string;
-	password?: string;
-}
-
-// PagerChannel configures alert manager to send
-// events to pagerduty
-export interface PagerChannel extends Channel {
-	//  ref: https://prometheus.io/docs/alerting/latest/configuration/#pagerduty_config
-	routing_key?: string;
-	// displays source of the event in pager duty
-	client?: string;
-	client_url?: string;
-	// A description of the incident
-	description?: string;
-	// Severity of the incident
-	severity?: string;
-	// The part or component of the affected system that is broken
-	component?: string;
-	//  A cluster or grouping of sources
-	group?: string;
-	// The class/type of the event.
-	class?: string;
-
-	details?: string;
-	detailsArray?: Record<string, string>;
-}
-
-// OpsgenieChannel configures alert manager to send
-// events to opsgenie
-export interface OpsgenieChannel extends Channel {
-	//  ref: https://prometheus.io/docs/alerting/latest/configuration/#opsgenie_config
-	api_key: string;
-
-	message?: string;
-
-	// A description of the incident
-	description?: string;
-
-	// A backlink to the sender of the notification.
-	source?: string;
-
-	// A set of arbitrary key/value pairs that provide further detail
-	// about the alert.
-	details?: string;
-	detailsArray?: Record<string, string>;
-
-	// Priority level of alert. Possible values are P1, P2, P3, P4, and P5.
-	priority?: string;
-}
-
-export interface EmailChannel extends Channel {
-	// comma separated list of email addresses to send alerts to
-	to: string;
-	//  HTML body of the email notification.
-	html: string;
-	// Further headers email header key/value pairs.
-	// [ headers: { <string>: <tmpl_string>, ... } ]
-	headers: Record<string, string>;
-}
-
-export const ValidatePagerChannel = (p: PagerChannel): string => {
-	if (!p) {
-		return 'Received unexpected input for this channel, please contact your administrator ';
-	}
-
-	if (!p.name || p.name === '') {
-		return 'Name is mandatory for creating a channel';
-	}
-
-	if (!p.routing_key || p.routing_key === '') {
-		return 'Routing Key is mandatory for creating pagerduty channel';
-	}
-
-	// validate details json
-	try {
-		JSON.parse(p.details || '{}');
-	} catch (e) {
-		return 'failed to parse additional information, please enter a valid json';
-	}
-
-	return '';
-};
-
-export enum ChannelType {
-	Slack = 'slack',
-	Email = 'email',
-	Webhook = 'webhook',
-	Pagerduty = 'pagerduty',
-	Opsgenie = 'opsgenie',
-	MsTeams = 'msteams',
-	GoogleChat = 'googlechat',
-	Jira = 'jira',
-	JsmOps = 'jsmops',
-	IncidentIO = 'incidentio',
-}
-
-// LabelFilterStatement will be used for preparing filter conditions / matchers
-export interface LabelFilterStatement {
-	// ref: https://prometheus.io/docs/alerting/latest/configuration/#matcher
-
-	// label name
-	name: string;
-
-	// comparators supported by promql are =, !=, =~, or !~. =
-	comparator: string;
-
-	// filter value
-	value: string;
-}
-
-export interface MsTeamsChannel extends Channel {
-	webhook_url?: string;
-	title?: string;
-	text?: string;
-}
-
-export interface GoogleChatChannel extends Channel {
-	// incoming webhook url of the google chat space, must be an
-	// https url on chat.googleapis.com
-	webhook_url?: string;
-	title?: string;
-	text?: string;
-}
-
-// JiraChannel configures the Jira Cloud alert channel. Auth is basic auth
-// (Atlassian account email + API token) carried in username / password.
-export interface JiraChannel extends Channel {
-	// Jira Cloud base URL, e.g. https://acme.atlassian.net
-	site: string;
-	project: string;
-	issue_type: string;
-	// issue title template
-	summary?: string;
-	// issue body template, rendered to rich text server-side
-	description?: string;
-	// basic auth: username is the Atlassian account email, password is the API token
-	username: string;
-	password: string;
-	priority?: string;
-	labels?: string[];
-	resolve_transition?: string;
-	reopen_transition?: string;
-	// issues resolved with this resolution are never reopened; a refire
-	// creates a new issue instead
-	wont_fix_resolution?: string;
-	// duration string, e.g. 72h or 3d
-	reopen_duration?: string;
-}
-
-// IncidentIOChannel configures the incident.io alert channel, backed by an
-// incident.io HTTP alert source (Alert Events V2 API).
-export interface IncidentIOChannel extends Channel {
-	// per-source alert events URL, e.g.
-	// https://api.incident.io/v2/alert_events/http/<source_config_id>
-	url: string;
-	// the alert source's secret token
-	token: string;
-	// alert title template
-	title?: string;
-	// alert body template (markdown, rendered natively by incident.io)
-	description?: string;
-	// extra metadata pairs merged over the alert's labels (channel wins on clash)
-	metadata?: Record<string, string>;
-}
-
-// JsmOpsChannel configures the Jira Service Management Ops alert channel
-// (ex-Opsgenie alert API). Auth is the JSM integration API key.
-export interface JsmOpsChannel extends Channel {
-	api_key: string;
-	// alert title template
-	message?: string;
-	// alert body template (markdown, rendered to HTML server-side)
-	description?: string;
-	// priority template, resolves to P1-P5
-	priority?: string;
-	// tags, joined to a comma-separated string for the backend
-	tags?: string[];
-}

frontend/src/container/CreateAlertChannels/defaults.ts

@@ -1,20 +1,21 @@
 import {
-	ChannelType,
-	EmailChannel,
-	GoogleChatChannel,
-	IncidentIOChannel,
-	JiraChannel,
-	JsmOpsChannel,
-	MsTeamsChannel,
-	OpsgenieChannel,
-	PagerChannel,
-	SlackChannel,
-	WebhookChannel,
-} from './config';
+	AlertmanagertypesChannelEmailConfigDTO,
+	AlertmanagertypesChannelGoogleChatConfigDTO,
+	AlertmanagertypesChannelIncidentIOConfigDTO,
+	AlertmanagertypesChannelJiraConfigDTO,
+	AlertmanagertypesChannelJSMOpsConfigDTO,
+	AlertmanagertypesChannelOpsgenieConfigDTO,
+	AlertmanagertypesChannelPagerdutyConfigDTO,
+	AlertmanagertypesChannelSlackConfigDTO,
+	AlertmanagertypesChannelTelegramConfigDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+import { ChannelKind, ChannelSpecFormValues } from './types';
 
 // shared by slack and ms teams, both render the same title / description boxes
-export const SlackInitialConfig: Partial<SlackChannel> = {
-	text: `{{ range .Alerts -}}
+export const SlackInitialConfig: Partial<AlertmanagertypesChannelSlackConfigDTO> =
+	{
+		text: `{{ range .Alerts -}}
      *Alert:* {{ .Labels.alertname }}{{ if .Labels.severity }} - {{ .Labels.severity }}{{ end }}
 
      *Summary:* {{ .Annotations.summary }}
@@ -26,7 +27,7 @@ export const SlackInitialConfig: Partial<SlackChannel> = {
        {{ range .Labels.SortedPairs }} • *{{ .Name }}:* {{ .Value }}
        {{ end }}
      {{ end }}`,
-	title: `[{{ .Status | toUpper }}{{ if eq .Status "firing" }}:{{ .Alerts.Firing | len }}{{ end }}] {{ .CommonLabels.alertname }} for {{ .CommonLabels.job }}
+		title: `[{{ .Status | toUpper }}{{ if eq .Status "firing" }}:{{ .Alerts.Firing | len }}{{ end }}] {{ .CommonLabels.alertname }} for {{ .CommonLabels.job }}
      {{- if gt (len .CommonLabels) (len .GroupLabels) -}}
        {{" "}}(
        {{- with .CommonLabels.Remove .GroupLabels.Names }}
@@ -37,27 +38,29 @@ export const SlackInitialConfig: Partial<SlackChannel> = {
        {{- end -}}
        )
      {{- end }}`,
-};
+	};
 
 // mirrors DefaultGoogleChatReceiverConfig in pkg/types/alertmanagertypes/googlechat.go,
 // which the backend applies when title / text are left empty
-export const GoogleChatInitialConfig: Partial<GoogleChatChannel> = {
-	title: `[{{ .Status | toUpper }}{{ if eq .Status "firing" }}:{{ .Alerts.Firing | len }}{{ end }}] {{ .CommonLabels.alertname }}`,
-	text: `{{ range .Alerts -}}
+export const GoogleChatInitialConfig: Partial<AlertmanagertypesChannelGoogleChatConfigDTO> =
+	{
+		title: `[{{ .Status | toUpper }}{{ if eq .Status "firing" }}:{{ .Alerts.Firing | len }}{{ end }}] {{ .CommonLabels.alertname }}`,
+		text: `{{ range .Alerts -}}
 **Alert:** {{ .Labels.alertname }}{{ if .Labels.severity }} ({{ .Labels.severity }}){{ end }}{{ if .Annotations.summary }}
 **Summary:** {{ .Annotations.summary }}{{ end }}{{ if .Annotations.description }}
 **Description:** {{ .Annotations.description }}{{ end }}
 {{ end }}`,
-};
+	};
 
 // mirrors DefaultJiraSummaryTemplate / DefaultJiraDescriptionTemplate in
 // pkg/types/alertmanagertypes/jira.go, which the backend applies when the
 // summary / description are left empty. The description is markdown here and is
 // wrapped in the ADF status panel + deep-links server-side.
-export const JiraInitialConfig: Partial<JiraChannel> = {
-	issue_type: 'Task',
-	summary: `[{{ .Status | toUpper }}{{ if eq .Status "firing" }}:{{ .Alerts.Firing | len }}{{ end }}] {{ .CommonLabels.alertname }}`,
-	description: `{{ range .Alerts -}}
+export const JiraInitialConfig: Partial<AlertmanagertypesChannelJiraConfigDTO> =
+	{
+		issueType: 'Task',
+		summary: `[{{ .Status | toUpper }}{{ if eq .Status "firing" }}:{{ .Alerts.Firing | len }}{{ end }}] {{ .CommonLabels.alertname }}`,
+		description: `{{ range .Alerts -}}
 **Alert:** {{ .Labels.alertname }}{{ if .Labels.severity }} ({{ .Labels.severity }}){{ end }}
 {{ if .Annotations.summary }}
 **Summary:** {{ .Annotations.summary }}
@@ -65,10 +68,11 @@ export const JiraInitialConfig: Partial<JiraChannel> = {
 **Description:** {{ .Annotations.description }}
 {{ end }}
 {{ end }}`,
-};
+	};
 
-export const PagerInitialConfig: Partial<PagerChannel> = {
-	description: `[{{ .Status | toUpper }}{{ if eq .Status "firing" }}:{{ .Alerts.Firing | len }}{{ end }}] {{ .CommonLabels.alertname }} for {{ .CommonLabels.job }}
+export const PagerInitialConfig: Partial<AlertmanagertypesChannelPagerdutyConfigDTO> =
+	{
+		description: `[{{ .Status | toUpper }}{{ if eq .Status "firing" }}:{{ .Alerts.Firing | len }}{{ end }}] {{ .CommonLabels.alertname }} for {{ .CommonLabels.job }}
 	{{- if gt (len .CommonLabels) (len .GroupLabels) -}}
 	  {{" "}}(
 	  {{- with .CommonLabels.Remove .GroupLabels.Names }}
@@ -79,20 +83,21 @@ export const PagerInitialConfig: Partial<PagerChannel> = {
 	  {{- end -}}
 	  )
 	{{- end }}`,
-	severity: '{{ (index .Alerts 0).Labels.severity }}',
-	client: 'SigNoz Alert Manager',
-	client_url: 'https://enter-signoz-host-n-port-here/alerts',
-	details: JSON.stringify({
-		firing: `{{ .Alerts.Firing | toJson }}`,
-		resolved: `{{ .Alerts.Resolved | toJson }}`,
-		num_firing: '{{ .Alerts.Firing | len }}',
-		num_resolved: '{{ .Alerts.Resolved | len }}',
-	}),
-};
+		severity: '{{ (index .Alerts 0).Labels.severity }}',
+		client: 'SigNoz Alert Manager',
+		clientUrl: 'https://enter-signoz-host-n-port-here/alerts',
+		details: {
+			firing: `{{ .Alerts.Firing | toJson }}`,
+			resolved: `{{ .Alerts.Resolved | toJson }}`,
+			num_firing: '{{ .Alerts.Firing | len }}',
+			num_resolved: '{{ .Alerts.Resolved | len }}',
+		},
+	};
 
-export const OpsgenieInitialConfig: Partial<OpsgenieChannel> = {
-	message: '{{ .CommonLabels.alertname }}',
-	description: `{{ if gt (len .Alerts.Firing) 0 -}}
+export const OpsgenieInitialConfig: Partial<AlertmanagertypesChannelOpsgenieConfigDTO> =
+	{
+		message: '{{ .CommonLabels.alertname }}',
+		description: `{{ if gt (len .Alerts.Firing) 0 -}}
 	Alerts Firing:
 	{{ range .Alerts.Firing }}
 	 - Message: {{ .Annotations.description }}
@@ -114,19 +119,20 @@ export const OpsgenieInitialConfig: Partial<OpsgenieChannel> = {
 	{{ end }}   Source: {{ .GeneratorURL }}
 	{{ end }}
 	{{- end }}`,
-	priority:
-		'{{ if eq (index .Alerts 0).Labels.severity "critical" }}P1{{ else if eq (index .Alerts 0).Labels.severity "warning" }}P2{{ else if eq (index .Alerts 0).Labels.severity "info" }}P3{{ else }}P4{{ end }}',
-};
+		priority:
+			'{{ if eq (index .Alerts 0).Labels.severity "critical" }}P1{{ else if eq (index .Alerts 0).Labels.severity "warning" }}P2{{ else if eq (index .Alerts 0).Labels.severity "info" }}P3{{ else }}P4{{ end }}',
+	};
 
 // mirrors DefaultJSMOpsMessageTemplate / DefaultJSMOpsDescriptionTemplate in
 // pkg/types/alertmanagertypes/jsmops.go, applied by the backend when message /
 // description are left empty. send_resolved is seeded on so JSM alerts close on
 // resolve (the backend cannot default it, see jsmops.go). priority mirrors the
 // Opsgenie template mapping severity to P1-P5.
-export const JsmOpsInitialConfig: Partial<JsmOpsChannel> = {
-	send_resolved: true,
-	message: `[{{ .Status | toUpper }}{{ if eq .Status "firing" }}:{{ .Alerts.Firing | len }}{{ end }}] {{ .CommonLabels.alertname }}`,
-	description: `{{ range .Alerts -}}
+export const JsmOpsInitialConfig: Partial<AlertmanagertypesChannelJSMOpsConfigDTO> =
+	{
+		sendResolved: true,
+		message: `[{{ .Status | toUpper }}{{ if eq .Status "firing" }}:{{ .Alerts.Firing | len }}{{ end }}] {{ .CommonLabels.alertname }}`,
+		description: `{{ range .Alerts -}}
 **Alert:** {{ .Labels.alertname }}{{ if .Labels.severity }} ({{ .Labels.severity }}){{ end }}
 
 {{ if .Annotations.summary }}**Summary:** {{ .Annotations.summary }}
@@ -140,19 +146,20 @@ export const JsmOpsInitialConfig: Partial<JsmOpsChannel> = {
 {{ end }}{{ if .Annotations.related_traces }}[View related traces]({{ .Annotations.related_traces }})
 
 {{ end }}{{ end }}`,
-	priority:
-		'{{ if eq (index .Alerts 0).Labels.severity "critical" }}P1{{ else if eq (index .Alerts 0).Labels.severity "warning" }}P2{{ else if eq (index .Alerts 0).Labels.severity "info" }}P3{{ else }}P4{{ end }}',
-	tags: ['signoz-alert'],
-};
+		priority:
+			'{{ if eq (index .Alerts 0).Labels.severity "critical" }}P1{{ else if eq (index .Alerts 0).Labels.severity "warning" }}P2{{ else if eq (index .Alerts 0).Labels.severity "info" }}P3{{ else }}P4{{ end }}',
+		tags: 'signoz-alert',
+	};
 
 // mirrors DefaultIncidentIOTitleTemplate / DefaultIncidentIODescriptionTemplate
 // in pkg/types/alertmanagertypes/incidentio.go, applied by the backend when
 // title / description are left empty. send_resolved is seeded on so incident.io
 // alerts resolve with the rule (the backend cannot default it).
-export const IncidentIOInitialConfig: Partial<IncidentIOChannel> = {
-	send_resolved: true,
-	title: `[{{ .Status | toUpper }}{{ if eq .Status "firing" }}:{{ .Alerts.Firing | len }}{{ end }}] {{ .CommonLabels.alertname }}`,
-	description: `{{ range .Alerts -}}
+export const IncidentIOInitialConfig: Partial<AlertmanagertypesChannelIncidentIOConfigDTO> =
+	{
+		sendResolved: true,
+		title: `[{{ .Status | toUpper }}{{ if eq .Status "firing" }}:{{ .Alerts.Firing | len }}{{ end }}] {{ .CommonLabels.alertname }}`,
+		description: `{{ range .Alerts -}}
 **Alert:** {{ .Labels.alertname }}{{ if .Labels.severity }} ({{ .Labels.severity }}){{ end }}
 
 {{ if .Annotations.summary }}**Summary:** {{ .Annotations.summary }}
@@ -166,11 +173,12 @@ export const IncidentIOInitialConfig: Partial<IncidentIOChannel> = {
 {{ end }}{{ if .Annotations.related_traces }}[View related traces]({{ .Annotations.related_traces }})
 
 {{ end }}{{ end }}`,
-};
+	};
 
-export const EmailInitialConfig: Partial<EmailChannel> = {
-	send_resolved: true,
-	html: `<!--
+export const EmailInitialConfig: Partial<AlertmanagertypesChannelEmailConfigDTO> =
+	{
+		sendResolved: true,
+		html: `<!--
 	Credits: https://github.com/mailgun/transactional-email-templates
 	-->
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
@@ -562,33 +570,40 @@ export const EmailInitialConfig: Partial<EmailChannel> = {
 	  </table>
 	</body>
   </html>`,
-};
+	};
+
+// mirrors DefaultTelegramTitleTemplate / DefaultTelegramMessageTemplate in
+// pkg/types/alertmanagertypes/channel_telegram.go, so the form shows the
+// templates it will send rather than two empty boxes. send_resolved mirrors the
+// default upstream applies, so the switch shows what will be stored.
+export const TelegramInitialConfig: Partial<AlertmanagertypesChannelTelegramConfigDTO> =
+	{
+		sendResolved: true,
+		title: `[{{ .Status | toUpper }}{{ if eq .Status "firing" }}:{{ .Alerts.Firing | len }}{{ end }}] {{ .CommonLabels.alertname | html }}`,
+		message: `{{ range .Alerts -}}
+<b>Alert:</b> {{ .Labels.alertname | html }}{{ if .Labels.severity }} ({{ .Labels.severity | html }}){{ end }}
+{{ if .Annotations.summary }}<b>Summary:</b> {{ .Annotations.summary | html }}
+{{ end }}{{ if .Annotations.description }}<b>Description:</b> {{ .Annotations.description | html }}
+{{ end }}{{ if .GeneratorURL }}<a href="{{ .GeneratorURL | html }}">View in SigNoz</a>
+{{ end }}{{ if .Annotations.related_logs }}<a href="{{ .Annotations.related_logs | html }}">View related logs</a>
+{{ end }}{{ if .Annotations.related_traces }}<a href="{{ .Annotations.related_traces | html }}">View related traces</a>
+{{ end }}
+{{ end }}`,
+	};
 
 // prefilled values of every channel type, keyed by type so the form can apply
 // exactly one set of defaults and swap it when the type changes
-export const ChannelInitialConfig: Record<
-	ChannelType,
-	Partial<
-		SlackChannel &
-			WebhookChannel &
-			PagerChannel &
-			MsTeamsChannel &
-			OpsgenieChannel &
-			EmailChannel &
-			GoogleChatChannel &
-			JiraChannel &
-			JsmOpsChannel &
-			IncidentIOChannel
-	>
-> = {
-	[ChannelType.Slack]: SlackInitialConfig,
-	[ChannelType.MsTeams]: SlackInitialConfig,
-	[ChannelType.GoogleChat]: GoogleChatInitialConfig,
-	[ChannelType.Jira]: JiraInitialConfig,
-	[ChannelType.JsmOps]: JsmOpsInitialConfig,
-	[ChannelType.IncidentIO]: IncidentIOInitialConfig,
-	[ChannelType.Pagerduty]: PagerInitialConfig,
-	[ChannelType.Opsgenie]: OpsgenieInitialConfig,
-	[ChannelType.Email]: EmailInitialConfig,
-	[ChannelType.Webhook]: {},
-};
+export const ChannelInitialConfig: Record<ChannelKind, ChannelSpecFormValues> =
+	{
+		[ChannelKind.slack]: SlackInitialConfig,
+		[ChannelKind.msteams]: SlackInitialConfig,
+		[ChannelKind.googlechat]: GoogleChatInitialConfig,
+		[ChannelKind.jira]: JiraInitialConfig,
+		[ChannelKind.jsmops]: JsmOpsInitialConfig,
+		[ChannelKind.incidentio]: IncidentIOInitialConfig,
+		[ChannelKind.pagerduty]: PagerInitialConfig,
+		[ChannelKind.opsgenie]: OpsgenieInitialConfig,
+		[ChannelKind.email]: EmailInitialConfig,
+		[ChannelKind.webhook]: {},
+		[ChannelKind.telegram]: TelegramInitialConfig,
+	};

frontend/src/container/CreateAlertChannels/index.tsx

@@ -1,818 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Form } from 'antd';
-import createEmail from 'api/channels/createEmail';
-import createMsTeamsApi from 'api/channels/createMsTeams';
-import createOpsgenie from 'api/channels/createOpsgenie';
-import createPagerApi from 'api/channels/createPager';
-import createSlackApi from 'api/channels/createSlack';
-import createWebhookApi from 'api/channels/createWebhook';
-import testEmail from 'api/channels/testEmail';
-import testMsTeamsApi from 'api/channels/testMsTeams';
-import testOpsGenie from 'api/channels/testOpsgenie';
-import testPagerApi from 'api/channels/testPager';
-import testSlackApi from 'api/channels/testSlack';
-import testWebhookApi from 'api/channels/testWebhook';
-import logEvent from 'api/common/logEvent';
-import {
-	useCreateChannel,
-	useTestChannel,
-} from 'api/generated/services/channels';
-import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
-import { ErrorType } from 'api/generatedAPIInstance';
-import ROUTES from 'constants/routes';
-import FormAlertChannels from 'container/FormAlertChannels';
-import { useNotifications } from 'hooks/useNotifications';
-import history from 'lib/history';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-import { toAPIError } from 'utils/errorUtils';
-
-import {
-	ChannelType,
-	EmailChannel,
-	GoogleChatChannel,
-	IncidentIOChannel,
-	JiraChannel,
-	JsmOpsChannel,
-	MsTeamsChannel,
-	OpsgenieChannel,
-	PagerChannel,
-	SlackChannel,
-	ValidatePagerChannel,
-	WebhookChannel,
-} from './config';
-import { ChannelInitialConfig } from './defaults';
-import {
-	isChannelType,
-	isValidGoogleChatWebhookURL,
-	isValidIncidentIOURL,
-	isValidJiraReopenDuration,
-	isValidJiraSiteURL,
-	prepareGoogleChatRequest,
-	prepareIncidentIORequest,
-	prepareJiraRequest,
-	prepareJsmOpsRequest,
-} from './utils';
-
-import './CreateAlertChannels.styles.scss';
-
-function CreateAlertChannels({
-	preType = ChannelType.Slack,
-}: CreateAlertChannelsProps): JSX.Element {
-	// init namespace for translations
-	const { t } = useTranslation('channels');
-	const { showErrorModal } = useErrorModal();
-
-	const [formInstance] = Form.useForm();
-
-	useEffect(() => {
-		logEvent('Alert Channel: Create channel page visited', {});
-	}, []);
-
-	const [selectedConfig, setSelectedConfig] = useState<
-		Partial<
-			SlackChannel &
-				WebhookChannel &
-				PagerChannel &
-				MsTeamsChannel &
-				OpsgenieChannel &
-				EmailChannel &
-				GoogleChatChannel &
-				JiraChannel &
-				JsmOpsChannel &
-				IncidentIOChannel
-		>
-	>(() => ({
-		send_resolved: true,
-		...ChannelInitialConfig[preType],
-	}));
-	const [savingState, setSavingState] = useState<boolean>(false);
-	const [testingState, setTestingState] = useState<boolean>(false);
-	const { notifications } = useNotifications();
-
-	const { mutateAsync: createChannel } = useCreateChannel();
-	const { mutateAsync: testChannel } = useTestChannel();
-
-	const [type, setType] = useState<ChannelType>(preType);
-	const onTypeChangeHandler = useCallback(
-		(value: string) => {
-			const nextType = value as ChannelType;
-			if (nextType === type) {
-				return;
-			}
-
-			setType(nextType);
-
-			// the fields the types share (title, text, description) keep the value of
-			// the type that was selected before, so the new type's defaults have to be
-			// written to both the config and the form
-			const defaults = ChannelInitialConfig[nextType];
-			setSelectedConfig((selectedConfig) => ({ ...selectedConfig, ...defaults }));
-			formInstance.setFieldsValue(defaults);
-		},
-		[type, formInstance],
-	);
-
-	const prepareSlackRequest = useCallback(
-		() => ({
-			api_url: selectedConfig?.api_url || '',
-			channel: selectedConfig?.channel || '',
-			name: selectedConfig?.name || '',
-			send_resolved: selectedConfig?.send_resolved || false,
-			text: selectedConfig?.text || '',
-			title: selectedConfig?.title || '',
-		}),
-		[selectedConfig],
-	);
-
-	const onSlackHandler = useCallback(async () => {
-		if (!selectedConfig.api_url) {
-			notifications.error({
-				message: 'Error',
-				description: t('webhook_url_required'),
-			});
-			return;
-		}
-
-		setSavingState(true);
-
-		try {
-			await createSlackApi(prepareSlackRequest());
-			notifications.success({
-				message: 'Success',
-				description: t('channel_creation_done'),
-			});
-			history.replace(ROUTES.ALL_CHANNELS);
-			return { status: 'success', statusMessage: t('channel_creation_done') };
-		} catch (error) {
-			showErrorModal(error as APIError);
-			return { status: 'failed', statusMessage: t('channel_creation_failed') };
-		} finally {
-			setSavingState(false);
-		}
-	}, [selectedConfig, notifications, t, prepareSlackRequest, showErrorModal]);
-
-	const prepareWebhookRequest = useCallback(() => {
-		// initial api request without auth params
-		let request: WebhookChannel = {
-			api_url: selectedConfig?.api_url || '',
-			name: selectedConfig?.name || '',
-			send_resolved: selectedConfig?.send_resolved || false,
-		};
-
-		if (selectedConfig?.username !== '' || selectedConfig?.password !== '') {
-			if (selectedConfig?.username !== '') {
-				// if username is not null then password must be passed
-				if (selectedConfig?.password !== '') {
-					request = {
-						...request,
-						username: selectedConfig.username,
-						password: selectedConfig.password,
-					};
-				} else {
-					notifications.error({
-						message: 'Error',
-						description: t('username_no_password'),
-					});
-				}
-			} else if (selectedConfig?.password !== '') {
-				// only password entered, set bearer token
-				request = {
-					...request,
-					username: '',
-					password: selectedConfig.password,
-				};
-			}
-		}
-		return request;
-	}, [notifications, t, selectedConfig]);
-
-	const onWebhookHandler = useCallback(async () => {
-		if (!selectedConfig.api_url) {
-			notifications.error({
-				message: 'Error',
-				description: t('webhook_url_required'),
-			});
-			return;
-		}
-
-		setSavingState(true);
-		try {
-			const request = prepareWebhookRequest();
-			await createWebhookApi(request);
-			notifications.success({
-				message: 'Success',
-				description: t('channel_creation_done'),
-			});
-			history.replace(ROUTES.ALL_CHANNELS);
-			return { status: 'success', statusMessage: t('channel_creation_done') };
-		} catch (error) {
-			showErrorModal(error as APIError);
-			return { status: 'failed', statusMessage: t('channel_creation_failed') };
-		} finally {
-			setSavingState(false);
-		}
-	}, [
-		selectedConfig.api_url,
-		notifications,
-		t,
-		prepareWebhookRequest,
-		showErrorModal,
-	]);
-
-	const preparePagerRequest = useCallback(() => {
-		const validationError = ValidatePagerChannel(selectedConfig as PagerChannel);
-		if (validationError !== '') {
-			notifications.error({
-				message: 'Error',
-				description: validationError,
-			});
-			return null;
-		}
-
-		return {
-			name: selectedConfig?.name || '',
-			send_resolved: selectedConfig?.send_resolved || false,
-			routing_key: selectedConfig?.routing_key || '',
-			client: selectedConfig?.client || '',
-			client_url: selectedConfig?.client_url || '',
-			description: selectedConfig?.description || '',
-			severity: selectedConfig?.severity || '',
-			component: selectedConfig?.component || '',
-			group: selectedConfig?.group || '',
-			class: selectedConfig?.class || '',
-			details: selectedConfig.details || '',
-			detailsArray: JSON.parse(selectedConfig.details || '{}'),
-		};
-	}, [selectedConfig, notifications]);
-
-	const onPagerHandler = useCallback(async () => {
-		setSavingState(true);
-		const request = preparePagerRequest();
-
-		try {
-			if (request) {
-				await createPagerApi(request);
-				notifications.success({
-					message: 'Success',
-					description: t('channel_creation_done'),
-				});
-				history.replace(ROUTES.ALL_CHANNELS);
-				return { status: 'success', statusMessage: t('channel_creation_done') };
-			}
-			return { status: 'failed', statusMessage: t('channel_creation_failed') };
-		} catch (error) {
-			showErrorModal(error as APIError);
-			return { status: 'failed', statusMessage: t('channel_creation_failed') };
-		} finally {
-			setSavingState(false);
-		}
-	}, [preparePagerRequest, t, notifications, showErrorModal]);
-
-	const prepareOpsgenieRequest = useCallback(
-		() => ({
-			api_key: selectedConfig?.api_key || '',
-			name: selectedConfig?.name || '',
-			send_resolved: selectedConfig?.send_resolved || false,
-			description: selectedConfig?.description || '',
-			message: selectedConfig?.message || '',
-			priority: selectedConfig?.priority || '',
-		}),
-		[selectedConfig],
-	);
-
-	const onOpsgenieHandler = useCallback(async () => {
-		if (!selectedConfig.api_key) {
-			notifications.error({
-				message: 'Error',
-				description: t('api_key_required'),
-			});
-			return;
-		}
-
-		setSavingState(true);
-		try {
-			await createOpsgenie(prepareOpsgenieRequest());
-			notifications.success({
-				message: 'Success',
-				description: t('channel_creation_done'),
-			});
-			history.replace(ROUTES.ALL_CHANNELS);
-			return { status: 'success', statusMessage: t('channel_creation_done') };
-		} catch (error) {
-			showErrorModal(error as APIError);
-			return { status: 'failed', statusMessage: t('channel_creation_failed') };
-		} finally {
-			setSavingState(false);
-		}
-	}, [
-		selectedConfig.api_key,
-		notifications,
-		t,
-		prepareOpsgenieRequest,
-		showErrorModal,
-	]);
-
-	const prepareEmailRequest = useCallback(
-		() => ({
-			name: selectedConfig?.name || '',
-			send_resolved: selectedConfig?.send_resolved || false,
-			to: selectedConfig?.to || '',
-			html: selectedConfig?.html || '',
-			headers: selectedConfig?.headers || {},
-		}),
-		[selectedConfig],
-	);
-
-	const onEmailHandler = useCallback(async () => {
-		if (!selectedConfig.to) {
-			notifications.error({
-				message: 'Error',
-				description: t('to_required'),
-			});
-			return;
-		}
-
-		setSavingState(true);
-		try {
-			const request = prepareEmailRequest();
-			await createEmail(request);
-			notifications.success({
-				message: 'Success',
-				description: t('channel_creation_done'),
-			});
-			history.replace(ROUTES.ALL_CHANNELS);
-			return { status: 'success', statusMessage: t('channel_creation_done') };
-		} catch (error) {
-			showErrorModal(error as APIError);
-			return { status: 'failed', statusMessage: t('channel_creation_failed') };
-		} finally {
-			setSavingState(false);
-		}
-	}, [prepareEmailRequest, notifications, t, showErrorModal, selectedConfig.to]);
-
-	const prepareMsTeamsRequest = useCallback(
-		() => ({
-			webhook_url: selectedConfig?.webhook_url || '',
-			name: selectedConfig?.name || '',
-			send_resolved: selectedConfig?.send_resolved || false,
-			text: selectedConfig?.text || '',
-			title: selectedConfig?.title || '',
-		}),
-		[selectedConfig],
-	);
-
-	const onMsTeamsHandler = useCallback(async () => {
-		if (!selectedConfig.webhook_url) {
-			notifications.error({
-				message: 'Error',
-				description: t('webhook_url_required'),
-			});
-			return;
-		}
-
-		setSavingState(true);
-
-		try {
-			await createMsTeamsApi(prepareMsTeamsRequest());
-			notifications.success({
-				message: 'Success',
-				description: t('channel_creation_done'),
-			});
-			history.replace(ROUTES.ALL_CHANNELS);
-			return { status: 'success', statusMessage: t('channel_creation_done') };
-		} catch (error) {
-			showErrorModal(error as APIError);
-			return { status: 'failed', statusMessage: t('channel_creation_failed') };
-		} finally {
-			setSavingState(false);
-		}
-	}, [
-		selectedConfig.webhook_url,
-		notifications,
-		t,
-		prepareMsTeamsRequest,
-		showErrorModal,
-	]);
-
-	const validateGoogleChatConfig = useCallback((): boolean => {
-		if (!selectedConfig.webhook_url) {
-			notifications.error({
-				message: 'Error',
-				description: t('webhook_url_required'),
-			});
-			return false;
-		}
-
-		if (!isValidGoogleChatWebhookURL(selectedConfig.webhook_url)) {
-			notifications.error({
-				message: 'Error',
-				description: t('google_chat_webhook_url_invalid'),
-			});
-			return false;
-		}
-
-		return true;
-	}, [selectedConfig.webhook_url, notifications, t]);
-
-	const onGoogleChatHandler = useCallback(async () => {
-		if (!validateGoogleChatConfig()) {
-			return { status: 'failed', statusMessage: t('channel_creation_failed') };
-		}
-
-		setSavingState(true);
-
-		try {
-			await createChannel({ data: prepareGoogleChatRequest(selectedConfig) });
-			notifications.success({
-				message: 'Success',
-				description: t('channel_creation_done'),
-			});
-			history.replace(ROUTES.ALL_CHANNELS);
-			return { status: 'success', statusMessage: t('channel_creation_done') };
-		} catch (error) {
-			showErrorModal(toAPIError(error as ErrorType<RenderErrorResponseDTO>));
-			return { status: 'failed', statusMessage: t('channel_creation_failed') };
-		} finally {
-			setSavingState(false);
-		}
-	}, [
-		validateGoogleChatConfig,
-		createChannel,
-		selectedConfig,
-		notifications,
-		t,
-		showErrorModal,
-	]);
-
-	const validateJiraConfig = useCallback((): boolean => {
-		if (
-			!selectedConfig.site ||
-			!selectedConfig.username ||
-			!selectedConfig.password ||
-			!selectedConfig.project ||
-			!selectedConfig.issue_type
-		) {
-			notifications.error({
-				message: 'Error',
-				description: t('jira_required_fields'),
-			});
-			return false;
-		}
-
-		if (!isValidJiraSiteURL(selectedConfig.site)) {
-			notifications.error({
-				message: 'Error',
-				description: t('jira_site_invalid'),
-			});
-			return false;
-		}
-
-		if (
-			selectedConfig.reopen_duration &&
-			!isValidJiraReopenDuration(selectedConfig.reopen_duration)
-		) {
-			notifications.error({
-				message: 'Error',
-				description: t('jira_reopen_duration_invalid'),
-			});
-			return false;
-		}
-
-		return true;
-	}, [selectedConfig, notifications, t]);
-
-	const onJiraHandler = useCallback(async () => {
-		if (!validateJiraConfig()) {
-			return { status: 'failed', statusMessage: t('channel_creation_failed') };
-		}
-
-		setSavingState(true);
-
-		try {
-			await createChannel({ data: prepareJiraRequest(selectedConfig) });
-			notifications.success({
-				message: 'Success',
-				description: t('channel_creation_done'),
-			});
-			history.replace(ROUTES.ALL_CHANNELS);
-			return { status: 'success', statusMessage: t('channel_creation_done') };
-		} catch (error) {
-			showErrorModal(toAPIError(error as ErrorType<RenderErrorResponseDTO>));
-			return { status: 'failed', statusMessage: t('channel_creation_failed') };
-		} finally {
-			setSavingState(false);
-		}
-	}, [
-		validateJiraConfig,
-		createChannel,
-		selectedConfig,
-		notifications,
-		t,
-		showErrorModal,
-	]);
-
-	const validateJsmOpsConfig = useCallback((): boolean => {
-		if (!selectedConfig.api_key) {
-			notifications.error({
-				message: 'Error',
-				description: t('api_key_required'),
-			});
-			return false;
-		}
-		return true;
-	}, [selectedConfig.api_key, notifications, t]);
-
-	const onJsmOpsHandler = useCallback(async () => {
-		if (!validateJsmOpsConfig()) {
-			return { status: 'failed', statusMessage: t('channel_creation_failed') };
-		}
-
-		setSavingState(true);
-
-		try {
-			await createChannel({ data: prepareJsmOpsRequest(selectedConfig) });
-			notifications.success({
-				message: 'Success',
-				description: t('channel_creation_done'),
-			});
-			history.replace(ROUTES.ALL_CHANNELS);
-			return { status: 'success', statusMessage: t('channel_creation_done') };
-		} catch (error) {
-			showErrorModal(toAPIError(error as ErrorType<RenderErrorResponseDTO>));
-			return { status: 'failed', statusMessage: t('channel_creation_failed') };
-		} finally {
-			setSavingState(false);
-		}
-	}, [
-		validateJsmOpsConfig,
-		createChannel,
-		selectedConfig,
-		notifications,
-		t,
-		showErrorModal,
-	]);
-
-	const validateIncidentIOConfig = useCallback((): boolean => {
-		if (!selectedConfig.url || !selectedConfig.token) {
-			notifications.error({
-				message: 'Error',
-				description: t('incidentio_required_fields'),
-			});
-			return false;
-		}
-
-		if (!isValidIncidentIOURL(selectedConfig.url)) {
-			notifications.error({
-				message: 'Error',
-				description: t('incidentio_url_invalid'),
-			});
-			return false;
-		}
-
-		return true;
-	}, [selectedConfig.url, selectedConfig.token, notifications, t]);
-
-	const onIncidentIOHandler = useCallback(async () => {
-		if (!validateIncidentIOConfig()) {
-			return { status: 'failed', statusMessage: t('channel_creation_failed') };
-		}
-
-		setSavingState(true);
-
-		try {
-			await createChannel({ data: prepareIncidentIORequest(selectedConfig) });
-			notifications.success({
-				message: 'Success',
-				description: t('channel_creation_done'),
-			});
-			history.replace(ROUTES.ALL_CHANNELS);
-			return { status: 'success', statusMessage: t('channel_creation_done') };
-		} catch (error) {
-			showErrorModal(toAPIError(error as ErrorType<RenderErrorResponseDTO>));
-			return { status: 'failed', statusMessage: t('channel_creation_failed') };
-		} finally {
-			setSavingState(false);
-		}
-	}, [
-		validateIncidentIOConfig,
-		createChannel,
-		selectedConfig,
-		notifications,
-		t,
-		showErrorModal,
-	]);
-
-	const onSaveHandler = useCallback(
-		async (value: ChannelType) => {
-			if (!selectedConfig.name) {
-				notifications.error({
-					message: 'Error',
-					description: t('channel_name_required'),
-				});
-				return;
-			}
-
-			const functionMapper = {
-				[ChannelType.Slack]: onSlackHandler,
-				[ChannelType.Webhook]: onWebhookHandler,
-				[ChannelType.Pagerduty]: onPagerHandler,
-				[ChannelType.Opsgenie]: onOpsgenieHandler,
-				[ChannelType.MsTeams]: onMsTeamsHandler,
-				[ChannelType.Email]: onEmailHandler,
-				[ChannelType.GoogleChat]: onGoogleChatHandler,
-				[ChannelType.Jira]: onJiraHandler,
-				[ChannelType.JsmOps]: onJsmOpsHandler,
-				[ChannelType.IncidentIO]: onIncidentIOHandler,
-			};
-
-			if (isChannelType(value)) {
-				const functionToCall = functionMapper[value as keyof typeof functionMapper];
-
-				if (functionToCall) {
-					const result = await functionToCall();
-					logEvent('Alert Channel: Save channel', {
-						type: value,
-						sendResolvedAlert: selectedConfig?.send_resolved,
-						name: selectedConfig?.name,
-						new: 'true',
-						status: result?.status,
-						statusMessage: result?.statusMessage,
-					});
-				} else {
-					notifications.error({
-						message: 'Error',
-						description: t('selected_channel_invalid'),
-					});
-				}
-			}
-		},
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[
-			onSlackHandler,
-			onWebhookHandler,
-			onPagerHandler,
-			onOpsgenieHandler,
-			onMsTeamsHandler,
-			onEmailHandler,
-			onGoogleChatHandler,
-			onJiraHandler,
-			onJsmOpsHandler,
-			onIncidentIOHandler,
-			notifications,
-			t,
-		],
-	);
-
-	const performChannelTest = useCallback(
-		async (channelType: ChannelType) => {
-			setTestingState(true);
-			try {
-				let request;
-				switch (channelType) {
-					case ChannelType.Webhook:
-						request = prepareWebhookRequest();
-						await testWebhookApi(request);
-						break;
-					case ChannelType.Slack:
-						request = prepareSlackRequest();
-						await testSlackApi(request);
-						break;
-					case ChannelType.Pagerduty:
-						request = preparePagerRequest();
-						if (request) {
-							await testPagerApi(request);
-						}
-						break;
-					case ChannelType.MsTeams:
-						request = prepareMsTeamsRequest();
-						await testMsTeamsApi(request);
-						break;
-					case ChannelType.Opsgenie:
-						request = prepareOpsgenieRequest();
-						await testOpsGenie(request);
-						break;
-					case ChannelType.Email:
-						request = prepareEmailRequest();
-						await testEmail(request);
-						break;
-					case ChannelType.GoogleChat:
-						if (!validateGoogleChatConfig()) {
-							setTestingState(false);
-							return;
-						}
-						await testChannel({ data: prepareGoogleChatRequest(selectedConfig) });
-						break;
-					case ChannelType.Jira:
-						if (!validateJiraConfig()) {
-							setTestingState(false);
-							return;
-						}
-						await testChannel({ data: prepareJiraRequest(selectedConfig) });
-						break;
-					case ChannelType.JsmOps:
-						if (!validateJsmOpsConfig()) {
-							setTestingState(false);
-							return;
-						}
-						await testChannel({ data: prepareJsmOpsRequest(selectedConfig) });
-						break;
-					case ChannelType.IncidentIO:
-						if (!validateIncidentIOConfig()) {
-							setTestingState(false);
-							return;
-						}
-						await testChannel({ data: prepareIncidentIORequest(selectedConfig) });
-						break;
-					default:
-						notifications.error({
-							message: 'Error',
-							description: t('test_unsupported'),
-						});
-						setTestingState(false);
-						return;
-				}
-
-				notifications.success({
-					message: 'Success',
-					description: t('channel_test_done'),
-				});
-				logEvent('Alert Channel: Test notification', {
-					type: channelType,
-					sendResolvedAlert: selectedConfig?.send_resolved,
-					name: selectedConfig?.name,
-					new: 'true',
-					status: 'Test success',
-				});
-			} catch (error) {
-				showErrorModal(
-					error instanceof APIError
-						? error
-						: toAPIError(error as ErrorType<RenderErrorResponseDTO>),
-				);
-
-				logEvent('Alert Channel: Test notification', {
-					type: channelType,
-					sendResolvedAlert: selectedConfig?.send_resolved,
-					name: selectedConfig?.name,
-					new: 'true',
-					status: 'Test failed',
-				});
-			}
-
-			setTestingState(false);
-		},
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[
-			prepareWebhookRequest,
-			t,
-			preparePagerRequest,
-			prepareOpsgenieRequest,
-			prepareSlackRequest,
-			prepareMsTeamsRequest,
-			prepareEmailRequest,
-			validateGoogleChatConfig,
-			validateJiraConfig,
-			validateJsmOpsConfig,
-			validateIncidentIOConfig,
-			testChannel,
-			notifications,
-		],
-	);
-
-	const onTestHandler = useCallback(
-		async (value: ChannelType) => {
-			performChannelTest(value);
-		},
-		[performChannelTest],
-	);
-
-	return (
-		<div className="create-alert-channels-container">
-			<FormAlertChannels
-				{...{
-					formInstance,
-					onTypeChangeHandler,
-					setSelectedConfig,
-					type,
-					onTestHandler,
-					onSaveHandler,
-					savingState,
-					testingState,
-					title: t('page_title_create'),
-					initialValue: {
-						type,
-						...selectedConfig,
-					},
-				}}
-			/>
-		</div>
-	);
-}
-
-interface CreateAlertChannelsProps {
-	preType: ChannelType;
-}
-
-export default CreateAlertChannels;

frontend/src/container/CreateAlertChannels/types.ts

@@ -0,0 +1,45 @@
+import {
+	AlertmanagertypesChannelEmailConfigDTO,
+	AlertmanagertypesChannelGoogleChatConfigDTO,
+	AlertmanagertypesChannelIncidentIOConfigDTO,
+	AlertmanagertypesChannelJiraConfigDTO,
+	AlertmanagertypesChannelJSMOpsConfigDTO,
+	AlertmanagertypesChannelKindDTO,
+	AlertmanagertypesChannelMSTeamsConfigDTO,
+	AlertmanagertypesChannelOpsgenieConfigDTO,
+	AlertmanagertypesChannelPagerdutyConfigDTO,
+	AlertmanagertypesChannelSlackConfigDTO,
+	AlertmanagertypesChannelTelegramConfigDTO,
+	AlertmanagertypesChannelWebhookConfigDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+/** The API's own vocabulary for a channel's kind. */
+export const ChannelKind = AlertmanagertypesChannelKindDTO;
+export type ChannelKind = AlertmanagertypesChannelKindDTO;
+
+/**
+ * Every kind's spec merged into one object, so switching kind mid-form keeps the
+ * fields the kinds share (title, text, description). Each field is typed by the
+ * generated schema, so what is optional here is what the API models as optional.
+ */
+export type ChannelSpecFormValues = Partial<
+	AlertmanagertypesChannelSlackConfigDTO &
+		AlertmanagertypesChannelWebhookConfigDTO &
+		AlertmanagertypesChannelEmailConfigDTO &
+		AlertmanagertypesChannelPagerdutyConfigDTO &
+		AlertmanagertypesChannelOpsgenieConfigDTO &
+		AlertmanagertypesChannelMSTeamsConfigDTO &
+		AlertmanagertypesChannelGoogleChatConfigDTO &
+		AlertmanagertypesChannelJiraConfigDTO &
+		AlertmanagertypesChannelJSMOpsConfigDTO &
+		AlertmanagertypesChannelIncidentIOConfigDTO &
+		AlertmanagertypesChannelTelegramConfigDTO
+>;
+
+/**
+ * The form edits a spec plus the channel's display name, which the API carries
+ * outside the config.
+ */
+export type ChannelFormValues = ChannelSpecFormValues & {
+	name?: string;
+};

frontend/src/container/CreateAlertChannels/utils.ts

@@ -1,23 +1,3 @@
-import {
-	AlertmanagertypesIncidentIOReceiverConfigDTO,
-	AlertmanagertypesJiraReceiverConfigDTO,
-	AlertmanagertypesJSMOpsReceiverConfigDTO,
-	AlertmanagertypesPostableChannelDTO,
-	ConfigSecretURLDTO,
-	ModelDurationDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-import {
-	ChannelType,
-	GoogleChatChannel,
-	IncidentIOChannel,
-	JiraChannel,
-	JsmOpsChannel,
-} from './config';
-
-export const isChannelType = (type: string): type is ChannelType =>
-	Object.values(ChannelType).includes(type as ChannelType);
-
 const GOOGLE_CHAT_WEBHOOK_HOST = 'chat.googleapis.com';
 
 // the backend enforces the same two rules, this is only for a nicer error experience
@@ -32,22 +12,6 @@ export const isValidGoogleChatWebhookURL = (url: string): boolean => {
 	}
 };
 
-// create, update and test all send the same body shape
-export const prepareGoogleChatRequest = (
-	config: Partial<GoogleChatChannel>,
-): AlertmanagertypesPostableChannelDTO => ({
-	name: config.name || '',
-	googlechat_configs: [
-		{
-			// the generated type models go's config.SecretURL as an object, the api takes a string
-			webhook_url: (config.webhook_url || '') as unknown as ConfigSecretURLDTO,
-			title: config.title || '',
-			text: config.text || '',
-			send_resolved: config.send_resolved || false,
-		},
-	],
-});
-
 const JIRA_CLOUD_HOST_SUFFIX = '.atlassian.net';
 
 // the backend enforces the same rule, this is only for a nicer error experience
@@ -93,85 +57,51 @@ export const isValidJiraReopenDuration = (value: string): boolean => {
 	return totalMs >= JIRA_MIN_REOPEN_MS;
 };
 
-// create, update and test all send the same body shape. Optional fields are
-// omitted when empty so the backend applies its defaults.
-export const prepareJiraRequest = (
-	config: Partial<JiraChannel>,
-): AlertmanagertypesPostableChannelDTO => {
-	const jira: AlertmanagertypesJiraReceiverConfigDTO = {
-		site: config.site || '',
-		project: config.project || '',
-		issue_type: config.issue_type || '',
-		send_resolved: config.send_resolved || false,
-		http_config: {
-			basic_auth: {
-				username: config.username || '',
-				password: config.password || '',
-			},
-		},
-	};
+/**
+ * How prometheus `model.Duration` prints itself, which is the only spelling the
+ * API accepts back: years and weeks only when the remainder divides exactly,
+ * then days, hours, minutes, seconds and milliseconds greedily. "72h" prints as
+ * "3d", "7d" as "1w".
+ */
+const JIRA_DURATION_FORMAT: { unit: string; ms: number; exact: boolean }[] = [
+	{ unit: 'y', ms: JIRA_DURATION_UNIT_MS.y, exact: true },
+	{ unit: 'w', ms: JIRA_DURATION_UNIT_MS.w, exact: true },
+	{ unit: 'd', ms: JIRA_DURATION_UNIT_MS.d, exact: false },
+	{ unit: 'h', ms: JIRA_DURATION_UNIT_MS.h, exact: false },
+	{ unit: 'm', ms: JIRA_DURATION_UNIT_MS.m, exact: false },
+	{ unit: 's', ms: JIRA_DURATION_UNIT_MS.s, exact: false },
+	{ unit: 'ms', ms: JIRA_DURATION_UNIT_MS.ms, exact: false },
+];
 
-	if (config.summary) {
-		jira.summary = config.summary;
-	}
-	if (config.description) {
-		jira.description = config.description;
-	}
-	if (config.priority) {
-		jira.priority = config.priority;
-	}
-	if (config.labels?.length) {
-		jira.labels = config.labels;
-	}
-	if (config.resolve_transition) {
-		jira.resolve_transition = config.resolve_transition;
-	}
-	if (config.reopen_transition) {
-		jira.reopen_transition = config.reopen_transition;
-	}
-	if (config.wont_fix_resolution) {
-		jira.wont_fix_resolution = config.wont_fix_resolution;
-	}
-	if (config.reopen_duration) {
-		// the generated type models go's model.Duration as a number, the api takes a
-		// duration string like "72h"
-		jira.reopen_duration = config.reopen_duration as unknown as ModelDurationDTO;
+/**
+ * The API rejects a duration it would print differently, so the user's spelling
+ * is normalised before it is sent. A value it cannot parse is left alone for the
+ * validator to reject.
+ */
+export const canonicalJiraReopenDuration = (value: string): string => {
+	if (!value || value === '0' || !JIRA_DURATION_RE.test(value)) {
+		return value;
 	}
 
-	return {
-		name: config.name || '',
-		jira_configs: [jira],
-	};
-};
-
-// create, update and test all send the same body shape. Optional fields are
-// omitted when empty so the backend applies its defaults.
-export const prepareJsmOpsRequest = (
-	config: Partial<JsmOpsChannel>,
-): AlertmanagertypesPostableChannelDTO => {
-	const jsmops: AlertmanagertypesJSMOpsReceiverConfigDTO = {
-		api_key: config.api_key || '',
-		send_resolved: config.send_resolved || false,
-	};
-
-	if (config.message) {
-		jsmops.message = config.message;
+	let remaining = 0;
+	for (const [, amount, unit] of value.matchAll(JIRA_DURATION_TOKEN_RE)) {
+		remaining += Number(amount) * JIRA_DURATION_UNIT_MS[unit];
 	}
-	if (config.description) {
-		jsmops.description = config.description;
-	}
-	if (config.priority) {
-		jsmops.priority = config.priority;
-	}
-	if (config.tags?.length) {
-		// the backend takes a comma-separated string and splits it back
-		jsmops.tags = config.tags.join(',');
+	if (remaining === 0) {
+		return '0s';
 	}
 
-	return {
-		name: config.name || '',
-		jsmops_configs: [jsmops],
-	};
+	return JIRA_DURATION_FORMAT.reduce((canonical, { unit, ms, exact }) => {
+		if (exact && remaining % ms !== 0) {
+			return canonical;
+		}
+		const count = Math.floor(remaining / ms);
+		if (count === 0) {
+			return canonical;
+		}
+		remaining -= count * ms;
+		return `${canonical}${count}${unit}`;
+	}, '');
 };
 
 const INCIDENTIO_EVENTS_PATH_PREFIX = '/v2/alert_events/http/';
@@ -190,33 +120,3 @@ export const isValidIncidentIOURL = (url: string): boolean => {
 		return false;
 	}
 };
-
-// create, update and test all send the same body shape. Optional fields are
-// omitted when empty so the backend applies its defaults.
-export const prepareIncidentIORequest = (
-	config: Partial<IncidentIOChannel>,
-): AlertmanagertypesPostableChannelDTO => {
-	const incidentio: AlertmanagertypesIncidentIOReceiverConfigDTO = {
-		url: config.url || '',
-		token: config.token || '',
-		send_resolved: config.send_resolved || false,
-	};
-
-	if (config.title) {
-		incidentio.title = config.title;
-	}
-	if (config.description) {
-		incidentio.description = config.description;
-	}
-	const metadata = Object.fromEntries(
-		Object.entries(config.metadata || {}).filter(([key]) => key.trim() !== ''),
-	);
-	if (Object.keys(metadata).length > 0) {
-		incidentio.metadata = metadata;
-	}
-
-	return {
-		name: config.name || '',
-		incidentio_configs: [incidentio],
-	};
-};

frontend/src/container/CreateAlertChannels/validation.ts

@@ -0,0 +1,110 @@
+import { TFunction } from 'i18next';
+
+import { ChannelFormValues, ChannelKind } from './types';
+import {
+	isValidGoogleChatWebhookURL,
+	isValidIncidentIOURL,
+	isValidJiraReopenDuration,
+	isValidJiraSiteURL,
+} from './utils';
+
+type Validator = (values: ChannelFormValues, t: TFunction) => string | null;
+
+const requireWebhookUrl: Validator = (values, t) =>
+	values.webhookUrl ? null : t('webhook_url_required');
+
+const requireApiKey: Validator = (values, t) =>
+	values.apiKey ? null : t('api_key_required');
+
+const validateSlack: Validator = (values, t) =>
+	values.apiUrl ? null : t('webhook_url_required');
+
+const validateWebhook: Validator = (values, t) => {
+	if (!values.url) {
+		return t('webhook_url_required');
+	}
+	// the API allows bearer-only and no-auth webhooks, but a username without its
+	// password is still an incomplete basic auth pair
+	return values.username && !values.password ? t('username_no_password') : null;
+};
+
+const validatePagerduty: Validator = (values, t) =>
+	values.routingKey ? null : t('routing_key_required');
+
+const validateEmail: Validator = (values, t) =>
+	values.to ? null : t('to_required');
+
+const validateGoogleChat: Validator = (values, t) => {
+	if (!values.webhookUrl) {
+		return t('webhook_url_required');
+	}
+	return isValidGoogleChatWebhookURL(values.webhookUrl)
+		? null
+		: t('google_chat_webhook_url_invalid');
+};
+
+const validateJira: Validator = (values, t) => {
+	if (
+		!values.site ||
+		!values.email ||
+		!values.apiToken ||
+		!values.project ||
+		!values.issueType
+	) {
+		return t('jira_required_fields');
+	}
+	if (!isValidJiraSiteURL(values.site)) {
+		return t('jira_site_invalid');
+	}
+	if (
+		values.reopenDuration &&
+		!isValidJiraReopenDuration(values.reopenDuration)
+	) {
+		return t('jira_reopen_duration_invalid');
+	}
+	return null;
+};
+
+const validateIncidentIO: Validator = (values, t) => {
+	if (!values.url || !values.token) {
+		return t('incidentio_required_fields');
+	}
+	return isValidIncidentIOURL(values.url) ? null : t('incidentio_url_invalid');
+};
+
+// a chat id of 0 is as absent as an empty one, and the API says so too
+const validateTelegram: Validator = (values, t) =>
+	values.botToken && values.chatId ? null : t('telegram_required_fields');
+
+const VALIDATORS: Record<ChannelKind, Validator> = {
+	[ChannelKind.slack]: validateSlack,
+	[ChannelKind.webhook]: validateWebhook,
+	[ChannelKind.pagerduty]: validatePagerduty,
+	[ChannelKind.opsgenie]: requireApiKey,
+	[ChannelKind.jsmops]: requireApiKey,
+	[ChannelKind.email]: validateEmail,
+	[ChannelKind.msteams]: requireWebhookUrl,
+	[ChannelKind.googlechat]: validateGoogleChat,
+	[ChannelKind.jira]: validateJira,
+	[ChannelKind.incidentio]: validateIncidentIO,
+	[ChannelKind.telegram]: validateTelegram,
+};
+
+/**
+ * Client-side validation for the fields the API rejects outright, so a save
+ * round trip is not spent on an obviously incomplete form. Each rule mirrors the
+ * matching `Validate()` in `pkg/types/alertmanagertypes`. Returns the message to
+ * show, or null when the form can be submitted.
+ */
+export function validateChannel(
+	kind: ChannelKind,
+	values: ChannelFormValues,
+	t: TFunction,
+): string | null {
+	if (!values.name) {
+		return t('channel_name_required');
+	}
+
+	const validate = VALIDATORS[kind];
+	return validate ? validate(values, t) : t('selected_channel_invalid');
+}

frontend/src/container/CreateAlertV2/AlertCondition/AlertCondition.tsx

@@ -1,12 +1,8 @@
-import { useQuery } from 'react-query';
 import { Button, Tooltip } from 'antd';
-import getAllChannels from 'api/channels/getAll';
 import classNames from 'classnames';
 import { ChartLine } from '@signozhq/icons';
-import { SuccessResponseV2 } from 'types/api';
+import { useChannelOptions } from 'hooks/notificationChannels/useChannelOptions';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
-import { Channels } from 'types/api/channels/getAll';
-import APIError from 'types/api/error';
 
 import { useCreateAlertState } from '../context';
 import AdvancedOptions from '../EvaluationSettings/AdvancedOptions';
@@ -21,14 +17,11 @@ function AlertCondition(): JSX.Element {
 	const { alertType, setAlertType } = useCreateAlertState();
 
 	const {
-		data,
+		data: channels,
 		isLoading: isLoadingChannels,
 		isError: isErrorChannels,
 		refetch: refreshChannels,
-	} = useQuery<SuccessResponseV2<Channels[]>, APIError>(['getChannels'], {
-		queryFn: () => getAllChannels(),
-	});
-	const channels = data?.data || [];
+	} = useChannelOptions();
 
 	const showMultipleTabs =
 		alertType === AlertTypes.ANOMALY_BASED_ALERT ||

frontend/src/container/CreateAlertV2/AlertCondition/__tests__/AlertThreshold.test.tsx

@@ -2,12 +2,12 @@ import { QueryClient, QueryClientProvider } from 'react-query';
 import { MemoryRouter } from 'react-router-dom';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
-import { Channels } from 'types/api/channels/getAll';
+import { ChannelOption } from 'hooks/notificationChannels/useChannelOptions';
 
 import { CreateAlertProvider } from '../../context';
 import AlertThreshold from '../AlertThreshold';
 
-const mockChannels: Channels[] = [];
+const mockChannels: ChannelOption[] = [];
 const mockRefreshChannels = jest.fn();
 const mockIsLoadingChannels = false;
 const mockIsErrorChannels = false;
@@ -85,16 +85,17 @@ jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
 }));
 
 // Mock getAllChannels API
-jest.mock('api/channels/getAll', () => ({
+jest.mock('hooks/notificationChannels/useChannelOptions', () => ({
 	__esModule: true,
-	default: jest.fn(() =>
-		Promise.resolve({
-			data: [
-				{ id: '1', name: 'Email Channel' },
-				{ id: '2', name: 'Slack Channel' },
-			] as Channels[],
-		}),
-	),
+	useChannelOptions: jest.fn(() => ({
+		data: [
+			{ id: '1', name: 'Email Channel' },
+			{ id: '2', name: 'Slack Channel' },
+		] as ChannelOption[],
+		isLoading: false,
+		isError: false,
+		refetch: jest.fn(),
+	})),
 }));
 
 // Mock alert format categories

frontend/src/container/CreateAlertV2/AlertCondition/__tests__/ThresholdItem.test.tsx

@@ -3,7 +3,7 @@ import type { DefaultOptionType } from 'antd/es/select';
 import { createMockAlertContextState } from 'container/CreateAlertV2/EvaluationSettings/__tests__/testUtils';
 import { getAppContextMockState } from 'container/RoutingPolicies/__tests__/testUtils';
 import * as appHooks from 'providers/App/App';
-import { Channels } from 'types/api/channels/getAll';
+import { ChannelOption } from 'hooks/notificationChannels/useChannelOptions';
 
 import * as context from '../../context';
 import ThresholdItem from '../ThresholdItem';
@@ -57,7 +57,7 @@ const mockThreshold = {
 	color: '#ff0000',
 };
 
-const mockChannels: Channels[] = [
+const mockChannels: ChannelOption[] = [
 	{
 		id: TEST_CONSTANTS.CHANNEL_1,
 		name: TEST_CONSTANTS.EMAIL_CHANNEL_NAME,

frontend/src/container/CreateAlertV2/AlertCondition/types.ts

@@ -1,5 +1,5 @@
 import type { DefaultOptionType } from 'antd/es/select';
-import { Channels } from 'types/api/channels/getAll';
+import { ChannelOption } from 'hooks/notificationChannels/useChannelOptions';
 
 import {
 	NotificationSettingsAction,
@@ -21,7 +21,7 @@ export interface ThresholdItemProps {
 	updateThreshold: UpdateThreshold;
 	removeThreshold: (thresholdId: string) => void;
 	showRemoveButton: boolean;
-	channels: Channels[];
+	channels: ChannelOption[];
 	isLoadingChannels: boolean;
 	units: DefaultOptionType[];
 	isErrorChannels: boolean;
@@ -29,7 +29,7 @@ export interface ThresholdItemProps {
 }
 
 export interface AnomalyAndThresholdProps {
-	channels: Channels[];
+	channels: ChannelOption[];
 	isLoadingChannels: boolean;
 	isErrorChannels: boolean;
 	refreshChannels: () => void;

frontend/src/container/EditAlertChannels/index.tsx

@@ -1,863 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Form } from 'antd';
-import editEmail from 'api/channels/editEmail';
-import editMsTeamsApi from 'api/channels/editMsTeams';
-import editOpsgenie from 'api/channels/editOpsgenie';
-import editPagerApi from 'api/channels/editPager';
-import editSlackApi from 'api/channels/editSlack';
-import editWebhookApi from 'api/channels/editWebhook';
-import testEmail from 'api/channels/testEmail';
-import testMsTeamsApi from 'api/channels/testMsTeams';
-import testOpsgenie from 'api/channels/testOpsgenie';
-import testPagerApi from 'api/channels/testPager';
-import testSlackApi from 'api/channels/testSlack';
-import testWebhookApi from 'api/channels/testWebhook';
-import logEvent from 'api/common/logEvent';
-import {
-	useTestChannel,
-	useUpdateChannelByID,
-} from 'api/generated/services/channels';
-import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
-import { ErrorType } from 'api/generatedAPIInstance';
-import ROUTES from 'constants/routes';
-import {
-	ChannelType,
-	EmailChannel,
-	GoogleChatChannel,
-	IncidentIOChannel,
-	JiraChannel,
-	JsmOpsChannel,
-	MsTeamsChannel,
-	OpsgenieChannel,
-	PagerChannel,
-	SlackChannel,
-	ValidatePagerChannel,
-	WebhookChannel,
-} from 'container/CreateAlertChannels/config';
-import {
-	isValidGoogleChatWebhookURL,
-	isValidIncidentIOURL,
-	isValidJiraReopenDuration,
-	isValidJiraSiteURL,
-	prepareGoogleChatRequest,
-	prepareIncidentIORequest,
-	prepareJiraRequest,
-	prepareJsmOpsRequest,
-} from 'container/CreateAlertChannels/utils';
-import FormAlertChannels from 'container/FormAlertChannels';
-import { useNotifications } from 'hooks/useNotifications';
-import history from 'lib/history';
-import APIError from 'types/api/error';
-import { toAPIError } from 'utils/errorUtils';
-
-function EditAlertChannels({
-	initialValue,
-	channelId: id,
-}: EditAlertChannelsProps): JSX.Element {
-	// init namespace for translations
-	const { t } = useTranslation('channels');
-
-	const [formInstance] = Form.useForm();
-	const [selectedConfig, setSelectedConfig] = useState<
-		Partial<
-			SlackChannel &
-				WebhookChannel &
-				PagerChannel &
-				MsTeamsChannel &
-				OpsgenieChannel &
-				EmailChannel &
-				GoogleChatChannel &
-				JiraChannel &
-				JsmOpsChannel &
-				IncidentIOChannel
-		>
-	>({
-		...initialValue,
-	});
-	const [savingState, setSavingState] = useState<boolean>(false);
-	const [testingState, setTestingState] = useState<boolean>(false);
-	const { notifications } = useNotifications();
-
-	const { mutateAsync: updateChannel } = useUpdateChannelByID();
-	const { mutateAsync: testChannel } = useTestChannel();
-
-	const notifyError = useCallback(
-		(error: unknown): APIError => {
-			const apiError =
-				error instanceof APIError
-					? error
-					: toAPIError(error as ErrorType<RenderErrorResponseDTO>);
-
-			notifications.error({
-				message: apiError.getErrorCode(),
-				description: apiError.getErrorMessage(),
-			});
-
-			return apiError;
-		},
-		[notifications],
-	);
-
-	const [type, setType] = useState<ChannelType>(
-		initialValue?.type ? (initialValue.type as ChannelType) : ChannelType.Slack,
-	);
-
-	const onTypeChangeHandler = useCallback((value: string) => {
-		setType(value as ChannelType);
-	}, []);
-
-	useEffect(() => {
-		formInstance.setFieldsValue({
-			...initialValue,
-		});
-	}, [formInstance, initialValue]);
-
-	const prepareSlackRequest = useCallback(
-		() => ({
-			api_url: selectedConfig?.api_url || '',
-			channel: selectedConfig?.channel || '',
-			name: selectedConfig?.name || '',
-			send_resolved: selectedConfig?.send_resolved || false,
-			text: selectedConfig?.text || '',
-			title: selectedConfig?.title || '',
-			id,
-		}),
-		[id, selectedConfig],
-	);
-
-	const onSlackEditHandler = useCallback(async () => {
-		setSavingState(true);
-
-		if (selectedConfig?.api_url === '') {
-			notifications.error({
-				message: 'Error',
-				description: t('webhook_url_required'),
-			});
-			setSavingState(false);
-			return { status: 'failed', statusMessage: t('webhook_url_required') };
-		}
-
-		try {
-			await editSlackApi(prepareSlackRequest());
-			notifications.success({
-				message: 'Success',
-				description: t('channel_edit_done'),
-			});
-
-			history.replace(ROUTES.ALL_CHANNELS);
-			return { status: 'success', statusMessage: t('channel_edit_done') };
-		} catch (error) {
-			notifications.error({
-				message: (error as APIError).getErrorCode(),
-				description: (error as APIError).getErrorMessage(),
-			});
-			return {
-				status: 'failed',
-				statusMessage:
-					(error as APIError).getErrorMessage() || t('channel_edit_failed'),
-			};
-		} finally {
-			setSavingState(false);
-		}
-	}, [prepareSlackRequest, t, notifications, selectedConfig]);
-
-	const prepareWebhookRequest = useCallback(() => {
-		const { name, username, password } = selectedConfig;
-		return {
-			api_url: selectedConfig?.api_url || '',
-			name: name || '',
-			send_resolved: selectedConfig?.send_resolved || false,
-			username,
-			password,
-			id,
-		};
-	}, [id, selectedConfig]);
-
-	const onWebhookEditHandler = useCallback(async () => {
-		setSavingState(true);
-		const { username, password } = selectedConfig;
-
-		const showError = (msg: string): void => {
-			notifications.error({
-				message: 'Error',
-				description: msg,
-			});
-		};
-
-		if (selectedConfig?.api_url === '') {
-			showError(t('webhook_url_required'));
-			setSavingState(false);
-			return { status: 'failed', statusMessage: t('webhook_url_required') };
-		}
-
-		if (username && (!password || password === '')) {
-			showError(t('username_no_password'));
-			setSavingState(false);
-			return { status: 'failed', statusMessage: t('username_no_password') };
-		}
-
-		try {
-			await editWebhookApi(prepareWebhookRequest());
-			notifications.success({
-				message: 'Success',
-				description: t('channel_edit_done'),
-			});
-
-			history.replace(ROUTES.ALL_CHANNELS);
-			return { status: 'success', statusMessage: t('channel_edit_done') };
-		} catch (error) {
-			notifications.error({
-				message: (error as APIError).getErrorCode(),
-				description: (error as APIError).getErrorMessage(),
-			});
-			return {
-				status: 'failed',
-				statusMessage:
-					(error as APIError).getErrorMessage() || t('channel_edit_failed'),
-			};
-		} finally {
-			setSavingState(false);
-		}
-	}, [prepareWebhookRequest, t, notifications, selectedConfig]);
-
-	const prepareEmailRequest = useCallback(
-		() => ({
-			name: selectedConfig?.name || '',
-			send_resolved: selectedConfig?.send_resolved || false,
-			to: selectedConfig.to || '',
-			html: selectedConfig.html || '',
-			headers: selectedConfig.headers || {},
-			id,
-		}),
-		[id, selectedConfig],
-	);
-
-	const onEmailEditHandler = useCallback(async () => {
-		setSavingState(true);
-		const request = prepareEmailRequest();
-
-		try {
-			await editEmail(request);
-			notifications.success({
-				message: 'Success',
-				description: t('channel_edit_done'),
-			});
-			history.replace(ROUTES.ALL_CHANNELS);
-			return { status: 'success', statusMessage: t('channel_edit_done') };
-		} catch (error) {
-			notifications.error({
-				message: (error as APIError).getErrorCode(),
-				description: (error as APIError).getErrorMessage(),
-			});
-			return {
-				status: 'failed',
-				statusMessage:
-					(error as APIError).getErrorMessage() || t('channel_edit_failed'),
-			};
-		} finally {
-			setSavingState(false);
-		}
-	}, [prepareEmailRequest, t, notifications]);
-
-	const preparePagerRequest = useCallback(
-		() => ({
-			name: selectedConfig.name || '',
-			send_resolved: selectedConfig?.send_resolved || false,
-			routing_key: selectedConfig.routing_key,
-			client: selectedConfig.client,
-			client_url: selectedConfig.client_url,
-			description: selectedConfig.description,
-			severity: selectedConfig.severity,
-			component: selectedConfig.component,
-			class: selectedConfig.class,
-			group: selectedConfig.group,
-			details: selectedConfig.details,
-			detailsArray: JSON.parse(selectedConfig.details || '{}'),
-			id,
-		}),
-		[id, selectedConfig],
-	);
-
-	const onPagerEditHandler = useCallback(async () => {
-		setSavingState(true);
-		const validationError = ValidatePagerChannel(selectedConfig as PagerChannel);
-
-		if (validationError !== '') {
-			notifications.error({
-				message: 'Error',
-				description: validationError,
-			});
-			setSavingState(false);
-			return { status: 'failed', statusMessage: validationError };
-		}
-
-		try {
-			await editPagerApi(preparePagerRequest());
-			notifications.success({
-				message: 'Success',
-				description: t('channel_edit_done'),
-			});
-			history.replace(ROUTES.ALL_CHANNELS);
-			return { status: 'success', statusMessage: t('channel_edit_done') };
-		} catch (error) {
-			notifications.error({
-				message: (error as APIError).getErrorCode(),
-				description: (error as APIError).getErrorMessage(),
-			});
-			return {
-				status: 'failed',
-				statusMessage:
-					(error as APIError).getErrorMessage() || t('channel_edit_failed'),
-			};
-		} finally {
-			setSavingState(false);
-		}
-	}, [preparePagerRequest, notifications, selectedConfig, t]);
-
-	const prepareOpsgenieRequest = useCallback(
-		() => ({
-			name: selectedConfig.name || '',
-			send_resolved: selectedConfig?.send_resolved || false,
-			api_key: selectedConfig.api_key || '',
-			message: selectedConfig.message || '',
-			description: selectedConfig.description || '',
-			priority: selectedConfig.priority || '',
-			id,
-		}),
-		[id, selectedConfig],
-	);
-
-	const onOpsgenieEditHandler = useCallback(async () => {
-		setSavingState(true);
-
-		if (selectedConfig?.api_key === '') {
-			notifications.error({
-				message: 'Error',
-				description: t('api_key_required'),
-			});
-			setSavingState(false);
-			return { status: 'failed', statusMessage: t('api_key_required') };
-		}
-		try {
-			await editOpsgenie(prepareOpsgenieRequest());
-			notifications.success({
-				message: 'Success',
-				description: t('channel_edit_done'),
-			});
-			history.replace(ROUTES.ALL_CHANNELS);
-			return { status: 'success', statusMessage: t('channel_edit_done') };
-		} catch (error) {
-			notifications.error({
-				message: (error as APIError).getErrorCode(),
-				description: (error as APIError).getErrorMessage(),
-			});
-			return {
-				status: 'failed',
-				statusMessage:
-					(error as APIError).getErrorMessage() || t('channel_edit_failed'),
-			};
-		} finally {
-			setSavingState(false);
-		}
-	}, [prepareOpsgenieRequest, t, notifications, selectedConfig]);
-
-	const prepareMsTeamsRequest = useCallback(
-		() => ({
-			webhook_url: selectedConfig?.webhook_url || '',
-			name: selectedConfig?.name || '',
-			send_resolved: selectedConfig?.send_resolved || false,
-			text: selectedConfig?.text || '',
-			title: selectedConfig?.title || '',
-			id,
-		}),
-		[id, selectedConfig],
-	);
-
-	const onMsTeamsEditHandler = useCallback(async () => {
-		setSavingState(true);
-
-		if (selectedConfig?.webhook_url === '') {
-			notifications.error({
-				message: 'Error',
-				description: t('webhook_url_required'),
-			});
-			setSavingState(false);
-			return { status: 'failed', statusMessage: t('webhook_url_required') };
-		}
-
-		try {
-			await editMsTeamsApi(prepareMsTeamsRequest());
-			notifications.success({
-				message: 'Success',
-				description: t('channel_edit_done'),
-			});
-			history.replace(ROUTES.ALL_CHANNELS);
-			return { status: 'success', statusMessage: t('channel_edit_done') };
-		} catch (error) {
-			notifications.error({
-				message: (error as APIError).getErrorCode(),
-				description: (error as APIError).getErrorMessage(),
-			});
-			return {
-				status: 'failed',
-				statusMessage:
-					(error as APIError).getErrorMessage() || t('channel_edit_failed'),
-			};
-		} finally {
-			setSavingState(false);
-		}
-	}, [prepareMsTeamsRequest, t, notifications, selectedConfig]);
-
-	const validateGoogleChatConfig = useCallback((): string => {
-		if (!selectedConfig?.webhook_url) {
-			return t('webhook_url_required');
-		}
-
-		if (!isValidGoogleChatWebhookURL(selectedConfig.webhook_url)) {
-			return t('google_chat_webhook_url_invalid');
-		}
-
-		return '';
-	}, [selectedConfig, t]);
-
-	const onGoogleChatEditHandler = useCallback(async () => {
-		const validationError = validateGoogleChatConfig();
-
-		if (validationError !== '') {
-			notifications.error({
-				message: 'Error',
-				description: validationError,
-			});
-			return { status: 'failed', statusMessage: validationError };
-		}
-
-		setSavingState(true);
-
-		try {
-			await updateChannel({
-				pathParams: { id },
-				data: prepareGoogleChatRequest(selectedConfig),
-			});
-			notifications.success({
-				message: 'Success',
-				description: t('channel_edit_done'),
-			});
-			history.replace(ROUTES.ALL_CHANNELS);
-			return { status: 'success', statusMessage: t('channel_edit_done') };
-		} catch (error) {
-			const apiError = notifyError(error);
-			return {
-				status: 'failed',
-				statusMessage: apiError.getErrorMessage() || t('channel_edit_failed'),
-			};
-		} finally {
-			setSavingState(false);
-		}
-	}, [
-		validateGoogleChatConfig,
-		updateChannel,
-		id,
-		selectedConfig,
-		notifications,
-		notifyError,
-		t,
-	]);
-
-	const validateJiraConfig = useCallback((): string => {
-		if (
-			!selectedConfig.site ||
-			!selectedConfig.username ||
-			!selectedConfig.password ||
-			!selectedConfig.project ||
-			!selectedConfig.issue_type
-		) {
-			return t('jira_required_fields');
-		}
-
-		if (!isValidJiraSiteURL(selectedConfig.site)) {
-			return t('jira_site_invalid');
-		}
-
-		if (
-			selectedConfig.reopen_duration &&
-			!isValidJiraReopenDuration(selectedConfig.reopen_duration)
-		) {
-			return t('jira_reopen_duration_invalid');
-		}
-
-		return '';
-	}, [selectedConfig, t]);
-
-	const onJiraEditHandler = useCallback(async () => {
-		const validationError = validateJiraConfig();
-
-		if (validationError !== '') {
-			notifications.error({
-				message: 'Error',
-				description: validationError,
-			});
-			return { status: 'failed', statusMessage: validationError };
-		}
-
-		setSavingState(true);
-
-		try {
-			await updateChannel({
-				pathParams: { id },
-				data: prepareJiraRequest(selectedConfig),
-			});
-			notifications.success({
-				message: 'Success',
-				description: t('channel_edit_done'),
-			});
-			history.replace(ROUTES.ALL_CHANNELS);
-			return { status: 'success', statusMessage: t('channel_edit_done') };
-		} catch (error) {
-			const apiError = notifyError(error);
-			return {
-				status: 'failed',
-				statusMessage: apiError.getErrorMessage() || t('channel_edit_failed'),
-			};
-		} finally {
-			setSavingState(false);
-		}
-	}, [
-		validateJiraConfig,
-		updateChannel,
-		id,
-		selectedConfig,
-		notifications,
-		notifyError,
-		t,
-	]);
-
-	const validateJsmOpsConfig = useCallback((): string => {
-		if (!selectedConfig.api_key) {
-			return t('api_key_required');
-		}
-		return '';
-	}, [selectedConfig, t]);
-
-	const onJsmOpsEditHandler = useCallback(async () => {
-		const validationError = validateJsmOpsConfig();
-
-		if (validationError !== '') {
-			notifications.error({
-				message: 'Error',
-				description: validationError,
-			});
-			return { status: 'failed', statusMessage: validationError };
-		}
-
-		setSavingState(true);
-
-		try {
-			await updateChannel({
-				pathParams: { id },
-				data: prepareJsmOpsRequest(selectedConfig),
-			});
-			notifications.success({
-				message: 'Success',
-				description: t('channel_edit_done'),
-			});
-			history.replace(ROUTES.ALL_CHANNELS);
-			return { status: 'success', statusMessage: t('channel_edit_done') };
-		} catch (error) {
-			const apiError = notifyError(error);
-			return {
-				status: 'failed',
-				statusMessage: apiError.getErrorMessage() || t('channel_edit_failed'),
-			};
-		} finally {
-			setSavingState(false);
-		}
-	}, [
-		validateJsmOpsConfig,
-		updateChannel,
-		id,
-		selectedConfig,
-		notifications,
-		notifyError,
-		t,
-	]);
-
-	const validateIncidentIOConfig = useCallback((): string => {
-		if (!selectedConfig.url || !selectedConfig.token) {
-			return t('incidentio_required_fields');
-		}
-
-		if (!isValidIncidentIOURL(selectedConfig.url)) {
-			return t('incidentio_url_invalid');
-		}
-
-		return '';
-	}, [selectedConfig, t]);
-
-	const onIncidentIOEditHandler = useCallback(async () => {
-		const validationError = validateIncidentIOConfig();
-
-		if (validationError !== '') {
-			notifications.error({
-				message: 'Error',
-				description: validationError,
-			});
-			return { status: 'failed', statusMessage: validationError };
-		}
-
-		setSavingState(true);
-
-		try {
-			await updateChannel({
-				pathParams: { id },
-				data: prepareIncidentIORequest(selectedConfig),
-			});
-			notifications.success({
-				message: 'Success',
-				description: t('channel_edit_done'),
-			});
-			history.replace(ROUTES.ALL_CHANNELS);
-			return { status: 'success', statusMessage: t('channel_edit_done') };
-		} catch (error) {
-			const apiError = notifyError(error);
-			return {
-				status: 'failed',
-				statusMessage: apiError.getErrorMessage() || t('channel_edit_failed'),
-			};
-		} finally {
-			setSavingState(false);
-		}
-	}, [
-		validateIncidentIOConfig,
-		updateChannel,
-		id,
-		selectedConfig,
-		notifications,
-		notifyError,
-		t,
-	]);
-
-	const onSaveHandler = useCallback(
-		async (value: ChannelType) => {
-			let result;
-			if (value === ChannelType.Slack) {
-				result = await onSlackEditHandler();
-			} else if (value === ChannelType.Webhook) {
-				result = await onWebhookEditHandler();
-			} else if (value === ChannelType.Pagerduty) {
-				result = await onPagerEditHandler();
-			} else if (value === ChannelType.MsTeams) {
-				result = await onMsTeamsEditHandler();
-			} else if (value === ChannelType.Opsgenie) {
-				result = await onOpsgenieEditHandler();
-			} else if (value === ChannelType.Email) {
-				result = await onEmailEditHandler();
-			} else if (value === ChannelType.GoogleChat) {
-				result = await onGoogleChatEditHandler();
-			} else if (value === ChannelType.Jira) {
-				result = await onJiraEditHandler();
-			} else if (value === ChannelType.JsmOps) {
-				result = await onJsmOpsEditHandler();
-			} else if (value === ChannelType.IncidentIO) {
-				result = await onIncidentIOEditHandler();
-			}
-			logEvent('Alert Channel: Save channel', {
-				type: value,
-				sendResolvedAlert: selectedConfig?.send_resolved,
-				name: selectedConfig?.name,
-				new: 'false',
-				status: result?.status,
-				statusMessage: result?.statusMessage,
-			});
-		},
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[
-			onSlackEditHandler,
-			onWebhookEditHandler,
-			onPagerEditHandler,
-			onMsTeamsEditHandler,
-			onOpsgenieEditHandler,
-			onEmailEditHandler,
-			onGoogleChatEditHandler,
-			onJiraEditHandler,
-			onJsmOpsEditHandler,
-			onIncidentIOEditHandler,
-		],
-	);
-
-	const performChannelTest = useCallback(
-		// eslint-disable-next-line sonarjs/cognitive-complexity
-		async (channelType: ChannelType) => {
-			setTestingState(true);
-			try {
-				let request;
-				switch (channelType) {
-					case ChannelType.Webhook:
-						request = prepareWebhookRequest();
-						await testWebhookApi(request);
-						break;
-					case ChannelType.Slack:
-						request = prepareSlackRequest();
-						await testSlackApi(request);
-						break;
-					case ChannelType.Pagerduty:
-						request = preparePagerRequest();
-						if (request) {
-							await testPagerApi(request);
-						}
-						break;
-					case ChannelType.MsTeams:
-						request = prepareMsTeamsRequest();
-						if (request) {
-							await testMsTeamsApi(request);
-						}
-						break;
-					case ChannelType.Opsgenie:
-						request = prepareOpsgenieRequest();
-						if (request) {
-							await testOpsgenie(request);
-						}
-						break;
-					case ChannelType.Email:
-						request = prepareEmailRequest();
-						if (request) {
-							await testEmail(request);
-						}
-						break;
-					case ChannelType.GoogleChat: {
-						const validationError = validateGoogleChatConfig();
-						if (validationError !== '') {
-							notifications.error({
-								message: 'Error',
-								description: validationError,
-							});
-							setTestingState(false);
-							return;
-						}
-						await testChannel({ data: prepareGoogleChatRequest(selectedConfig) });
-						break;
-					}
-					case ChannelType.Jira: {
-						const validationError = validateJiraConfig();
-						if (validationError !== '') {
-							notifications.error({
-								message: 'Error',
-								description: validationError,
-							});
-							setTestingState(false);
-							return;
-						}
-						await testChannel({ data: prepareJiraRequest(selectedConfig) });
-						break;
-					}
-					case ChannelType.JsmOps: {
-						const validationError = validateJsmOpsConfig();
-						if (validationError !== '') {
-							notifications.error({
-								message: 'Error',
-								description: validationError,
-							});
-							setTestingState(false);
-							return;
-						}
-						await testChannel({ data: prepareJsmOpsRequest(selectedConfig) });
-						break;
-					}
-					case ChannelType.IncidentIO: {
-						const validationError = validateIncidentIOConfig();
-						if (validationError !== '') {
-							notifications.error({
-								message: 'Error',
-								description: validationError,
-							});
-							setTestingState(false);
-							return;
-						}
-						await testChannel({ data: prepareIncidentIORequest(selectedConfig) });
-						break;
-					}
-					default:
-						notifications.error({
-							message: 'Error',
-							description: t('test_unsupported'),
-						});
-						setTestingState(false);
-						return;
-				}
-
-				notifications.success({
-					message: 'Success',
-					description: t('channel_test_done'),
-				});
-				logEvent('Alert Channel: Test notification', {
-					type: channelType,
-					sendResolvedAlert: selectedConfig?.send_resolved,
-					name: selectedConfig?.name,
-					new: 'false',
-					status: 'Test success',
-				});
-			} catch (error) {
-				notifyError(error);
-				logEvent('Alert Channel: Test notification', {
-					type: channelType,
-					sendResolvedAlert: selectedConfig?.send_resolved,
-					name: selectedConfig?.name,
-					new: 'false',
-					status: 'Test failed',
-				});
-			}
-			setTestingState(false);
-		},
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[
-			t,
-			notifyError,
-			validateGoogleChatConfig,
-			validateJiraConfig,
-			validateJsmOpsConfig,
-			validateIncidentIOConfig,
-			testChannel,
-			prepareWebhookRequest,
-			preparePagerRequest,
-			prepareSlackRequest,
-			prepareMsTeamsRequest,
-			prepareOpsgenieRequest,
-			prepareEmailRequest,
-			notifications,
-		],
-	);
-
-	const onTestHandler = useCallback(
-		async (value: ChannelType) => {
-			performChannelTest(value);
-		},
-		[performChannelTest],
-	);
-
-	return (
-		<FormAlertChannels
-			{...{
-				formInstance,
-				onTypeChangeHandler,
-				setSelectedConfig,
-				type,
-				onTestHandler,
-				onSaveHandler,
-				testingState,
-				savingState,
-				title: t('page_title_edit'),
-				initialValue,
-				editing: true,
-			}}
-		/>
-	);
-}
-
-interface EditAlertChannelsProps {
-	initialValue: {
-		[x: string]: unknown;
-	};
-	channelId: string;
-}
-
-export default EditAlertChannels;

frontend/src/container/FormAlertChannels/Settings/Email.tsx

@@ -2,7 +2,7 @@ import { Dispatch, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Input } from '@signozhq/ui/input';
 import { Form } from 'antd';
-import { EmailChannel } from '../../CreateAlertChannels/config';
+import { ChannelSpecFormValues } from '../../CreateAlertChannels/types';
 
 function EmailForm({ setSelectedConfig }: EmailFormProps): JSX.Element {
 	const { t } = useTranslation('channels');
@@ -43,7 +43,7 @@ function EmailForm({ setSelectedConfig }: EmailFormProps): JSX.Element {
 }
 
 interface EmailFormProps {
-	setSelectedConfig: Dispatch<SetStateAction<Partial<EmailChannel>>>;
+	setSelectedConfig: Dispatch<SetStateAction<Partial<ChannelSpecFormValues>>>;
 }
 
 export default EmailForm;

frontend/src/container/FormAlertChannels/Settings/GoogleChat.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Form, Input } from 'antd';
 import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
 
-import { GoogleChatChannel } from '../../CreateAlertChannels/config';
+import { ChannelSpecFormValues } from '../../CreateAlertChannels/types';
 import { isValidGoogleChatWebhookURL } from '../../CreateAlertChannels/utils';
 
 function GoogleChat({ setSelectedConfig }: GoogleChatProps): JSX.Element {
@@ -12,7 +12,7 @@ function GoogleChat({ setSelectedConfig }: GoogleChatProps): JSX.Element {
 	return (
 		<>
 			<Form.Item
-				name="webhook_url"
+				name="webhookUrl"
 				label={t('field_webhook_url')}
 				required
 				rules={[
@@ -38,7 +38,7 @@ function GoogleChat({ setSelectedConfig }: GoogleChatProps): JSX.Element {
 					onChange={(event): void => {
 						setSelectedConfig((value) => ({
 							...value,
-							webhook_url: event.target.value,
+							webhookUrl: event.target.value,
 						}));
 					}}
 					data-testid="webhook-url-textbox"
@@ -76,7 +76,7 @@ function GoogleChat({ setSelectedConfig }: GoogleChatProps): JSX.Element {
 }
 
 interface GoogleChatProps {
-	setSelectedConfig: Dispatch<SetStateAction<Partial<GoogleChatChannel>>>;
+	setSelectedConfig: Dispatch<SetStateAction<Partial<ChannelSpecFormValues>>>;
 }
 
 export default GoogleChat;

frontend/src/container/FormAlertChannels/Settings/IncidentIo.tsx

@@ -4,7 +4,7 @@ import { Minus, Plus } from '@signozhq/icons';
 import { Button, Form, Input } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 
-import { IncidentIOChannel } from '../../CreateAlertChannels/config';
+import { ChannelSpecFormValues } from '../../CreateAlertChannels/types';
 
 interface MetadataRow {
 	key: string;
@@ -23,7 +23,7 @@ function IncidentIOSettings({
 		})),
 	);
 
-	const update = (patch: Partial<IncidentIOChannel>): void =>
+	const update = (patch: Partial<ChannelSpecFormValues>): void =>
 		setSelectedConfig((value) => ({ ...value, ...patch }));
 
 	const syncMetadata = (rows: MetadataRow[]): void => {
@@ -161,7 +161,7 @@ function IncidentIOSettings({
 }
 
 interface IncidentIOProps {
-	setSelectedConfig: Dispatch<SetStateAction<Partial<IncidentIOChannel>>>;
+	setSelectedConfig: Dispatch<SetStateAction<Partial<ChannelSpecFormValues>>>;
 	initialMetadata?: Record<string, string>;
 }
 

frontend/src/container/FormAlertChannels/Settings/Jira.tsx

@@ -4,7 +4,7 @@ import { Collapse, Form, Input, Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
 
-import { JiraChannel } from '../../CreateAlertChannels/config';
+import { ChannelSpecFormValues } from '../../CreateAlertChannels/types';
 import {
 	isValidJiraReopenDuration,
 	isValidJiraSiteURL,
@@ -13,7 +13,7 @@ import {
 function JiraSettings({ setSelectedConfig }: JiraProps): JSX.Element {
 	const { t } = useTranslation('channels');
 
-	const update = (patch: Partial<JiraChannel>): void =>
+	const update = (patch: Partial<ChannelSpecFormValues>): void =>
 		setSelectedConfig((value) => ({ ...value, ...patch }));
 
 	const advanced = (
@@ -45,49 +45,49 @@ function JiraSettings({ setSelectedConfig }: JiraProps): JSX.Element {
 			</Form.Item>
 
 			<Form.Item
-				name="resolve_transition"
+				name="resolveTransition"
 				label={t('field_jira_resolve_transition')}
 				help={t('help_jira_resolve_transition')}
 			>
 				<Input
 					placeholder={t('placeholder_jira_resolve_transition')}
 					onChange={(event): void =>
-						update({ resolve_transition: event.target.value })
+						update({ resolveTransition: event.target.value })
 					}
 					data-testid="jira-resolve-transition-textbox"
 				/>
 			</Form.Item>
 
 			<Form.Item
-				name="reopen_transition"
+				name="reopenTransition"
 				label={t('field_jira_reopen_transition')}
 				help={t('help_jira_reopen_transition')}
 			>
 				<Input
 					placeholder={t('placeholder_jira_reopen_transition')}
 					onChange={(event): void =>
-						update({ reopen_transition: event.target.value })
+						update({ reopenTransition: event.target.value })
 					}
 					data-testid="jira-reopen-transition-textbox"
 				/>
 			</Form.Item>
 
 			<Form.Item
-				name="wont_fix_resolution"
+				name="wontFixResolution"
 				label={t('field_jira_wont_fix_resolution')}
 				help={t('help_jira_wont_fix_resolution')}
 			>
 				<Input
 					placeholder={t('placeholder_jira_wont_fix_resolution')}
 					onChange={(event): void =>
-						update({ wont_fix_resolution: event.target.value })
+						update({ wontFixResolution: event.target.value })
 					}
 					data-testid="jira-wont-fix-resolution-textbox"
 				/>
 			</Form.Item>
 
 			<Form.Item
-				name="reopen_duration"
+				name="reopenDuration"
 				label={t('field_jira_reopen_duration')}
 				extra={t('help_jira_reopen_duration')}
 				rules={[
@@ -111,7 +111,7 @@ function JiraSettings({ setSelectedConfig }: JiraProps): JSX.Element {
 			>
 				<Input
 					placeholder={t('placeholder_jira_reopen_duration')}
-					onChange={(event): void => update({ reopen_duration: event.target.value })}
+					onChange={(event): void => update({ reopenDuration: event.target.value })}
 					data-testid="jira-reopen-duration-textbox"
 				/>
 			</Form.Item>
@@ -167,26 +167,26 @@ function JiraSettings({ setSelectedConfig }: JiraProps): JSX.Element {
 			</Form.Item>
 
 			<Form.Item
-				name="username"
+				name="email"
 				label={t('field_jira_email')}
 				help={t('help_jira_email')}
 				required
 			>
 				<Input
-					onChange={(event): void => update({ username: event.target.value })}
+					onChange={(event): void => update({ email: event.target.value })}
 					data-testid="jira-email-textbox"
 				/>
 			</Form.Item>
 
 			<Form.Item
-				name="password"
+				name="apiToken"
 				label={t('field_jira_api_token')}
 				help={t('help_jira_api_token')}
 				required
 			>
 				<Input
 					type="password"
-					onChange={(event): void => update({ password: event.target.value })}
+					onChange={(event): void => update({ apiToken: event.target.value })}
 					data-testid="jira-api-token-textbox"
 				/>
 			</Form.Item>
@@ -200,13 +200,13 @@ function JiraSettings({ setSelectedConfig }: JiraProps): JSX.Element {
 			</Form.Item>
 
 			<Form.Item
-				name="issue_type"
+				name="issueType"
 				label={t('field_jira_issue_type')}
 				help={t('help_jira_issue_type')}
 				required
 			>
 				<Input
-					onChange={(event): void => update({ issue_type: event.target.value })}
+					onChange={(event): void => update({ issueType: event.target.value })}
 					data-testid="jira-issue-type-textbox"
 				/>
 			</Form.Item>
@@ -250,7 +250,7 @@ function JiraSettings({ setSelectedConfig }: JiraProps): JSX.Element {
 }
 
 interface JiraProps {
-	setSelectedConfig: Dispatch<SetStateAction<Partial<JiraChannel>>>;
+	setSelectedConfig: Dispatch<SetStateAction<Partial<ChannelSpecFormValues>>>;
 }
 
 export default JiraSettings;

frontend/src/container/FormAlertChannels/Settings/JsmOps.tsx

@@ -3,12 +3,12 @@ import { useTranslation } from 'react-i18next';
 import { Collapse, Form, Input, Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 
-import { JsmOpsChannel } from '../../CreateAlertChannels/config';
+import { ChannelSpecFormValues } from '../../CreateAlertChannels/types';
 
 function JsmOpsSettings({ setSelectedConfig }: JsmOpsProps): JSX.Element {
 	const { t } = useTranslation('channels');
 
-	const update = (patch: Partial<JsmOpsChannel>): void =>
+	const update = (patch: Partial<ChannelSpecFormValues>): void =>
 		setSelectedConfig((value) => ({ ...value, ...patch }));
 
 	const advanced = (
@@ -29,12 +29,17 @@ function JsmOpsSettings({ setSelectedConfig }: JsmOpsProps): JSX.Element {
 				name="tags"
 				label={t('field_jsmops_tags')}
 				help={t('help_jsmops_tags')}
+				// the API takes one comma-separated string, the control edits chips
+				getValueProps={(value: string | undefined): { value: string[] } => ({
+					value: value ? value.split(',') : [],
+				})}
+				normalize={(value: string[]): string => value.join(',')}
 			>
 				<Select
 					mode="tags"
 					open={false}
 					placeholder={t('placeholder_jsmops_tags')}
-					onChange={(value): void => update({ tags: value as string[] })}
+					onChange={(value): void => update({ tags: (value as string[]).join(',') })}
 					data-testid="jsmops-tags-select"
 				/>
 			</Form.Item>
@@ -60,14 +65,14 @@ function JsmOpsSettings({ setSelectedConfig }: JsmOpsProps): JSX.Element {
 			</Typography.Text>
 
 			<Form.Item
-				name="api_key"
+				name="apiKey"
 				label={t('field_jsmops_api_key')}
 				help={t('help_jsmops_api_key')}
 				required
 			>
 				<Input
 					type="password"
-					onChange={(event): void => update({ api_key: event.target.value })}
+					onChange={(event): void => update({ apiKey: event.target.value })}
 					data-testid="jsmops-api-key-textbox"
 				/>
 			</Form.Item>
@@ -111,7 +116,7 @@ function JsmOpsSettings({ setSelectedConfig }: JsmOpsProps): JSX.Element {
 }
 
 interface JsmOpsProps {
-	setSelectedConfig: Dispatch<SetStateAction<Partial<JsmOpsChannel>>>;
+	setSelectedConfig: Dispatch<SetStateAction<Partial<ChannelSpecFormValues>>>;
 }
 
 export default JsmOpsSettings;

frontend/src/container/FormAlertChannels/Settings/MsTeams.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Form, Input } from 'antd';
 import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
 
-import { MsTeamsChannel } from '../../CreateAlertChannels/config';
+import { ChannelSpecFormValues } from '../../CreateAlertChannels/types';
 
 function MsTeams({ setSelectedConfig }: MsTeamsProps): JSX.Element {
 	const { t } = useTranslation('channels');
@@ -11,7 +11,7 @@ function MsTeams({ setSelectedConfig }: MsTeamsProps): JSX.Element {
 	return (
 		<>
 			<Form.Item
-				name="webhook_url"
+				name="webhookUrl"
 				label={t('field_webhook_url')}
 				tooltip={{
 					title: (
@@ -28,7 +28,7 @@ function MsTeams({ setSelectedConfig }: MsTeamsProps): JSX.Element {
 					onChange={(event): void => {
 						setSelectedConfig((value) => ({
 							...value,
-							webhook_url: event.target.value,
+							webhookUrl: event.target.value,
 						}));
 					}}
 					data-testid="webhook-url-textbox"
@@ -67,7 +67,7 @@ function MsTeams({ setSelectedConfig }: MsTeamsProps): JSX.Element {
 
 interface MsTeamsProps {
 	setSelectedConfig: React.Dispatch<
-		React.SetStateAction<Partial<MsTeamsChannel>>
+		React.SetStateAction<Partial<ChannelSpecFormValues>>
 	>;
 }
 

frontend/src/container/FormAlertChannels/Settings/Opsgenie.tsx

@@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next';
 import { Form, Input } from 'antd';
 import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
 
-import { OpsgenieChannel } from '../../CreateAlertChannels/config';
+import { ChannelSpecFormValues } from '../../CreateAlertChannels/types';
 
 const { TextArea } = Input;
 
@@ -21,7 +21,7 @@ function OpsgenieForm({ setSelectedConfig }: OpsgenieFormProps): JSX.Element {
 	return (
 		<>
 			<Form.Item
-				name="api_key"
+				name="apiKey"
 				label={t('field_opsgenie_api_key')}
 				tooltip={{
 					title: (
@@ -36,7 +36,7 @@ function OpsgenieForm({ setSelectedConfig }: OpsgenieFormProps): JSX.Element {
 				required
 			>
 				<Input
-					onChange={handleInputChange('api_key')}
+					onChange={handleInputChange('apiKey')}
 					data-testid="opsgenie-api-key-textbox"
 				/>
 			</Form.Item>
@@ -88,7 +88,7 @@ function OpsgenieForm({ setSelectedConfig }: OpsgenieFormProps): JSX.Element {
 
 interface OpsgenieFormProps {
 	setSelectedConfig: React.Dispatch<
-		React.SetStateAction<Partial<OpsgenieChannel>>
+		React.SetStateAction<Partial<ChannelSpecFormValues>>
 	>;
 }
 

frontend/src/container/FormAlertChannels/Settings/Pager.tsx

@@ -3,16 +3,20 @@ import { useTranslation } from 'react-i18next';
 import { Form, Input } from 'antd';
 import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
 
-import { PagerChannel } from '../../CreateAlertChannels/config';
+import { ChannelSpecFormValues } from '../../CreateAlertChannels/types';
+import PagerDetails from './PagerDetails';
 
 const { TextArea } = Input;
 
-function PagerForm({ setSelectedConfig }: PagerFormProps): JSX.Element {
+function PagerForm({
+	setSelectedConfig,
+	initialDetails,
+}: PagerFormProps): JSX.Element {
 	const { t } = useTranslation('channels');
 	return (
 		<>
 			<Form.Item
-				name="routing_key"
+				name="routingKey"
 				label={t('field_pager_routing_key')}
 				tooltip={{
 					title: (
@@ -29,7 +33,7 @@ function PagerForm({ setSelectedConfig }: PagerFormProps): JSX.Element {
 					onChange={(event): void => {
 						setSelectedConfig((value) => ({
 							...value,
-							routing_key: event.target.value,
+							routingKey: event.target.value,
 						}));
 					}}
 					data-testid="pager-routing-key-textbox"
@@ -71,22 +75,10 @@ function PagerForm({ setSelectedConfig }: PagerFormProps): JSX.Element {
 				/>
 			</Form.Item>
 
-			<Form.Item
-				name="details"
-				help={t('help_pager_details')}
-				label={t('field_pager_details')}
-			>
-				<TextArea
-					rows={4}
-					onChange={(event): void =>
-						setSelectedConfig((value) => ({
-							...value,
-							details: event.target.value,
-						}))
-					}
-					data-testid="pager-additional-details-textarea"
-				/>
-			</Form.Item>
+			<PagerDetails
+				setSelectedConfig={setSelectedConfig}
+				initialDetails={initialDetails}
+			/>
 
 			<Form.Item
 				name="component"
@@ -151,7 +143,7 @@ function PagerForm({ setSelectedConfig }: PagerFormProps): JSX.Element {
 			</Form.Item>
 
 			<Form.Item
-				name="client_url"
+				name="clientUrl"
 				help={t('help_pager_client_url')}
 				label={t('field_pager_client_url')}
 			>
@@ -159,7 +151,7 @@ function PagerForm({ setSelectedConfig }: PagerFormProps): JSX.Element {
 					onChange={(event): void =>
 						setSelectedConfig((value) => ({
 							...value,
-							client_url: event.target.value,
+							clientUrl: event.target.value,
 						}))
 					}
 					data-testid="pager-client-url-textarea"
@@ -170,7 +162,8 @@ function PagerForm({ setSelectedConfig }: PagerFormProps): JSX.Element {
 }
 
 interface PagerFormProps {
-	setSelectedConfig: Dispatch<SetStateAction<Partial<PagerChannel>>>;
+	setSelectedConfig: Dispatch<SetStateAction<Partial<ChannelSpecFormValues>>>;
+	initialDetails?: Record<string, string>;
 }
 
 export default PagerForm;

frontend/src/container/FormAlertChannels/Settings/PagerDetails.tsx

@@ -0,0 +1,64 @@
+import { Dispatch, SetStateAction, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Form, Input } from 'antd';
+
+import { ChannelSpecFormValues } from '../../CreateAlertChannels/types';
+
+const { TextArea } = Input;
+
+interface PagerDetailsProps {
+	setSelectedConfig: Dispatch<SetStateAction<ChannelSpecFormValues>>;
+	initialDetails?: Record<string, string>;
+}
+
+const serialize = (details?: Record<string, string>): string =>
+	details && Object.keys(details).length > 0 ? JSON.stringify(details) : '';
+
+/**
+ * The API models these details as a map, so the raw JSON the box edits is held
+ * here: a half-typed object is not valid JSON and would not survive a round trip
+ * through the form's parsed value.
+ */
+function PagerDetails({
+	setSelectedConfig,
+	initialDetails,
+}: PagerDetailsProps): JSX.Element {
+	const { t } = useTranslation('channels');
+	const [text, setText] = useState<string>(() => serialize(initialDetails));
+	const [error, setError] = useState<string | null>(null);
+
+	const onChange = (value: string): void => {
+		setText(value);
+
+		if (value.trim() === '') {
+			setError(null);
+			setSelectedConfig((config) => ({ ...config, details: {} }));
+			return;
+		}
+
+		try {
+			const parsed = JSON.parse(value);
+			setError(null);
+			setSelectedConfig((config) => ({ ...config, details: parsed }));
+		} catch {
+			setError(t('pager_details_invalid_json'));
+		}
+	};
+
+	return (
+		<Form.Item
+			help={error ?? t('help_pager_details')}
+			label={t('field_pager_details')}
+			validateStatus={error ? 'error' : undefined}
+		>
+			<TextArea
+				rows={4}
+				value={text}
+				onChange={(event): void => onChange(event.target.value)}
+				data-testid="pager-additional-details-textarea"
+			/>
+		</Form.Item>
+	);
+}
+
+export default PagerDetails;

frontend/src/container/FormAlertChannels/Settings/Slack.tsx

@@ -3,17 +3,28 @@ import { useTranslation } from 'react-i18next';
 import { Form, Input } from 'antd';
 import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
 
-import { SlackChannel } from '../../CreateAlertChannels/config';
+import {
+	AlertmanagertypesChannelSlackActionDTO,
+	AlertmanagertypesChannelSlackFieldDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+import { ChannelSpecFormValues } from '../../CreateAlertChannels/types';
+import SlackActions from './SlackActions';
+import SlackFields from './SlackFields';
 
 const { TextArea } = Input;
 
-function Slack({ setSelectedConfig }: SlackProps): JSX.Element {
+function Slack({
+	setSelectedConfig,
+	initialFields,
+	initialActions,
+}: SlackProps): JSX.Element {
 	const { t } = useTranslation('channels');
 
 	return (
 		<>
 			<Form.Item
-				name="api_url"
+				name="apiUrl"
 				label={t('field_webhook_url')}
 				tooltip={{
 					title: (
@@ -30,7 +41,7 @@ function Slack({ setSelectedConfig }: SlackProps): JSX.Element {
 					onChange={(event): void => {
 						setSelectedConfig((value) => ({
 							...value,
-							api_url: event.target.value,
+							apiUrl: event.target.value,
 						}));
 					}}
 					data-testid="webhook-url-textbox"
@@ -67,6 +78,18 @@ function Slack({ setSelectedConfig }: SlackProps): JSX.Element {
 				/>
 			</Form.Item>
 
+			<Form.Item name="titleLink" label={t('field_slack_title_link')}>
+				<Input
+					onChange={(event): void =>
+						setSelectedConfig((value) => ({
+							...value,
+							titleLink: event.target.value,
+						}))
+					}
+					data-testid="title-link-textbox"
+				/>
+			</Form.Item>
+
 			<Form.Item name="text" label={t('field_slack_description')}>
 				<TextArea
 					onChange={(event): void =>
@@ -79,12 +102,85 @@ function Slack({ setSelectedConfig }: SlackProps): JSX.Element {
 					data-testid="description-textarea"
 				/>
 			</Form.Item>
+
+			<Form.Item
+				name="color"
+				label={t('field_slack_color')}
+				help={t('help_slack_color')}
+			>
+				<Input
+					onChange={(event): void =>
+						setSelectedConfig((value) => ({
+							...value,
+							color: event.target.value,
+						}))
+					}
+					placeholder={t('placeholder_slack_color')}
+					data-testid="slack-color-textbox"
+				/>
+			</Form.Item>
+
+			<Form.Item
+				name="pretext"
+				label={t('field_slack_pretext')}
+				help={t('help_slack_pretext')}
+			>
+				<Input
+					onChange={(event): void =>
+						setSelectedConfig((value) => ({
+							...value,
+							pretext: event.target.value,
+						}))
+					}
+					data-testid="slack-pretext-textbox"
+				/>
+			</Form.Item>
+
+			<Form.Item
+				name="fallback"
+				label={t('field_slack_fallback')}
+				help={t('help_slack_fallback')}
+			>
+				<Input
+					onChange={(event): void =>
+						setSelectedConfig((value) => ({
+							...value,
+							fallback: event.target.value,
+						}))
+					}
+					data-testid="slack-fallback-textbox"
+				/>
+			</Form.Item>
+
+			<Form.Item name="footer" label={t('field_slack_footer')}>
+				<Input
+					onChange={(event): void =>
+						setSelectedConfig((value) => ({
+							...value,
+							footer: event.target.value,
+						}))
+					}
+					data-testid="slack-footer-textbox"
+				/>
+			</Form.Item>
+
+			<SlackFields
+				setSelectedConfig={setSelectedConfig}
+				initialFields={initialFields}
+			/>
+
+			<SlackActions
+				setSelectedConfig={setSelectedConfig}
+				initialActions={initialActions}
+			/>
 		</>
 	);
 }
 
 interface SlackProps {
-	setSelectedConfig: Dispatch<SetStateAction<Partial<SlackChannel>>>;
+	setSelectedConfig: Dispatch<SetStateAction<Partial<ChannelSpecFormValues>>>;
+	initialFields?: AlertmanagertypesChannelSlackFieldDTO[];
+	initialActions?: AlertmanagertypesChannelSlackActionDTO[];
 }
 
 export default Slack;

frontend/src/container/FormAlertChannels/Settings/SlackActions.tsx

@@ -0,0 +1,123 @@
+import { Dispatch, SetStateAction, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Minus, Plus } from '@signozhq/icons';
+import { Button, Form, Input } from 'antd';
+import { AlertmanagertypesChannelSlackActionDTO } from 'api/generated/services/sigNoz.schemas';
+
+import { ChannelSpecFormValues } from '../../CreateAlertChannels/types';
+
+interface SlackActionsProps {
+	setSelectedConfig: Dispatch<SetStateAction<Partial<ChannelSpecFormValues>>>;
+	initialActions?: AlertmanagertypesChannelSlackActionDTO[];
+}
+
+const emptyAction: AlertmanagertypesChannelSlackActionDTO = {
+	type: 'button',
+	text: '',
+	url: '',
+};
+
+// Buttons Slack renders under the attachment. `type` and `text` are required by
+// the API; a `button` carrying a url is the link-out case, the rest drive a
+// Slack app's own callbacks.
+function SlackActions({
+	setSelectedConfig,
+	initialActions,
+}: SlackActionsProps): JSX.Element {
+	const { t } = useTranslation('channels');
+	const [rows, setRows] = useState<AlertmanagertypesChannelSlackActionDTO[]>(
+		() => initialActions ?? [],
+	);
+
+	const sync = (next: AlertmanagertypesChannelSlackActionDTO[]): void => {
+		setRows(next);
+		setSelectedConfig((value) => ({
+			...value,
+			actions: next.filter((row) => row.text.trim() !== ''),
+		}));
+	};
+
+	const updateRow = (
+		index: number,
+		patch: Partial<AlertmanagertypesChannelSlackActionDTO>,
+	): void =>
+		sync(rows.map((row, i) => (i === index ? { ...row, ...patch } : row)));
+
+	return (
+		<Form.Item label={t('field_slack_actions')} help={t('help_slack_actions')}>
+			{rows.map((row, index) => (
+				// the rows have no stable id, and reordering is not offered
+				// eslint-disable-next-line react/no-array-index-key
+				<div key={index} className="slack-actions-row">
+					<Input
+						value={row.text}
+						placeholder={t('placeholder_slack_action_text')}
+						onChange={(event): void => updateRow(index, { text: event.target.value })}
+						data-testid={`slack-action-text-${index}`}
+					/>
+					<Input
+						value={row.url}
+						placeholder={t('placeholder_slack_action_url')}
+						onChange={(event): void => updateRow(index, { url: event.target.value })}
+						data-testid={`slack-action-url-${index}`}
+					/>
+					<Input
+						value={row.type}
+						placeholder={t('placeholder_slack_action_type')}
+						onChange={(event): void => updateRow(index, { type: event.target.value })}
+						data-testid={`slack-action-type-${index}`}
+					/>
+					<Input
+						value={row.name ?? ''}
+						placeholder={t('placeholder_slack_action_name')}
+						onChange={(event): void => updateRow(index, { name: event.target.value })}
+						data-testid={`slack-action-name-${index}`}
+					/>
+					<Input
+						value={row.value ?? ''}
+						placeholder={t('placeholder_slack_action_value')}
+						onChange={(event): void =>
+							updateRow(index, { value: event.target.value })
+						}
+						data-testid={`slack-action-value-${index}`}
+					/>
+					<Input
+						value={row.style ?? ''}
+						placeholder={t('placeholder_slack_action_style')}
+						onChange={(event): void =>
+							updateRow(index, { style: event.target.value })
+						}
+						data-testid={`slack-action-style-${index}`}
+					/>
+					<Input
+						value={row.confirm?.text ?? ''}
+						placeholder={t('placeholder_slack_action_confirm')}
+						onChange={(event): void =>
+							updateRow(index, {
+								confirm: event.target.value ? { text: event.target.value } : undefined,
+							})
+						}
+						data-testid={`slack-action-confirm-${index}`}
+					/>
+					<Button
+						type="text"
+						icon={<Minus size={14} />}
+						aria-label={t('remove_slack_action')}
+						onClick={(): void => sync(rows.filter((_, i) => i !== index))}
+						data-testid={`slack-action-remove-${index}`}
+					/>
+				</div>
+			))}
+			<Button
+				type="dashed"
+				icon={<Plus size={14} />}
+				onClick={(): void => sync([...rows, { ...emptyAction }])}
+				data-testid="slack-action-add"
+			>
+				{t('add_slack_action')}
+			</Button>
+		</Form.Item>
+	);
+}
+
+export default SlackActions;

frontend/src/container/FormAlertChannels/Settings/SlackFields.tsx

@@ -0,0 +1,95 @@
+import { Dispatch, SetStateAction, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Minus, Plus } from '@signozhq/icons';
+import { Button, Checkbox, Form, Input } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import { AlertmanagertypesChannelSlackFieldDTO } from 'api/generated/services/sigNoz.schemas';
+
+import { ChannelSpecFormValues } from '../../CreateAlertChannels/types';
+
+interface SlackFieldsProps {
+	setSelectedConfig: Dispatch<SetStateAction<Partial<ChannelSpecFormValues>>>;
+	initialFields?: AlertmanagertypesChannelSlackFieldDTO[];
+}
+
+// Slack renders these as the attachment's table of short or full-width entries.
+function SlackFields({
+	setSelectedConfig,
+	initialFields,
+}: SlackFieldsProps): JSX.Element {
+	const { t } = useTranslation('channels');
+	const [rows, setRows] = useState<AlertmanagertypesChannelSlackFieldDTO[]>(
+		() => initialFields ?? [],
+	);
+
+	const sync = (next: AlertmanagertypesChannelSlackFieldDTO[]): void => {
+		setRows(next);
+		setSelectedConfig((value) => ({
+			...value,
+			fields: next.filter((row) => row.title.trim() !== ''),
+		}));
+	};
+
+	const updateRow = (
+		index: number,
+		patch: Partial<AlertmanagertypesChannelSlackFieldDTO>,
+	): void =>
+		sync(rows.map((row, i) => (i === index ? { ...row, ...patch } : row)));
+
+	return (
+		<Form.Item label={t('field_slack_fields')} help={t('help_slack_fields')}>
+			{rows.map((row, index) => (
+				// the rows have no stable id, and reordering is not offered
+				// eslint-disable-next-line react/no-array-index-key
+				<div key={index} className="slack-fields-row">
+					<Input
+						value={row.title}
+						placeholder={t('placeholder_slack_field_title')}
+						onChange={(event): void =>
+							updateRow(index, { title: event.target.value })
+						}
+						data-testid={`slack-field-title-${index}`}
+					/>
+					<Input
+						value={row.value}
+						placeholder={t('placeholder_slack_field_value')}
+						onChange={(event): void =>
+							updateRow(index, { value: event.target.value })
+						}
+						data-testid={`slack-field-value-${index}`}
+					/>
+					<Checkbox
+						checked={!!row.short}
+						onChange={(event): void =>
+							updateRow(index, { short: event.target.checked })
+						}
+						data-testid={`slack-field-short-${index}`}
+					>
+						<Typography.Text size="sm">
+							{t('field_slack_field_short')}
+						</Typography.Text>
+					</Checkbox>
+					<Button
+						type="text"
+						icon={<Minus size={14} />}
+						aria-label={t('remove_slack_field')}
+						onClick={(): void => sync(rows.filter((_, i) => i !== index))}
+						data-testid={`slack-field-remove-${index}`}
+					/>
+				</div>
+			))}
+			<Button
+				type="dashed"
+				icon={<Plus size={14} />}
+				onClick={(): void =>
+					sync([...rows, { title: '', value: '', short: false }])
+				}
+				data-testid="slack-field-add"
+			>
+				{t('add_slack_field')}
+			</Button>
+		</Form.Item>
+	);
+}
+
+export default SlackFields;

frontend/src/container/FormAlertChannels/Settings/Telegram.tsx

@@ -0,0 +1,148 @@
+import { Dispatch, SetStateAction } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Form, Input } from 'antd';
+import { Switch } from '@signozhq/ui/switch';
+import { Typography } from '@signozhq/ui/typography';
+
+import { ChannelSpecFormValues } from '../../CreateAlertChannels/types';
+
+/**
+ * The API models the chat and the topic as integers, so a half-typed or cleared
+ * box has to send nothing rather than NaN, which would serialise as null and be
+ * rejected.
+ */
+const toNumber = (value: string): number | undefined => {
+	const parsed = Number(value);
+	return value.trim() === '' || Number.isNaN(parsed) ? undefined : parsed;
+};
+
+function TelegramSettings({
+	setSelectedConfig,
+	initialDisableNotifications,
+}: TelegramProps): JSX.Element {
+	const { t } = useTranslation('channels');
+
+	const update = (patch: Partial<ChannelSpecFormValues>): void =>
+		setSelectedConfig((value) => ({ ...value, ...patch }));
+
+	return (
+		<>
+			<Typography.Text
+				color="muted"
+				size="sm"
+				testId="telegram-tip"
+				style={{ display: 'block', marginBottom: 16 }}
+			>
+				{t('telegram_tip')}{' '}
+				<Typography.Link
+					href="https://core.telegram.org/bots#how-do-i-create-a-bot"
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					{t('telegram_tip_link')}
+				</Typography.Link>
+			</Typography.Text>
+
+			<Form.Item
+				name="botToken"
+				label={t('field_telegram_bot_token')}
+				help={t('help_telegram_bot_token')}
+				required
+			>
+				<Input
+					type="password"
+					onChange={(event): void => update({ botToken: event.target.value })}
+					data-testid="telegram-bot-token-textbox"
+				/>
+			</Form.Item>
+
+			<Form.Item
+				name="chatId"
+				label={t('field_telegram_chat_id')}
+				help={t('help_telegram_chat_id')}
+				required
+			>
+				<Input
+					type="number"
+					placeholder={t('placeholder_telegram_chat_id')}
+					onChange={(event): void =>
+						update({ chatId: toNumber(event.target.value) })
+					}
+					data-testid="telegram-chat-id-textbox"
+				/>
+			</Form.Item>
+
+			<Form.Item
+				name="messageThreadId"
+				label={t('field_telegram_message_thread_id')}
+				help={t('help_telegram_message_thread_id')}
+			>
+				<Input
+					type="number"
+					onChange={(event): void =>
+						update({ messageThreadId: toNumber(event.target.value) })
+					}
+					data-testid="telegram-message-thread-id-textbox"
+				/>
+			</Form.Item>
+
+			<Form.Item
+				name="title"
+				label={t('field_telegram_title')}
+				help={t('help_telegram_title')}
+			>
+				<Input.TextArea
+					rows={2}
+					onChange={(event): void => update({ title: event.target.value })}
+					data-testid="telegram-title-textarea"
+				/>
+			</Form.Item>
+
+			<Form.Item
+				name="message"
+				label={t('field_telegram_message')}
+				help={t('help_telegram_message')}
+			>
+				<Input.TextArea
+					rows={6}
+					onChange={(event): void => update({ message: event.target.value })}
+					data-testid="telegram-message-textarea"
+				/>
+			</Form.Item>
+
+			<Form.Item
+				name="apiUrl"
+				label={t('field_telegram_api_url')}
+				help={t('help_telegram_api_url')}
+			>
+				<Input
+					onChange={(event): void => update({ apiUrl: event.target.value })}
+					data-testid="telegram-api-url-textbox"
+				/>
+			</Form.Item>
+
+			<Form.Item
+				name="disableNotifications"
+				label={t('field_telegram_disable_notifications')}
+				help={t('help_telegram_disable_notifications')}
+			>
+				<Switch
+					defaultValue={initialDisableNotifications}
+					testId="telegram-disable-notifications-switch"
+					onChange={(value): void => update({ disableNotifications: value })}
+				/>
+			</Form.Item>
+		</>
+	);
+}
+
+interface TelegramProps {
+	setSelectedConfig: Dispatch<SetStateAction<Partial<ChannelSpecFormValues>>>;
+	initialDisableNotifications?: boolean;
+}
+
+TelegramSettings.defaultProps = {
+	initialDisableNotifications: undefined,
+};
+
+export default TelegramSettings;

frontend/src/container/FormAlertChannels/Settings/Webhook.tsx

@@ -4,7 +4,7 @@ import { Input } from '@signozhq/ui/input';
 import { Form } from 'antd';
 import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
 
-import { WebhookChannel } from '../../CreateAlertChannels/config';
+import { ChannelSpecFormValues } from '../../CreateAlertChannels/types';
 
 function WebhookSettings({ setSelectedConfig }: WebhookProps): JSX.Element {
 	const { t } = useTranslation('channels');
@@ -12,7 +12,7 @@ function WebhookSettings({ setSelectedConfig }: WebhookProps): JSX.Element {
 	return (
 		<>
 			<Form.Item
-				name="api_url"
+				name="url"
 				label={t('field_webhook_url')}
 				tooltip={{
 					title: (
@@ -29,7 +29,7 @@ function WebhookSettings({ setSelectedConfig }: WebhookProps): JSX.Element {
 					onChange={(event): void => {
 						setSelectedConfig((value) => ({
 							...value,
-							api_url: event.target.value,
+							url: event.target.value,
 						}));
 					}}
 					data-testid="webhook-url-textbox"
@@ -66,12 +66,28 @@ function WebhookSettings({ setSelectedConfig }: WebhookProps): JSX.Element {
 					data-testid="webhook-password-textbox"
 				/>
 			</Form.Item>
+			<Form.Item
+				name="bearerToken"
+				label={t('field_webhook_bearer_token')}
+				help={t('help_webhook_bearer_token')}
+			>
+				<Input
+					type="password"
+					onChange={(event): void => {
+						setSelectedConfig((value) => ({
+							...value,
+							bearerToken: event.target.value,
+						}));
+					}}
+					data-testid="webhook-bearer-token-textbox"
+				/>
+			</Form.Item>
 		</>
 	);
 }
 
 interface WebhookProps {
-	setSelectedConfig: Dispatch<SetStateAction<Partial<WebhookChannel>>>;
+	setSelectedConfig: Dispatch<SetStateAction<Partial<ChannelSpecFormValues>>>;
 }
 
 export default WebhookSettings;

frontend/src/container/FormAlertChannels/index.tsx

@@ -7,17 +7,11 @@ import { Typography } from '@signozhq/ui/typography';
 import type { Store } from 'antd/lib/form/interface';
 import ROUTES from 'constants/routes';
 import {
-	ChannelType,
-	EmailChannel,
-	GoogleChatChannel,
-	IncidentIOChannel,
-	JiraChannel,
-	JsmOpsChannel,
-	OpsgenieChannel,
-	PagerChannel,
-	SlackChannel,
-	WebhookChannel,
-} from 'container/CreateAlertChannels/config';
+	ChannelKind,
+	ChannelSpecFormValues,
+} from 'container/CreateAlertChannels/types';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import type { BrandedPermission } from 'lib/authz/hooks/useAuthZ/types';
 import history from 'lib/history';
 
 import EmailSettings from './Settings/Email';
@@ -29,6 +23,7 @@ import MsTeamsSettings from './Settings/MsTeams';
 import OpsgenieSettings from './Settings/Opsgenie';
 import PagerSettings from './Settings/Pager';
 import SlackSettings from './Settings/Slack';
+import TelegramSettings from './Settings/Telegram';
 import WebhookSettings from './Settings/Webhook';
 import { Button } from './styles';
 
@@ -44,35 +39,62 @@ function FormAlertChannels({
 	title,
 	initialValue,
 	editing = false,
+	readOnly = false,
+	saveChecks = [],
+	testChecks = [],
 }: FormAlertChannelsProps): JSX.Element {
 	const { t } = useTranslation('channels');
 
 	const renderSettings = (): ReactElement | null => {
 		switch (type) {
-			case ChannelType.Slack:
-				return <SlackSettings setSelectedConfig={setSelectedConfig} />;
-			case ChannelType.Webhook:
+			case ChannelKind.slack:
+				return (
+					<SlackSettings
+						setSelectedConfig={setSelectedConfig}
+						initialFields={
+							(initialValue?.fields as ChannelSpecFormValues['fields']) ?? undefined
+						}
+						initialActions={
+							(initialValue?.actions as ChannelSpecFormValues['actions']) ?? undefined
+						}
+					/>
+				);
+			case ChannelKind.webhook:
 				return <WebhookSettings setSelectedConfig={setSelectedConfig} />;
-			case ChannelType.Pagerduty:
-				return <PagerSettings setSelectedConfig={setSelectedConfig} />;
-			case ChannelType.MsTeams:
+			case ChannelKind.pagerduty:
+				return (
+					<PagerSettings
+						setSelectedConfig={setSelectedConfig}
+						initialDetails={initialValue?.details as Record<string, string>}
+					/>
+				);
+			case ChannelKind.msteams:
 				return <MsTeamsSettings setSelectedConfig={setSelectedConfig} />;
-			case ChannelType.GoogleChat:
+			case ChannelKind.googlechat:
 				return <GoogleChatSettings setSelectedConfig={setSelectedConfig} />;
-			case ChannelType.Jira:
+			case ChannelKind.jira:
 				return <JiraSettings setSelectedConfig={setSelectedConfig} />;
-			case ChannelType.JsmOps:
+			case ChannelKind.jsmops:
 				return <JsmOpsSettings setSelectedConfig={setSelectedConfig} />;
-			case ChannelType.IncidentIO:
+			case ChannelKind.incidentio:
 				return (
 					<IncidentIOSettings
 						setSelectedConfig={setSelectedConfig}
 						initialMetadata={initialValue?.metadata as Record<string, string>}
 					/>
 				);
-			case ChannelType.Opsgenie:
+			case ChannelKind.telegram:
+				return (
+					<TelegramSettings
+						setSelectedConfig={setSelectedConfig}
+						initialDisableNotifications={
+							initialValue?.disableNotifications as boolean
+						}
+					/>
+				);
+			case ChannelKind.opsgenie:
 				return <OpsgenieSettings setSelectedConfig={setSelectedConfig} />;
-			case ChannelType.Email:
+			case ChannelKind.email:
 				return <EmailSettings setSelectedConfig={setSelectedConfig} />;
 			default:
 				return null;
@@ -85,8 +107,18 @@ function FormAlertChannels({
 				{title}
 			</Typography.Title>
 
-			<Form initialValues={initialValue} layout="vertical" form={formInstance}>
-				<Form.Item label={t('field_channel_name')} labelAlign="left" name="name">
+			<Form
+				initialValues={initialValue}
+				layout="vertical"
+				form={formInstance}
+				disabled={readOnly}
+			>
+				<Form.Item
+					label={t('field_channel_name')}
+					labelAlign="left"
+					name="name"
+					extra={editing ? t('help_channel_name_immutable') : undefined}
+				>
 					<Input
 						data-testid="channel-name-textbox"
 						disabled={editing}
@@ -102,15 +134,15 @@ function FormAlertChannels({
 				<Form.Item
 					label={t('field_send_resolved')}
 					labelAlign="left"
-					name="send_resolved"
+					name="sendResolved"
 				>
 					<Switch
-						defaultValue={initialValue?.send_resolved}
+						defaultValue={initialValue?.sendResolved}
 						testId="field-send-resolved-checkbox"
 						onChange={(value): void => {
 							setSelectedConfig((state) => ({
 								...state,
-								send_resolved: value,
+								sendResolved: value,
 							}));
 						}}
 					/>
@@ -121,6 +153,9 @@ function FormAlertChannels({
 						disabled={editing}
 						onChange={onTypeChangeHandler}
 						value={type}
+						// the list is virtualized, and the default height clips the last
+						// kinds out of the rendered window
+						listHeight={420}
 						data-testid="channel-type-select"
 					>
 						<Select.Option value="slack" key="slack" data-testid="select-option">
@@ -174,31 +209,44 @@ function FormAlertChannels({
 						>
 							incident.io
 						</Select.Option>
+
+						<Select.Option
+							value="telegram"
+							key="telegram"
+							data-testid="select-option"
+						>
+							Telegram
+						</Select.Option>
 					</Select>
 				</Form.Item>
 
 				<Form.Item>{renderSettings()}</Form.Item>
 
 				<Form.Item>
-					<Button
-						data-testid="save-channel-button"
-						disabled={savingState}
-						loading={savingState}
-						type="primary"
-						onClick={(): void => onSaveHandler(type)}
-					>
-						{t('button_save_channel')}
-					</Button>
-					<Button
-						data-testid="test-channel-button"
-						disabled={testingState}
-						loading={testingState}
-						onClick={(): void => onTestHandler(type)}
-					>
-						{t('button_test_channel')}
-					</Button>
+					<AuthZTooltip checks={saveChecks}>
+						<Button
+							data-testid="save-channel-button"
+							disabled={savingState}
+							loading={savingState}
+							type="primary"
+							onClick={(): void => onSaveHandler(type)}
+						>
+							{t('button_save_channel')}
+						</Button>
+					</AuthZTooltip>
+					<AuthZTooltip checks={testChecks}>
+						<Button
+							data-testid="test-channel-button"
+							disabled={testingState}
+							loading={testingState}
+							onClick={(): void => onTestHandler(type)}
+						>
+							{t('button_test_channel')}
+						</Button>
+					</AuthZTooltip>
 					<Button
 						data-testid="return-button"
+						disabled={false}
 						onClick={(): void => {
 							history.replace(ROUTES.ALL_CHANNELS);
 						}}
@@ -213,35 +261,30 @@ function FormAlertChannels({
 
 interface FormAlertChannelsProps {
 	formInstance: FormInstance;
-	type: ChannelType;
-	setSelectedConfig: Dispatch<
-		SetStateAction<
-			Partial<
-				SlackChannel &
-					WebhookChannel &
-					PagerChannel &
-					OpsgenieChannel &
-					EmailChannel &
-					GoogleChatChannel &
-					JiraChannel &
-					JsmOpsChannel &
-					IncidentIOChannel
-			>
-		>
-	>;
-	onTypeChangeHandler: (value: ChannelType) => void;
-	onSaveHandler: (props: ChannelType) => void;
-	onTestHandler: (props: ChannelType) => void;
+	type: ChannelKind;
+	setSelectedConfig: Dispatch<SetStateAction<ChannelSpecFormValues>>;
+	onTypeChangeHandler: (value: ChannelKind) => void;
+	onSaveHandler: (props: ChannelKind) => void;
+	onTestHandler: (props: ChannelKind) => void;
 	testingState: boolean;
 	savingState: boolean;
 	title: string;
 	initialValue: Store;
 	// editing indicates if the form is opened in edit mode
 	editing?: boolean;
+	/** The reader has `read` but not `update`, so the fields render disabled. */
+	readOnly?: boolean;
+	/** Gates saving; a denial disables the button and names the missing scope. */
+	saveChecks?: BrandedPermission[];
+	/** Gates a test send, which the API allows with `create`. */
+	testChecks?: BrandedPermission[];
 }
 
 FormAlertChannels.defaultProps = {
 	editing: undefined,
+	readOnly: false,
+	saveChecks: [],
+	testChecks: [],
 };
 
 export default FormAlertChannels;

frontend/src/container/FormAlertRules/BasicInfo.tsx

@@ -1,19 +1,15 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useQuery } from 'react-query';
 import { Plus } from '@signozhq/icons';
 import { Button, Flex, Form, Select, Tooltip } from 'antd';
 import { Switch } from '@signozhq/ui/switch';
-import getAll from 'api/channels/getAll';
 import logEvent from 'api/common/logEvent';
 import { ALERTS_DATA_SOURCE_MAP } from 'constants/alerts';
 import ROUTES from 'constants/routes';
-import useComponentPermission from 'hooks/useComponentPermission';
-import { useAppContext } from 'providers/App/App';
-import { SuccessResponseV2 } from 'types/api';
+import { useChannelOptions } from 'hooks/notificationChannels/useChannelOptions';
+import { useNotificationChannelCollectionPermissions } from 'hooks/notificationChannels/useNotificationChannelCollectionPermissions';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 import { AlertDef, Labels } from 'types/api/alerts/def';
-import { Channels } from 'types/api/channels/getAll';
 import APIError from 'types/api/error';
 import { requireErrorMessage } from 'utils/form/requireErrorMessage';
 import { openInNewTab } from 'utils/navigation';
@@ -47,18 +43,16 @@ function BasicInfo({
 }: BasicInfoProps): JSX.Element {
 	const { t } = useTranslation('alerts');
 
-	const { isLoading, data, error, isError, refetch } = useQuery<
-		SuccessResponseV2<Channels[]>,
-		APIError
-	>(['getChannels'], {
-		queryFn: () => getAll(),
-	});
+	const {
+		isLoading,
+		data: channels,
+		error,
+		isError,
+		refetch,
+	} = useChannelOptions();
 
-	const { user } = useAppContext();
-	const [addNewChannelPermission] = useComponentPermission(
-		['add_new_channel'],
-		user.role,
-	);
+	const { canCreate: addNewChannelPermission } =
+		useNotificationChannelCollectionPermissions();
 
 	const [shouldBroadCastToAllChannels, setShouldBroadCastToAllChannels] =
 		useState(false);
@@ -81,7 +75,7 @@ function BasicInfo({
 		});
 	};
 
-	const noChannels = data?.data?.length === 0;
+	const noChannels = channels.length === 0;
 	const handleCreateNewChannels = useCallback(() => {
 		logEvent('Alert: Create notification channel button clicked', {
 			dataSource: ALERTS_DATA_SOURCE_MAP[alertDef?.alertType as AlertTypes],
@@ -96,7 +90,7 @@ function BasicInfo({
 		if (!isLoading && isNewRule && !hasLoggedEvent.current) {
 			logEvent('Alert: New alert creation page visited', {
 				dataSource: ALERTS_DATA_SOURCE_MAP[alertDef?.alertType as AlertTypes],
-				numberOfChannels: data?.data?.length,
+				numberOfChannels: channels.length,
 			});
 			hasLoggedEvent.current = true;
 		}
@@ -232,7 +226,7 @@ function BasicInfo({
 								disabled={shouldBroadCastToAllChannels}
 								currentValue={alertDef.preferredChannels}
 								handleCreateNewChannels={handleCreateNewChannels}
-								channels={data?.data || []}
+								channels={channels}
 								isLoading={isLoading}
 								hasError={isError}
 								error={error as APIError}

frontend/src/container/FormAlertRules/ChannelSelect/index.tsx

@@ -2,10 +2,9 @@ import { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Plus } from '@signozhq/icons';
 import { Select, Spin } from 'antd';
-import useComponentPermission from 'hooks/useComponentPermission';
+import { useNotificationChannelCollectionPermissions } from 'hooks/notificationChannels/useNotificationChannelCollectionPermissions';
 import { useNotifications } from 'hooks/useNotifications';
-import { useAppContext } from 'providers/App/App';
-import { Channels } from 'types/api/channels/getAll';
+import { ChannelOption } from 'hooks/notificationChannels/useChannelOptions';
 import APIError from 'types/api/error';
 
 import { StyledCreateChannelOption, StyledSelect } from './styles';
@@ -16,7 +15,7 @@ export interface ChannelSelectProps {
 	onSelectChannels: (s: string[]) => void;
 	onDropdownOpen: () => void;
 	isLoading: boolean;
-	channels: Channels[];
+	channels: ChannelOption[];
 	hasError: boolean;
 	error: APIError;
 	handleCreateNewChannels: () => void;
@@ -53,11 +52,8 @@ function ChannelSelect({
 		});
 	}
 
-	const { user } = useAppContext();
-	const [addNewChannelPermission] = useComponentPermission(
-		['add_new_channel'],
-		user.role,
-	);
+	const { canCreate: addNewChannelPermission } =
+		useNotificationChannelCollectionPermissions();
 
 	const renderOptions = (): ReactNode[] => {
 		const children: ReactNode[] = [];

frontend/src/container/RolesSettings/hooks/__tests__/useRolePermissions.test.ts

@@ -329,7 +329,7 @@ describe('transformTransactionGroupsToResourcePermissions', () => {
 	it('returns all resources from RESOURCE_ORDER even with empty transaction groups', () => {
 		const result = transformTransactionGroupsToResourcePermissions([]);
 
-		expect(result).toHaveLength(11);
+		expect(result).toHaveLength(12);
 		expect(result.map((r) => r.resourceKind)).toStrictEqual([
 			'factor-api-key',
 			'dashboard',
@@ -337,6 +337,7 @@ describe('transformTransactionGroupsToResourcePermissions', () => {
 			'logs',
 			'meter-metrics',
 			'metrics',
+			'notification-channel',
 			'quick-filter',
 			'role',
 			'serviceaccount',
@@ -422,7 +423,7 @@ describe('createEmptyRolePermissions', () => {
 	it('creates permissions for all resources in RESOURCE_ORDER', () => {
 		const result = createEmptyRolePermissions();
 
-		expect(result).toHaveLength(11);
+		expect(result).toHaveLength(12);
 		expect(result.map((r) => r.resourceKind)).toStrictEqual([
 			'factor-api-key',
 			'dashboard',
@@ -430,6 +431,7 @@ describe('createEmptyRolePermissions', () => {
 			'logs',
 			'meter-metrics',
 			'metrics',
+			'notification-channel',
 			'quick-filter',
 			'role',
 			'serviceaccount',

frontend/src/container/RolesSettings/permissions.config.ts

@@ -1,5 +1,6 @@
 import {
 	Bot,
+	Cable,
 	ChartLine,
 	DraftingCompass,
 	FileKey,
@@ -95,6 +96,15 @@ export const RESOURCE_PANELS: Record<AuthZResource, ResourcePanelConfig> = {
 			'Type quick filter ID, separate multiple with comma or space',
 		docsAnchor: 'quick-filter',
 	},
+	'notification-channel': {
+		label: 'Notification Channels',
+		description:
+			'Destinations for alert notifications, such as Slack, PagerDuty, webhooks, etc.',
+		icon: Cable,
+		selectorPlaceholder:
+			'Type notification channel ID, separate multiple with comma or space',
+		docsAnchor: 'notification-channel',
+	},
 	logs: {
 		label: 'Logs',
 		description: 'Log data collected across the workspace.',

frontend/src/container/RoutingPolicies/__tests__/testUtils.ts

@@ -1,6 +1,6 @@
 import { ApiRoutingPolicy } from 'api/routingPolicies/getRoutingPolicies';
 import { IAppContext, IUser } from 'providers/App/types';
-import { Channels } from 'types/api/channels/getAll';
+import { ChannelOption } from 'hooks/notificationChannels/useChannelOptions';
 
 import { RoutingPolicy, UseRoutingPoliciesReturn } from '../types';
 
@@ -28,21 +28,13 @@ export const MOCK_ROUTING_POLICY_2: RoutingPolicy = {
 	updatedBy: 'user2@signoz.io',
 };
 
-export const MOCK_CHANNEL_1: Channels = {
+export const MOCK_CHANNEL_1: ChannelOption = {
 	name: 'Channel 1',
-	created_at: '2021-01-01',
-	data: 'data 1',
 	id: '1',
-	type: 'type 1',
-	updated_at: '2021-01-01',
 };
-export const MOCK_CHANNEL_2: Channels = {
+export const MOCK_CHANNEL_2: ChannelOption = {
 	name: 'Channel 2',
-	created_at: '2021-01-02',
-	data: 'data 2',
 	id: '2',
-	type: 'type 2',
-	updated_at: '2021-01-02',
 };
 
 export function getUseRoutingPoliciesMockData(

frontend/src/container/RoutingPolicies/__tests__/useRoutingPolicies.test.tsx

@@ -77,12 +77,14 @@ jest.mock('hooks/routingPolicies/useDeleteRoutingPolicy', () => ({
 		isLoading: false,
 	}),
 }));
-jest.mock('api/channels/getAll', () => ({
+jest.mock('hooks/notificationChannels/useChannelOptions', () => ({
 	__esModule: true,
-	default: (): any =>
-		Promise.resolve({
-			data: [MOCK_CHANNEL_1, MOCK_CHANNEL_2],
-		}),
+	useChannelOptions: (): any => ({
+		data: [MOCK_CHANNEL_1, MOCK_CHANNEL_2],
+		isLoading: false,
+		isError: false,
+		refetch: jest.fn(),
+	}),
 }));
 
 const ROUTING_POLICY_1_NAME = 'Routing Policy 1';

frontend/src/container/RoutingPolicies/types.ts

@@ -1,4 +1,4 @@
-import { Channels } from 'types/api/channels/getAll';
+import { ChannelOption } from 'hooks/notificationChannels/useChannelOptions';
 
 export interface RoutingPolicy {
 	id: string;
@@ -62,7 +62,7 @@ export interface RoutingPolicyDetailsProps {
 	routingPolicy: RoutingPolicy | null;
 	closeModal: () => void;
 	mode: PolicyDetailsModalMode;
-	channels: Channels[];
+	channels: ChannelOption[];
 	isErrorChannels: boolean;
 	isLoadingChannels: boolean;
 	handlePolicyDetailsModalAction: HandlePolicyDetailsModalAction;
@@ -86,7 +86,7 @@ export interface UseRoutingPoliciesReturn {
 	isErrorRoutingPolicies: boolean;
 	refetchRoutingPolicies: () => void;
 	// Channels
-	channels: Channels[];
+	channels: ChannelOption[];
 	isLoadingChannels: boolean;
 	isErrorChannels: boolean;
 	refreshChannels: () => void;

frontend/src/container/RoutingPolicies/useRoutingPolicies.ts

@@ -1,19 +1,17 @@
 import { useMemo, useState } from 'react';
-import { useQuery, useQueryClient } from 'react-query';
+import { useQueryClient } from 'react-query';
 import { useHistory } from 'react-router-dom';
 import { toast } from '@signozhq/ui/sonner';
-import getAllChannels from 'api/channels/getAll';
 import { GetRoutingPoliciesResponse } from 'api/routingPolicies/getRoutingPolicies';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { useCreateRoutingPolicy } from 'hooks/routingPolicies/useCreateRoutingPolicy';
 import { useDeleteRoutingPolicy } from 'hooks/routingPolicies/useDeleteRoutingPolicy';
+import { useChannelOptions } from 'hooks/notificationChannels/useChannelOptions';
 import { useGetRoutingPolicies } from 'hooks/routingPolicies/useGetRoutingPolicies';
 import { useUpdateRoutingPolicy } from 'hooks/routingPolicies/useUpdateRoutingPolicy';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { SuccessResponseV2 } from 'types/api';
-import { Channels } from 'types/api/channels/getAll';
-import APIError from 'types/api/error';
 
 import {
 	PolicyDetailsModalMode,
@@ -83,14 +81,11 @@ function useRoutingPolicies(): UseRoutingPoliciesReturn {
 
 	// Channels list
 	const {
-		data,
+		data: channels,
 		isLoading: isLoadingChannels,
 		isError: isErrorChannels,
 		refetch: refetchChannels,
-	} = useQuery<SuccessResponseV2<Channels[]>, APIError>(['getChannels'], {
-		queryFn: () => getAllChannels(),
-	});
-	const channels = data?.data || [];
+	} = useChannelOptions();
 
 	const refreshChannels = (): void => {
 		refetchChannels();

frontend/src/hooks/notificationChannels/useChannelOptions.ts

@@ -0,0 +1,68 @@
+import { useQuery, UseQueryResult } from 'react-query';
+import { listNotificationChannels } from 'api/generated/services/channels';
+import {
+	AlertmanagertypesChannelListOrderDTO,
+	AlertmanagertypesChannelListSortDTO,
+	AlertmanagertypesListedNotificationChannelDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { range } from 'lodash-es';
+
+/** The list API's own ceiling; a bigger limit is clamped to it server-side. */
+const MAX_PAGE_SIZE = 200;
+
+export const CHANNEL_OPTIONS_QUERY_KEY = ['notificationChannelOptions'];
+
+export interface ChannelOption {
+	id: string;
+	/** The display name, which is what rules and routing policies reference. */
+	name: string;
+}
+
+export type UseChannelOptionsResult = Omit<
+	UseQueryResult<ChannelOption[], Error>,
+	'data'
+> & {
+	data: ChannelOption[];
+};
+
+function fetchPage(
+	offset: number,
+): ReturnType<typeof listNotificationChannels> {
+	return listNotificationChannels({
+		limit: MAX_PAGE_SIZE,
+		offset,
+		sort: AlertmanagertypesChannelListSortDTO.name,
+		order: AlertmanagertypesChannelListOrderDTO.asc,
+	});
+}
+
+/**
+ * Every channel, for the pickers that let a rule or a policy name one. The list
+ * API pages at 200, so the first page reports the total and the rest are
+ * fetched together rather than silently truncating.
+ */
+async function fetchAllChannels(): Promise<ChannelOption[]> {
+	const first = await fetchPage(0);
+	const rest = await Promise.all(
+		range(MAX_PAGE_SIZE, first.data.total, MAX_PAGE_SIZE).map(fetchPage),
+	);
+
+	const channels: AlertmanagertypesListedNotificationChannelDTO[] = [
+		...first.data.channels,
+		...rest.flatMap((page) => page.data.channels),
+	];
+
+	return channels.map((channel) => ({
+		id: channel.id,
+		name: channel.displayName,
+	}));
+}
+
+export function useChannelOptions(): UseChannelOptionsResult {
+	const query = useQuery<ChannelOption[], Error>(
+		CHANNEL_OPTIONS_QUERY_KEY,
+		fetchAllChannels,
+	);
+
+	return { ...query, data: query.data ?? [] };
+}

frontend/src/hooks/notificationChannels/useNotificationChannelCollectionPermissions.ts

@@ -0,0 +1,39 @@
+import {
+	NotificationChannelCreatePermission,
+	NotificationChannelListPermission,
+} from 'lib/authz/hooks/useAuthZ/permissions/notification-channel.permissions';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+
+export interface NotificationChannelCollectionPermissions {
+	canList: boolean;
+	canCreate: boolean;
+	/** A test send is gated on `create` against the wildcard. */
+	canTest: boolean;
+	isLoading: boolean;
+	/**
+	 * The check itself failed. Callers should fall open (behave as before authz
+	 * and let the API decide) rather than treat an outage as a denial.
+	 */
+	hasError: boolean;
+}
+
+// Module-level so the useQueries identity stays stable across renders.
+const CHECKS = [
+	NotificationChannelListPermission,
+	NotificationChannelCreatePermission,
+];
+
+/** Collection-level notification channel permissions (wildcard selector). */
+export function useNotificationChannelCollectionPermissions(): NotificationChannelCollectionPermissions {
+	const { isGranted, isLoading, error } = useAuthZ(CHECKS);
+
+	const canCreate = isGranted(NotificationChannelCreatePermission);
+
+	return {
+		canList: isGranted(NotificationChannelListPermission),
+		canCreate,
+		canTest: canCreate,
+		isLoading,
+		hasError: !!error,
+	};
+}

frontend/src/hooks/notificationChannels/useNotificationChannelPermissions.ts

@@ -0,0 +1,75 @@
+import { useMemo } from 'react';
+import {
+	buildNotificationChannelDeletePermission,
+	buildNotificationChannelReadPermission,
+	buildNotificationChannelUpdatePermission,
+} from 'lib/authz/hooks/useAuthZ/permissions/notification-channel.permissions';
+import type { BrandedPermission } from 'lib/authz/hooks/useAuthZ/types';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+
+export interface NotificationChannelPermissions {
+	canRead: boolean;
+	canUpdate: boolean;
+	canDelete: boolean;
+	/** Per the authz guide, an edit affordance needs `read` as well as `update`. */
+	canEdit: boolean;
+	isLoading: boolean;
+	/**
+	 * The check itself failed. Callers should fall open — behave as before authz
+	 * and let the API decide — rather than read an outage as a denial.
+	 */
+	hasError: boolean;
+	readPermission: BrandedPermission;
+	updatePermission: BrandedPermission;
+	deletePermission: BrandedPermission;
+	/** `[read, update]`, so a denial names both. */
+	editChecks: BrandedPermission[];
+}
+
+/**
+ * Resource-level notification channel permissions. Pass `enabled: false` while
+ * the id is unknown, so no check fires against an empty selector.
+ */
+export function useNotificationChannelPermissions(
+	channelId: string,
+	options?: { enabled?: boolean },
+): NotificationChannelPermissions {
+	const enabled = options?.enabled ?? true;
+
+	const { readPermission, updatePermission, deletePermission } = useMemo(
+		() => ({
+			readPermission: buildNotificationChannelReadPermission(channelId),
+			updatePermission: buildNotificationChannelUpdatePermission(channelId),
+			deletePermission: buildNotificationChannelDeletePermission(channelId),
+		}),
+		[channelId],
+	);
+
+	const checks = useMemo(
+		() => [readPermission, updatePermission, deletePermission],
+		[readPermission, updatePermission, deletePermission],
+	);
+
+	const { isGranted, isLoading, error } = useAuthZ(checks, { enabled });
+
+	const canRead = isGranted(readPermission);
+	const canUpdate = isGranted(updatePermission);
+
+	const editChecks = useMemo(
+		() => [readPermission, updatePermission],
+		[readPermission, updatePermission],
+	);
+
+	return {
+		canRead,
+		canUpdate,
+		canDelete: isGranted(deletePermission),
+		canEdit: canRead && canUpdate,
+		isLoading,
+		hasError: !!error,
+		readPermission,
+		updatePermission,
+		deletePermission,
+		editChecks,
+	};
+}

frontend/src/lib/authz/hooks/useAuthZ/permissions.type.ts

@@ -18,6 +18,11 @@ export default {
 				type: 'metaresource',
 				allowedVerbs: ['create', 'delete', 'list', 'read', 'update'],
 			},
+			{
+				kind: 'notification-channel',
+				type: 'metaresource',
+				allowedVerbs: ['create', 'delete', 'list', 'read', 'update'],
+			},
 			{
 				kind: 'quick-filter',
 				type: 'metaresource',

frontend/src/lib/authz/hooks/useAuthZ/permissions/notification-channel.permissions.ts

@@ -0,0 +1,25 @@
+import { buildPermission } from '../utils';
+import type { BrandedPermission } from '../types';
+
+// Collection-level. Wildcard selector required for correct response key matching.
+export const NotificationChannelListPermission = buildPermission(
+	'list',
+	'notification-channel:*',
+);
+// The test endpoint is gated on `create` against the wildcard, since a test send
+// persists nothing and the channel need not exist.
+export const NotificationChannelCreatePermission = buildPermission(
+	'create',
+	'notification-channel:*',
+);
+
+// Resource-level. Requires a specific channel id.
+export const buildNotificationChannelReadPermission = (
+	id: string,
+): BrandedPermission => buildPermission('read', `notification-channel:${id}`);
+export const buildNotificationChannelUpdatePermission = (
+	id: string,
+): BrandedPermission => buildPermission('update', `notification-channel:${id}`);
+export const buildNotificationChannelDeletePermission = (
+	id: string,
+): BrandedPermission => buildPermission('delete', `notification-channel:${id}`);

frontend/src/lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi.ts

@@ -30,7 +30,10 @@ const mapQueryFromV5 = (compositeQuery: ICompositeMetricQuery): Query => {
 	> = {};
 	const builderQueryTypes: Record<
 		string,
-		'builder_query' | 'builder_formula' | 'builder_trace_operator'
+		| 'builder_query'
+		| 'builder_ai_query'
+		| 'builder_formula'
+		| 'builder_trace_operator'
 	> = {};
 	const promQueries: IPromQLQuery[] = [];
 	const clickhouseQueries: IClickHouseQuery[] = [];
@@ -44,6 +47,14 @@ const mapQueryFromV5 = (compositeQuery: ICompositeMetricQuery): Query => {
 				);
 				builderQueryTypes[spec.name] = 'builder_query';
 			}
+		} else if (q.type === 'builder_ai_query') {
+			if (spec.name) {
+				builderQueries[spec.name] = {
+					...convertBuilderQueryToIBuilderQuery(spec as BuilderQuery),
+					builderQueryType: 'builder_ai_query',
+				};
+				builderQueryTypes[spec.name] = 'builder_ai_query';
+			}
 		} else if (q.type === 'builder_formula') {
 			if (spec.name) {
 				builderQueries[spec.name] = convertQueryBuilderFormulaToIBuilderFormula(

frontend/src/lib/newQueryBuilder/transformQueryBuilderDataModel.ts

@@ -15,7 +15,10 @@ export const transformQueryBuilderDataModel = (
 	data: BuilderQueryDataResourse,
 	queryTypes?: Record<
 		string,
-		'builder_query' | 'builder_formula' | 'builder_trace_operator'
+		| 'builder_query'
+		| 'builder_ai_query'
+		| 'builder_formula'
+		| 'builder_trace_operator'
 	>,
 ): QueryBuilderData => {
 	const queryData: QueryBuilderData['queryData'] = [];

frontend/src/lib/query/__tests__/builderEnvelope.test.ts

@@ -0,0 +1,53 @@
+import type { Querybuildertypesv5QueryEnvelopeDTO } from 'api/generated/services/sigNoz.schemas';
+
+import {
+	isAIBuilderEnvelope,
+	isBuilderEnvelope,
+	isBuilderPluginKind,
+} from '../builderEnvelope';
+
+const envelope = (type: string): Querybuildertypesv5QueryEnvelopeDTO =>
+	({ type, spec: {} }) as unknown as Querybuildertypesv5QueryEnvelopeDTO;
+
+describe('builder envelope predicates', () => {
+	describe('isBuilderEnvelope', () => {
+		it.each(['builder_query', 'builder_ai_query'])('accepts %s', (type) => {
+			expect(isBuilderEnvelope(envelope(type))).toBe(true);
+		});
+
+		it.each([
+			'builder_formula',
+			'builder_trace_operator',
+			'promql',
+			'clickhouse_sql',
+		])('rejects %s', (type) => {
+			expect(isBuilderEnvelope(envelope(type))).toBe(false);
+		});
+	});
+
+	describe('isAIBuilderEnvelope', () => {
+		it('accepts builder_ai_query', () => {
+			expect(isAIBuilderEnvelope(envelope('builder_ai_query'))).toBe(true);
+		});
+
+		it('rejects builder_query', () => {
+			expect(isAIBuilderEnvelope(envelope('builder_query'))).toBe(false);
+		});
+	});
+
+	describe('isBuilderPluginKind', () => {
+		it.each(['signoz/BuilderQuery', 'signoz/AIBuilderQuery'])(
+			'accepts %s',
+			(kind) => {
+				expect(isBuilderPluginKind(kind)).toBe(true);
+			},
+		);
+
+		it.each(['signoz/CompositeQuery', 'signoz/PromQLQuery'])(
+			'rejects %s',
+			(kind) => {
+				expect(isBuilderPluginKind(kind)).toBe(false);
+			},
+		);
+	});
+});

frontend/src/lib/query/__tests__/panelTypeDataSourceFormValuesMap.test.ts

@@ -61,6 +61,16 @@ describe('panelTypeDataSourceFormValuesMap', () => {
 		expect(uncovered).toStrictEqual([]);
 	});
 
+	// The AI tab is derived from this tag, so a panel that drops it on a switch falls
+	// back to plain Query Builder mid-edit.
+	it('carries the AI query tag into every panel type', () => {
+		Object.values(panelTypeDataSourceFormValuesMap).forEach((sources) => {
+			expect(sources[DataSource.TRACES].builder.queryData).toContain(
+				'builderQueryType',
+			);
+		});
+	});
+
 	it('shares one builder surface between logs and traces', () => {
 		Object.values(panelTypeDataSourceFormValuesMap).forEach((sources) => {
 			expect(sources[DataSource.LOGS].builder.queryData).toStrictEqual(

frontend/src/lib/query/builderEnvelope.ts

@@ -0,0 +1,47 @@
+import type {
+	Querybuildertypesv5QueryEnvelopeBuilderAIDTO,
+	Querybuildertypesv5QueryEnvelopeBuilderDTO,
+	Querybuildertypesv5QueryEnvelopeDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import {
+	DashboardtypesQueryPluginKindDTO,
+	Querybuildertypesv5QueryEnvelopeBuilderAIDTOType,
+	Querybuildertypesv5QueryEnvelopeBuilderDTOType,
+} from 'api/generated/services/sigNoz.schemas';
+
+const BUILDER_ENVELOPE_TYPES: string[] = [
+	Querybuildertypesv5QueryEnvelopeBuilderDTOType.builder_query,
+	Querybuildertypesv5QueryEnvelopeBuilderAIDTOType.builder_ai_query,
+];
+
+/** True for `builder_query` and `builder_ai_query`. Formulas and trace operators are excluded. */
+export function isBuilderEnvelope(
+	envelope: Querybuildertypesv5QueryEnvelopeDTO,
+): envelope is
+	| Querybuildertypesv5QueryEnvelopeBuilderDTO
+	| Querybuildertypesv5QueryEnvelopeBuilderAIDTO {
+	return BUILDER_ENVELOPE_TYPES.includes(envelope.type);
+}
+
+export function isAIBuilderEnvelope(
+	envelope: Querybuildertypesv5QueryEnvelopeDTO,
+): envelope is Querybuildertypesv5QueryEnvelopeBuilderAIDTO {
+	return (
+		envelope.type ===
+		Querybuildertypesv5QueryEnvelopeBuilderAIDTOType.builder_ai_query
+	);
+}
+
+const BUILDER_PLUGIN_KINDS: string[] = [
+	DashboardtypesQueryPluginKindDTO['signoz/BuilderQuery'],
+	DashboardtypesQueryPluginKindDTO['signoz/AIBuilderQuery'],
+];
+
+/**
+ * True for a bare `signoz/BuilderQuery` or `signoz/AIBuilderQuery` plugin (the form List
+ * panels use). Inside a CompositeQuery an AI query is a `builder_ai_query` envelope, matched
+ * by `isBuilderEnvelope`.
+ */
+export function isBuilderPluginKind(kind: string): boolean {
+	return BUILDER_PLUGIN_KINDS.includes(kind);
+}

frontend/src/lib/query/panelTypeDataSourceFormValuesMap.ts

@@ -44,6 +44,8 @@ const IS_CARRIED = {
 	orderBy: true,
 	reduceTo: true,
 	legend: true,
+	// Identifies an AI query, so the panel keeps authoring in AI mode after the switch.
+	builderQueryType: true,
 	// `dataSource` is appended by the provider; the rest drive surfaces this switch
 	// does not reach.
 	// Heatmap only; listed for it below.
@@ -54,7 +56,6 @@ const IS_CARRIED = {
 	offset: false,
 	selectColumns: false,
 	source: false,
-	builderQueryType: false,
 } satisfies Record<BuilderField, boolean>;
 
 function omit(

frontend/src/lib/query/queryMode.ts

@@ -0,0 +1,51 @@
+import {
+	BuilderVariant,
+	type Query,
+	QueryMode,
+} from 'types/api/queryBuilder/queryBuilderData';
+
+/** Which variant the `builder` slot holds, whatever query type is active. */
+export function getBuilderVariant(builder: Query['builder']): BuilderVariant {
+	return builder.queryData[0]?.builderQueryType === QueryMode.AI_QUERY_BUILDER
+		? BuilderVariant.AI
+		: BuilderVariant.MAIN;
+}
+
+/** The variant a tab authors; `undefined` for tabs that own their own slot. */
+export function toBuilderVariant(mode: QueryMode): BuilderVariant | undefined {
+	if (mode === QueryMode.AI_QUERY_BUILDER) {
+		return BuilderVariant.AI;
+	}
+	return mode === QueryMode.QUERY_BUILDER ? BuilderVariant.MAIN : undefined;
+}
+
+/** The tab a query belongs to: its query type, or AI when a builder query carries the tag. */
+export function getQueryMode(query: Query): QueryMode {
+	if (query.queryType !== QueryMode.QUERY_BUILDER) {
+		return query.queryType;
+	}
+	return getBuilderVariant(query.builder) === BuilderVariant.AI
+		? QueryMode.AI_QUERY_BUILDER
+		: QueryMode.QUERY_BUILDER;
+}
+
+/** Query Builder and AI both author `Query.builder`; the other modes own their own slot. */
+export function isBuilderMode(mode: QueryMode): boolean {
+	return toBuilderVariant(mode) !== undefined;
+}
+
+/** Drops the AI tag, leaving the same query readable as a plain builder query. */
+export function withoutAIQueryTag(query: Query): Query {
+	if (getBuilderVariant(query.builder) !== BuilderVariant.AI) {
+		return query;
+	}
+	return {
+		...query,
+		builder: {
+			...query.builder,
+			queryData: query.builder.queryData.map(
+				({ builderQueryType: _tag, ...queryData }) => queryData,
+			),
+		},
+	};
+}

frontend/src/mocks-server/__mockdata__/alerts.ts

@@ -1,15 +1,3 @@
-export const allAlertChannels = [
-	{
-		id: '3',
-		created_at: '2023-08-09T04:45:19.239344617Z',
-		updated_at: '2024-06-27T11:37:14.841184399Z',
-		name: 'Dummy-Channel',
-		type: 'slack',
-		data:
-			'{"name":"Dummy-Channel","slack_configs":[{"api_url":"https://discord.com/api/webhooks/dummy_webhook_id/dummy_webhook_token/slack","channel":"#dummy_channel","send_resolved":true,"text":"{{ range .Alerts -}}\\n     *Alert:* {{ .Labels.alertname }}{{ if .Labels.severity }} - {{ .Labels.severity }}{{ end }} dummy_summary\\n\\n     *Summary:* {{ .Annotations.summary }}\\n     *Description:* {{ .Annotations.description }}\\n\\n     *Details:*\\n       {{ range .Labels.SortedPairs }} • *{{ .Name }}:* {{ .Value }}\\n       {{ end }}\\n     {{ end }}","title":"[{{ .Status | toUpper }}{{ if eq .Status \\"firing\\" }}:{{ .Alerts.Firing | len }}{{ end }}] {{ .CommonLabels.alertname }} for {{ .CommonLabels.job }}\\n     {{- if gt (len .CommonLabels) (len .GroupLabels) -}}\\n       {{\\" \\"}}(\\n       {{- with .CommonLabels.Remove .GroupLabels.Names }}\\n         {{- range $index, $label := .SortedPairs -}}\\n           {{ if $index }}, {{ end }}\\n           {{- $label.Name }}=\\"{{ $label.Value -}}\\"\\n         {{- end }}\\n       {{- end -}}\\n       )\\n     {{- end }}"}]}',
-	},
-];
-
 export const editAlertChannelInitialValue = {
 	api_url:
 		'https://discord.com/api/webhooks/dummy_webhook_id/dummy_webhook_token/slack',
@@ -51,3 +39,38 @@ export const opsGeniePriorityDefaultValue =
 
 export const pagerDutySeverityTextDefaultValue =
 	'{{ (index .Alerts 0).Labels.severity }}';
+
+export const notificationChannelsV2 = [
+	{
+		id: '3',
+		name: 'dummy-channel',
+		displayName: 'Dummy-Channel',
+		kind: 'slack',
+		createdAt: '2023-08-09T04:45:19.239344617Z',
+		updatedAt: '2024-06-27T11:37:14.841184399Z',
+	},
+	{
+		id: '4',
+		name: 'oncall-pagerduty',
+		displayName: 'Oncall PagerDuty',
+		kind: 'pagerduty',
+		createdAt: '2024-02-03T04:45:19.239344617Z',
+		updatedAt: '2024-06-28T11:37:14.841184399Z',
+	},
+];
+
+export const notificationChannelV2 = {
+	id: '3',
+	name: 'dummy-channel',
+	displayName: 'Dummy-Channel',
+	createdAt: '2023-08-09T04:45:19.239344617Z',
+	updatedAt: '2024-06-27T11:37:14.841184399Z',
+	config: {
+		kind: 'slack',
+		spec: {
+			apiUrl: 'https://hooks.slack.com/services/dummy',
+			channel: '#dummy_channel',
+			sendResolved: true,
+		},
+	},
+};

frontend/src/mocks-server/handlers.ts

@@ -2,7 +2,10 @@ import { rest } from 'msw';
 
 import commonEnTranslation from '../../public/locales/en/common.json';
 import enTranslation from '../../public/locales/en/translation.json';
-import { allAlertChannels } from './__mockdata__/alerts';
+import {
+	notificationChannelsV2,
+	notificationChannelV2,
+} from './__mockdata__/alerts';
 import { alertRulesFixture } from './__mockdata__/alert_rules';
 import { triggeredAlertsFixture } from './__mockdata__/triggered_alerts';
 import { billingSuccessResponse } from './__mockdata__/billing';
@@ -202,8 +205,31 @@ export const handlers = [
 		(req, res, ctx) => res(ctx.status(200), ctx.json(traceDetailResponse)),
 	),
 
-	rest.get('http://localhost/api/v1/channels', (_, res, ctx) =>
-		res(ctx.status(200), ctx.json({ data: allAlertChannels, status: 'success' })),
+	rest.get('http://localhost/api/v2/notification_channels', (req, res, ctx) => {
+		const query = req.url.searchParams.get('query')?.toLowerCase() ?? '';
+		const kind = req.url.searchParams.get('kind');
+		const channels = notificationChannelsV2.filter(
+			(channel) =>
+				(!query || channel.displayName.toLowerCase().includes(query)) &&
+				(!kind || channel.kind === kind),
+		);
+		return res(
+			ctx.status(200),
+			ctx.json({
+				data: { channels, total: channels.length },
+				status: 'success',
+			}),
+		);
+	}),
+	rest.get('http://localhost/api/v2/notification_channels/:id', (_, res, ctx) =>
+		res(
+			ctx.status(200),
+			ctx.json({ data: notificationChannelV2, status: 'success' }),
+		),
+	),
+	rest.delete(
+		'http://localhost/api/v2/notification_channels/:id',
+		(_, res, ctx) => res(ctx.status(204)),
 	),
 	rest.get('http://localhost/api/v1/alerts', (_, res, ctx) =>
 		res(
@@ -237,15 +263,6 @@ export const handlers = [
 	rest.delete('http://localhost/api/v2/rules/:id', (_, res, ctx) =>
 		res(ctx.status(200), ctx.json({ status: 'success' })),
 	),
-	rest.delete('http://localhost/api/v1/channels/:id', (_, res, ctx) =>
-		res(
-			ctx.status(200),
-			ctx.json({
-				status: 'success',
-				data: 'notification channel successfully deleted',
-			}),
-		),
-	),
 	rest.get('http://localhost/locales/en/translation.json', (_, res, ctx) =>
 		res(ctx.status(200), ctx.json(enTranslation)),
 	),

frontend/src/pages/AlertList/AlertHistory/stories/AlertHistory.stories.mocks.tsx

@@ -148,7 +148,7 @@ export const alertHistoryMocks = defineStoryMocks({
 		),
 
 		rest.get(
-			'http://localhost/api/v1/channels',
+			'http://localhost/api/v2/notification_channels',
 			response.json(() => channelsResponse(CHANNEL_MAX)),
 		),
 	],