diff --git a/CHANGELOG.md b/CHANGELOG.md index 62d5f95c4..e1738f3e5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -37,6 +37,7 @@ NOTE: As semantic versioning states all 0.y.z releases can contain breaking chan - [#362](https://github.com/kobsio/kobs/pull/#362): [app] :warning: _Breaking change:_ :warning: Rename `preview` field to `insights` in Application CRD. - [#366](https://github.com/kobsio/kobs/pull/#366): [app] :warning: _Breaking change:_ :warning: Rework Go plugin architecture, to not uses Go's `plugin` mode. - [#367](https://github.com/kobsio/kobs/pull/#367): [app] Change filtering for select components, by using `item.includes(value)`. +- [#369](https://github.com/kobsio/kobs/pull/#369): [app] Add `insights` panel, to display the insights of an application within a dashboard. ## [v0.8.0](https://github.com/kobsio/kobs/releases/tag/v0.8.0) (2022-03-24) diff --git a/docs/plugins/assets/plugins-insights.png b/docs/plugins/assets/plugins-insights.png new file mode 100644 index 000000000..492f2c217 Binary files /dev/null and b/docs/plugins/assets/plugins-insights.png differ diff --git a/docs/plugins/index.md b/docs/plugins/index.md index eb7b56082..8dfc3ebe8 100644 --- a/docs/plugins/index.md +++ b/docs/plugins/index.md @@ -59,6 +59,87 @@ plugin: name: "<% $.name %>" ``` +### `insights` + +The `insights` plugin can be used to display the insights of an application within a dashboard. The plugin requires the following options: + +| Field | Type | Description | Required | +| ----- | ---- | ----------- | -------- | +| satellite | string | The satellite of the application. | Yes | +| cluster | string | The cluster of the application. | Yes | +| namespace | string | The namespace of the application. | Yes | +| name | string | The name of the application | Yes | + +```yaml +plugin: + name: insights + type: app + options: + satellite: "<% $.satellite %>" + cluster: "<% $.cluster %>" + namespace: "<% $.namespace %>" + name: "<% $.name %>" +``` + +??? note "Example" + + ```yaml + apiVersion: kobs.io/v1 + kind: Application + metadata: + name: example-application + namespace: kobs + spec: + dashboards: + - title: Inisghts + inline: + rows: + - size: -1 + panels: + - title: thanos-compactor + colSpan: 3 + plugin: + name: insights + type: app + options: + satellite: "<% $.satellite %>" + cluster: "<% $.cluster %>" + namespace: "monitoring" + name: "thanos-compactor" + - title: thanos-querier + colSpan: 3 + plugin: + name: insights + type: app + options: + satellite: "<% $.satellite %>" + cluster: "<% $.cluster %>" + namespace: "monitoring" + name: "thanos-querier" + - title: thanos-ruler + colSpan: 3 + plugin: + name: insights + type: app + options: + satellite: "<% $.satellite %>" + cluster: "<% $.cluster %>" + namespace: "monitoring" + name: "thanos-ruler" + - title: thanos-store + colSpan: 3 + plugin: + name: insights + type: app + options: + satellite: "<% $.satellite %>" + cluster: "<% $.cluster %>" + namespace: "monitoring" + name: "thanos-store" + ``` + +![Insights](assets/plugins-insights.png) + ### `userapplications` The `userapplications` plugin can be used to display the applications which are owned by the teams a user is a member of. This plugin doesn't require any options and is inteded to be used within a User CR to customize a users profile page. diff --git a/plugins/app/src/components/applications/Insights.tsx b/plugins/app/src/components/applications/Insights.tsx new file mode 100644 index 000000000..e7039a2d4 --- /dev/null +++ b/plugins/app/src/components/applications/Insights.tsx @@ -0,0 +1,90 @@ +import { Alert, AlertActionLink, AlertVariant, Flex, FlexItem, Spinner } from '@patternfly/react-core'; +import { QueryObserverResult, useQuery } from 'react-query'; +import React from 'react'; + +import ApplicationDetailsChart from './ApplicationDetailsChart'; +import { IApplication } from '../../crds/application'; +import { ITimes } from '@kobsio/shared'; + +interface IInsightProps { + satellite?: string; + cluster?: string; + namespace?: string; + name?: string; + times: ITimes; +} + +const Insights: React.FunctionComponent = ({ + satellite, + cluster, + namespace, + name, + times, +}: IInsightProps) => { + const { isError, isLoading, error, data, refetch } = useQuery( + ['app/applications/application', satellite, cluster, namespace, name], + async () => { + const response = await fetch( + `/api/applications/application?id=${encodeURIComponent( + `/satellite/${satellite}/cluster/${cluster}/namespace/${namespace}/name/${name}`, + )}`, + { + method: 'get', + }, + ); + const json = await response.json(); + + if (response.status >= 200 && response.status < 300) { + return json; + } else { + if (json.error) { + throw new Error(json.error); + } else { + throw new Error('An unknown error occured'); + } + } + }, + ); + + if (isLoading) { + return ( +
+ +
+ ); + } + + if (isError) { + return ( + + > => refetch()}> + Retry + + + } + > +

{error?.message}

+
+ ); + } + + if (!data || !data.insights || data.insights.length === 0) { + return null; + } + + return ( + + {data.insights.map((insight, index) => ( + + + + ))} + + ); +}; + +export default Insights; diff --git a/plugins/app/src/components/applications/InsightsPanel.tsx b/plugins/app/src/components/applications/InsightsPanel.tsx new file mode 100644 index 000000000..84e3eaa14 --- /dev/null +++ b/plugins/app/src/components/applications/InsightsPanel.tsx @@ -0,0 +1,50 @@ +import { Alert, AlertVariant } from '@patternfly/react-core'; +import React from 'react'; + +import { ITimes, PluginPanel } from '@kobsio/shared'; +import Insights from './Insights'; + +interface IInsightsOptions { + satellite?: string; + cluster?: string; + namespace?: string; + name?: string; +} + +interface IInsightsPanelProps { + title: string; + description?: string; + options?: IInsightsOptions; + times?: ITimes; +} + +const InsightsPanel: React.FunctionComponent = ({ + title, + description, + options, + times, +}: IInsightsPanelProps) => { + if (options && options.satellite && options.cluster && options.namespace && options.name && times) { + return ( + + + + ); + } + + return ( + + + The provided options for the insights plugin are invalid. + + + ); +}; + +export default InsightsPanel; diff --git a/plugins/app/src/components/plugins/AppPanel.tsx b/plugins/app/src/components/plugins/AppPanel.tsx index 309fee0f6..608a1badc 100644 --- a/plugins/app/src/components/plugins/AppPanel.tsx +++ b/plugins/app/src/components/plugins/AppPanel.tsx @@ -5,6 +5,7 @@ import { ITimes, PluginPanel } from '@kobsio/shared'; import ApplicationTopologyPanel from '../topology/ApplicationTopologyPanel'; import ApplicationsPanel from '../applications/ApplicationsPanel'; import DashboardsPanel from '../dashboards/DashboardsPanel'; +import InsightsPanel from '../applications/InsightsPanel'; import Markdown from '../markdown/Markdown'; import ResourcesPanelWrapper from '../resources/ResourcesPanelWrapper'; import UserApplications from '../profile/UserApplications'; @@ -40,6 +41,10 @@ const AppPanel: React.FunctionComponent = ({ ); } + if (name === 'insights') { + return ; + } + if (name === 'userapplications') { return ; }