[klogs] Show links in dropdown

CHANGELOG.md

@@ -79,6 +79,7 @@ NOTE: As semantic versioning states all 0.y.z releases can contain breaking chan
 - [#284](https://github.com/kobsio/kobs/pull/284): [core] :warning: _Breaking change:_ :warning: Update CRD versions from `v1beta1` to `v1`.
 - [#287](https://github.com/kobsio/kobs/pull/287): [resources] :warning: _Breaking change:_ :warning: Refactor permission handling for `pods/logs`, `pods/exec` and the global forbidden resources configuration.
 - [#290](https://github.com/kobsio/kobs/pull/290): :warning: _Breaking change:_ :warning: Rename `create` values to `enabled` in the Helm chart.
+- [#291](https://github.com/kobsio/kobs/pull/291): [klogs] Show link to aggragations and documentation in dropdown.
 
 ## [v0.7.0](https://github.com/kobsio/kobs/releases/tag/v0.7.0) (2021-11-19)
 

plugins/elasticsearch/src/components/page/Page.tsx

@@ -11,6 +11,7 @@ import { useHistory, useLocation } from 'react-router-dom';
 
 import { IPluginPageProps, IPluginTimes } from '@kobsio/plugin-core';
 import { IOptions } from '../../utils/interfaces';
+import PageActions from './PageActions';
 import PageLogs from './PageLogs';
 import PageToolbar from './PageToolbar';
 import { getInitialOptions } from '../../utils/helpers';
@@ -75,14 +76,12 @@ const Page: React.FunctionComponent<IPluginPageProps> = ({ name, displayName, de
   return (
     <React.Fragment>
       <PageSection variant={PageSectionVariants.light}>
-        <Title headingLevel="h6" size="xl">
-          {displayName}
-          <span className="pf-u-font-size-md pf-u-font-weight-normal" style={{ float: 'right' }}>
-            <a href="https://kobs.io/plugins/elasticsearch/" target="_blank" rel="noreferrer">
-              Documentation
-            </a>
-          </span>
-        </Title>
+        <div style={{ position: 'relative' }}>
+          <Title headingLevel="h6" size="xl">
+            {displayName}
+          </Title>
+          <PageActions name={name} />
+        </div>
         <p>{description}</p>
         <PageToolbar options={options} setOptions={changeOptions} />
       </PageSection>

plugins/elasticsearch/src/components/page/PageActions.tsx

@@ -0,0 +1,34 @@
+import { Dropdown, DropdownItem, KebabToggle } from '@patternfly/react-core';
+import React, { useState } from 'react';
+
+interface IPageActionsProps {
+  name: string;
+}
+
+export const PageActions: React.FunctionComponent<IPageActionsProps> = ({ name }: IPageActionsProps) => {
+  const [show, setShow] = useState<boolean>(false);
+
+  return (
+    <span style={{ float: 'right', position: 'absolute', right: 0, top: 0 }}>
+      <Dropdown
+        style={{ zIndex: 400 }}
+        toggle={<KebabToggle onToggle={(): void => setShow(!show)} />}
+        isOpen={show}
+        isPlain={true}
+        position="right"
+        dropdownItems={[
+          <DropdownItem
+            key={0}
+            component={
+              <a href="https://kobs.io/main/plugins/elasticsearch/" target="_blank" rel="noreferrer">
+                Documentation
+              </a>
+            }
+          />,
+        ]}
+      />
+    </span>
+  );
+};
+
+export default PageActions;

plugins/jaeger/src/components/page/Traces.tsx

@@ -6,10 +6,11 @@ import {
   PageSectionVariants,
   Title,
 } from '@patternfly/react-core';
-import { Link, useHistory, useLocation } from 'react-router-dom';
 import React, { useEffect, useState } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
 
 import { IOptions } from '../../utils/interfaces';
+import TracesActions from './TracesActions';
 import TracesPanel from '../panel/Traces';
 import TracesToolbar from './TracesToolbar';
 import { getInitialOptions } from '../../utils/helpers';
@@ -50,12 +51,12 @@ const Traces: React.FunctionComponent<ITracesProps> = ({ name, displayName, desc
   return (
     <React.Fragment>
       <PageSection variant={PageSectionVariants.light}>
-        <Title headingLevel="h6" size="xl">
-          {displayName}
-          <span className="pf-u-font-size-md pf-u-font-weight-normal" style={{ float: 'right' }}>
-            <Link to={`/${name}/trace`}>Compare Traces</Link>
-          </span>
-        </Title>
+        <div style={{ position: 'relative' }}>
+          <Title headingLevel="h6" size="xl">
+            {displayName}
+          </Title>
+          <TracesActions name={name} />
+        </div>
         <p>{description}</p>
         <TracesToolbar name={name} options={options} setOptions={changeOptions} />
       </PageSection>

plugins/jaeger/src/components/page/TracesActions.tsx

@@ -0,0 +1,26 @@
+import { Dropdown, DropdownItem, KebabToggle } from '@patternfly/react-core';
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+
+interface ITracesActionsProps {
+  name: string;
+}
+
+export const TracesActions: React.FunctionComponent<ITracesActionsProps> = ({ name }: ITracesActionsProps) => {
+  const [show, setShow] = useState<boolean>(false);
+
+  return (
+    <span style={{ float: 'right', position: 'absolute', right: 0, top: 0 }}>
+      <Dropdown
+        style={{ zIndex: 400 }}
+        toggle={<KebabToggle onToggle={(): void => setShow(!show)} />}
+        isOpen={show}
+        isPlain={true}
+        position="right"
+        dropdownItems={[<DropdownItem key={0} component={<Link to={`/${name}/trace`}>Compare Traces</Link>} />]}
+      />
+    </span>
+  );
+};
+
+export default TracesActions;

plugins/klogs/src/components/page/AggregationPage.tsx

@@ -1,21 +1,19 @@
 import {
-  Divider,
   Drawer,
   DrawerContent,
   DrawerContentBody,
-  Flex,
-  FlexItem,
   Grid,
   GridItem,
   PageSection,
   PageSectionVariants,
   Title,
 } from '@patternfly/react-core';
-import { Link, useHistory, useLocation } from 'react-router-dom';
 import React, { useEffect, useState } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
 
 import Aggregation from './Aggregation';
 import AggregationOptions from './AggregationOptions';
+import AggregationPageActions from './AggregationPageActions';
 import AggregationToolbar from './AggregationToolbar';
 import { IAggregationOptions } from '../../utils/interfaces';
 import { getInitialAggregationOptions } from '../../utils/helpers';
@@ -65,22 +63,12 @@ const AggregationPage: React.FunctionComponent<IAggregationPageProps> = ({
   return (
     <React.Fragment>
       <PageSection variant={PageSectionVariants.light}>
-        <Title headingLevel="h6" size="xl">
-          {displayName}
-          <span className="pf-u-font-size-md pf-u-font-weight-normal" style={{ float: 'right' }}>
-            <Flex>
-              <FlexItem>
-                <Link to={`/${name}`}>Logs</Link>
-              </FlexItem>
-              <Divider isVertical={true} />
-              <FlexItem>
-                <a href="https://kobs.io/plugins/klogs/" target="_blank" rel="noreferrer">
-                  Documentation
-                </a>
-              </FlexItem>
-            </Flex>
-          </span>
-        </Title>
+        <div style={{ position: 'relative' }}>
+          <Title headingLevel="h6" size="xl">
+            {displayName}
+          </Title>
+          <AggregationPageActions name={name} />
+        </div>
         <p>{description}</p>
         <AggregationToolbar options={tmpOptions} setOptions={setTmpOptions} />
       </PageSection>

plugins/klogs/src/components/page/AggregationPageActions.tsx

@@ -0,0 +1,38 @@
+import { Dropdown, DropdownItem, KebabToggle } from '@patternfly/react-core';
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+
+interface IAggregationPageActionsProps {
+  name: string;
+}
+
+export const AggregationPageActions: React.FunctionComponent<IAggregationPageActionsProps> = ({
+  name,
+}: IAggregationPageActionsProps) => {
+  const [show, setShow] = useState<boolean>(false);
+
+  return (
+    <span style={{ float: 'right', position: 'absolute', right: 0, top: 0 }}>
+      <Dropdown
+        style={{ zIndex: 400 }}
+        toggle={<KebabToggle onToggle={(): void => setShow(!show)} />}
+        isOpen={show}
+        isPlain={true}
+        position="right"
+        dropdownItems={[
+          <DropdownItem key={0} component={<Link to={`/${name}`}>Logs</Link>} />,
+          <DropdownItem
+            key={1}
+            component={
+              <a href="https://kobs.io/main/plugins/klogs/" target="_blank" rel="noreferrer">
+                Documentation
+              </a>
+            }
+          />,
+        ]}
+      />
+    </span>
+  );
+};
+
+export default AggregationPageActions;

plugins/klogs/src/components/page/LogsPage.tsx

@@ -1,20 +1,18 @@
 import {
-  Divider,
   Drawer,
   DrawerContent,
   DrawerContentBody,
-  Flex,
-  FlexItem,
   PageSection,
   PageSectionVariants,
   Title,
 } from '@patternfly/react-core';
-import { Link, useHistory, useLocation } from 'react-router-dom';
 import React, { useEffect, useState } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
 
 import { IOptions } from '../../utils/interfaces';
 import { IPluginTimes } from '@kobsio/plugin-core';
 import Logs from './Logs';
+import LogsPageActions from './LogsPageActions';
 import LogsToolbar from './LogsToolbar';
 import { getInitialOptions } from '../../utils/helpers';
 
@@ -106,22 +104,12 @@ const LogsPage: React.FunctionComponent<ILogsPageProps> = ({ name, displayName,
   return (
     <React.Fragment>
       <PageSection variant={PageSectionVariants.light}>
-        <Title headingLevel="h6" size="xl">
-          {displayName}
-          <span className="pf-u-font-size-md pf-u-font-weight-normal" style={{ float: 'right' }}>
-            <Flex>
-              <FlexItem>
-                <Link to={`/${name}/aggregation`}>Aggregation</Link>
-              </FlexItem>
-              <Divider isVertical={true} />
-              <FlexItem>
-                <a href="https://kobs.io/plugins/klogs/" target="_blank" rel="noreferrer">
-                  Documentation
-                </a>
-              </FlexItem>
-            </Flex>
-          </span>
-        </Title>
+        <div style={{ position: 'relative' }}>
+          <Title headingLevel="h6" size="xl">
+            {displayName}
+          </Title>
+          <LogsPageActions name={name} />
+        </div>
         <p>{description}</p>
         <LogsToolbar options={options} setOptions={changeOptions} />
       </PageSection>

plugins/klogs/src/components/page/LogsPageActions.tsx

@@ -0,0 +1,36 @@
+import { Dropdown, DropdownItem, KebabToggle } from '@patternfly/react-core';
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+
+interface ILogsPageActionsProps {
+  name: string;
+}
+
+export const LogsPageActions: React.FunctionComponent<ILogsPageActionsProps> = ({ name }: ILogsPageActionsProps) => {
+  const [show, setShow] = useState<boolean>(false);
+
+  return (
+    <span style={{ float: 'right', position: 'absolute', right: 0, top: 0 }}>
+      <Dropdown
+        style={{ zIndex: 400 }}
+        toggle={<KebabToggle onToggle={(): void => setShow(!show)} />}
+        isOpen={show}
+        isPlain={true}
+        position="right"
+        dropdownItems={[
+          <DropdownItem key={0} component={<Link to={`/${name}/aggregation`}>Aggregation</Link>} />,
+          <DropdownItem
+            key={1}
+            component={
+              <a href="https://kobs.io/main/plugins/klogs/" target="_blank" rel="noreferrer">
+                Documentation
+              </a>
+            }
+          />,
+        ]}
+      />
+    </span>
+  );
+};
+
+export default LogsPageActions;