module.string: fix issue with nested controller API (#3351)

This commit fixes a bug where API endpoints for nested controllers did
not propagate correctly. The controller handler assumed that the full
HTTP path was being used rather than the truncated path given to
component handlers.

This also fixes an issue in the UI where the URL for deeply nested
modules was calculated incorrectly.

Fixes #3294

component/module/string/string.go

@@ -4,6 +4,7 @@ package string
 import (
 	"context"
 	"net/http"
+	"path"
 
 	"github.com/go-kit/log"
 	"github.com/gorilla/mux"
@@ -114,6 +115,13 @@ func (c *Component) Handler() http.Handler {
 	fa := api.NewFlowAPI(c.ctrl, r)
 	fa.RegisterRoutes("/", r)
 
-	r.PathPrefix("/{id}/").Handler(c.ctrl.ComponentHandler())
+	r.PathPrefix("/{id}/").HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		// Re-add the full path to ensure that nested controllers propagate
+		// requests properly.
+		r.URL.Path = path.Join(c.opts.HTTPPath, r.URL.Path)
+
+		c.ctrl.ComponentHandler().ServeHTTP(w, r)
+	})
+
 	return r
 }

web/ui/src/features/component/ComponentView.tsx

@@ -19,6 +19,7 @@ export interface ComponentViewProps {
 
 export const ComponentView: FC<ComponentViewProps> = (props) => {
   // TODO(rfratto): expand/collapse icon for sections (treat it like Row in grafana dashboard)
+  console.log(props.component);
 
   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]);
@@ -138,7 +139,10 @@ export const ComponentView: FC<ComponentViewProps> = (props) => {
           <section id="module">
             <h2>Module components</h2>
             <div className={styles.sectionContent}>
-              <ComponentList components={props.component.moduleInfo} parent={props.component.id} />
+              <ComponentList
+                components={props.component.moduleInfo}
+                parent={pathJoin([props.component.parent, props.component.id])}
+              />
             </div>
           </section>
         )}
@@ -147,6 +151,10 @@ export const ComponentView: FC<ComponentViewProps> = (props) => {
   );
 };
 
+function pathJoin(paths: (string | undefined)[]): string {
+  return paths.filter((p) => p && p !== '').join('/');
+}
+
 /**
  * partitionBody groups a body by attributes and inner blocks, assigning unique
  * keys for each.