New Plugin Configuration steps

[nshvr]

Hi Team,

Kindly share configuration documents with steps to configure the new Plugin which will be useful to configure and test the new plugin.
We implemented a new plugin but we are not able to integrate it with kobs. Maybe we are missing some configuration ?.Please share detailed configuration steps.

Thanks,
Harry

[ricoberger]

Hi @nshvr, information about how to develop a plugin can be found in the following file develop-a-plugin.md.

To integrate your plugin you can use the kobsio/app template. More information on how to add a plugin there can be found here: https://kobs.io/contributing/using-the-kobsio-app/

I also create a plugin, to rework these parts of the documentation, please let me know what is still missing so I can add the missing parts in #208.

[AkshayDubey29]

@ricoberger It seems something is missing in the document after adding in index.tsx and in plugins.GO we are getting the below error:

package plugins

import (
	"net/http"

	"github.com/kobsio/kobs/pkg/api/clusters"
	"github.com/kobsio/kobs/pkg/api/plugins/plugin"

	"github.com/go-chi/chi/v5"
	"github.com/go-chi/render"

	// Import all plugins, which should be used with the kobs instance. By default this are all first party plugins from
	// the plugins folder.
	//"github.com/kobsio/kobs/plugins/applications"
	//"github.com/kobsio/kobs/plugins/clickhouse"
	//"github.com/kobsio/kobs/plugins/dashboards"
	//"github.com/kobsio/kobs/plugins/elasticsearch"
	//"github.com/kobsio/kobs/plugins/flux"
	//"github.com/kobsio/kobs/plugins/jaeger"
	//"github.com/kobsio/kobs/plugins/kiali"
	//"github.com/kobsio/kobs/plugins/markdown"
	//"github.com/kobsio/kobs/plugins/opsgenie"
	//"github.com/kobsio/kobs/plugins/prometheus"
	//"github.com/kobsio/kobs/plugins/resources"
	//"github.com/kobsio/kobs/plugins/rss"
	//"github.com/kobsio/kobs/plugins/sql"
	//"github.com/kobsio/kobs/plugins/teams"
	//"github.com/kobsio/kobs/plugins/users"
	"github.com/kobsio/app/pkg/plugins/helloworld"
        "github.com/AkshayDubey29/plugin-splunk/app/pkg/splunk"
)

// Config holds the configuration for all plugins. We have to add the configuration for all the imported plugins.
type Config struct {
	//Applications  applications.Config  `json:"applications"`
	//Clickhouse    clickhouse.Config    `json:"clickhouse"`
	//Dashboards    dashboards.Config    `json:"dashboards"`
	//Elasticsearch elasticsearch.Config `json:"elasticsearch"`
	//Flux          flux.Config          `json:"flux"`
	//Jaeger        jaeger.Config        `json:"jaeger"`
	//Kiali         kiali.Config         `json:"kiali"`
	//Markdown      markdown.Config      `json:"markdown"`
	//Opsgenie      opsgenie.Config      `json:"opsgenie"`
	//Prometheus    prometheus.Config    `json:"prometheus"`
	//Resources     resources.Config     `json:"resources"`
	//RSS           rss.Config           `json:"rss"`
	//SQL           sql.Config           `json:"sql"`
	//Teams         teams.Config         `json:"teams"`
	//Users         users.Config         `json:"users"`
        splunkPlugin    splunk.Config        `json:"splunk"`

	HelloWorld helloworld.Config `json:"helloworld"`
}

// Router implements the router for the plugins package. This only registeres one route which is used to return all the
// configured plugins.
type Router struct {
	*chi.Mux
	plugins *plugin.Plugins
}

// getPlugins returns all registered plugin instances.
func (router *Router) getPlugins(w http.ResponseWriter, r *http.Request) {
	render.JSON(w, r, router.plugins)
}

// Register is used to register all api routes for plugins.
func Register(clusters *clusters.Clusters, config Config) chi.Router {
	router := Router{
		chi.NewRouter(),
		&plugin.Plugins{},
	}

	router.Get("/", router.getPlugins)

	// Register all plugins
	//router.Mount(resources.Route, resources.Register(clusters, router.plugins, config.Resources))
	//router.Mount(applications.Route, applications.Register(clusters, router.plugins, config.Applications))
	//router.Mount(teams.Route, teams.Register(clusters, router.plugins, config.Teams))
	//router.Mount(users.Route, users.Register(clusters, router.plugins, config.Users))
	//router.Mount(dashboards.Route, dashboards.Register(clusters, router.plugins, config.Dashboards))
	//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(kiali.Route, kiali.Register(clusters, router.plugins, config.Kiali))
	//router.Mount(flux.Route, flux.Register(clusters, router.plugins, config.Flux))
	//router.Mount(opsgenie.Route, opsgenie.Register(clusters, router.plugins, config.Opsgenie))
	//router.Mount(clickhouse.Route, clickhouse.Register(clusters, router.plugins, config.Clickhouse))
	//router.Mount(sql.Route, sql.Register(clusters, router.plugins, config.SQL))
	//router.Mount(markdown.Route, markdown.Register(clusters, router.plugins, config.Markdown))
	//router.Mount(rss.Route, rss.Register(clusters, router.plugins, config.RSS))
        router.Mount(splunk.Route, splunk.Register(clusters, router.plugins, config.Splunk))
	router.Mount(helloworld.Route, helloworld.Register(clusters, router.plugins, config.HelloWorld))

	return router
}


```tsx
import React from 'react';
import ReactDOM from 'react-dom';

import './index.css';

import { App } from '@kobsio/plugin-core';

import helloWorldPlugin from './plugins/helloworld';
import splunkPlugin from './plugins/splunk';

ReactDOM.render(
  <React.StrictMode>
    <App plugins={{
      ...resourcesPlugin,
      ...teamsPlugin,
      ...usersPlugin,
      ...applicationsPlugin,
      ...dashboardsPlugin,
      ...prometheusPlugin,
      ...elasticsearchPlugin,
      ...jaegerPlugin,
      ...kialiPlugin,
      ...fluxPlugin,
      ...opsgeniePlugin,
      ...markdownPlugin,
      ...rssPlugin,
      ...clickhousePlugin,
      ...sqlPlugin,
      ...helloWorldPlugin,
      ...splunkPlugin,
    }} />
  </React.StrictMode>,
  document.getElementById('root')
);

[AkshayDubey29]

Tried to add explicitly but didn't work, is there anything needs to be added?

[ricoberger]

Hi @AkshayDubey29, I think the import path in the plugins.go is wrong, can you try the following please:

• In cmd/kobs/plugins/plugins.go use github.com/kobsio/app/pkg/plugins/splunk as import.
• In pkg/plugins/splunk/splunk.go use github.com/kobsio/app/pkg/plugins/splunk/pkg/instance as import.

[AkshayDubey29]

Do you know why are we getting this error now?
We are using https://github.com/kobsio/app template to build the plugin,

16:40:47 $ react-scripts build
16:40:50 Creating an optimized production build...
16:43:29 Failed to compile.
16:43:29
16:43:29 /kobs/app/src/plugins/splunk/components/page/PageToolbar.tsx
16:43:29 TypeScript error in /kobs/app/src/plugins/splunk/components/page/PageToolbar.tsx(63,9):
16:43:29 Property 'time' is missing in type '{ timeEnd: number; timeStart: number; }' but required in type 'IPluginTimes'. TS2741
16:43:29
16:43:29 61 | ...tmpData,
16:43:29 62 | fields: fields,
16:43:29 > 63 | times: { timeEnd: timeEnd, timeStart: timeStart },
16:43:29 | ^
16:43:29 64 | });
16:43:29 65 | }
16:43:29 66 |
16:43:29

[ricoberger]

There was a breaking change introduced in #181, which isn't released yet.

To fix this issue you can add the time property or you can wait for the next release v0.7.0 where this property is removed.

I'm currently working on another plugin, after that I can trigger a new release. Maybe I can get this done today in the afternoon.

[ricoberger]

I release v0.7.0 and updated the kobsio/app template. So if you update all your packages to v0.7.0 the times property shouldn't be required anymore.

[AkshayDubey29]

Thank you :)

I tried but got the below error, might be I am missing some config

[ricoberger]

Did you run go mod tidy in the root of your repository?

If you can provide me a link to your repository I can also have a detailed look if you want.

[AkshayDubey29]

I sincerely apologize @ricoberger But we are building this to internal network which I suppose you cannot access :(

We are trying to build the whole application internal to our network, but facing issues

[AkshayDubey29]

@ricoberger Any idea why are we getting this error, we have copied this folder https://github.com/kobsio/kobs/tree/main/plugins/core to https://github.com/kobsio/app/tree/main/app/src/plugins to build our own version of kobs:

[ricoberger]

I think it would be better to move the content from the https://github.com/kobsio/kobs/tree/main/plugins/core/src folder to a folder named https://github.com/kobsio/app/tree/main/app/src/plugins/core. So that the https://github.com/kobsio/kobs/blob/main/plugins/core/src/index.ts file is then at https://github.com/kobsio/app/blob/main/app/src/plugins/core/index.ts.

Then you can import everything from the core package via import { <COMPONENT> } from './plugins/core';.

Please keep in mind that you also have to add all the dependencies from https://github.com/kobsio/kobs/blob/main/plugins/core/package.json to your package.json.

[AkshayDubey29]

You mean to say in this package.json https://github.com/kobsio/app/blob/main/app/package.json right?

[AkshayDubey29]

Might be this is happening because of dependency only: