diff --git a/components/webui/imports/ui/SearchView/SearchControls/index.jsx b/components/webui/imports/ui/SearchView/SearchControls/index.jsx index e3daa7d13..81751f46c 100644 --- a/components/webui/imports/ui/SearchView/SearchControls/index.jsx +++ b/components/webui/imports/ui/SearchView/SearchControls/index.jsx @@ -90,6 +90,7 @@ const SearchControls = ({ CLP_STORAGE_ENGINES.CLP === Meteor.settings.public.ClpStorageEngine ? "Enter a wildcard query..." : "Enter a KQL query..."; + return ( <>
diff --git a/components/webui/imports/ui/Sidebar/Sidebar.jsx b/components/webui/imports/ui/Sidebar/Sidebar.jsx index 5dd935628..78d0f00d5 100644 --- a/components/webui/imports/ui/Sidebar/Sidebar.jsx +++ b/components/webui/imports/ui/Sidebar/Sidebar.jsx @@ -1,10 +1,11 @@ -import {NavLink} from "react-router-dom"; - import { faAngleDoubleLeft, faAngleDoubleRight, + faCircleInfo, + faMessage, } from "@fortawesome/free-solid-svg-icons"; -import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; + +import SidebarButton from "./SidebarButton"; import "./Sidebar.scss"; @@ -23,60 +24,47 @@ const Sidebar = ({ isSidebarCollapsed, routes, onSidebarToggle, -}) => { - return ( -
-
- {!isSidebarCollapsed && YScope} - {isSidebarCollapsed ? - CLP : - "CLP"} -
+}) => ( +
+
+ {!isSidebarCollapsed && YScope} + {isSidebarCollapsed ? + CLP : + "CLP"} +
-
- {routes.map((route, i) => (false === (route.hide ?? false)) && ( - -
- -
- - {route.label} - -
- ))} -
+
+ {routes.map((route, i) => (false === (route.hide ?? false)) && ( + + ))} +
-
-
- { - isSidebarCollapsed ? - : - - } -
- Collapse Menu -
+
+ + +
- ); -}; +
+); export default Sidebar; diff --git a/components/webui/imports/ui/Sidebar/Sidebar.scss b/components/webui/imports/ui/Sidebar/Sidebar.scss index c41fa4f0b..2c75ea68f 100644 --- a/components/webui/imports/ui/Sidebar/Sidebar.scss +++ b/components/webui/imports/ui/Sidebar/Sidebar.scss @@ -35,6 +35,7 @@ display: flex; flex-direction: column; overflow-y: auto; + user-select: none; } .sidebar-item-icon { @@ -71,6 +72,8 @@ white-space: nowrap; transition: width 0.5s; + + cursor: pointer; } .sidebar-menu a:hover, .sidebar-menu .active { @@ -86,68 +89,3 @@ .sidebar-menu .active { background-color: #004952; } - -.sidebar-collapse-toggle { - border-left: 1px solid #333; - - line-height: 3rem; - overflow: hidden; - text-align: center; - white-space: nowrap; - - cursor: pointer; - user-select: none; -} - -.sidebar-collapse-icon { - display: inline-block; - - width: 1.5rem; - - text-align: center; - - transition: width 0.5s; -} - -#sidebar.collapsed .sidebar-collapse-icon { - width: 3rem; -} - -.sidebar-collapse-text { - opacity: inherit; - transition: opacity 0.5s; -} - -#sidebar.collapsed .sidebar-collapse-text { - opacity: 0; -} - -.sidebar-collapse-toggle:hover { - background: #0d5259; - border-left: 1px solid #dedede; -} - -.sidebar-menu a.logout:hover { - background: #580000; -} - -#sidebar .sidebar-menu::-webkit-scrollbar { - width: 4px; - border-radius: 2px; -} - -#sidebar .sidebar-menu::-webkit-scrollbar-track { - background: #f1f1f1; - border-right: 1px solid rgb(34, 45, 50); - border-radius: 2px; -} - -#sidebar .sidebar-menu::-webkit-scrollbar-thumb { - background: #888; - border-radius: 2px; -} - -#sidebar .sidebar-menu::-webkit-scrollbar-thumb:hover { - background: #555; - border-radius: 2px; -} diff --git a/components/webui/imports/ui/Sidebar/SidebarButton.jsx b/components/webui/imports/ui/Sidebar/SidebarButton.jsx new file mode 100644 index 000000000..c6b14728d --- /dev/null +++ b/components/webui/imports/ui/Sidebar/SidebarButton.jsx @@ -0,0 +1,61 @@ +import {NavLink} from "react-router-dom"; + +import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; + + +/** + * Component for rendering a sidebar link. + * + * @param {object} props + * @param {import("@fortawesome/react-fontawesome").IconProp} props.icon + * @param {string} props.label + * @param {string} [props.link] + * @param {Function} [props.onClick] + * @return {React.ReactElement} + */ +const SidebarButton = ({ + icon, + label, + link, + onClick, +}) => { + const children = ( + <> +
+ +
+ + {label} + + + ); + + const isNavLink = ("undefined" !== typeof link) && link.startsWith("/"); + if (isNavLink) { + return ( + + {children} + + ); + } + + return ( + + {children} + + ); +}; + +export default SidebarButton; diff --git a/components/webui/settings.json b/components/webui/settings.json index e55c5126b..7cf574b32 100644 --- a/components/webui/settings.json +++ b/components/webui/settings.json @@ -15,6 +15,7 @@ "CompressionJobsCollectionName": "compression-jobs", "SearchResultsCollectionName": "search-results", "SearchResultsMetadataCollectionName": "results-metadata", - "StatsCollectionName": "stats" + "StatsCollectionName": "stats", + "SupportUrl": "https://github.com/y-scope/clp/issues/new/choose" } }