Allow users to overwrite the plugin name

CHANGELOG.md

@@ -22,6 +22,7 @@ NOTE: As semantic versioning states all 0.y.z releases can contain breaking chan
 ### Changed
 
 - [#30](https://github.com/kobsio/kobs/pull/30): Support multiple versions of a CRD and allow the specification of namespaces in the Applications resources list.
+- [#35](https://github.com/kobsio/kobs/pull/35): Add new field `displayName` for plugins, to overwrite the name which is displayed for a plugin tab in the frontend.
 
 ## [v0.1.0](https://github.com/kobsio/kobs/releases/tag/v0.1.0) (2021-04-04)
 

app/src/components/applications/ApplicationTabs.tsx

@@ -38,7 +38,7 @@ const ApplicationTabs: React.FunctionComponent<IApplicationTabsProps> = ({
         <Tab
           key={index}
           eventKey={`refPlugin-${index}`}
-          title={<TabTitleText>{plugin.name}</TabTitleText>}
+          title={<TabTitleText>{plugin.displayname ? plugin.displayname : plugin.name}</TabTitleText>}
           tabContentId={`refPlugin-${index}`}
           tabContentRef={refPluginsContent ? refPluginsContent[index] : undefined}
         />

app/src/components/resources/ResourceDetails.tsx

@@ -266,7 +266,11 @@ const ResourceDetails: React.FunctionComponent<IResourceDetailsProps> = ({
             </Tab>
           ) : plugins.length > 0 ? (
             plugins.map((plugin, index) => (
-              <Tab key={index} eventKey={`plugin_${index}`} title={<TabTitleText>{plugin.name}</TabTitleText>}>
+              <Tab
+                key={index}
+                eventKey={`plugin_${index}`}
+                title={<TabTitleText>{plugin.displayname ? plugin.displayname : plugin.name}</TabTitleText>}
+              >
                 <div style={{ maxWidth: '100%', overflowX: 'scroll', padding: '24px 24px' }}>
                   <Plugin plugin={plugin} showDetails={undefined} />
                 </div>

app/src/plugins/elasticsearch/helpers.ts

@@ -113,6 +113,7 @@ export const jsonToProto = (json: any): Plugin.AsObject | undefined => {
 
   const plugin = new Plugin();
   plugin.setName(json.name);
+  plugin.setDisplayname(json.displayName ? json.displayName : '');
   plugin.setElasticsearch(elasticsearch);
 
   return plugin.toObject();

app/src/plugins/jaeger/helpers.ts

@@ -263,6 +263,7 @@ export const jsonToProto = (json: any): Plugin.AsObject | undefined => {
 
   const plugin = new Plugin();
   plugin.setName(json.name);
+  plugin.setDisplayname(json.displayName ? json.displayName : '');
   plugin.setJaeger(jaeger);
 
   return plugin.toObject();

app/src/plugins/prometheus/helpers.ts

@@ -101,6 +101,7 @@ export const jsonToProto = (json: any): Plugin.AsObject | undefined => {
 
   const plugin = new Plugin();
   plugin.setName(json.name);
+  plugin.setDisplayname(json.displayName ? json.displayName : '');
   plugin.setPrometheus(prometheus);
 
   return plugin.toObject();

app/src/proto/plugins_pb.d.ts

@@ -76,6 +76,9 @@ export class Plugin extends jspb.Message {
   getName(): string;
   setName(value: string): void;
 
+  getDisplayname(): string;
+  setDisplayname(value: string): void;
+
   hasPrometheus(): boolean;
   clearPrometheus(): void;
   getPrometheus(): prometheus_pb.Spec | undefined;
@@ -104,6 +107,7 @@ export class Plugin extends jspb.Message {
 export namespace Plugin {
   export type AsObject = {
     name: string,
+    displayname: string,
     prometheus?: prometheus_pb.Spec.AsObject,
     elasticsearch?: elasticsearch_pb.Spec.AsObject,
     jaeger?: jaeger_pb.Spec.AsObject,

app/src/proto/plugins_pb.js

@@ -592,6 +592,7 @@ proto.plugins.Plugin.prototype.toObject = function(opt_includeInstance) {
 proto.plugins.Plugin.toObject = function(includeInstance, msg) {
   var f, obj = {
     name: jspb.Message.getFieldWithDefault(msg, 1, ""),
+    displayname: jspb.Message.getFieldWithDefault(msg, 2, ""),
     prometheus: (f = msg.getPrometheus()) && prometheus_pb.Spec.toObject(includeInstance, f),
     elasticsearch: (f = msg.getElasticsearch()) && elasticsearch_pb.Spec.toObject(includeInstance, f),
     jaeger: (f = msg.getJaeger()) && jaeger_pb.Spec.toObject(includeInstance, f)
@@ -636,16 +637,20 @@ proto.plugins.Plugin.deserializeBinaryFromReader = function(msg, reader) {
       msg.setName(value);
       break;
     case 2:
+      var value = /** @type {string} */ (reader.readString());
+      msg.setDisplayname(value);
+      break;
+    case 3:
       var value = new prometheus_pb.Spec;
       reader.readMessage(value,prometheus_pb.Spec.deserializeBinaryFromReader);
       msg.setPrometheus(value);
       break;
-    case 3:
+    case 4:
       var value = new elasticsearch_pb.Spec;
       reader.readMessage(value,elasticsearch_pb.Spec.deserializeBinaryFromReader);
       msg.setElasticsearch(value);
       break;
-    case 4:
+    case 5:
       var value = new jaeger_pb.Spec;
       reader.readMessage(value,jaeger_pb.Spec.deserializeBinaryFromReader);
       msg.setJaeger(value);
@@ -686,26 +691,33 @@ proto.plugins.Plugin.serializeBinaryToWriter = function(message, writer) {
       f
     );
   }
+  f = message.getDisplayname();
+  if (f.length > 0) {
+    writer.writeString(
+      2,
+      f
+    );
+  }
   f = message.getPrometheus();
   if (f != null) {
     writer.writeMessage(
-      2,
+      3,
       f,
       prometheus_pb.Spec.serializeBinaryToWriter
     );
   }
   f = message.getElasticsearch();
   if (f != null) {
     writer.writeMessage(
-      3,
+      4,
       f,
       elasticsearch_pb.Spec.serializeBinaryToWriter
     );
   }
   f = message.getJaeger();
   if (f != null) {
     writer.writeMessage(
-      4,
+      5,
       f,
       jaeger_pb.Spec.serializeBinaryToWriter
     );
@@ -732,12 +744,30 @@ proto.plugins.Plugin.prototype.setName = function(value) {
 
 
 /**
- * optional prometheus.Spec prometheus = 2;
+ * optional string displayName = 2;
+ * @return {string}
+ */
+proto.plugins.Plugin.prototype.getDisplayname = function() {
+  return /** @type {string} */ (jspb.Message.getFieldWithDefault(this, 2, ""));
+};
+
+
+/**
+ * @param {string} value
+ * @return {!proto.plugins.Plugin} returns this
+ */
+proto.plugins.Plugin.prototype.setDisplayname = function(value) {
+  return jspb.Message.setProto3StringField(this, 2, value);
+};
+
+
+/**
+ * optional prometheus.Spec prometheus = 3;
  * @return {?proto.plugins.prometheus.Spec}
  */
 proto.plugins.Plugin.prototype.getPrometheus = function() {
   return /** @type{?proto.plugins.prometheus.Spec} */ (
-    jspb.Message.getWrapperField(this, prometheus_pb.Spec, 2));
+    jspb.Message.getWrapperField(this, prometheus_pb.Spec, 3));
 };
 
 
@@ -746,7 +776,7 @@ proto.plugins.Plugin.prototype.getPrometheus = function() {
  * @return {!proto.plugins.Plugin} returns this
 */
 proto.plugins.Plugin.prototype.setPrometheus = function(value) {
-  return jspb.Message.setWrapperField(this, 2, value);
+  return jspb.Message.setWrapperField(this, 3, value);
 };
 
 
@@ -764,17 +794,17 @@ proto.plugins.Plugin.prototype.clearPrometheus = function() {
  * @return {boolean}
  */
 proto.plugins.Plugin.prototype.hasPrometheus = function() {
-  return jspb.Message.getField(this, 2) != null;
+  return jspb.Message.getField(this, 3) != null;
 };
 
 
 /**
- * optional elasticsearch.Spec elasticsearch = 3;
+ * optional elasticsearch.Spec elasticsearch = 4;
  * @return {?proto.plugins.elasticsearch.Spec}
  */
 proto.plugins.Plugin.prototype.getElasticsearch = function() {
   return /** @type{?proto.plugins.elasticsearch.Spec} */ (
-    jspb.Message.getWrapperField(this, elasticsearch_pb.Spec, 3));
+    jspb.Message.getWrapperField(this, elasticsearch_pb.Spec, 4));
 };
 
 
@@ -783,7 +813,7 @@ proto.plugins.Plugin.prototype.getElasticsearch = function() {
  * @return {!proto.plugins.Plugin} returns this
 */
 proto.plugins.Plugin.prototype.setElasticsearch = function(value) {
-  return jspb.Message.setWrapperField(this, 3, value);
+  return jspb.Message.setWrapperField(this, 4, value);
 };
 
 
@@ -801,17 +831,17 @@ proto.plugins.Plugin.prototype.clearElasticsearch = function() {
  * @return {boolean}
  */
 proto.plugins.Plugin.prototype.hasElasticsearch = function() {
-  return jspb.Message.getField(this, 3) != null;
+  return jspb.Message.getField(this, 4) != null;
 };
 
 
 /**
- * optional jaeger.Spec jaeger = 4;
+ * optional jaeger.Spec jaeger = 5;
  * @return {?proto.plugins.jaeger.Spec}
  */
 proto.plugins.Plugin.prototype.getJaeger = function() {
   return /** @type{?proto.plugins.jaeger.Spec} */ (
-    jspb.Message.getWrapperField(this, jaeger_pb.Spec, 4));
+    jspb.Message.getWrapperField(this, jaeger_pb.Spec, 5));
 };
 
 
@@ -820,7 +850,7 @@ proto.plugins.Plugin.prototype.getJaeger = function() {
  * @return {!proto.plugins.Plugin} returns this
 */
 proto.plugins.Plugin.prototype.setJaeger = function(value) {
-  return jspb.Message.setWrapperField(this, 4, value);
+  return jspb.Message.setWrapperField(this, 5, value);
 };
 
 
@@ -838,7 +868,7 @@ proto.plugins.Plugin.prototype.clearJaeger = function() {
  * @return {boolean}
  */
 proto.plugins.Plugin.prototype.hasJaeger = function() {
-  return jspb.Message.getField(this, 4) != null;
+  return jspb.Message.getField(this, 5) != null;
 };
 
 

deploy/helm/kobs/Chart.yaml

@@ -4,5 +4,5 @@ description: Kubernetes Observability Platform
 type: application
 home: https://kobs.io
 icon: https://kobs.io/assets/images/logo.svg
-version: 0.2.0
+version: 0.2.1
 appVersion: v0.1.0

deploy/helm/kobs/templates/customresourcedefinition.yaml

@@ -93,6 +93,8 @@ spec:
                       are mutually exclusive and containing the data, which is needed
                       to use the plugin within a Application CR.
                     properties:
+                      displayName:
+                        type: string
                       elasticsearch:
                         description: Spec implements the specification for an application.
                           This field is then used in the Application CR and contains,
@@ -228,6 +230,8 @@ spec:
                     exclusive and containing the data, which is needed to use the
                     plugin within a Application CR.
                   properties:
+                    displayName:
+                      type: string
                     elasticsearch:
                       description: Spec implements the specification for an application.
                         This field is then used in the Application CR and contains,

deploy/kustomize/crds/kobs.io_applications.yaml

@@ -93,6 +93,8 @@ spec:
                       are mutually exclusive and containing the data, which is needed
                       to use the plugin within a Application CR.
                     properties:
+                      displayName:
+                        type: string
                       elasticsearch:
                         description: Spec implements the specification for an application.
                           This field is then used in the Application CR and contains,
@@ -228,6 +230,8 @@ spec:
                     exclusive and containing the data, which is needed to use the
                     plugin within a Application CR.
                   properties:
+                    displayName:
+                      type: string
                     elasticsearch:
                       description: Spec implements the specification for an application.
                         This field is then used in the Application CR and contains,

docs/plugins/getting-started.md

@@ -13,6 +13,7 @@ Plugins can also be used within an Application CR to enhance the information for
 | Field | Type | Description | Required |
 | ----- | ---- | ----------- | -------- |
 | name | string | The name of the plugin as it is defined in the [configuration file](../configuration/plugins.md). | Yes |
+| displayName | string | An optional name for the plugin tab, which should be displayed instead of the plugin name. | No |
 | elasticsearch | [Elasticsearch](elasticsearch.md#specification) (oneof) | Elasticsearch configuration for the application. | Yes |
 | jaeger | [Jaeger](jaeger.md#specification) (oneof) | Jaeger configuration for the application. | Yes |
 | prometheus | [Prometheus](prometheus.md#specification) (oneof) | Prometheus configuration for the application. | Yes |

proto/plugins.proto

@@ -34,7 +34,8 @@ message PluginShort {
 // is needed to use the plugin within a Application CR.
 message Plugin {
   string name = 1;
-  prometheus.Spec prometheus = 2;
-  elasticsearch.Spec elasticsearch = 3;
-  jaeger.Spec jaeger = 4;
+  string displayName = 2;
+  prometheus.Spec prometheus = 3;
+  elasticsearch.Spec elasticsearch = 4;
+  jaeger.Spec jaeger = 5;
 }