Add markdown plugin

.github/workflows/helm.yaml

@@ -4,6 +4,8 @@ on:
   push:
     paths:
       - 'deploy/helm/**'
+    tags-ignore:
+      - '**'
 
 jobs:
   helm:

CHANGELOG.md

@@ -10,6 +10,8 @@ NOTE: As semantic versioning states all 0.y.z releases can contain breaking chan
 
 ### Added
 
+- [#81](https://github.com/kobsio/kobs/pull/81): Add markdown plugin, which can be used to render a markdown formatted text in a dashboard panel.
+
 ### Fixed
 
 ### Changed

app/package.json

@@ -9,6 +9,7 @@
     "@kobsio/plugin-dashboards": "*",
     "@kobsio/plugin-elasticsearch": "*",
     "@kobsio/plugin-jaeger": "*",
+    "@kobsio/plugin-markdown": "*",
     "@kobsio/plugin-prometheus": "*",
     "@kobsio/plugin-resources": "*",
     "@kobsio/plugin-teams": "*",

app/src/index.tsx

@@ -11,6 +11,7 @@ import dashboardsPlugin from '@kobsio/plugin-dashboards';
 import prometheusPlugin from '@kobsio/plugin-prometheus';
 import elasticsearchPlugin from '@kobsio/plugin-elasticsearch';
 import jaegerPlugin from '@kobsio/plugin-jaeger';
+import markdownPlugin from '@kobsio/plugin-markdown';
 
 ReactDOM.render(
   <React.StrictMode>
@@ -22,6 +23,7 @@ ReactDOM.render(
       ...prometheusPlugin,
       ...elasticsearchPlugin,
       ...jaegerPlugin,
+      ...markdownPlugin,
     }} />
   </React.StrictMode>,
   document.getElementById('root')

docs/plugins/markdown.md

@@ -0,0 +1,54 @@
+# Markdown
+
+The markdown plugin can be used to show a markdown formatted text on a dashboard.
+
+![Markdown Example](assets/markdown.png)
+
+## Options
+
+The following options can be used for a panel with the markdown plugin:
+
+| Field | Type | Description | Required |
+| ----- | ---- | ----------- | -------- |
+| text | string | The markdown formatted text, which is shown within a panel. | Yes |
+
+```yaml
+---
+apiVersion: kobs.io/v1beta1
+kind: Dashboard
+spec:
+  rows:
+    - size: -1
+      panels:
+        - title: Bookinfo Documentation
+          plugin:
+            name: markdown
+            options:
+              text: |
+                The application displays information about a
+                book, similar to a single catalog entry of an online book store. Displayed
+                on the page is a description of the book, book details (ISBN, number of
+                pages, and so on), and a few book reviews.
+
+                The Bookinfo application is broken into four separate microservices:
+
+                * `productpage`. The `productpage` microservice calls the `details` and `reviews` microservices to populate the page.
+                * `details`. The `details` microservice contains book information.
+                * `reviews`. The `reviews` microservice contains book reviews. It also calls the `ratings` microservice.
+                * `ratings`. The `ratings` microservice contains book ranking information that accompanies a book review.
+
+                There are 3 versions of the `reviews` microservice:
+
+                * Version v1 doesn't call the `ratings` service.
+                * Version v2 calls the `ratings` service, and displays each rating as 1 to 5 black stars.
+                * Version v3 calls the `ratings` service, and displays each rating as 1 to 5 red stars.
+
+                The end-to-end architecture of the application is shown below.
+
+                ![Bookinfo Application without Istio](https://istio.io/latest/docs/examples/bookinfo/noistio.svg)
+
+                This application is polyglot, i.e., the microservices are written in different languages.
+                It’s worth noting that these services have no dependencies on Istio, but make an interesting
+                service mesh example, particularly because of the multitude of services, languages and versions
+                for the `reviews` service.
+```

mkdocs.yml

@@ -37,6 +37,7 @@ nav:
       - Dashboards: plugins/dashboards.md
       - Elasticsearch: plugins/elasticsearch.md
       - Jaeger: plugins/jaeger.md
+      - Markdown: plugins/markdown.md
       - Prometheus: plugins/prometheus.md
       - Resources: plugins/resources.md
       - Teams: plugins/teams.md

pkg/api/plugins/plugins.go

@@ -15,6 +15,7 @@ import (
 	"github.com/kobsio/kobs/plugins/dashboards"
 	"github.com/kobsio/kobs/plugins/elasticsearch"
 	"github.com/kobsio/kobs/plugins/jaeger"
+	"github.com/kobsio/kobs/plugins/markdown"
 	"github.com/kobsio/kobs/plugins/prometheus"
 	"github.com/kobsio/kobs/plugins/resources"
 	"github.com/kobsio/kobs/plugins/teams"
@@ -29,6 +30,7 @@ type Config struct {
 	Prometheus    prometheus.Config    `yaml:"prometheus"`
 	Elasticsearch elasticsearch.Config `yaml:"elasticsearch"`
 	Jaeger        jaeger.Config        `yaml:"jaeger"`
+	Markdown      markdown.Config      `yaml:"markdown"`
 }
 
 // Router implements the router for the plugins package. This only registeres one route which is used to return all the
@@ -60,6 +62,7 @@ func Register(clusters *clusters.Clusters, config Config) chi.Router {
 	router.Mount(prometheus.Route, prometheus.Register(clusters, router.plugins, config.Prometheus))
 	router.Mount(elasticsearch.Route, elasticsearch.Register(clusters, router.plugins, config.Elasticsearch))
 	router.Mount(jaeger.Route, jaeger.Register(clusters, router.plugins, config.Jaeger))
+	router.Mount(markdown.Route, markdown.Register(clusters, router.plugins, config.Markdown))
 
 	return router
 }

plugins/core/src/components/plugin/PluginPage.tsx

@@ -23,7 +23,7 @@ export const PluginPage: React.FunctionComponent = () => {
       ? pluginsContext.components[pluginDetails.type].page
       : undefined;
 
-  if (!pluginDetails || !Component) {
+  if (!pluginDetails) {
     return (
       <PageSection>
         <Alert
@@ -35,16 +35,30 @@ export const PluginPage: React.FunctionComponent = () => {
             </React.Fragment>
           }
         >
-          {pluginDetails ? (
-            <p>
-              The plugin <b>{pluginDetails.displayName}</b> of tpye <b>{pluginDetails.type}</b> does not implements a
-              page component.
-            </p>
-          ) : (
-            <p>
-              The plugin <b>{params.name}</b> was not found.
-            </p>
-          )}
+          <p>
+            The plugin <b>{params.name}</b> was not found.
+          </p>
+        </Alert>
+      </PageSection>
+    );
+  }
+
+  if (!Component) {
+    return (
+      <PageSection>
+        <Alert
+          variant={AlertVariant.info}
+          title="The Plugin doesn't have a page component"
+          actionLinks={
+            <React.Fragment>
+              <AlertActionLink onClick={(): void => history.push('/')}>Home</AlertActionLink>
+            </React.Fragment>
+          }
+        >
+          <p>
+            The plugin <b>{pluginDetails.displayName}</b> of tpye <b>{pluginDetails.type}</b> does not implements a page
+            component.
+          </p>
         </Alert>
       </PageSection>
     );

plugins/markdown/markdown.go

@@ -0,0 +1,44 @@
+package markdown
+
+import (
+	"github.com/kobsio/kobs/pkg/api/clusters"
+	"github.com/kobsio/kobs/pkg/api/plugins/plugin"
+
+	"github.com/go-chi/chi/v5"
+	"github.com/sirupsen/logrus"
+)
+
+// Route is the route under which the plugin should be registered in our router for the rest api.
+const Route = "/markdown"
+
+var (
+	log = logrus.WithFields(logrus.Fields{"package": "markdown"})
+)
+
+// Config is the structure of the configuration for the markdown plugin.
+type Config struct{}
+
+// Router implements the router for the resources plugin, which can be registered in the router for our rest api.
+type Router struct {
+	*chi.Mux
+	clusters *clusters.Clusters
+	config   Config
+}
+
+// Register returns a new router which can be used in the router for the kobs rest api.
+func Register(clusters *clusters.Clusters, plugins *plugin.Plugins, config Config) chi.Router {
+	plugins.Append(plugin.Plugin{
+		Name:        "markdown",
+		DisplayName: "Markdown",
+		Description: "Render static text using Markdown.",
+		Type:        "markdown",
+	})
+
+	router := Router{
+		chi.NewRouter(),
+		clusters,
+		config,
+	}
+
+	return router
+}

plugins/markdown/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@kobsio/plugin-markdown",
+  "version": "0.0.0",
+  "license": "MIT",
+  "private": false,
+  "main": "./lib/index.js",
+  "module": "./lib-esm/index.js",
+  "types": "./lib/index.d.ts",
+  "scripts": {
+    "plugin": "tsc && tsc --build tsconfig.esm.json && cp -r src/assets lib && cp -r src/assets lib-esm"
+  },
+  "dependencies": {
+    "@kobsio/plugin-core": "*",
+    "@patternfly/react-core": "^4.128.2",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-markdown": "^6.0.2",
+    "typescript": "^4.3.4"
+  }
+}

plugins/markdown/src/components/panel/Markdown.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import { TextContent } from '@patternfly/react-core';
+
+interface IMarkdownProps {
+  text: string;
+}
+
+const Markdown: React.FunctionComponent<IMarkdownProps> = ({ text }: IMarkdownProps) => {
+  return (
+    <TextContent>
+      <ReactMarkdown linkTarget="_blank">{text}</ReactMarkdown>
+    </TextContent>
+  );
+};
+
+export default Markdown;

plugins/markdown/src/components/panel/Panel.tsx

@@ -0,0 +1,40 @@
+import React, { memo } from 'react';
+
+import { IPluginPanelProps, PluginCard, PluginOptionsMissing } from '@kobsio/plugin-core';
+import { IPanelOptions } from '../../utils/interfaces';
+import Markdown from './Markdown';
+
+interface IPanelProps extends IPluginPanelProps {
+  options?: IPanelOptions;
+}
+
+export const Panel: React.FunctionComponent<IPanelProps> = ({ title, description, options }: IPanelProps) => {
+  if (!options || !options.text) {
+    return (
+      <PluginOptionsMissing
+        title={title}
+        message="Options for Markdown panel are missing or invalid"
+        details="The panel doesn't contain the a text property."
+        documentation=""
+      />
+    );
+  }
+
+  return (
+    <PluginCard title={title} description={description}>
+      <Markdown text={options.text} />
+    </PluginCard>
+  );
+};
+
+export default memo(Panel, (prevProps, nextProps) => {
+  if (
+    prevProps.title === nextProps.title &&
+    prevProps.description === nextProps.description &&
+    prevProps.options?.text === nextProps.options?.text
+  ) {
+    return true;
+  }
+
+  return false;
+});

plugins/markdown/src/index.ts

@@ -0,0 +1,14 @@
+import { IPluginComponents } from '@kobsio/plugin-core';
+
+import icon from './assets/icon.png';
+
+import Panel from './components/panel/Panel';
+
+const markdownPlugin: IPluginComponents = {
+  markdown: {
+    icon: icon,
+    panel: Panel,
+  },
+};
+
+export default markdownPlugin;

plugins/markdown/src/utils/interfaces.ts

@@ -0,0 +1,3 @@
+export interface IPanelOptions {
+  text?: string;
+}

plugins/markdown/tsconfig.esm.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src"],
+  "compilerOptions": {
+    "outDir": "lib-esm",
+    "module": "esnext",
+    "target": "esnext",
+    "moduleResolution": "node",
+    "lib": ["dom", "esnext"],
+    "declaration": false
+  }
+}

plugins/markdown/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "extends": "../../tsconfig.json",
+  "exclude": ["node_modules", "lib-esm", "lib"],
+  "include": ["src"],
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "outDir": "lib",
+    "declaration": true
+  }
+}