From b4822fabcd4d83118e17e297fb35a9b1d81f6b6c Mon Sep 17 00:00:00 2001
From: vargburz <vargburz@corpglory.com>
Date: Tue, 31 Oct 2023 17:03:05 +0300
Subject: [PATCH] add root page

---
 src/components/DescriptionPanel.tsx | 32 ++++++++++++++---------------
 src/module.ts                       | 16 +++++++++------
 2 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/src/components/DescriptionPanel.tsx b/src/components/DescriptionPanel.tsx
index f8eeab8..4d19fe5 100644
--- a/src/components/DescriptionPanel.tsx
+++ b/src/components/DescriptionPanel.tsx
@@ -1,8 +1,8 @@
 import { KentikAPI } from '../datasource/kentik_api';
 
-import { getBackendSrv } from '@grafana/runtime';
+import { getBackendSrv, locationService } from '@grafana/runtime';
 import { PanelProps, GrafanaTheme2 } from '@grafana/data';
-import { HorizontalGroup, VerticalGroup, useStyles2 } from '@grafana/ui';
+import { Button, useStyles2 } from '@grafana/ui';
 import React, { FC, useEffect, useState } from 'react';
 
 import { css } from '@emotion/css';
@@ -31,28 +31,20 @@ export const DescriptionPanel: FC<Props> = () => {
     });
   }
 
+  const handleTopTalkersClick = () => {
+    locationService.push('/d/NS58GIo71/kentik-top-talkers');
+  };
+
   return (
-    <div>
+    <div className={styles.container}>
       <img className={styles.image} src="public/plugins/kentik-connect-app/img/kentik_logo.png" />
-      <p>
+      <p className={styles.descriptionText}>
         Kentik Connect Pro for Grafana allows you to quickly and easily add network activity visibility metrics to your
         Grafana dashboard. By leveraging the power of Kentik’s monitoring SaaS, you can enjoy rich, actionable insights
         into consumers of network bandwidth and anomalies that can affect application or service performance.
       </p>
       <div className={styles.actionsContainer}>
-        <VerticalGroup>
-          <div>Complete:</div>
-          <HorizontalGroup>
-            <i className={styles.successIcon + ' icon-gf icon-gf-check'}></i>
-            <span className={styles.successLine}>Install Kentik Connect for Grafana.</span>
-          </HorizontalGroup>
-          {state.devices.length > 0 && (
-            <HorizontalGroup>
-              <i className={styles.successIcon + ' icon-gf icon-gf-check'}></i>
-              <span className={styles.successLine}>Add your first device.</span>
-            </HorizontalGroup>
-          )}
-        </VerticalGroup>
+        <Button variant={'primary'} fill={'text'} onClick={handleTopTalkersClick}>Kentik Top Talkers</Button>
       </div>
     </div>
   );
@@ -66,6 +58,9 @@ const getStyles = (theme: GrafanaTheme2) => ({
     width: 150px;
     margin-bottom: 10px;
   `,
+  container: css`
+    padding: 16px;
+  `,
   actionsContainer: css`
     margin-left: 16px;
   `,
@@ -79,4 +74,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
   successLine: css`
     text-decoration: line-through;
   `,
+  descriptionText: css`
+    max-width: 600px;
+  `,
 });
diff --git a/src/module.ts b/src/module.ts
index 0e13e58..853e65e 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -1,3 +1,4 @@
+import { DescriptionPanel } from 'components/DescriptionPanel';
 import { AppConfig } from './components/AppConfig';
 
 import './styles/dark.scss';
@@ -11,9 +12,12 @@ loadPluginCss({
   light: 'plugins/kentik-connect-app/styles/light.css',
 });
 
-export const plugin = new AppPlugin<{}>().addConfigPage({
-  title: 'Configuration',
-  icon: 'cog',
-  body: AppConfig,
-  id: 'configuration',
-});
+export const plugin = new AppPlugin<{}>()
+  // @ts-ignore
+  .setRootPage(DescriptionPanel)
+  .addConfigPage({
+    title: 'Configuration',
+    icon: 'cog',
+    body: AppConfig,
+    id: 'configuration',
+  });