[jaeger] Add Panels for Service Performance Monitoring

docs/plugins/azure.md

@@ -171,7 +171,7 @@ The `*` value is a special value, which allows access to all resources, resource
 - `verbs`: `delete`, `get`, `post` and `put`
 
 !!! note
-    You have to set the `permissionsEnabled` property in the configuration to `true` and you must enable [authentication](../getting-started/configuration/authentication.md) for kobs to use this feature.
+    You have to set the `permissionsEnabled` property in the configuration to `true` and you must enable [authentication](../getting-started/configuration/auth.md) for kobs to use this feature.
 
 ### Metrics
 

docs/plugins/jaeger.md

@@ -52,7 +52,8 @@ The following options can be used for a panel with the Jaeger plugin:
 | Field | Type | Description | Required |
 | ----- | ---- | ----------- | -------- |
 | showChart | boolean | If this is `true` the chart with the traces will be shown. | No |
-| queries | [[]Query](#query) | A list of Jaeger queries, which can be selected by the user. | Yes |
+| queries | [[]Query](#query) | A list of Jaeger queries, which can be selected by the user. | No |
+| metrics | [Metrics](#metrics) | The configuration to show the metrics for the Service Performance Monitoring. | No |
 
 ### Query
 
@@ -66,6 +67,14 @@ The following options can be used for a panel with the Jaeger plugin:
 | operation | string | An optional operation to retrieve traces for. | No |
 | tags | string | Tags, which the traces must be contain. | No |
 
+### Metrics
+
+| Field | Type | Description | Required |
+| ----- | ---- | ----------- | -------- |
+| type | string | The metrics type which should be displayed. Must be one of the following: `servicelatency`, `serviceerrors`, `servicecalls` or `operations`. | Yes |
+| service | string | The service for which the selected metrics should be displayed. | Yes |
+| spanKinds | string | A list of span kinds for which the selected metrics should be displayed. By default it includes all span kinds: `unspecified`, `internal`, `server`, `client`, `producer` and `consumer`. | No |
+
 ## Notification Options
 
 !!! note
@@ -107,3 +116,59 @@ spec:
 ```
 
 ![Dashboard](assets/jaeger-dashboard.png)
+
+```yaml
+---
+apiVersion: kobs.io/v1
+kind: Application
+metadata:
+  name: satellite
+  namespace: kobs
+spec:
+  dashboards:
+    - title: Service Performance Monitoring
+      inline:
+        rows:
+          - size: 3
+            panels:
+              - title: Latency (ms)
+                colSpan: 4
+                plugin:
+                  name: jaeger
+                  type: jaeger
+                  options:
+                    metrics:
+                      type: servicelatency
+                      service: satellite
+              - title: Errors (%)
+                colSpan: 4
+                plugin:
+                  name: jaeger
+                  type: jaeger
+                  options:
+                    metrics:
+                      type: serviceerrors
+                      service: satellite
+              - title: Request Rate (req/s)
+                colSpan: 4
+                plugin:
+                  name: jaeger
+                  type: jaeger
+                  options:
+                    metrics:
+                      type: servicecalls
+                      service: satellite
+          - size: -1
+            panels:
+              - title: Operations
+                colSpan: 4
+                plugin:
+                  name: jaeger
+                  type: jaeger
+                  options:
+                    metrics:
+                      type: operations
+                      service: satellite
+```
+
+![Service Performance Monitoring](assets/jaeger-service-performance-monitoring.png)

plugins/plugin-jaeger/cmd/jaeger.go

@@ -158,14 +158,15 @@ func (router *Router) getMetrics(w http.ResponseWriter, r *http.Request) {
 	name := r.Header.Get("x-kobs-plugin")
 	metric := r.URL.Query().Get("metric")
 	service := r.URL.Query().Get("service")
+	spanKinds := r.URL.Query()["spanKind"]
 	groupByOperation := r.URL.Query().Get("groupByOperation")
 	quantile := r.URL.Query().Get("quantile")
 	ratePer := r.URL.Query().Get("ratePer")
 	step := r.URL.Query().Get("step")
 	timeEnd := r.URL.Query().Get("timeEnd")
 	timeStart := r.URL.Query().Get("timeStart")
 
-	log.Debug(r.Context(), "Get metrics parameters", zap.String("name", name), zap.String("metric", metric), zap.String("service", service), zap.String("groupByOperation", groupByOperation), zap.String("quantile", quantile), zap.String("ratePer", ratePer), zap.String("step", step), zap.String("timeEnd", timeEnd), zap.String("timeStart", timeStart))
+	log.Debug(r.Context(), "Get metrics parameters", zap.String("name", name), zap.String("metric", metric), zap.String("service", service), zap.Strings("spanKinds", spanKinds), zap.String("groupByOperation", groupByOperation), zap.String("quantile", quantile), zap.String("ratePer", ratePer), zap.String("step", step), zap.String("timeEnd", timeEnd), zap.String("timeStart", timeStart))
 
 	i := router.getInstance(name)
 	if i == nil {
@@ -188,7 +189,7 @@ func (router *Router) getMetrics(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	body, err := i.GetMetrics(r.Context(), metric, service, groupByOperation, quantile, ratePer, step, parsedTimeStart, parsedTimeEnd)
+	body, err := i.GetMetrics(r.Context(), metric, service, groupByOperation, quantile, ratePer, step, spanKinds, parsedTimeStart, parsedTimeEnd)
 	if err != nil {
 		log.Error(r.Context(), "Could not get metrics", zap.Error(err))
 		errresponse.Render(w, r, err, http.StatusInternalServerError, "Could not get metrics")

plugins/plugin-jaeger/pkg/instance/instance.go

@@ -38,7 +38,7 @@ type Instance interface {
 	GetOperations(ctx context.Context, service string) (map[string]any, error)
 	GetTraces(ctx context.Context, limit, maxDuration, minDuration, operation, service, tags string, timeStart, timeEnd int64) (map[string]any, error)
 	GetTrace(ctx context.Context, traceID string) (map[string]any, error)
-	GetMetrics(ctx context.Context, metric, service, groupByOperation, quantile, ratePer, step string, timeStart, timeEnd int64) (map[string]any, error)
+	GetMetrics(ctx context.Context, metric, service, groupByOperation, quantile, ratePer, step string, spanKinds []string, timeStart, timeEnd int64) (map[string]any, error)
 }
 
 type instance struct {
@@ -112,12 +112,17 @@ func (i *instance) GetTrace(ctx context.Context, traceID string) (map[string]any
 	return i.doRequest(ctx, fmt.Sprintf("/api/traces/%s", traceID))
 }
 
-func (i *instance) GetMetrics(ctx context.Context, metric, service, groupByOperation, quantile, ratePer, step string, timeStart, timeEnd int64) (map[string]any, error) {
+func (i *instance) GetMetrics(ctx context.Context, metric, service, groupByOperation, quantile, ratePer, step string, spanKinds []string, timeStart, timeEnd int64) (map[string]any, error) {
 	timeStart = timeStart * 1000
 	timeEnd = timeEnd * 1000
 	lookback := timeEnd - timeStart
 
-	return i.doRequest(ctx, fmt.Sprintf("/api/metrics/%s?service=%s&endTs=%d&lookback=%d&groupByOperation=%s&quantile=%s&ratePer=%s&step=%s&spanKind=unspecified&spanKind=internal&spanKind=server&spanKind=client&spanKind=producer&spanKind=consumer", metric, service, timeEnd, lookback, groupByOperation, quantile, ratePer, step))
+	var spanKindsParameters string
+	for _, spanKind := range spanKinds {
+		spanKindsParameters = fmt.Sprintf("%s&spanKind=%s", spanKindsParameters, spanKind)
+	}
+
+	return i.doRequest(ctx, fmt.Sprintf("/api/metrics/%s?service=%s&endTs=%d&lookback=%d&groupByOperation=%s&quantile=%s&ratePer=%s&step=%s%s", metric, service, timeEnd, lookback, groupByOperation, quantile, ratePer, step, spanKindsParameters))
 }
 
 // New returns a new Jaeger instance for the given configuration.

plugins/plugin-jaeger/src/components/page/Monitor.tsx

@@ -24,10 +24,12 @@ const Monitor: React.FunctionComponent<IMonitorProps> = ({ instance }: IMonitorP
   const [details, setDetails] = useState<React.ReactNode>(undefined);
 
   const changeOptions = (opts: IMonitorOptions): void => {
+    const spanKinds = opts.spanKinds.map((spanKind) => `&spanKind=${spanKind}`);
+
     navigate(
-      `${location.pathname}?service=${encodeURIComponent(opts.service)}&time=${opts.times.time}&timeEnd=${
-        opts.times.timeEnd
-      }&timeStart=${opts.times.timeStart}`,
+      `${location.pathname}?service=${encodeURIComponent(opts.service)}${
+        spanKinds.length > 0 ? spanKinds.join('') : ''
+      }&time=${opts.times.time}&timeEnd=${opts.times.timeEnd}&timeStart=${opts.times.timeStart}`,
     );
   };
 
@@ -58,13 +60,14 @@ const Monitor: React.FunctionComponent<IMonitorProps> = ({ instance }: IMonitorP
         toolbarContent={<MonitorToolbar instance={instance} options={options} setOptions={changeOptions} />}
         panelContent={details}
       >
-        {options.service ? (
+        {options.service && options.spanKinds.length > 0 ? (
           <Grid hasGutter={true}>
             <GridItem style={{ height: '300px' }} sm={12} md={12} lg={4} xl={4} xl2={4}>
               <MonitorServiceLatency
                 title="Latency (ms)"
                 instance={instance}
                 service={options.service}
+                spanKinds={options.spanKinds}
                 times={options.times}
               />
             </GridItem>
@@ -73,6 +76,7 @@ const Monitor: React.FunctionComponent<IMonitorProps> = ({ instance }: IMonitorP
                 title="Error Rate (%)"
                 instance={instance}
                 service={options.service}
+                spanKinds={options.spanKinds}
                 times={options.times}
               />
             </GridItem>
@@ -81,6 +85,7 @@ const Monitor: React.FunctionComponent<IMonitorProps> = ({ instance }: IMonitorP
                 title="Request Rate (req/s)"
                 instance={instance}
                 service={options.service}
+                spanKinds={options.spanKinds}
                 times={options.times}
               />
             </GridItem>
@@ -89,6 +94,7 @@ const Monitor: React.FunctionComponent<IMonitorProps> = ({ instance }: IMonitorP
                 title="Operations"
                 instance={instance}
                 service={options.service}
+                spanKinds={options.spanKinds}
                 times={options.times}
                 setDetails={setDetails}
               />

plugins/plugin-jaeger/src/components/page/MonitorToolbar.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 
 import { IOptionsAdditionalFields, IPluginInstance, ITimes, Options, Toolbar, ToolbarItem } from '@kobsio/shared';
 import { IMonitorOptions } from '../../utils/interfaces';
+import MonitorToolbarSpanKinds from './MonitorToolbarSpanKinds';
 import TracesToolbarServices from './TracesToolbarServices';
 
 interface IMonitorToolbarProps {
@@ -16,10 +17,28 @@ const MonitorToolbar: React.FunctionComponent<IMonitorToolbarProps> = ({
   setOptions,
 }: IMonitorToolbarProps) => {
   const [service, setService] = useState<string>(options.service);
+  const [spanKinds, setSpanKinds] = useState<string[]>(options.spanKinds);
+
+  const selectSpanKind = (spanKind: string): void => {
+    if (spanKind === '') {
+      setSpanKinds([]);
+    } else {
+      if (spanKind) {
+        if (spanKinds.includes(spanKind)) {
+          setSpanKinds(spanKinds.filter((item) => item !== spanKind));
+        } else {
+          setSpanKinds([...spanKinds, spanKind]);
+        }
+      } else {
+        setSpanKinds([spanKind]);
+      }
+    }
+  };
 
   const changeOptions = (times: ITimes, additionalFields: IOptionsAdditionalFields[] | undefined): void => {
     setOptions({
       service: service,
+      spanKinds: spanKinds,
       times: times,
     });
   };
@@ -29,6 +48,9 @@ const MonitorToolbar: React.FunctionComponent<IMonitorToolbarProps> = ({
       <ToolbarItem grow={true}>
         <TracesToolbarServices instance={instance} service={service} setService={(value): void => setService(value)} />
       </ToolbarItem>
+      <ToolbarItem>
+        <MonitorToolbarSpanKinds spanKinds={spanKinds} setSpanKind={(value): void => selectSpanKind(value)} />
+      </ToolbarItem>
 
       <Options times={options.times} showOptions={true} showSearchButton={true} setOptions={changeOptions} />
     </Toolbar>

plugins/plugin-jaeger/src/components/page/MonitorToolbarSpanKinds.tsx

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+
+interface IMonitorToolbarSpanKindsProps {
+  spanKinds: string[];
+  setSpanKind: (spanKind: string) => void;
+}
+
+const MonitorToolbarSpanKinds: React.FunctionComponent<IMonitorToolbarSpanKindsProps> = ({
+  spanKinds,
+  setSpanKind,
+}: IMonitorToolbarSpanKindsProps) => {
+  const [show, setShow] = useState<boolean>(false);
+
+  return (
+    <Select
+      variant={SelectVariant.checkbox}
+      typeAheadAriaLabel="Span Kinds"
+      placeholderText="Span Kinds"
+      onToggle={(): void => setShow(!show)}
+      onSelect={(e, value): void => setSpanKind(value as string)}
+      selections={spanKinds}
+      isOpen={show}
+      maxHeight="50vh"
+    >
+      {['unspecified', 'internal', 'server', 'client', 'producer', 'consumer'].map((spanKind) => (
+        <SelectOption key={spanKind} value={spanKind} />
+      ))}
+    </Select>
+  );
+};
+
+export default MonitorToolbarSpanKinds;

plugins/plugin-jaeger/src/components/panel/MonitorOperations.tsx

@@ -10,6 +10,7 @@ interface IMonitorOperationsProps {
   description?: string;
   instance: IPluginInstance;
   service: string;
+  spanKinds: string[];
   times: ITimes;
   setDetails?: (details: React.ReactNode) => void;
 }
@@ -18,11 +19,12 @@ const MonitorOperations: React.FunctionComponent<IMonitorOperationsProps> = ({
   title,
   description,
   instance,
-  times,
   service,
+  spanKinds,
+  times,
   setDetails,
 }: IMonitorOperationsProps) => {
-  const metrics = useGetOperationMetrics(instance, service, times);
+  const metrics = useGetOperationMetrics(instance, service, spanKinds, times);
 
   if (
     metrics[0].isLoading ||

plugins/plugin-jaeger/src/components/panel/MonitorServiceCalls.tsx

@@ -12,22 +12,28 @@ interface IMonitorServiceCallsProps {
   description?: string;
   instance: IPluginInstance;
   service: string;
+  spanKinds: string[];
   times: ITimes;
 }
 
 const MonitorServiceCalls: React.FunctionComponent<IMonitorServiceCallsProps> = ({
   title,
   description,
   instance,
-  times,
   service,
+  spanKinds,
+  times,
 }: IMonitorServiceCallsProps) => {
   const { isError, isLoading, error, data } = useQuery<IChartData[], Error>(
-    ['jaeger/metrics/calls/service', instance, service, times],
+    ['jaeger/metrics/calls/service', instance, service, spanKinds, times],
     async () => {
       try {
+        const sk = spanKinds.map((spanKind) => `&spanKind=${spanKind}`);
+
         const response = await fetch(
-          `/api/plugins/jaeger/metrics?metric=calls&service=${service}&groupByOperation=false&ratePer=600000&step=60000&timeStart=${times.timeStart}&timeEnd=${times.timeEnd}`,
+          `/api/plugins/jaeger/metrics?metric=calls&service=${service}${
+            sk.length > 0 ? sk.join('') : ''
+          }&groupByOperation=false&ratePer=600000&step=60000&timeStart=${times.timeStart}&timeEnd=${times.timeEnd}`,
           {
             headers: {
               // eslint-disable-next-line @typescript-eslint/naming-convention