diff --git a/frontend/public/components/utils/resource-log.tsx b/frontend/public/components/utils/resource-log.tsx index 5990c366c88..f7cb11a4583 100644 --- a/frontend/public/components/utils/resource-log.tsx +++ b/frontend/public/components/utils/resource-log.tsx @@ -6,7 +6,20 @@ import { useSelector } from 'react-redux'; import { Base64 } from 'js-base64'; import * as _ from 'lodash-es'; import { Trans, useTranslation } from 'react-i18next'; -import { Alert, AlertActionLink, Button, Checkbox, Divider, Tooltip } from '@patternfly/react-core'; +import { + Alert, + AlertActionLink, + Button, + Checkbox, + Divider, + Dropdown, + DropdownItem, + DropdownGroup, + Tooltip, + MenuToggleElement, + MenuToggle, + DropdownList, +} from '@patternfly/react-core'; import { Select as SelectDeprecated, SelectOption as SelectOptionDeprecated, @@ -15,6 +28,7 @@ import { import { LogViewer, LogViewerSearch } from '@patternfly/react-log-viewer'; import { CompressIcon, + EllipsisVIcon, ExpandIcon, DownloadIcon, OutlinedWindowRestoreIcon, @@ -34,7 +48,7 @@ import * as screenfull from 'screenfull'; import { RootState } from '@console/internal/redux'; import { k8sGet, k8sList, K8sResourceKind, PodKind } from '@console/internal/module/k8s'; import { ConsoleExternalLogLinkModel, ProjectModel } from '@console/internal/models'; -import { useFlag } from '@console/shared/src/hooks/flag'; +import { useFlag, useIsMobile } from '@console/shared/src/hooks'; import { usePrevious } from '@console/shared/src/hooks/previous'; import { Link } from 'react-router-dom-v5-compat'; import { resourcePath } from './resource-link'; @@ -173,6 +187,16 @@ export const LogControls: React.FC = ({ }) => { const { t } = useTranslation(); const [isLogTypeOpen, setLogTypeOpen] = React.useState(false); + const isMobile = useIsMobile(); + const [isDropdownOpen, setIsDropdownOpen] = React.useState(false); + + const onDropdownToggleClick = () => { + setIsDropdownOpen(!isDropdownOpen); + }; + + const onDropdownSelect = () => { + setIsDropdownOpen(false); + }; const logTypes: Array = [ { type: LOG_TYPE_CURRENT, text: t('public~Current log') }, @@ -244,11 +268,113 @@ export const LogControls: React.FC = ({ ); }; + const renderPodLogLinks = () => + _.map(_.sortBy(podLogLinks, 'metadata.name'), (link) => { + const namespace = resource.metadata.namespace; + const namespaceFilter = link.spec.namespaceFilter; + if (namespaceFilter) { + try { + const namespaceRegExp = new RegExp(namespaceFilter, 'g'); + if (namespace.search(namespaceRegExp)) { + return null; + } + } catch (e) { + // eslint-disable-next-line no-console + console.warn('invalid log link regex', namespaceFilter, e); + return null; + } + } + const url = replaceVariables(link.spec.hrefTemplate, { + resourceName: resource.metadata.name, + resourceUID: resource.metadata.uid, + containerName, + resourceNamespace: namespace, + resourceNamespaceUID: namespaceUID, + podLabels: JSON.stringify(resource.metadata.labels), + }); + + return isMobile ? ( + + {link.spec.text} + + ) : ( + + + + + ); + }); + const label = t('public~Debug container'); + const fullLog = ( +
+ + { + toggleShowFullLog(checked); + }} + /> + +
+ ); + + const wrapLines = ( + { + toggleWrapLines(checked); + }} + /> + ); + + const raw = ( + <> + + {t('public~Raw')} + + ); + + const download = ( + <> + + {t('public~Download')} + + ); + + const fullscreen = isFullscreen ? ( + <> + + {t('public~Collapse')} + + ) : ( + <> + + {t('public~Expand')} + + ); + return (
-
+
{showStatus()}
{dropdown &&
{dropdown}
}
{logTypeSelect(!hasPreviousLog)}
@@ -286,118 +412,109 @@ export const LogControls: React.FC = ({ )}
-
- {!_.isEmpty(podLogLinks) && - _.map(_.sortBy(podLogLinks, 'metadata.name'), (link) => { - const namespace = resource.metadata.namespace; - const namespaceFilter = link.spec.namespaceFilter; - if (namespaceFilter) { - try { - const namespaceRegExp = new RegExp(namespaceFilter, 'g'); - if (namespace.search(namespaceRegExp)) { - return null; - } - } catch (e) { - // eslint-disable-next-line no-console - console.warn('invalid log link regex', namespaceFilter, e); - return null; - } - } - const url = replaceVariables(link.spec.hrefTemplate, { - resourceName: resource.metadata.name, - resourceUID: resource.metadata.uid, - containerName, - resourceNamespace: namespace, - resourceNamespaceUID: namespaceUID, - podLabels: JSON.stringify(resource.metadata.labels), - }); - return ( - - - - - ); - })} -
- - { - toggleShowFullLog(checked); - }} - /> - -
- - { - toggleWrapLines(checked); - }} - /> - - - - {t('public~Raw')} - - setIsDropdownOpen(isOpen)} + toggle={(toggleRef: React.Ref) => ( + + + + )} + shouldFocusToggleOnSelect + popperProps={{ + position: 'right', }} - /> - - - {t('public~Download')} - - {screenfull.enabled && ( - <> - - - - )} -
+ + + + ) : ( +
+ {!_.isEmpty(podLogLinks) && renderPodLogLinks()} +
{fullLog}
+ + {wrapLines} + + + {raw} + + + + {download} + + {screenfull.enabled && ( + <> + + + + )} +
+ )}
); diff --git a/frontend/public/locales/en/public.json b/frontend/public/locales/en/public.json index 4a0d7dc7998..0543e6a3a99 100644 --- a/frontend/public/locales/en/public.json +++ b/frontend/public/locales/en/public.json @@ -1731,11 +1731,13 @@ "Current log": "Current log", "Previous log": "Previous log", "Only the current log is available for this container.": "Only the current log is available for this container.", - "Debug in terminal is not currently available for windows containers.": "Debug in terminal is not currently available for windows containers.", "Select to view the entire log. Default view is the last 1,000 lines.": "Select to view the entire log. Default view is the last 1,000 lines.", "Show full log": "Show full log", "Wrap lines": "Wrap lines", "Raw": "Raw", + "Debug in terminal is not currently available for windows containers.": "Debug in terminal is not currently available for windows containers.", + "Dropdown toggle": "Dropdown toggle", + "Log actions": "Log actions", "An error occurred while retrieving the requested logs.": "An error occurred while retrieving the requested logs.", "Retry": "Retry", "The logs for this {{resourceKind}} may be stale.": "The logs for this {{resourceKind}} may be stale.", diff --git a/frontend/public/style/_common.scss b/frontend/public/style/_common.scss index 749b500ac20..9dcb8cffd08 100644 --- a/frontend/public/style/_common.scss +++ b/frontend/public/style/_common.scss @@ -384,6 +384,15 @@ dl.co-inline { } } +.co-toolbar__group--alongside-kebab { + flex: 1 1 0; + flex-direction: row; +} + +.co-toolbar__group--kebab { + justify-content: flex-start; +} + .co-toolbar__group--right { justify-content: flex-end; @media (min-width: $screen-xs-min) {