Add example templates

Add example templates, which shows the usage of the Prometheus and
Elasticsearch plugin for the Kubernetes resource metrics and Istio.

We also slightly improved the Prometheus variable view, by showing the
variable name within the select box.

CHANGELOG.md

@@ -34,6 +34,7 @@ NOTE: As semantic versioning states all 0.y.z releases can contain breaking chan
 - [#55](https://github.com/kobsio/kobs/pull/55): Allow a user to add a tag from a span as filter in the Jaeger plugin.
 - [#57](https://github.com/kobsio/kobs/pull/57): Visualize the offset of spans in the Jaeger plugin.
 - [#61](https://github.com/kobsio/kobs/pull/61): Improve caching logic, by generating the teams and topology graph only when it is requested and not via an additional goroutine.
+- [#62](https://github.com/kobsio/kobs/pull/62): Show the name of a variable within the select box in the Prometheus dashboards.
 
 ## [v0.2.0](https://github.com/kobsio/kobs/releases/tag/v0.2.0) (2021-04-23)
 

app/src/plugins/prometheus/PrometheusVariable.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Select, SelectOption, SelectOptionObject, SelectVariant } from '@patternfly/react-core';
+import { Select, SelectGroup, SelectOption, SelectOptionObject, SelectVariant } from '@patternfly/react-core';
 
 import { Variable } from 'proto/prometheus_grpc_web_pb';
 
@@ -26,6 +26,14 @@ const PrometheusVariable: React.FunctionComponent<IPrometheusVariableProps> = ({
     setShow(false);
   };
 
+  const group = [
+    <SelectGroup label={variable.name} key="variable">
+      {variable.valuesList.map((value, index) => (
+        <SelectOption key={index} value={value} />
+      ))}
+    </SelectGroup>,
+  ];
+
   return (
     <Select
       variant={SelectVariant.single}
@@ -36,9 +44,7 @@ const PrometheusVariable: React.FunctionComponent<IPrometheusVariableProps> = ({
       selections={variable.value}
       isOpen={show}
     >
-      {variable.valuesList.map((value, index) => (
-        <SelectOption key={index} value={value} />
-      ))}
+      {group}
     </Select>
   );
 };

deploy/templates/elasticsearch-application-and-istio-logs.yaml

@@ -0,0 +1,30 @@
+apiVersion: kobs.io/v1alpha1
+kind: Template
+metadata:
+  name: elasticsearch-application-and-istio-logs
+spec:
+  description: Display the logs of your Application and the Istio Sidecar via Elasticsearch.
+  variables:
+    - name: name
+      description: The name of your Application.
+    - name: namespace
+      description: The namespace of your Application.
+  plugin:
+    name: Elasticsearch
+    elasticsearch:
+      queries:
+        - name: Application Logs
+          query: "kubernetes.namespace: << namespace >> AND kubernetes.labels.app: << name >> AND NOT kubernetes.container.name: istio-proxy"
+        - name: Istio Sidecar Logs
+          query: "kubernetes.namespace: << namespace >> AND kubernetes.labels.app: << name >> AND kubernetes.container.name: istio-proxy"
+          fields:
+            - "kubernetes.pod.name"
+            - "content.authority"
+            - "content.route_name"
+            - "content.protocol"
+            - "content.method"
+            - "content.path"
+            - "content.response_code"
+            - "content.upstream_service_time"
+            - "content.bytes_received"
+            - "content.bytes_sent"