[app] Add "inisights" panel

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)
 

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.

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<IInsightProps> = ({
+  satellite,
+  cluster,
+  namespace,
+  name,
+  times,
+}: IInsightProps) => {
+  const { isError, isLoading, error, data, refetch } = useQuery<IApplication, Error>(
+    ['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 (
+      <div className="pf-u-text-align-center">
+        <Spinner />
+      </div>
+    );
+  }
+
+  if (isError) {
+    return (
+      <Alert
+        variant={AlertVariant.danger}
+        title="Could not get insights"
+        actionLinks={
+          <React.Fragment>
+            <AlertActionLink onClick={(): Promise<QueryObserverResult<IApplication, Error>> => refetch()}>
+              Retry
+            </AlertActionLink>
+          </React.Fragment>
+        }
+      >
+        <p>{error?.message}</p>
+      </Alert>
+    );
+  }
+
+  if (!data || !data.insights || data.insights.length === 0) {
+    return null;
+  }
+
+  return (
+    <Flex direction={{ default: 'column' }}>
+      {data.insights.map((insight, index) => (
+        <FlexItem key={insight.title} style={index !== 0 ? { marginTop: '16px' } : undefined}>
+          <ApplicationDetailsChart insight={insight} times={times} />
+        </FlexItem>
+      ))}
+    </Flex>
+  );
+};
+
+export default Insights;

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<IInsightsPanelProps> = ({
+  title,
+  description,
+  options,
+  times,
+}: IInsightsPanelProps) => {
+  if (options && options.satellite && options.cluster && options.namespace && options.name && times) {
+    return (
+      <PluginPanel title={title} description={description}>
+        <Insights
+          satellite={options.satellite}
+          cluster={options.cluster}
+          namespace={options.namespace}
+          name={options.name}
+          times={times}
+        />
+      </PluginPanel>
+    );
+  }
+
+  return (
+    <PluginPanel title={title} description={description}>
+      <Alert isInline={true} variant={AlertVariant.danger} title="Invalid plugin configuration">
+        The provided options for the <b>insights</b> plugin are invalid.
+      </Alert>
+    </PluginPanel>
+  );
+};
+
+export default InsightsPanel;

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<IAppPanelProps> = ({
     );
   }
 
+  if (name === 'insights') {
+    return <InsightsPanel title={title} description={description} options={options} times={times} />;
+  }
+
   if (name === 'userapplications') {
     return <UserApplications title={title} description={description} setDetails={setDetails} />;
   }