From 4e187ffecec22662e3e6a05149f1c30cf9f9d0c8 Mon Sep 17 00:00:00 2001
From: Pavel Zavora <pavel.zavora@bonitoo.io>
Date: Fri, 25 Feb 2022 13:55:06 +0100
Subject: [PATCH] feat(ui): add Alert Rule Builder button to open builder UI

---
 ui/src/kapacitor/components/Tickscript.tsx    |  3 +++
 .../kapacitor/components/TickscriptHeader.tsx | 24 ++++++++++++++++++-
 .../kapacitor/containers/TickscriptPage.tsx   | 16 +++++++++++++
 .../components/TickscriptHeader.test.tsx      |  1 +
 4 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/ui/src/kapacitor/components/Tickscript.tsx b/ui/src/kapacitor/components/Tickscript.tsx
index 6a3b41208..19285e6d3 100644
--- a/ui/src/kapacitor/components/Tickscript.tsx
+++ b/ui/src/kapacitor/components/Tickscript.tsx
@@ -28,6 +28,7 @@ interface Props {
   onChangeName: (name: string) => void
   isNewTickscript: boolean
   unsavedChanges: boolean
+  onOpenBuilderUI: () => void
 }
 
 @ErrorHandling
@@ -48,6 +49,7 @@ class Tickscript extends PureComponent<Props> {
       areLogsVisible,
       areLogsEnabled,
       onToggleLogsVisibility,
+      onOpenBuilderUI,
     } = this.props
     return (
       <Page className="tickscript-editor-page">
@@ -55,6 +57,7 @@ class Tickscript extends PureComponent<Props> {
           task={task}
           onSave={onSave}
           onExit={onExit}
+          onOpenBuilderUI={onOpenBuilderUI}
           unsavedChanges={unsavedChanges}
           areLogsVisible={areLogsVisible}
           areLogsEnabled={areLogsEnabled}
diff --git a/ui/src/kapacitor/components/TickscriptHeader.tsx b/ui/src/kapacitor/components/TickscriptHeader.tsx
index e67ab0198..5751d2e3d 100644
--- a/ui/src/kapacitor/components/TickscriptHeader.tsx
+++ b/ui/src/kapacitor/components/TickscriptHeader.tsx
@@ -3,7 +3,8 @@ import React, {Component} from 'react'
 import {Page} from 'src/reusable_ui'
 import LogsToggle from 'src/kapacitor/components/LogsToggle'
 import ConfirmButton from 'src/shared/components/ConfirmButton'
-import TickscriptSave, {Task} from 'src/kapacitor/components/TickscriptSave'
+import TickscriptSave from 'src/kapacitor/components/TickscriptSave'
+import {Task} from 'src/types'
 
 interface Props {
   task: Task
@@ -14,6 +15,7 @@ interface Props {
   onSave: () => void
   onExit: () => void
   onToggleLogsVisibility: (visibility: boolean) => void
+  onOpenBuilderUI: () => void
 }
 
 class TickscriptHeader extends Component<Props> {
@@ -26,6 +28,7 @@ class TickscriptHeader extends Component<Props> {
       areLogsEnabled,
       areLogsVisible,
       onToggleLogsVisibility,
+      onOpenBuilderUI,
     } = this.props
 
     return (
@@ -34,6 +37,25 @@ class TickscriptHeader extends Component<Props> {
           <Page.Title title="TICKscript Editor" />
         </Page.Header.Left>
         <Page.Header.Right showSourceIndicator={true}>
+          {!!task.query && !task.templateID ? (
+            <button
+              className="btn btn-sm btn-primary"
+              title="Open TICKscript in Alert Rule Builder"
+              onClick={onOpenBuilderUI}
+            >
+              Alert Rule Builder
+            </button>
+          ) : undefined}
+          {isNewTickscript ? (
+            <button
+              className="btn btn-sm btn-default"
+              title="Use Alert Rule Builder to create a new TICKscript"
+              onClick={onOpenBuilderUI}
+            >
+              Alert Rule Builder
+            </button>
+          ) : undefined}
+
           <LogsToggle
             areLogsEnabled={areLogsEnabled}
             areLogsVisible={areLogsVisible}
diff --git a/ui/src/kapacitor/containers/TickscriptPage.tsx b/ui/src/kapacitor/containers/TickscriptPage.tsx
index 798236958..9eb0a6da4 100644
--- a/ui/src/kapacitor/containers/TickscriptPage.tsx
+++ b/ui/src/kapacitor/containers/TickscriptPage.tsx
@@ -151,6 +151,7 @@ export class TickscriptPage extends PureComponent<Props, State> {
         type,
         'template-id': templateID,
         vars,
+        query,
       } = this.props.rules.find(r => r.id === ruleID)
 
       this.setState({
@@ -163,6 +164,7 @@ export class TickscriptPage extends PureComponent<Props, State> {
           id,
           templateID,
           vars,
+          query,
         },
       })
     }
@@ -197,6 +199,7 @@ export class TickscriptPage extends PureComponent<Props, State> {
         logs={logs}
         onSave={this.handleSave}
         onExit={this.handleExit}
+        onOpenBuilderUI={this.handleOpenBuilderUI}
         unsavedChanges={unsavedChanges}
         areLogsVisible={areLogsVisible}
         areLogsEnabled={areLogsEnabled}
@@ -273,6 +276,19 @@ export class TickscriptPage extends PureComponent<Props, State> {
     }
   }
 
+  private handleOpenBuilderUI = () => {
+    const {
+      params: {ruleID},
+      source: {id: sourceID},
+      router,
+    } = this.props
+    const {kapacitor} = this.state
+    router.push(
+      // prettier-ignore
+      `/sources/${sourceID}/kapacitors/${kapacitor.id}/alert-rules/${ruleID}${router.location.search}`
+    )
+  }
+
   private handleExit = () => {
     const {
       source: {id: sourceID},
diff --git a/ui/test/kapacitor/components/TickscriptHeader.test.tsx b/ui/test/kapacitor/components/TickscriptHeader.test.tsx
index c85faeea5..def2e721b 100644
--- a/ui/test/kapacitor/components/TickscriptHeader.test.tsx
+++ b/ui/test/kapacitor/components/TickscriptHeader.test.tsx
@@ -19,6 +19,7 @@ const setup = (override?) => {
     onToggleLogsVisibility: () => {},
     onSave: () => {},
     onExit: () => {},
+    onOpenBuilderUI: () => {},
     areLogsVisible: false,
     areLogsEnabled: false,
     task: {