1(self.webpackChunk_patternfly_react_docs=self.webpackChunk_patternfly_react_docs||[]).push([[1405],{35208:function(e,n,t){"use strict";t.d(n,{Z:function(){return R}});var o=t(2784),a=t(73070),i=t(67691),l=t(86730),r=t(95157),s=t(34692),c=t(38649),d=t(97202),p=t(38731),u=t(12811),g=t(28978),h=t(38647),m=t(42134),b=t(571),f=t(83759),S=t(10679),w=t(66639),v=t(19609),E=t(80375),x=t(2170),C=t(36205),D=t(82873),I=t(20968),T=t(54313),O=t(94432),y=t(53850),k=t(68047),P=t(99984);function M(e,n){return M=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,n){return e.__proto__=n,e},M(e,n)}var R=function(e){var n,t;function R(n){var t;return(t=e.call(this,n)||this).state={isDropdownOpen:!1,isKebabDropdownOpen:!1,isFullKebabDropdownOpen:!1,activeItem:0},t.onDropdownToggle=function(){t.setState((function(e){return{isDropdownOpen:!e.isDropdownOpen}}))},t.onDropdownSelect=function(){t.setState({isDropdownOpen:!1})},t.onKebabDropdownToggle=function(){t.setState((function(e){return{isKebabDropdownOpen:!e.isKebabDropdownOpen}}))},t.onKebabDropdownSelect=function(){t.setState({isKebabDropdownOpen:!1})},t.onFullKebabToggle=function(){t.setState((function(e){return{isFullKebabDropdownOpen:!e.isFullKebabDropdownOpen}}))},t.onFullKebabSelect=function(){t.setState({isFullKebabDropdownOpen:!1})},t}return t=e,(n=R).prototype=Object.create(t.prototype),n.prototype.constructor=n,M(n,t),R.prototype.render=function(){var e=this,n=this.state,t=n.isDropdownOpen,M=n.isKebabDropdownOpen,R=n.isFullKebabDropdownOpen,L=this.props.notificationBadge,F=o.createElement(o.Fragment,null,o.createElement(a.h,null,o.createElement(D.ZP,null)," Settings"),o.createElement(a.h,null,o.createElement(I.ZP,null)," Help")),Z=o.createElement(o.Fragment,null,o.createElement(a.h,{key:"group 2 profile"},"My profile"),o.createElement(a.h,{key:"group 2 user"},"User management"),o.createElement(a.h,{key:"group 2 logout"},"Logout")),z=o.createElement(i.o,{id:"toolbar",isFullHeight:!0,isStatic:!0},o.createElement(l.c,null,o.createElement(r.k,{variant:"icon-button-group",align:{default:"alignRight"},spacer:{default:"spacerNone",md:"spacerMd"}},L||o.createElement(s.E,null,o.createElement(c.zx,{"aria-label":"Notifications",variant:c.Wu.plain,icon:o.createElement(O.ZP,null),onClick:function(){}})),o.createElement(r.k,{variant:"icon-button-group",visibility:{default:"hidden",lg:"visible"}},o.createElement(s.E,null,o.createElement(c.zx,{"aria-label":"Settings",variant:c.Wu.plain,icon:o.createElement(D.ZP,null)})),o.createElement(s.E,null,o.createElement(c.zx,{"aria-label":"Help",variant:c.Wu.plain,icon:o.createElement(T.ZP,null)}))),o.createElement(s.E,{visibility:{default:"hidden",md:"visible",lg:"hidden"}},o.createElement(d.L,{isOpen:M,onSelect:this.onKebabDropdownSelect,onOpenChange:function(n){return e.setState({isKebabDropdownOpen:n})},popperProps:{position:"right"},toggle:function(n){return o.createElement(p.O,{ref:n,isExpanded:M,onClick:e.onKebabDropdownToggle,variant:"plain","aria-label":"Settings and help"},o.createElement(y.ZP,{"aria-hidden":"true"}))}},o.createElement(u.s,null,F))),o.createElement(s.E,{visibility:{md:"hidden"}},o.createElement(d.L,{isOpen:R,onSelect:this.onFullKebabSelect,onOpenChange:function(n){return e.setState({isFullKebabDropdownOpen:n})},popperProps:{position:"right"},toggle:function(n){return o.createElement(p.O,{ref:n,isExpanded:R,onClick:e.onFullKebabToggle,variant:"plain","aria-label":"Toolbar menu"},o.createElement(y.ZP,{"aria-hidden":"true"}))}},o.createElement(g.p,{key:"group 2","aria-label":"User actions"},o.createElement(u.s,null,Z)),o.createElement(h.i,null),o.createElement(u.s,null,F)))),o.createElement(s.E,{visibility:{default:"hidden",md:"visible"}},o.createElement(d.L,{isOpen:t,onSelect:this.onDropdownSelect,onOpenChange:function(n){return e.setState({isDropdownOpen:n})},popperProps:{position:"right"},toggle:function(n){return o.createElement(p.O,{ref:n,isExpanded:t,onClick:e.onDropdownToggle,icon:o.createElement(m.q,{src:k,alt:""}),isFullHeight:!0},"Ned Username")}},o.createElement(u.s,null,Z)))));return o.createElement(b.H,null,o.createElement(f.C,null,o.createElement(S.H,{variant:"plain","aria-label":"Global navigation"},o.createElement(C.ZP,null))),o.createElement(w.d,null,o.createElement(v.x,null,o.createElement(E.H,{src:P,alt:"PatternFly",heights:{default:"36px"}}))),o.createElement(x.f,null,z))},R}(o.Component)},83621:function(e,n,t){"use strict";t.d(n,{ZP:function(){return x},hm:function(){return v}});var o=t(2784),a=t(44090),i=t(15093),l=t(82299),r=t(89138),s=t(4484),c=t(11369),d=t(79042),p=t(68115),u=t(59326),g=t(61271),h=t(78490),m=t(94137),b=t(35208),f=["children","mainContainerId","breadcrumb","header","sidebar","sidebarNavOpen","onPageResize","hasNoBreadcrumb","notificationDrawer","isNotificationDrawerExpanded","hasPageTemplateTitle"];function S(){return S=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e},S.apply(this,arguments)}
1function w(e,n){return w=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,n){return e.__proto__=n,e},w(e,n)}var v=o.createElement(a.a,null,o.createElement(i.g,null,"Section home"),o.createElement(i.g,{to:"#"},"Section title"),o.createElement(i.g,{to:"#"},"Section title"),o.createElement(i.g,{to:"#",isActive:!0},"Section landing")),E=o.createElement(l.NP,{variant:"light"},o.createElement(r.D,null,o.createElement(s.x,{component:"h1"},"Main title"),o.createElement(s.x,{component:"p"},"This is a full page demo."))),x=function(e){var n,t;function a(n){var t;return(t=e.call(this,n)||this).state={activeItem:1},t.onNavSelect=function(e,n){t.setState({activeItem:n.itemId})},t}return t=e,(n=a).prototype=Object.create(t.prototype),n.prototype.constructor=n,w(n,t),a.prototype.render=function(){var e,n=this.state.activeItem,t=this.props,a=t.children,i=t.mainContainerId,l=t.breadcrumb,r=t.header,s=t.sidebar,w=t.sidebarNavOpen,x=t.onPageResize,C=void 0===x?function(){}:x,D=t.hasNoBreadcrumb,I=t.notificationDrawer,T=t.isNotificationDrawerExpanded,O=t.hasPageTemplateTitle,y=function(e,n){if(null==e)return{};var t,o,a={},i=Object.keys(e);for(o=0;o<i.length;o++)t=i[o],n.indexOf(t)>=0||(a[t]=e[t]);return a}(t,f);D||(e=void 0!==l?l:v);var k=o.createElement(c.JL,{onSelect:this.onNavSelect,"aria-label":"Nav"},o.createElement(d.$,null,o.createElement(p.L,{itemId:0,isActive:0===n,to:"#system-panel"},"System panel"),o.createElement(p.L,{itemId:1,isActive:1===n,to:"#policy"},"Policy"),o.createElement(p.L,{itemId:2,isActive:2===n,to:"#auth"},"Authentication"),o.createElement(p.L,{itemId:3,isActive:3===n,to:"#network"},"Network services"),o.createElement(p.L,{itemId:4,isActive:4===n,to:"#server"},"Server"))),P=o.createElement(u.$E,{isSidebarOpen:w||!1},o.createElement(g.j,null,k)),M=o.createElement(h.z,{href:"#"+(i||"main-content-page-layout-default-nav")},"Skip to content");return o.createElement(m.T,S({header:void 0!==r?r:o.createElement(b.Z,null),sidebar:void 0!==s?s:P,isManagedSidebar:!0,skipToContent:M,breadcrumb:e,mainContainerId:i||"main-content-page-layout-default-nav",notificationDrawer:I,isNotificationDrawerExpanded:T},"function"==typeof C&&{onPageResize:function(e,n){return C(e,n)}},y),O&&E,a)},a}(o.Component)},45217:function(e,n,t){"use strict";t.r(n);var o=t(2784),a=t(52898),i=t(83621),l=t(1214),r=t(76494),s=t(18554),c=t(44013),d=t(85650),p=t(82873),u=t(70250),g=t(82452),h=t(81800),m=t.n(h);function b(){return b=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e},b.apply(this,arguments)}var f={id:"Toolbar",section:"components",subsection:"",deprecated:!1,beta:!1,demo:!1,newImplementationLink:!1,source:"react-demos",tabName:null,slug:"/components/toolbar/react-demos",sourceLink:"https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/Toolbar.md",relPath:"packages/react-core/src/demos/Toolbar.md",fullscreenExamples:["Console log viewer toolbar demo"]};f.liveContext={DashboardWrapper:i.ZP,PauseIcon:l.ZP,PlayIcon:r.ZP,ExpandIcon:s.ZP,ExternalLinkAltIcon:c.ZP,DownloadIcon:d.ZP,CogIcon:p.ZP,SearchIcon:u.ZP,TimesIcon:g.ZP},f.examples={"Console log viewer toolbar demo":function(e){return o.createElement(a.en,b({},f,e,{thumbnail:m(),code:"import React from 'react';\nimport {\n Badge,\n Button,\n Checkbox,\n MenuToggle,\n SearchInput,\n Select,\n SelectList,\n SelectOption,\n PageSection,\n PageSectionVariants,\n Toolbar,\n ToolbarContent,\n ToolbarGroup,\n ToolbarItem,\n ToolbarToggleGroup,\n Tooltip,\n Dropdown,\n DropdownItem,\n DropdownList,\n Divider\n} from '@patternfly/react-core';\nimport DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';\n\nimport PauseIcon from '@patternfly/react-icons/dist/esm/icons/pause-icon';\nimport PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';\nimport ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';\nimport ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';\nimport DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon';\nimport CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';\nimport SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';\nimport TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';\n\nclass ConsoleLogViewerToolbar extends React.Component {\n constructor(props) {\n super(props);\n\n this.firstOptions = {\n 'container-sample-1': { type: 'C' },\n 'container-sample-2': { type: 'D' },\n 'container-sample-3': { type: 'E' }\n };\n\n this.state = {\n containerExpanded: false,\n containerExpandedMobile: false,\n containerSelected: Object.keys(this.firstOptions)[0],\n optionExpanded: false,\n optionExpandedMobile: false,\n isPaused: false,\n firstSwitchChecked: true,\n secondSwitchChecked: fal
1se,\n searchValue: '',\n searchResultsCount: 3,\n currentSearchResult: 1,\n externalExpanded: false,\n externalExpandedMobile: false,\n downloadExpanded: false,\n downloadExpandedMobile: false,\n mobileView: window.innerWidth >= 1450 ? false : true\n };\n\n this.onContainerToggle = () => {\n this.setState((prevState) => {\n return {\n containerExpanded: !prevState.containerExpanded\n };\n });\n };\n\n this.onContainerToggleMobile = () => {\n this.setState((prevState) => {\n return {\n containerExpandedMobile: !prevState.containerExpandedMobile\n };\n });\n };\n\n this.onContainerSelect = (event, selection) => {\n this.setState({\n containerSelected: selection,\n containerExpanded: false\n });\n };\n\n this.onContainerSelectMobile = (event, selection) => {\n this.setState({\n containerSelected: selection,\n containerExpandedMobile: false\n });\n };\n\n this.onOptionToggle = () => {\n this.setState((prevState) => ({\n optionExpanded: !prevState.optionExpanded\n }));\n };\n\n this.onOptionToggleMobile = () => {\n this.setState((prevState) => ({\n optionExpandedMobile: !prevState.optionExpandedMobile\n }));\n };\n\n this.onExternalToggle = () => {\n this.setState((prevState) => ({\n externalExpanded: !prevState.externalExpanded\n }));\n };\n\n this.onExternalToggleMobile = () => {\n this.setState((prevState) => ({\n externalExpandedMobile: !prevState.externalExpandedMobile\n }));\n };\n\n this.onExternalSelect = () => {\n this.setState({\n externalExpanded: false\n });\n };\n\n this.onExternalSelectMobile = () => {\n this.setState({\n externalExpandedMobile: false\n });\n };\n\n this.onDownloadToggle = () => {\n this.setState((prevState) => ({\n downloadExpanded: !prevState.downloadExpanded\n }));\n };\n\n this.onDownloadToggleMobile = () => {\n this.setState((prevState) => ({\n downloadExpandedMobile: !prevState.downloadExpandedMobile\n }));\n };\n\n this.onDownloadSelect = () => {\n this.setState({\n downloadExpanded: false\n });\n };\n\n this.onDownloadSelectMobile = () => {\n this.setState({\n downloadExpandedMobile: false\n });\n };\n\n this.onExternalClick = (event) => {\n console.log('External logs opened!');\n };\n\n this.onDownloadClick = (event) => {\n console.log('Download action clicked!');\n };\n\n this.pauseOrStart = (event) => {\n this.setState({\n isPaused: !this.state.isPaused\n });\n };\n\n this.handleFirstSwitchChange = () => {\n this.setState((prevState) => ({ firstSwitchChecked: !prevState.firstSwitchChecked }));\n };\n\n this.handleSecondSwitchChange = () => {\n this.setState((prevState) => ({ secondSwitchChecked: !prevState.secondSwitchChecked }));\n };\n\n this.onClearLogs = () => {\n this.setState({\n optionExpanded: false\n });\n console.log('Logs cleared!');\n };\n\n this.onSearchChange = (event, value) => {\n this.setState({\n searchValue: value,\n searchResultsCount: 3\n });\n };\n\n this.onSearchClear = (event) => {\n this.setState({\n searchValue: '',\n searchResultsCount: 0,\n currentSearchResult: 1\n });\n };\n\n this.onSearchNext = (event) => {\n this.setState((prevState) => {\n const newCurrentResult = prevState.currentSearchResult + 1;\n return {\n currentSearchResult:\n newCurrentResult <= prevState.searchResultsCount ? newCurrentResult : prevState.searchResultsCount\n };\n });\n };\n\n this.onSearchPrevious = (event) => {\n this.setState((prevState) => {\n const newCurrentResult = prevState.currentSearchResult - 1;\n return {\n currentSearchResult: newCurrentResult > 0 ? newCurrentResult : 1\n };\n });\n };\n\n this.onPageResize = (_event, { windowSize }) =>
1 {\n if (windowSize >= 1450) {\n this.setState({\n mobileView: false\n });\n } else {\n this.setState({\n mobileView: true\n });\n }\n };\n }\n\n render() {\n const {\n containerExpanded,\n containerExpandedMobile,\n containerSelected,\n optionExpanded,\n optionExpandedMobile,\n isPaused,\n firstSwitchChecked,\n secondSwitchChecked,\n searchValue,\n searchResultsCount,\n currentSearchResult,\n externalExpanded,\n externalExpandedMobile,\n downloadExpanded,\n downloadExpandedMobile,\n kebabExpanded,\n mobileView\n } = this.state;\n\n const externalDropdownItems = (\n <>\n <DropdownItem key=\"action-1\" onClick={this.onExternalClick}>\n External logs 1\n </DropdownItem>\n <DropdownItem key=\"action-2\" onClick={this.onExternalClick}>\n External logs 2\n </DropdownItem>\n <DropdownItem key=\"action-3\" onClick={this.onExternalClick}>\n External logs 3\n </DropdownItem>\n </>\n );\n const downloadDropdownItems = (\n <>\n <DropdownItem key=\"action-4\" onClick={this.onDownloadClick}>\n Current container logs\n </DropdownItem>\n <DropdownItem key=\"action-5\" onClick={this.onDownloadClick}>\n All container logs\n </DropdownItem>\n </>\n );\n const optionDropdownItems = (\n <>\n <DropdownItem key=\"switch-1\" hasCheckbox isSelected={firstSwitchChecked} onClick={this.handleFirstSwitchChange}>\n Display timestamp\n </DropdownItem>\n <DropdownItem\n key=\"switch-2\"\n hasCheckbox\n isSelected={secondSwitchChecked}\n onClick={this.handleSecondSwitchChange}\n >\n Wrap lines\n </DropdownItem>\n <Divider component=\"li\" key=\"separator\" />\n <DropdownItem key=\"clear-log\" onClick={this.onClearLogs}>\n Clear logs\n </DropdownItem>\n </>\n );\n const selectDropdownContent = (\n <SelectList>\n {Object.entries(this.firstOptions).map(([value, { type }]) => (\n <SelectOption key={value} hasCheckbox value={value} isSelected={containerSelected === value}>\n <Badge key={value}>{type}</Badge>\n {` ${value}`}\n </SelectOption>\n ))}\n </SelectList>\n );\n\n const selectToggleContent = ({ showText }) => {\n if (!containerSelected) {\n return 'Select';\n }\n return (\n <React.Fragment>\n <Badge>{this.firstOptions[containerSelected].type}</Badge>\n {showText && ` ${containerSelected}`}\n </React.Fragment>\n );\n };\n\n const LogsSearchInput = (\n <ToolbarToggleGroup toggleIcon={<SearchIcon />} breakpoint=\"lg\">\n <ToolbarItem>\n <SearchInput\n placeholder=\"Search logs\"\n value={searchValue}\n onChange={this.onSearchChange}\n onClear={this.onSearchClear}\n resultsCount={`${currentSearchResult} / ${searchResultsCount}`}\n onNextClick={this.onSearchNext}\n onPreviousClick={this.onSearchPrevious}\n />\n </ToolbarItem>\n </ToolbarToggleGroup>\n );\n\n const leftAlignedItemsDesktop = (\n <React.Fragment>\n <ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>\n <Select\n toggle={(toggleRef) => (\n <MenuToggle\n ref={toggleRef}\n onClick={this.onContainerToggle}\n isExpanded={containerExpanded}\n style={{ width: '250px' }}\n >\n {selectToggleContent({ showText: true })}\n </MenuToggle>\n )}\n onSelect={this.onContainerSelect}\n onOpenChange={(isOpen) => this.setState({ containerExpanded: isOpen })}\n selected={containerSelected}\n isOpen={containerExpanded}\n >\n {selectDropdownContent}\n </Select>\n </ToolbarItem>\n <ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>\n <Dropdown\n isOpen={optionExpanded}\n onOpenChange={(isOpen) => this.setState({ optionExpanded: isOpen })}\n onSelect={this.onOptionSelect}\n toggle={(toggleRef) => (\n <MenuToggle ref={toggleRef} isExpanded={optionExpanded} onClick={this.onOptionToggle} icon={<CogIcon />}>\n Options\n </MenuToggle>\n )}\n >\n <DropdownList>{optionDropdownItems}</DropdownList>\n </Dropdown>\n </ToolbarItem>\n <ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>
1\n <Button variant={isPaused ? 'plain' : 'link'} onClick={this.pauseOrStart}>\n {isPaused ? <PlayIcon /> : <PauseIcon />}\n {isPaused ? ` Resume Log` : ` Pause Log`}\n </Button>\n </ToolbarItem>\n </React.Fragment>\n );\n\n const leftAlignedItemsMobile = (\n <React.Fragment>\n <ToolbarItem visibility={{ default: 'visible', '2xl': 'hidden' }}>\n <Tooltip position=\"top\" content={<div>Select container</div>}>\n <Select\n role=\"menu\"\n toggle={(toggleRef) => (\n <MenuToggle ref={toggleRef} onClick={this.onContainerToggleMobile} isExpanded={containerExpandedMobile}>\n {selectToggleContent({ showText: false })}\n </MenuToggle>\n )}\n onSelect={this.onContainerSelectMobile}\n onOpenChange={(isOpen) => this.setState({ containerExpandedMobile: isOpen })}\n selected={containerSelected}\n isOpen={containerExpandedMobile}\n >\n {selectDropdownContent}\n </Select>\n </Tooltip>\n </ToolbarItem>\n <ToolbarItem visibility={{ default: 'visible', '2xl': 'hidden' }}>\n <Tooltip position=\"top\" content={<div>Options</div>}>\n <Dropdown\n isOpen={optionExpandedMobile}\n onOpenChange={(isOpen) => this.setState({ optionExpandedMobile: isOpen })}\n onSelect={this.onOptionSelectMobile}\n toggle={(toggleRef) => (\n <MenuToggle\n ref={toggleRef}\n isExpanded={optionExpandedMobile}\n onClick={this.onOptionToggleMobile}\n icon={<CogIcon />}\n aria-label=\"Options\"\n />\n )}\n >\n <DropdownList>{optionDropdownItems}</DropdownList>\n </Dropdown>\n </Tooltip>\n </ToolbarItem>\n <ToolbarItem visibility={{ default: 'visible', '2xl': 'hidden' }}>\n <Tooltip position=\"top\" content={<div>{isPaused ? 'Resume log' : 'Pause log'}</div>}>\n <Button variant=\"plain\" onClick={this.pauseOrStart}
1 aria-label={isPaused ? 'Play' : 'Paused'}>\n {isPaused ? <PlayIcon /> : <PauseIcon />}\n </Button>\n </Tooltip>\n </ToolbarItem>\n </React.Fragment>\n );\n\n const leftAlignedItems = (\n <React.Fragment>\n {leftAlignedItemsDesktop}\n {leftAlignedItemsMobile}\n </React.Fragment>\n );\n\n const rightAlignedItemsDesktop = (\n <React.Fragment>\n <ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>\n <Dropdown\n isOpen={externalExpanded}\n onOpenChange={(isOpen) => this.setState({ externalExpanded: isOpen })}\n onSelect={this.onExternalSelect}\n toggle={(toggleRef) => (\n <MenuToggle ref={toggleRef} isExpanded={externalExpanded} onClick={this.onExternalToggle}>\n External logs\n </MenuToggle>\n )}\n >\n <DropdownList>{externalDropdownItems}</DropdownList>\n </Dropdown>\n </ToolbarItem>\n <ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>\n <Dropdown\n isOpen={downloadExpanded}\n onOpenChange={(isOpen) => this.setState({ downloadExpanded: isOpen })}\n onSelect={this.onDownloadSelect}\n toggle={(toggleRef) => (\n <MenuToggle ref={toggleRef} isExpanded={downloadExpanded} onClick={this.onDownloadToggle}>\n Download\n </MenuToggle>\n )}\n >\n <DropdownList>{downloadDropdownItems}</DropdownList>\n </Dropdown>\n </ToolbarItem>\n </React.Fragment>\n );\n\n const rightAlignedItemsMobile = (\n <React.Fragment>\n <ToolbarItem visibility={{ default: 'visible', '2xl': 'hidden' }}>\n <Tooltip position=\"top\" content={<div>External logs</div>}>\n <Dropdown\n isOpen={externalExpandedMobile}\n onOpenChange={(isOpen) => this.setState({ externalExpandedMobile: isOpen })}\n onSelect={this.onExternalSelectMobile}\n toggle={(toggleRef) => (\n <MenuToggle\n ref={toggleRef}\n isExpanded={externalExpandedMobile}\n onClick={this.onExternalToggleMobile}\n icon={<ExternalLinkAltIcon />}\n aria-label=\"External logs\"\n />\n )}\n >\n <DropdownList>{externalDropdownItems}</DropdownList>\n </Dropdown>\n </Tooltip>\n </ToolbarItem>\n <ToolbarItem visibility={{ default: 'visible', '2xl': 'hidden' }}>\n <Tooltip position=\"top\" content={<div>Download</div>}>\n <Dropdown\n isOpen={downloadExpandedMobile}\n onOpenChange={(isOpen) => this.setState({ downloadExpandedMobile: isOpen })}\n onSelect={this.onDownloadSelectMobile}\n popperProps={{ position: 'right' }}\n toggle={(toggleRef) => (\n <MenuToggle\n ref={toggleRef}\n isExpanded={downloadExpandedMobile}\n onClick={this.onDownloadToggleMobile}\n icon={<DownloadIcon />}\n aria-label=\"Download\"\n />\n )}\n >\n <DropdownList>{downloadDropdownItems}</DropdownList>\n </Dropdown>\n </Tooltip>\n </ToolbarItem>\n </React.Fragment>\n );\n\n const rightAlignedItems = (\n <React.Fragment>\n <ToolbarItem>{LogsSearchInput}</ToolbarItem>\n {rightAlignedItemsDesktop}\n {rightAlignedItemsMobile}\n <ToolbarItem>\n <Tooltip position=\"top\" content={<div>Expand</div>}>\n <Button variant=\"plain\" aria-label=\"expand\">\n <ExpandIcon />\n </Button>\n </Tooltip>\n </ToolbarItem>\n </React.Fragment>\n );\n\n const items = (\n <React.Fragment>\n <ToolbarGroup align={{ default: 'alignLeft' }}>{leftAlignedItems}</ToolbarGroup>\n <ToolbarGroup align={{ default: 'alignRight' }}>{rightAlignedItems}</ToolbarGroup>\n </React.Fragment>\n );\n\n const toolbar = (\n <Toolbar\n id=\"log-viewer-toolbar\"\n inset={{\n default: 'insetNone'\n }}\n >\n <ToolbarContent>{items}</ToolbarContent>\n </Toolbar>\n );\n return (\n <DashboardWrapper sidebarNavOpen={!mobileView} onPageResize={this.onPageResize}>\n <PageSection variant={PageSectionVariants.light}>{toolbar}</PageSection>\n </DashboardWrapper>\n );\n }\n}
1",title:"Console log viewer toolbar demo",lang:"js",isFullscreen:!0}),o.createElement("p",{className:"ws-p"},"This is an example of toolbar usage in log viewer."))}};var S=function(){return o.createElement(o.Fragment,null,o.createElement(a.sg,{id:"demos",size:"h2",className:"ws-title ws-h2"},"Demos"),o.createElement(f.examples["Console log viewer toolbar demo"]))};S.displayName="ComponentsToolbarReactDemosDocs",S.pageData=f,n.default=S},81800:function(e,n,t){e.exports={srcSet:t.p+"images/console-log-viewer-toolbar-demo.1e2c0a551e05307b.png 800w",images:[{path:t.p+"images/console-log-viewer-toolbar-demo.1e2c0a551e05307b.png",width:800,height:450}],src:t.p+"images/console-log-viewer-toolbar-demo.1e2c0a551e05307b.png",toString:function(){return t.p+"images/console-log-viewer-toolbar-demo.1e2c0a551e05307b.png"},width:800,height:450}},82873:function(e,n,t){"use strict";t.d(n,{G3:function(){return a},IE:function(){return i}});var o=t(84813);const a={name:"CogIcon",height:512,width:512,svgPath:"M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z",yOffset:0,xOffset:0},i=(0,o.I)(a);n.ZP=i},18554:function(e,n,t){"use strict";t.d(n,{Qq:function(){return i},xv:function(){return a}});var o=t(84813);const a={name:"ExpandIcon",height:512,width:448,svgPath:"M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z",yOffset:0,xOffset:0},i=(0,o.I)(a);n.ZP=i},1214:function(e,n,t){"use strict";t.d(n,{R7:function(){return a},fp:function(){return i}});var o=t(84813);const a={name:"PauseIcon",height:512,width:448,svgPath:"M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z",yOffset:0,xOffset:0},i=(0,o.I)(a);n.ZP=i},76494:function(e,n,t){"use strict";t.d(n,{Xr:function(){return a},o1:function(){return i}});var o=t(84813);const a={name:"PlayIcon",height:512,width:448,svgPath:"M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z",yOffset:0,xOffset:0},i=(0,o.I)(a);n.ZP=i},54313:function(e,n,t){"use strict";t.d(n,{gZ:function(){return a},pT:function(){return i}});var o=t(84813);const a={name:"QuestionCircleIcon",height:512,width:512,svgPath:"M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z",yOffset:0,xOffset:0},i=(0,o.I)(a);n.ZP=i},68047:function(e,n,t){"use strict";e.exports=t.p+"images/668560cd.svg"},99984:function(e,n,t){"use strict";e.exports=t.p+"images/ca43ebed.svg"}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.