Live Debugging button should appear in UI only for supported componen…

…ts (#2293) * Live Debugging button should appear in UI only for supported components * Update string for unavailable components
grafana · Dec 18, 2024 · d8ba009 · d8ba009
1 parent 8c2ac3c
commit d8ba009
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 29 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -48,6 +48,7 @@ Main (unreleased)
   - Change processlist query to support ONLY_FULL_GROUP_BY sql_mode
   - Add perf_schema quantile columns to collector
 
+- Live Debugging button should appear in UI only for supported components (@ravishankar15)
 - Add three new stdlib functions to_base64, from_URLbase64 and to_URLbase64 (@ravishankar15)
 - Add `ignore_older_than` option for local.file_match (@ravishankar15)
 - Add livedebugging support for `discover.relabel` (@ravishankar15)

diff --git a/internal/component/component_provider.go b/internal/component/component_provider.go
@@ -123,9 +123,10 @@ type Info struct {
 	ComponentName string // Name of the component.
 	Health        Health // Current component health.
 
-	Arguments Arguments   // Current arguments value of the component.
-	Exports   Exports     // Current exports value of the component.
-	DebugInfo interface{} // Current debug info of the component.
+	Arguments            Arguments   // Current arguments value of the component.
+	Exports              Exports     // Current exports value of the component.
+	DebugInfo            interface{} // Current debug info of the component.
+	LiveDebuggingEnabled bool
 }
 
 // MarshalJSON returns a JSON representation of cd. The format of the
@@ -139,19 +140,20 @@ func (info *Info) MarshalJSON() ([]byte, error) {
 		}
 
 		componentDetailJSON struct {
-			Name             string               `json:"name"`
-			Type             string               `json:"type,omitempty"`
-			LocalID          string               `json:"localID"`
-			ModuleID         string               `json:"moduleID"`
-			Label            string               `json:"label,omitempty"`
-			References       []string             `json:"referencesTo"`
-			ReferencedBy     []string             `json:"referencedBy"`
-			Health           *componentHealthJSON `json:"health"`
-			Original         string               `json:"original"`
-			Arguments        json.RawMessage      `json:"arguments,omitempty"`
-			Exports          json.RawMessage      `json:"exports,omitempty"`
-			DebugInfo        json.RawMessage      `json:"debugInfo,omitempty"`
-			CreatedModuleIDs []string             `json:"createdModuleIDs,omitempty"`
+			Name                 string               `json:"name"`
+			Type                 string               `json:"type,omitempty"`
+			LocalID              string               `json:"localID"`
+			ModuleID             string               `json:"moduleID"`
+			Label                string               `json:"label,omitempty"`
+			References           []string             `json:"referencesTo"`
+			ReferencedBy         []string             `json:"referencedBy"`
+			Health               *componentHealthJSON `json:"health"`
+			Original             string               `json:"original"`
+			Arguments            json.RawMessage      `json:"arguments,omitempty"`
+			Exports              json.RawMessage      `json:"exports,omitempty"`
+			DebugInfo            json.RawMessage      `json:"debugInfo,omitempty"`
+			CreatedModuleIDs     []string             `json:"createdModuleIDs,omitempty"`
+			LiveDebuggingEnabled bool                 `json:"liveDebuggingEnabled"`
 		}
 	)
 
@@ -196,10 +198,11 @@ func (info *Info) MarshalJSON() ([]byte, error) {
 			Message:     info.Health.Message,
 			UpdatedTime: info.Health.UpdateTime,
 		},
-		Arguments:        arguments,
-		Exports:          exports,
-		DebugInfo:        debugInfo,
-		CreatedModuleIDs: info.ModuleIDs,
+		Arguments:            arguments,
+		Exports:              exports,
+		DebugInfo:            debugInfo,
+		CreatedModuleIDs:     info.ModuleIDs,
+		LiveDebuggingEnabled: info.LiveDebuggingEnabled,
 	})
 }
 

diff --git a/internal/runtime/alloy_components.go b/internal/runtime/alloy_components.go
@@ -128,6 +128,10 @@ func (f *Runtime) getComponentDetail(cn controller.ComponentNode, graph *dag.Gra
 			componentInfo.DebugInfo = builtinComponent.DebugInfo()
 		}
 	}
+
+	_, liveDebuggingEnabled := componentInfo.Component.(component.LiveDebugging)
+	componentInfo.LiveDebuggingEnabled = liveDebuggingEnabled
+
 	return componentInfo
 }
 

diff --git a/internal/web/ui/src/features/component/ComponentView.tsx b/internal/web/ui/src/features/component/ComponentView.tsx
@@ -23,6 +23,7 @@ export const ComponentView: FC<ComponentViewProps> = (props) => {
 
   const referencedBy = props.component.referencedBy.filter((id) => props.info[id] !== undefined).map((id) => props.info[id]);
   const referencesTo = props.component.referencesTo.filter((id) => props.info[id] !== undefined).map((id) => props.info[id]);
+  const liveDebuggingEnabled = props.component.liveDebuggingEnabled;
 
   const argsPartition = partitionBody(props.component.arguments, 'Arguments');
   const exportsPartition = props.component.exports && partitionBody(props.component.exports, 'Exports');
@@ -47,6 +48,24 @@ export const ComponentView: FC<ComponentViewProps> = (props) => {
     );
   }
 
+  function liveDebuggingButton(): ReactElement | string {
+    if (useRemotecfg) {
+      return 'Live debugging is not yet available for remote components';
+    }
+
+    if (!liveDebuggingEnabled) {
+      return 'Live debugging is not yet available for this component';
+    }
+
+    return (
+      <div className={styles.debugLink}>
+        <a href={`debug/${pathJoin([props.component.moduleID, props.component.localID])}`}>
+          <FontAwesomeIcon icon={faBug} /> Live debugging
+        </a>
+      </div>
+    );
+  }
+
   return (
     <div className={styles.page}>
       <nav>
@@ -103,15 +122,7 @@ export const ComponentView: FC<ComponentViewProps> = (props) => {
           </a>
         </div>
 
-        {useRemotecfg ? (
-          'Live debugging is not yet available for remote components'
-        ) : (
-          <div className={styles.debugLink}>
-            <a href={`debug/${pathJoin([props.component.moduleID, props.component.localID])}`}>
-              <FontAwesomeIcon icon={faBug} /> Live debugging
-            </a>
-          </div>
-        )}
+        {liveDebuggingButton()}
 
         {props.component.health.message && (
           <blockquote>

diff --git a/internal/web/ui/src/features/component/types.ts b/internal/web/ui/src/features/component/types.ts
@@ -42,6 +42,11 @@ export interface ComponentInfo {
    * IDs of components which this component is referencing.
    */
   referencesTo: string[];
+
+  /**
+   * Used to indicate if live debugging is available for the component
+   */
+  liveDebuggingEnabled: boolean;
 }
 
 /**