Merge pull request #76 from metrico/jacovinus-mutiple-label-tooltip

Add settings menu and settings dialog

Author: jacovinus

Diff for: src/actions/setSettingsDialogOpen

@@ -0,0 +1,8 @@
+const setSettingsDialogOpen = (settingsDialogOpen) => (dispatch) => {
+dispatch({
+    type: 'SET_SETTINGS_DIALOG_OPEN',
+    settingsDialogOpen
+})
+}
+
+export default setSettingsDialogOpen;

Diff for: src/components/LabelBrowser/components/styled/index.js

@@ -2,6 +2,7 @@ import styled from "@emotion/styled";
 
 import HistoryIcon from "@mui/icons-material/History";
 import darkTheme from "../../../../theme/dark";
+import { BtnSmall } from "../../../../theme/styles/Button";
 
 // get theme from main state
 
@@ -10,19 +11,11 @@ const theme = darkTheme;
 export const HistoryIconStyled = styled(HistoryIcon)`
     color: ${(props) => props.color};
 `;
-export const HistoryButtonStyled = styled.button`
+export const HistoryButtonStyled = styled(BtnSmall)`
     background: none;
     color: ${theme.textColor};
     margin-left: 5px;
     background: ${theme.buttonHover};
-    border: none;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    line-height: 1.5;
-    font-size: 1em;
-    padding: 0px 8px;
-    border-radius: 3px;
     span {
         margin-left: 5px;
     }
@@ -31,18 +24,11 @@ export const HistoryButtonStyled = styled.button`
     }
 `;
 
-export const ShowLabelsBtn = styled.button`
-    background: ${(props) => (props.browserActive ? theme.buttonDefault : theme.buttonHover)};
-    font-size: 1em;
-    display: flex;
-    cursor: pointer;
-    align-items: center;
+export const ShowLabelsBtn = styled(BtnSmall)`
+    background: ${(props) =>
+        props.browserActive ? theme.buttonDefault : theme.buttonHover};
     text-overflow: ellipsis;
-    border: none;
-    border-radius: 3px;
-    padding: 4px 8px;
     transition: 0.25s all;
-    white-space: nowrap;
     justify-content: flex-start;
     color: ${theme.textColor};
     &:hover {
@@ -64,22 +50,12 @@ export const QueryBarContainer = styled.div`
     flex-wrap: wrap;
     border-radius: 3px;
 `;
-export const ShowLogsBtn = styled.button`
+export const ShowLogsBtn = styled(BtnSmall)`
     background: ${theme.primaryDark};
-    cursor: pointer;
     color: white;
-    outline: none;
-    border: none;
-    border-radius: 3px;
-
     margin-left: 5px;
     transition: 0.25s all;
-    padding: 4px 8px;
-    font-size: 1em;
-    line-height: 1.5;
-    align-items: center;
     justify-content: center;
-    white-space: nowrap;
     &:hover {
         background: ${theme.primaryLight};
     }

Diff for: src/components/MainView.js

@@ -4,21 +4,28 @@ import DataView from "./DataView/DataView";
 import StatusBar from "./StatusBar";
 import { UpdateStateFromQueryParams } from "../helpers/UpdateStateFromQueryParams";
 import LabelBrowser from "./LabelBrowser";
-import SettingsMenu from "../plugins/settingsmenu";
+import SettingsDialog from "../plugins/settingsdialog/SettingsDialog";
+import { useSelector } from 'react-redux';
 
 export default function MainView() {
     UpdateStateFromQueryParams();
-
+    const settingsDialogOpen = useSelector( store => store.settingsDialogOpen)
     return (
         <div className={"log-search"}>
+
             <StatusBar />
 
             <LabelBrowser />
 
             <DataView />
 
             <Notification />
-            <SettingsMenu />
+
+
+            <SettingsDialog
+             open={settingsDialogOpen}
+             />
+
         </div>
     );
 }

Diff for: src/components/StatusBar/components/apiselector/ApiSelector.js

@@ -7,7 +7,11 @@ import loadLogs from "../../../../actions/loadLogs";
 import { setApiUrl } from "../../../../actions";
 import LinkIcon from "@mui/icons-material/Link";
 import setLogs from "../../../../actions/setLogs";
-import { ApiSelectorStyled } from "../../styled";
+import {
+    ApiSelectorButton,
+    ApiSelectorInput,
+    ApiSelectorStyled,
+} from "../../styled";
 
 export function ApiSelector() {
     const apiUrl = useSelector((store) => store.apiUrl);
@@ -55,22 +59,26 @@ export function ApiSelector() {
 
     return (
         <ApiSelectorStyled>
-            <button
-                title={"Set API URL"}
-                className={"toggle-url"}
-                onClick={handleApiUrlOpen}
-            >
+            <ApiSelectorButton title={"Set API URL"} onClick={handleApiUrlOpen}>
                 <LinkIcon fontSize={"small"} />
-            </button>
+                <span
+                    style={{
+                        color: apiError ? "orangered" : "green",
+                    }}
+                >
+                    ●
+                </span>
+            </ApiSelectorButton>
             {apiSelectorOpen ? (
                 <div className={"selector"}>
                     <span className={"label"}>{API_URL}</span>
-                    <input
-                        className={"url"}
+                    <ApiSelectorInput
                         value={editedUrl}
                         onChange={handleIntputChange}
                     />
-                    <button onClick={onUrlSubmit}>{"save"}</button>
+                    <ApiSelectorButton onClick={onUrlSubmit}>
+                        {"save"}
+                    </ApiSelectorButton>
                 </div>
             ) : null}
         </ApiSelectorStyled>

Diff for: src/components/StatusBar/components/statusbarselectors/StatusBarSelectors.js

@@ -1,15 +1,12 @@
-import { useSelector } from "react-redux";
+
 import { useState } from "react";
-import { setQueryLimit, setQueryStep } from "../../../../actions";
 import { LocalizationProvider } from "@mui/lab";
 import AdapterDateFns from "@mui/lab/AdapterDateFns";
-import { StatusBarInput } from "../statusbarinput/StatusBarInput";
 import { DateRangePicker } from "../daterangepicker";
 import CopyLinkButton from "../copylinkbutton/CopyLinkButton";
 
 export function StatusBarSelectors() {
-    const queryLimit = useSelector((store) => store.limit);
-    const queryStep = useSelector((store) => store.step);
+
     const [open, setOpen] = useState();
 
     const isOpen = (e) => {
@@ -22,19 +19,6 @@ export function StatusBarSelectors() {
             <div className={"status-options"}>
                 <div className={"status-selectors"}>
                     <CopyLinkButton />
-
-                    <StatusBarInput
-                        label={"Limit"}
-                        value={queryLimit}
-                        dispatchAction={setQueryLimit}
-                        type={"limit"}
-                    />
-                    <StatusBarInput
-                        label={"Step"}
-                        value={queryStep}
-                        dispatchAction={setQueryStep}
-                        type={"limit"}
-                    />
                 </div>
 
                 <DateRangePicker isOpen={isOpen} />

Diff for: src/components/StatusBar/index.js

@@ -1,31 +1,11 @@
 import { ApiSelector } from "./components/apiselector/ApiSelector";
 import { StatusBarSelectors } from "./components/statusbarselectors/StatusBarSelectors";
 import Logo from "./assets/cloki-logo.png";
+import { StatusBarCont, StatusCont } from "./styled";
+import ClokiMenu from "../../plugins/settingsmenu/Menu";
 
-import { useSelector, useDispatch } from "react-redux";
-import { setSettingsMenuOpen } from "./actions/setMenuSettingsOpen";
-import DisplaySettingsIcon from "@mui/icons-material/DisplaySettings";
-import { MenuButton, StatusBarCont, StatusCont } from "./styled";
-import TimePickerButton from "./components/timepickerbutton/TimePickerButton";
-import { DateRangePicker } from "./components/daterangepicker";
-import { useState } from "react";
 
 export default function StatusBar() {
-    const dispatch = useDispatch();
-    const menuOpen = useSelector((store) => store.settingsMenuOpen);
-    const [open, setOpen] = useState();
-
-    const isOpen = (e) => {
-        e?.preventDefault();
-        setOpen(!open);
-    };
-
-    function openSettings() {
-        const shouldOpen = menuOpen ? false : true;
-
-        dispatch(setSettingsMenuOpen(shouldOpen));
-    }
-
     return (
         <StatusBarCont>
             <div className="logo-section">
@@ -37,15 +17,12 @@ export default function StatusBar() {
                 />
 
                 <ApiSelector />
-                {/* <TimePickerButton
-                /> */}
             </div>
 
             <StatusCont>
                 <StatusBarSelectors />
-                <MenuButton isActive={menuOpen} onClick={openSettings}>
-                    <DisplaySettingsIcon />
-                </MenuButton>
+
+           <ClokiMenu/>
             </StatusCont>
         </StatusBarCont>
     );