feat(adoption-insights): add frontend plugin for adoption insights (#464)

* feat(adoption-insights): add frontend plugin for adoption insights

* resolved the type issue

* updated unit tests

* add github backend module

* remove unwanted column techdocs

* remove unwanted column techdocs

Author: Eswaraiahsapram

workspaces/adoption-insights/packages/app/package.json

@@ -45,6 +45,8 @@
     "@backstage/theme": "^0.6.4",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
+    "@mui/icons-material": "5.16.4",
+    "@red-hat-developer-hub/backstage-plugin-adoption-insights": "workspace:^",
     "@red-hat-developer-hub/backstage-plugin-analytics-module-adoption-insights": "workspace:^",
     "react": "^18.0.2",
     "react-dom": "^18.0.2",

workspaces/adoption-insights/packages/app/src/App.tsx

@@ -51,6 +51,8 @@ import { AppRouter, FlatRoutes } from '@backstage/core-app-api';
 import { CatalogGraphPage } from '@backstage/plugin-catalog-graph';
 import { RequirePermission } from '@backstage/plugin-permission-react';
 import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha';
+import { AdoptionInsightsPage } from '@red-hat-developer-hub/backstage-plugin-adoption-insights';
+import { githubAuthApiRef } from '@backstage/core-plugin-api';
 
 const app = createApp({
   apis,
@@ -72,7 +74,22 @@ const app = createApp({
     });
   },
   components: {
-    SignInPage: props => <SignInPage {...props} auto providers={['guest']} />,
+    SignInPage: (props: any) => (
+      <SignInPage
+        {...props}
+        align="center"
+        auto
+        providers={[
+          'guest',
+          {
+            id: 'github-auth-provider',
+            title: 'GitHub',
+            message: 'Sign in using GitHub',
+            apiRef: githubAuthApiRef,
+          },
+        ]}
+      />
+    ),
   },
 });
 
@@ -110,6 +127,7 @@ const routes = (
     </Route>
     <Route path="/settings" element={<UserSettingsPage />} />
     <Route path="/catalog-graph" element={<CatalogGraphPage />} />
+    <Route path="/adoption-insights" element={<AdoptionInsightsPage />} />
   </FlatRoutes>
 );
 

workspaces/adoption-insights/packages/app/src/components/Root/Root.tsx

@@ -19,6 +19,7 @@ import HomeIcon from '@material-ui/icons/Home';
 import ExtensionIcon from '@material-ui/icons/Extension';
 import LibraryBooks from '@material-ui/icons/LibraryBooks';
 import CreateComponentIcon from '@material-ui/icons/AddCircleOutline';
+import QueryStatsIcon from '@mui/icons-material/QueryStats';
 import LogoFull from './LogoFull';
 import LogoIcon from './LogoIcon';
 import {
@@ -90,6 +91,11 @@ export const Root = ({ children }: PropsWithChildren<{}>) => (
         <SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" />
         <SidebarItem icon={LibraryBooks} to="docs" text="Docs" />
         <SidebarItem icon={CreateComponentIcon} to="create" text="Create..." />
+        <SidebarItem
+          icon={QueryStatsIcon}
+          to="adoption-insights"
+          text="Adoption Insights"
+        />
         {/* End global nav */}
         <SidebarDivider />
         <SidebarScrollWrapper>

workspaces/adoption-insights/packages/backend/src/index.ts

@@ -64,4 +64,6 @@ backend.add(
   import('@red-hat-developer-hub/backstage-plugin-adoption-insights-backend'),
 );
 
+backend.add(import('@backstage/plugin-auth-backend-module-github-provider'));
+
 backend.start();

workspaces/adoption-insights/plugins/adoption-insights/README.md

@@ -1,8 +1,6 @@
-# adoption-insights
+# Adoption Insights Plugin for Backstage
 
-Welcome to the adoption insights plugin!
-
-This plugin helps gather user analytics data from Backstage and generates a dashboard that provides insights into the platform's adoption.
+The Adoption Insights plugin provides an interactive dashboard to visualize analytics data in Backstage. This frontend plugin integrates with the Adoption Insights backend to deliver insights into adoption trends and usage statistics.
 
 ## Getting started
 
@@ -11,3 +9,56 @@ Your plugin has been added to the example app in this repository, meaning you'll
 You can also serve the plugin in isolation by running `yarn start` in the plugin directory.
 This method of serving the plugin provides quicker iteration speed and a faster startup and hot reloads.
 It is only meant for local development, and the setup for it can be found inside the [/dev](./dev) directory.
+
+## For Administrators
+
+### Prerequisites
+
+Before installing the frontend plugin, ensure that the Adoption Insights backend is integrated into your Backstage instance. Follow the [Adoption Insights backend plugin README](https://github.com/redhat-developer/rhdh-plugins/blob/main/workspaces/adoption-insights/plugins/adoption-insights-backend/README.md) for setup instructions.
+
+### Installation
+
+To install the Adoption Insights plugin, run the following command:
+
+```sh
+yarn workspace app add @red-hat-developer-hub/backstage-plugin-adoption-insights
+```
+
+### Configuration
+
+1. Add the **Adoption Insights** page to your Backstage application by modifying `packages/app/src/App.tsx`:
+
+   ```tsx
+   import { AdoptionInsightsPage } from '@red-hat-developer-hub/backstage-plugin-adoption-insights';
+
+   <Route path="/adoption-insights" element={<AdoptionInsightsPage />} />;
+   ```
+
+2. Add a navigation item to the Backstage sidebar by updating `packages/app/src/components/Root/Root.tsx`:
+
+   ```tsx
+   import QueryStatsIcon from '@mui/icons-material/QueryStats';
+
+   <SidebarItem
+     icon={QueryStatsIcon}
+     to="adoption-insights"
+     text="Adoption Insights"
+   />;
+   ```
+
+## For Users
+
+### Using the Adoption Insights Plugin
+
+The Adoption Insights plugin allows users to explore analytics data through an interactive dashboard.
+
+#### Prerequisites
+
+- A running Backstage application.
+- The Adoption Insights plugin is installed and configured. See [Installation](#installation) for setup instructions.
+
+#### Accessing the Plugin
+
+1. Open your Backstage application.
+2. Navigate to the **Adoption Insights** section from the sidebar.
+3. Explore and analyze adoption metrics using the interactive dashboard.

workspaces/adoption-insights/plugins/adoption-insights/dev/__data__/activeUsers.ts

@@ -0,0 +1,63 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { format, subDays, subHours, subMonths, subWeeks } from 'date-fns';
+
+export const generateHourlyData = () => {
+  return Array.from({ length: 24 }, (_, i) => {
+    const date = format(subHours(new Date(), i), 'yyyy-MM-dd HH:00');
+    const new_users = Math.floor(Math.random() * (300 - 150 + 1)) + 150; // NOSONAR
+    const returning_users = Math.floor(Math.random() * (300 - 150 + 1)) + 150; // NOSONAR
+    const total_users = new_users + returning_users;
+    return { date, total_users, new_users, returning_users };
+  }).reverse();
+};
+
+export const generateDaysData = () => {
+  return Array.from({ length: 5 }, (_, i) => {
+    const date = format(subDays(new Date(), i), 'yyyy-MM-dd');
+    const new_users = Math.floor(Math.random() * (300 - 150 + 1)) + 150; // NOSONAR
+    const returning_users = Math.floor(Math.random() * (300 - 150 + 1)) + 150; // NOSONAR
+    const total_users = new_users + returning_users;
+    return { date, total_users, new_users, returning_users };
+  }).reverse();
+};
+
+export const generateWeeksData = () => {
+  return Array.from({ length: 4 }, (_, i) => {
+    const date = format(subWeeks(new Date(), i), 'yyyy-MM-dd');
+    const new_users = Math.floor(Math.random() * (3000 - 1500 + 1)) + 1500; // NOSONAR
+    const returning_users =
+      Math.floor(Math.random() * (3000 - 1500 + 1)) + 1500; // NOSONAR
+    const total_users = new_users + returning_users;
+    return { date, total_users, new_users, returning_users };
+  }).reverse();
+};
+
+export const generateMonthsData = () => {
+  return Array.from({ length: 9 }, (_, i) => {
+    const date = format(subMonths(new Date(), i), 'yyyy-MM-dd');
+    const new_users = Math.floor(Math.random() * (9000 - 4500 + 1)) + 4500; // NOSONAR
+    const returning_users =
+      Math.floor(Math.random() * (9000 - 4500 + 1)) + 4500; // NOSONAR
+    const total_users = new_users + returning_users;
+    return { date, total_users, new_users, returning_users };
+  }).reverse();
+};
+
+export default {
+  grouping: 'weekly',
+  data: generateWeeksData(),
+};

workspaces/adoption-insights/plugins/adoption-insights/dev/__data__/catalogEntities.ts

@@ -0,0 +1,35 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export const generateCatalogEntitiesData = (n: number): any[] => {
+  const kinds = ['Component', 'API', 'System', 'Resource'];
+  const names = ['devhub', 'hg-dev-hub-starter', 'netbox', 'sample-plugin'];
+  const namespaces = ['default', 'internal', 'external'];
+
+  return Array.from({ length: n }, (_, i) => ({
+    plugin_id: (i + 1).toString(),
+    name: names[i % names.length],
+    kind: kinds[i % kinds.length],
+    last_used: new Date(
+      Date.now() - Math.random() * 1000 * 60 * 60 * 24 * 10, // NOSONAR
+    ).toISOString(),
+    count: Math.floor(Math.random() * 3000), // NOSONAR
+    namespace: namespaces[i % namespaces.length],
+  }));
+};
+
+export default {
+  data: generateCatalogEntitiesData(9),
+};

workspaces/adoption-insights/plugins/adoption-insights/dev/__data__/plugins.ts

@@ -0,0 +1,87 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { format, subDays, subHours } from 'date-fns';
+import { PluginTrend } from '../../src/types';
+
+export const generateHourlyData = () => {
+  return Array.from({ length: 24 }, (_, i) => {
+    const date = format(subHours(new Date(), i), 'yyyy-MM-dd HH:00');
+    const count = Math.floor(Math.random() * (300 - 150 + 1)) + 150; // NOSONAR
+    return { date, count };
+  }).reverse();
+};
+
+export const generateLast30DaysData = () => {
+  return Array.from({ length: 30 }, (_, i) => {
+    const date = format(subDays(new Date(), i), 'yyyy-MM-dd');
+    const count = Math.floor(Math.random() * (100 - 50 + 1)) + 50; // NOSONAR
+    return { date, count };
+  }).reverse();
+};
+
+export const mockPluginViewOne: PluginTrend = {
+  plugin_id: 'catalog',
+  visit_count: 77,
+  trend_percentage: '18.67',
+  trend: generateHourlyData(),
+};
+
+export const mockPluginViewTwo: PluginTrend = {
+  plugin_id: 'ansible',
+  visit_count: 77,
+  trend_percentage: '18.67',
+  trend: generateHourlyData(),
+};
+
+export const mockPluginViewThree: PluginTrend = {
+  plugin_id: 'argoCD',
+  visit_count: 7792,
+  trend_percentage: '-18.67',
+  trend: generateHourlyData(),
+};
+
+export const mockPluginViewFour: PluginTrend = {
+  plugin_id: 'argoCD Scaffolder',
+  visit_count: 77,
+  trend_percentage: '18.67',
+  trend: generateHourlyData(),
+};
+
+export const mockPluginViewFive: PluginTrend = {
+  plugin_id: 'tech docs',
+  visit_count: 77,
+  trend_percentage: '18.67',
+  trend: generateHourlyData(),
+};
+
+export const mockPluginViewSix: PluginTrend = {
+  plugin_id: 'catalog info',
+  visit_count: 44,
+  trend_percentage: '-66.67',
+  trend: generateHourlyData(),
+};
+
+export const mockPluginViews = {
+  grouping: 'hourly',
+  data: [
+    mockPluginViewOne,
+    mockPluginViewTwo,
+    mockPluginViewThree,
+    mockPluginViewFour,
+    mockPluginViewFive,
+    mockPluginViewSix,
+  ],
+};

workspaces/adoption-insights/plugins/adoption-insights/dev/__data__/searches.ts

@@ -0,0 +1,45 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { format, subDays, subMonths, subHours } from 'date-fns';
+
+export const generateHourlyData = () => {
+  return Array.from({ length: 24 }, (_, i) => {
+    const date = format(subHours(new Date(), i), 'yyyy-MM-dd HH:00');
+    const count = Math.floor(Math.random() * (300 - 150 + 1)) + 150; // NOSONAR
+    return { date, count };
+  }).reverse();
+};
+
+export const generateDaysData = () => {
+  return Array.from({ length: 12 }, (_, i) => {
+    const date = format(subDays(new Date(), i), 'yyyy-MM-dd');
+    const count = Math.floor(Math.random() * (300 - 150 + 1)) + 150; // NOSONAR
+    return { date, count };
+  }).reverse();
+};
+
+export const generateMonthsData = () => {
+  return Array.from({ length: 12 }, (_, i) => {
+    const date = format(subMonths(new Date(), i), 'yyyy-MM-dd');
+    const count = Math.floor(Math.random() * (3000 - 1500 + 1)) + 1500; // NOSONAR
+    return { date, count };
+  }).reverse();
+};
+
+export default {
+  grouping: 'hourly',
+  data: generateHourlyData(),
+};