diff --git a/CHANGELOG.md b/CHANGELOG.md index 390c59057..661b2cb64 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/plugins/elasticsearch/src/components/page/Page.tsx b/plugins/elasticsearch/src/components/page/Page.tsx index b5215b75f..57a0f3af5 100644 --- a/plugins/elasticsearch/src/components/page/Page.tsx +++ b/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 = ({ name, displayName, de return ( - - {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> - +
+ + {displayName} + + +

{description}

diff --git a/plugins/elasticsearch/src/components/page/PageActions.tsx b/plugins/elasticsearch/src/components/page/PageActions.tsx new file mode 100644 index 000000000..d62930d64 --- /dev/null +++ b/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 = ({ name }: IPageActionsProps) => { + const [show, setShow] = useState(false); + + return ( + + setShow(!show)} />} + isOpen={show} + isPlain={true} + position="right" + dropdownItems={[ + + Documentation + + } + />, + ]} + /> + + ); +}; + +export default PageActions; diff --git a/plugins/jaeger/src/components/page/Traces.tsx b/plugins/jaeger/src/components/page/Traces.tsx index e96b12e22..8ccc7e400 100644 --- a/plugins/jaeger/src/components/page/Traces.tsx +++ b/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 = ({ name, displayName, desc return ( - - {displayName} - <span className="pf-u-font-size-md pf-u-font-weight-normal" style={{ float: 'right' }}> - <Link to={`/${name}/trace`}>Compare Traces</Link> - </span> - +
+ + {displayName} + + +

{description}

diff --git a/plugins/jaeger/src/components/page/TracesActions.tsx b/plugins/jaeger/src/components/page/TracesActions.tsx new file mode 100644 index 000000000..006486d0c --- /dev/null +++ b/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 = ({ name }: ITracesActionsProps) => { + const [show, setShow] = useState(false); + + return ( + + setShow(!show)} />} + isOpen={show} + isPlain={true} + position="right" + dropdownItems={[Compare Traces} />]} + /> + + ); +}; + +export default TracesActions; diff --git a/plugins/klogs/src/components/page/AggregationPage.tsx b/plugins/klogs/src/components/page/AggregationPage.tsx index a79d4efdf..1a20e8473 100644 --- a/plugins/klogs/src/components/page/AggregationPage.tsx +++ b/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 = ({ return ( - - {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> - +
+ + {displayName} + + +

{description}

diff --git a/plugins/klogs/src/components/page/AggregationPageActions.tsx b/plugins/klogs/src/components/page/AggregationPageActions.tsx new file mode 100644 index 000000000..be158109b --- /dev/null +++ b/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 = ({ + name, +}: IAggregationPageActionsProps) => { + const [show, setShow] = useState(false); + + return ( + + setShow(!show)} />} + isOpen={show} + isPlain={true} + position="right" + dropdownItems={[ + Logs} />, + + Documentation + + } + />, + ]} + /> + + ); +}; + +export default AggregationPageActions; diff --git a/plugins/klogs/src/components/page/LogsPage.tsx b/plugins/klogs/src/components/page/LogsPage.tsx index cdfe1681e..85145ccd7 100644 --- a/plugins/klogs/src/components/page/LogsPage.tsx +++ b/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 = ({ name, displayName, return ( - - {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> - +
+ + {displayName} + + +

{description}

diff --git a/plugins/klogs/src/components/page/LogsPageActions.tsx b/plugins/klogs/src/components/page/LogsPageActions.tsx new file mode 100644 index 000000000..46a58612b --- /dev/null +++ b/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 = ({ name }: ILogsPageActionsProps) => { + const [show, setShow] = useState(false); + + return ( + + setShow(!show)} />} + isOpen={show} + isPlain={true} + position="right" + dropdownItems={[ + Aggregation} />, + + Documentation + + } + />, + ]} + /> + + ); +}; + +export default LogsPageActions;