Rework home page

CHANGELOG.md

@@ -77,6 +77,7 @@ NOTE: As semantic versioning states all 0.y.z releases can contain breaking chan
 - [#158](https://github.com/kobsio/kobs/pull/158): Improve Pormetheus HTTP metrics and create a metric to find the most used fields in queries.
 - [#164](https://github.com/kobsio/kobs/pull/164): Improve chart handling across plugins.
 - [#167](https://github.com/kobsio/kobs/pull/167): Improve styling across plugins.
+- [#169](https://github.com/kobsio/kobs/pull/169): Rework home page to include plugins, applications and teams.
 
 ## [v0.5.0](https://github.com/kobsio/kobs/releases/tag/v0.5.0) (2021-08-03)
 

pkg/api/plugins/plugin/plugin.go

@@ -7,6 +7,7 @@ type Plugin struct {
 	Name        string                 `json:"name"`
 	DisplayName string                 `json:"displayName"`
 	Description string                 `json:"description"`
+	Home        bool                   `json:"home"`
 	Type        string                 `json:"type"`
 	Options     map[string]interface{} `json:"options"`
 }

plugins/applications/applications.go

@@ -217,6 +217,7 @@ func Register(clusters *clusters.Clusters, plugins *plugin.Plugins, config Confi
 		Name:        "applications",
 		DisplayName: "Applications",
 		Description: "Monitor your Kubernetes workloads.",
+		Home:        true,
 		Type:        "applications",
 	})
 

plugins/applications/src/components/home/Home.tsx

@@ -0,0 +1,151 @@
+import {
+  Alert,
+  AlertActionLink,
+  AlertVariant,
+  Badge,
+  Card,
+  CardBody,
+  CardTitle,
+  Gallery,
+  GalleryItem,
+  Spinner,
+  TextInput,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem,
+} from '@patternfly/react-core';
+import { QueryObserverResult, useQuery } from 'react-query';
+import React, { useContext, useState } from 'react';
+
+import { ClustersContext, IClusterContext, IPluginPageProps, LinkWrapper, useDebounce } from '@kobsio/plugin-core';
+import { IApplication } from '../../utils/interfaces';
+
+const Home: React.FunctionComponent<IPluginPageProps> = () => {
+  const [searchTerm, setSearchTerm] = useState<string>('');
+  const debouncedSearchTerm = useDebounce(searchTerm, 500);
+  const clustersContext = useContext<IClusterContext>(ClustersContext);
+
+  const { isError, isLoading, error, data, refetch } = useQuery<IApplication[], Error>(
+    ['applications/applications', 'gallery', clustersContext.clusters],
+    async () => {
+      try {
+        const clusterParams = clustersContext.clusters.map((cluster) => `cluster=${cluster}`).join('&');
+
+        const response = await fetch(`/api/plugins/applications/applications?view=gallery&${clusterParams}`, {
+          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');
+          }
+        }
+      } catch (err) {
+        throw err;
+      }
+    },
+  );
+
+  if (isLoading) {
+    return (
+      <div className="pf-u-text-align-center">
+        <Spinner />
+      </div>
+    );
+  }
+
+  if (isError) {
+    return (
+      <Alert
+        variant={AlertVariant.danger}
+        title="Could not get applications"
+        actionLinks={
+          <React.Fragment>
+            <AlertActionLink onClick={(): Promise<QueryObserverResult<IApplication[], Error>> => refetch()}>
+              Retry
+            </AlertActionLink>
+          </React.Fragment>
+        }
+      >
+        <p>{error?.message}</p>
+      </Alert>
+    );
+  }
+
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <React.Fragment>
+      <Card>
+        <Toolbar id="applications-toolbar">
+          <ToolbarContent>
+            <ToolbarGroup style={{ alignItems: 'flex-start', width: '100%' }}>
+              <ToolbarItem style={{ width: '100%' }}>
+                <TextInput
+                  aria-label="Search"
+                  placeholder="Search"
+                  type="text"
+                  value={searchTerm}
+                  onChange={setSearchTerm}
+                />
+              </ToolbarItem>
+            </ToolbarGroup>
+          </ToolbarContent>
+        </Toolbar>
+      </Card>
+
+      <p>&nbsp;</p>
+
+      <Gallery hasGutter={true}>
+        {data
+          .filter((application) =>
+            !debouncedSearchTerm
+              ? true
+              : application.cluster.includes(debouncedSearchTerm) ||
+                application.namespace.includes(debouncedSearchTerm) ||
+                application.name.includes(debouncedSearchTerm) ||
+                application.description?.includes(debouncedSearchTerm),
+          )
+          .map((application, index) => (
+            <GalleryItem key={index}>
+              <LinkWrapper link={`/applications/${application.cluster}/${application.namespace}/${application.name}`}>
+                <Card style={{ cursor: 'pointer' }} isHoverable={true}>
+                  <CardTitle className="pf-u-text-truncate">
+                    {application.name}
+                    <br />
+                    <span className="pf-u-font-size-sm pf-u-color-400">
+                      {application.namespace} ({application.cluster})
+                    </span>
+                  </CardTitle>
+                  <CardBody style={{ height: '150px', maxHeight: '150px', minHeight: '150px' }}>
+                    <div style={{ height: '124px', overflow: 'scroll' }}>
+                      {application.tags && (
+                        <p>
+                          {application.tags.map((tag) => (
+                            <Badge key={tag} className="pf-u-mr-sm">
+                              {tag.toLowerCase()}
+                            </Badge>
+                          ))}
+                        </p>
+                      )}
+                      {application.description && <p>{application.description}</p>}
+                    </div>
+                  </CardBody>
+                </Card>
+              </LinkWrapper>
+            </GalleryItem>
+          ))}
+      </Gallery>
+    </React.Fragment>
+  );
+};
+
+export default Home;

plugins/applications/src/index.ts

@@ -4,11 +4,13 @@ import './assets/applications.css';
 
 import icon from './assets/icon.png';
 
+import Home from './components/home/Home';
 import Page from './components/page/Page';
 import Panel from './components/panel/Panel';
 
 const applicationsPlugin: IPluginComponents = {
   applications: {
+    home: Home,
     icon: icon,
     page: Page,
     panel: Panel,

plugins/core/src/components/app/HomePage.tsx

@@ -1,22 +1,93 @@
-import { Gallery, GalleryItem, PageSection, PageSectionVariants } from '@patternfly/react-core';
-import React, { useContext } from 'react';
+import {
+  Gallery,
+  GalleryItem,
+  Grid,
+  GridItem,
+  Menu,
+  MenuContent,
+  MenuItem,
+  MenuList,
+  PageSection,
+  PageSectionVariants,
+} from '@patternfly/react-core';
+import React, { useContext, useEffect, useState } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
 
 import { IPluginsContext, PluginsContext } from '../../context/PluginsContext';
 import HomeItem from './HomeItem';
 
 // HomePage renders a list of all registered plugin instances via the HomeItem component.
 const HomePage: React.FunctionComponent = () => {
+  const history = useHistory();
+  const location = useLocation();
+
   const pluginsContext = useContext<IPluginsContext>(PluginsContext);
+  const pluginHome = pluginsContext.getPluginHome();
+  const [activePage, setActivePage] = useState<string>('plugins');
+
+  const pluginDetails = pluginsContext.getPluginDetails(activePage);
+  const Component =
+    pluginDetails && pluginsContext.components.hasOwnProperty(pluginDetails.type)
+      ? pluginsContext.components[pluginDetails.type].home
+      : undefined;
+
+  const changeActivePage = (
+    event?: React.MouseEvent<Element, MouseEvent> | undefined,
+    itemId?: string | number | undefined,
+  ): void => {
+    if (itemId) {
+      history.push({
+        pathname: location.pathname,
+        search: `?page=${itemId}`,
+      });
+    }
+  };
+
+  useEffect(() => {
+    const params = new URLSearchParams(location.search);
+    const page = params.get('page');
+
+    if (page) {
+      setActivePage(page);
+    }
+  }, [location.search]);
 
   return (
     <PageSection variant={PageSectionVariants.default}>
-      <Gallery hasGutter={true}>
-        {pluginsContext.plugins.map((plugin) => (
-          <GalleryItem key={plugin.name}>
-            <HomeItem plugin={plugin} />
-          </GalleryItem>
-        ))}
-      </Gallery>
+      <Grid hasGutter={true}>
+        <GridItem sm={12} md={12} lg={3} xl={2} xl2={2}>
+          <Menu activeItemId={activePage} onSelect={changeActivePage}>
+            <MenuContent>
+              <MenuList>
+                <MenuItem itemId="plugins">Plugins</MenuItem>
+                {pluginHome.map((plugin, index) => (
+                  <MenuItem key={index} itemId={plugin.name}>
+                    {plugin.displayName}
+                  </MenuItem>
+                ))}
+              </MenuList>
+            </MenuContent>
+          </Menu>
+        </GridItem>
+        <GridItem sm={12} md={12} lg={9} xl={10} xl2={10}>
+          {activePage !== 'plugins' && pluginDetails && Component ? (
+            <Component
+              name={pluginDetails.name}
+              displayName={pluginDetails.displayName}
+              description={pluginDetails.description}
+              options={pluginDetails.options}
+            />
+          ) : (
+            <Gallery hasGutter={true}>
+              {pluginsContext.plugins.map((plugin) => (
+                <GalleryItem key={plugin.name}>
+                  <HomeItem plugin={plugin} />
+                </GalleryItem>
+              ))}
+            </Gallery>
+          )}
+        </GridItem>
+      </Grid>
     </PageSection>
   );
 };

plugins/core/src/context/PluginsContext.tsx

@@ -28,6 +28,7 @@ export interface IPluginData {
   name: string;
   displayName: string;
   description: string;
+  home: boolean;
   type: string;
   options?: IPluginDataOptions;
 }
@@ -72,6 +73,7 @@ export interface IPluginPreviewProps {
 // IPluginComponent is the interface which must be implemented by each plugin. It must contain an icon and panel
 // component. The page and preview component is optional for each plugin.
 export interface IPluginComponent {
+  home?: React.FunctionComponent<IPluginPageProps>;
   icon: string;
   page?: React.FunctionComponent<IPluginPageProps>;
   panel: React.FunctionComponent<IPluginPanelProps>;
@@ -88,6 +90,7 @@ export interface IPluginComponents {
 export interface IPluginsContext {
   components: IPluginComponents;
   getPluginDetails: (name: string) => IPluginData | undefined;
+  getPluginHome: () => IPluginData[];
   getPluginIcon: (type: string) => string;
   plugins: IPluginData[];
 }
@@ -98,6 +101,9 @@ export const PluginsContext = React.createContext<IPluginsContext>({
   getPluginDetails: (name: string) => {
     return undefined;
   },
+  getPluginHome: () => {
+    return [];
+  },
   getPluginIcon: (type: string) => {
     return '';
   },
@@ -161,6 +167,11 @@ export const PluginsContextProvider: React.FunctionComponent<IPluginsContextProv
     return undefined;
   };
 
+  const getPluginHome = (): IPluginData[] => {
+    const pluginHome = data?.filter((p) => p.home);
+    return pluginHome || [];
+  };
+
   const getPluginIcon = (type: string): string => {
     if (components.hasOwnProperty(type)) {
       return components[type].icon;
@@ -206,6 +217,7 @@ export const PluginsContextProvider: React.FunctionComponent<IPluginsContextProv
       value={{
         components: components,
         getPluginDetails: getPluginDetails,
+        getPluginHome: getPluginHome,
         getPluginIcon: getPluginIcon,
         plugins: data,
       }}