NO-JIRA: feat: Troubleshooting panel UI improvements.

- Separate search/result in redux store, use redux search directly instead of state.
- Move time range to toolbar: similar pattern to other screens (logging, netobs, tracing)
- Focus button changes icon and style when panel is focused/not focused with main view.
- Update all tool-tips and help popovers.
- Replace "Advanced" button text with slider icon
- Validation for advanced fields, Search button, consistent submit behavior.
- Minimize use of console logging, rationalize messages.
- Cleaned up error messages from types.ts

Author: alanconway

web/locales/en/plugin__troubleshooting-panel-console-plugin.json

@@ -1,34 +1,48 @@
 {
-  "Advanced": "Advanced",
-  "Ago": "Ago",
+  "<0>Query to select the starting data for the search.</0><1>The <1>[Focus]</1> button fills in a query for the data shown in the main view. You can enter your own query.</1>": "<0>Query to select the starting data for the search.</0><1>The <1>[Focus]</1> button fills in a query for the data shown in the main view. You can enter your own query.</1>",
+  "<0>There are two types of correlation search:</0><1><0><0>Neighbourhood</0>: Find all connected neighbours up to a maximum <2>depth</2> (number of hops.)</0><1><0>Goal</0>: Find paths to a selected <2>goal class</2>. Finds all shortest paths, and some near-shortest paths.</1></1>": "<0>There are two types of correlation search:</0><1><0><0>Neighbourhood</0>: Find all connected neighbours up to a maximum <2>depth</2> (number of hops.)</0><1><0>Goal</0>: Find paths to a selected <2>goal class</2>. Finds all shortest paths, and some near-shortest paths.</1></1>",
+  "Advanced Search": "Advanced Search",
+  "Advanced search parameters": "Advanced search parameters",
+  "Cancel": "Cancel",
+  "Correlation graph already matches search": "Correlation graph already matches search",
+  "Correlation graph is focused on the main view.": "Correlation graph is focused on the main view.",
   "Correlation result was empty.": "Correlation result was empty.",
-  "Create a graph of items correlated from resources in the current page.": "Create a graph of items correlated from resources in the current page.",
-  "Distance": "Distance",
-  "Find all paths to items of the specified goal class.": "Find all paths to items of the specified goal class.",
+  "Current view does not allow correlation.": "Current view does not allow correlation.",
+  "Custom": "Custom",
+  "Custom duration": "Custom duration",
+  "Custom time range": "Custom time range",
+  "End time must be after start time": "End time must be after start time",
+  "Fix validation errors before searching": "Fix validation errors before searching",
   "Focus": "Focus",
-  "Follows correlation rules from the starting point to find related data, then continues the search from that data, up to the number of steps you specify.": "Follows correlation rules from the starting point to find related data, then continues the search from that data, up to the number of steps you specify.",
-  "Goal Class": "Goal Class",
+  "Focus the correlation on the main view.": "Focus the correlation on the main view.",
+  "From": "From",
+  "Goals": "Goals",
+  "Include data from this time range": "Include data from this time range",
   "Korrel8r Error": "Korrel8r Error",
-  "Loading": "Loading",
+  "Last": "Last",
+  "Last {{count}} {{unit}}_one": "Last {{count}} {{unit}}_one",
+  "Last {{count}} {{unit}}_other": "Last {{count}} {{unit}}_other",
   "Logging Plugin Disabled": "Logging Plugin Disabled",
+  "Neighbours": "Neighbours",
+  "Neighbours or Goal search": "Neighbours or Goal search",
   "Netflow Plugin Disabled": "Netflow Plugin Disabled",
   "No Correlated Signals Found": "No Correlated Signals Found",
   "Open the Troubleshooting Panel": "Open the Troubleshooting Panel",
-  "Query": "Query",
+  "Other duration": "Other duration",
   "Quickly diagnose and resolve issues by exploring correlated observability signals for resources.": "Quickly diagnose and resolve issues by exploring correlated observability signals for resources.",
-  "Range": "Range",
-  "Recent": "Recent",
-  "Refresh the graph using the current settings": "Refresh the graph using the current settings",
+  "Refresh": "Refresh",
+  "Refresh the graph by re-running the current search.": "Refresh the graph by re-running the current search.",
   "Request Failed": "Request Failed",
-  "Return only results in the specified time range.": "Return only results in the specified time range.",
-  "Return only results more recent than the specified duration.": "Return only results more recent than the specified duration.",
+  "Save": "Save",
+  "Search": "Search",
   "Search Type": "Search Type",
-  "Selects the starting point for correlation search. This query is set automatically by the <1>Focus</1> button. You can edit it manually to specify a custom query.": "Selects the starting point for correlation search. This query is set automatically by the <1>Focus</1> button. You can edit it manually to specify a custom query.",
-  "Since": "Since",
-  "The current page does not support correlation.": "The current page does not support correlation.",
-  "Time": "Time",
-  "to": "to",
+  "Searching": "Searching",
+  "Select starting data": "Select starting data",
+  "Start Query": "Start Query",
+  "Start-end time range": "Start-end time range",
+  "To": "To",
   "Troubleshooting": "Troubleshooting",
   "Troubleshooting Panel": "Troubleshooting Panel",
-  "Unable to find Console Link": "Unable to find Console Link"
+  "Unable to find Console Link": "Unable to find Console Link",
+  "Update the correlation graph": "Update the correlation graph"
 }

web/src/__tests__/alert.spec.ts

@@ -41,7 +41,7 @@ describe('AlertNode.fromURL raises error', () => {
   it.each([
     {
       url: 'monitoring/alertrules/999',
-      error: 'invalid link for domain alert: monitoring/alertrules/999: cannot find alertname',
+      error: 'unknown alert link: monitoring/alertrules/999: cannot find alertname',
     },
   ])('converts $url', ({ url, error }) => {
     expect(() => new AlertDomain().linkToQuery(new URIRef(url))).toThrow(error);

web/src/__tests__/log.spec.ts

@@ -130,12 +130,12 @@ describe('expected errors', () => {
   it.each([
     {
       url: 'monitoring/log',
-      expected: 'invalid link for domain log: monitoring/log',
+      expected: 'unknown log link: monitoring/log',
     },
     {
       url: 'monitoring/logs?q={kubernetes_namespace_name="default",kubernetes_pod_name="foo"}',
       expected:
-        'invalid link for domain log: monitoring/logs?q=%7Bkubernetes_namespace_name%3D%22default%22%2Ckubernetes_pod_name%3D%22foo%22%7D',
+        'unknown log link: monitoring/logs?q=%7Bkubernetes_namespace_name%3D%22default%22%2Ckubernetes_pod_name%3D%22foo%22%7D',
     },
   ])('error from url: $url', ({ url, expected }) => {
     expect(() => new LogDomain().linkToQuery(new URIRef(url))).toThrow(expected);
@@ -144,11 +144,11 @@ describe('expected errors', () => {
   it.each([
     {
       query: 'foo:bar:baz',
-      expected: 'invalid query for domain log: foo:bar:baz: unknown class',
+      expected: 'unknown query: foo:bar:baz: unknown class',
     },
     {
       query: 'log:incorrect:{}',
-      expected: 'invalid query for domain log: log:incorrect:{}: unknown class',
+      expected: 'unknown query: log:incorrect:{}: unknown class',
     },
   ])('error from query: $query', ({ query, expected }) => {
     expect(() => new LogDomain().queryToLink(Query.parse(query))).toThrow(expected);

web/src/__tests__/metric.spec.ts

@@ -33,11 +33,11 @@ describe('metric', () => {
     it.each([
       {
         url: 'foobar',
-        error: new TypeError('invalid link for domain metric: foobar'),
+        error: 'unknown metric link: foobar',
       },
       {
         url: 'monitoring/query-browser',
-        error: 'invalid link for domain metric: monitoring/query-browser',
+        error: 'unknown metric link: monitoring/query-browser',
       },
     ])('$url', ({ url, error }) => {
       expect(() => metric.linkToQuery(new URIRef(url))).toThrow(error);
@@ -48,11 +48,11 @@ describe('metric', () => {
     it.each([
       {
         query: 'wrongdomain:metric:foo',
-        error: 'invalid query for domain metric: wrongdomain:metric:foo',
+        error: 'unknown query: wrongdomain:metric:foo',
       },
       {
         query: 'metric:badclass:foo',
-        error: 'invalid class for domain metric: badclass',
+        error: 'class not found: metric:badclass',
       },
     ])('$query', ({ query, error }) => {
       expect(() => metric.queryToLink(Query.parse(query))).toThrow(error);

web/src/__tests__/netflow.spec.ts

@@ -47,7 +47,8 @@ describe('NetflowNode.fromQuery', () => {
       url: `netflow-traffic?tenant=network&filters=${encodeURIComponent(
         'dst_kind=Pod;src_namespace="openshift-oauth-apiserver","tracing-app-k6"',
       )}&startTime=1742896800&endTime=1742940000`,
-      query: 'netflow:network:{DstK8S_Type="Pod",SrcK8S_Namespace=~"openshift-oauth-apiserver|tracing-app-k6"}',
+      query:
+        'netflow:network:{DstK8S_Type="Pod",SrcK8S_Namespace=~"openshift-oauth-apiserver|tracing-app-k6"}',
       constraint: {
         start: '2025-03-25T10:00:00.000Z',
         end: '2025-03-25T22:00:00.000Z',
@@ -77,7 +78,8 @@ describe('NetflowNode.fromURL', () => {
       url: `netflow-traffic?tenant=network&filters=${encodeURIComponent(
         'dst_kind=Pod;dst_namespace=hostpath-provisioner;src_namespace="openshift-oauth-apiserver","tracing-app-k6"',
       )}`,
-      query: 'netflow:network:{DstK8S_Type="Pod",DstK8S_Namespace="hostpath-provisioner",SrcK8S_Namespace=~"openshift-oauth-apiserver|tracing-app-k6"}',
+      query:
+        'netflow:network:{DstK8S_Type="Pod",DstK8S_Namespace="hostpath-provisioner",SrcK8S_Namespace=~"openshift-oauth-apiserver|tracing-app-k6"}',
     },
   ])(`from $url`, ({ query, url }) =>
     expect(new NetflowDomain().linkToQuery(new URIRef(url))).toEqual(Query.parse(query)),
@@ -88,7 +90,7 @@ describe('', () => {
   it.each([
     {
       url: 'netflow-traffi',
-      expected: 'invalid link for domain netflow: netflow-traffi',
+      expected: 'unknown netflow link: netflow-traffi',
     },
   ])('expect error fromURL($url)', ({ url, expected }) => {
     expect(() => new NetflowDomain().linkToQuery(new URIRef(url))).toThrow(expected);
@@ -101,15 +103,15 @@ describe('', () => {
     },
     {
       query: 'netflow:incorrect:{}',
-      expected: 'invalid query for domain netflow: netflow:incorrect:{}: unknown class',
+      expected: 'unknown query: netflow:incorrect:{}: unknown class',
     },
     {
       query: 'netflow:network:{SrcK8S_Type="Pod"=wrong}',
-      expected: 'invalid query for domain netflow: netflow:network:{SrcK8S_Type="Pod"=wrong}',
+      expected: 'unknown query: netflow:network:{SrcK8S_Type="Pod"=wrong}',
     },
     {
       query: 'netflow:network:{SrcK8S_Type}',
-      expected: 'invalid query for domain netflow: netflow:network:{SrcK8S_Type}',
+      expected: 'unknown query: netflow:network:{SrcK8S_Type}',
     },
   ])('expect error fromQuery($query)', ({ query, expected }) => {
     expect(() => new NetflowDomain().queryToLink(Query.parse(query))).toThrow(expected);

web/src/__tests__/types.spec.ts

@@ -18,7 +18,7 @@ describe('Query', () => {
     const abc = new Class('a', 'b').query('c=d');
     expect(abc.toString()).toEqual('a:b:c=d');
     expect(Query.parse('a:b:c=d')).toEqual(abc);
-    expect(() => Query.parse('x')).toThrow(/invalid.*: x/);
+    expect(() => Query.parse('x')).toThrow(/invalid query: x/);
   });
 });
 
@@ -27,7 +27,7 @@ class FakeDomain extends Domain {
     super(name);
   }
 
-  class(name: string): Class | undefined {
+  class(name: string): Class {
     return new Class(this.name, name);
   }
 
@@ -69,7 +69,7 @@ describe('Domain', () => {
   it('queryToLink', () => {
     expect(d.queryToLink(abc).toString()).toEqual('a/b?c=d');
     const query = Query.parse('x:b:c');
-    expect(() => d.queryToLink(query)).toThrow('invalid query for domain a: x:b:c');
+    expect(() => d.queryToLink(query)).toThrow('unknown query: x:b:c');
   });
   it('linkToQuery', () => {
     expect(d.linkToQuery(new URIRef('a/b?c=d'))).toEqual(abc);
@@ -85,7 +85,7 @@ describe('Domains', () => {
   it('queryToLink', () => {
     expect(ds.queryToLink(abc).toString()).toEqual('a/b?c=d');
     expect(ds.queryToLink(xyz).toString()).toEqual('x/y?z=z');
-    expect(() => ds.queryToLink(Query.parse('z:b:c'))).toThrow(/unknown domain .*: z:b:c/);
+    expect(() => ds.queryToLink(Query.parse('z:b:c'))).toThrow(/unknown domain: z/);
   });
   it('linkToQuery', () => {
     expect(ds.linkToQuery(new URIRef('x/y?z=z'))).toEqual(xyz);