diff --git a/src/components/LabelBrowser/QueryBar.js b/src/components/LabelBrowser/QueryBar.js index 6d9c3d12..427ff08b 100644 --- a/src/components/LabelBrowser/QueryBar.js +++ b/src/components/LabelBrowser/QueryBar.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect} from "react"; +import React, { useState, useEffect } from "react"; import { useSelector, useDispatch } from "react-redux"; import { setIsSubmit, setQuery } from "../../actions"; import loadLogs from "../../actions/loadLogs"; @@ -6,148 +6,22 @@ import setLoading from "../../actions/setLoading"; import { setLabelsBrowserOpen } from "../../actions/setLabelsBrowserOpen"; import localService from "../../services/localService"; import setQueryHistory from "../../actions/setQueryHistory"; -import HistoryIcon from "@mui/icons-material/History"; -import styled from "@emotion/styled"; + import setHistoryOpen from "../../actions/setHistoryOpen"; -import { Tooltip } from "@mui/material"; import localUrl from "../../services/localUrl"; import setLinksHistory from "../../actions/setLinksHistory"; import QueryEditor from "../../plugins/queryeditor"; -import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; -import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight"; + import loadLabels from "../../actions/LoadLabels"; import { decodeQuery } from "../../helpers/UpdateStateFromQueryParams"; - -const HistoryButtonStyled = styled.button` - background: none; - color: #ddd; - font-size: 14px; - border: none; - cursor: pointer; - - height: 22px; - margin: 3px; - @media screen and (max-width: 864px) { - display: ${(props) => (props.isMobile ? "flex" : "none")}; - } -`; -const $dark_quoise = "#208989"; -const $dark_quoise_hover = "#14b8b8"; -const HistoryIconStyled = styled(HistoryIcon)` - color: ${(props) => props.color}; -`; -const QueryBarContainer = styled.div` - display: flex; - padding: 3px 6px; - margin: 5px 0px; - margin-left: 0px; - background: #8a8a8a22; - flex-wrap: wrap; - border-radius: 3px; -`; -const ShowLogsButton = styled.button` - background: ${$dark_quoise}; - cursor: pointer; - color: white; - outline: none; - border: none; - border-radius: 4px; - font-weight: bold; - margin: 3px; - transition: 0.25s all; - height: 30px; - align-items: center; - justify-content: center; - white-space: nowrap; - &:hover { - background: ${$dark_quoise_hover}; - } - &:disabled { - background: rgb(67, 67, 67); - cursor: not-allowed; - } - @media screen and (max-width: 864px) { - display: ${(props) => (props.isMobile ? "flex" : "none")}; - - margin: 0; - } -`; -const ShowLabelsBtn = styled.button` - margin: 3px; - - border-radius: 3px; - background: ${(props) => (props.browserActive ? "#7b7b7b3b" : "#7b7b7b55")}; - height: 30px; - font-size: 0.85em; - display: flex; - cursor: pointer; - align-items: center; - text-overflow: ellipsis; - border: 1px solid transparent; - transition: 0.25s all; - white-space: nowrap; - justify-content: flex-start; - color: #ddd; - &:hover { - background: #7b7b7b3b; - } - @media screen and (max-width: 864px) { - display: ${(props) => (props.isMobile ? "flex" : "none")}; - padding-right: 8px; - margin: 0; - } -`; - -const MobileTopQueryMenu = styled.div` - display: none; - @media screen and (max-width: 864px) { - display: flex; - justify-content: space-between; - margin: 10px; - } -`; - -function ShowLabelsButton({ onValueDisplay, labelsBrowserOpen, isMobile }) { - const LOG_BROWSER = "Labels"; - - return ( - - {labelsBrowserOpen ? ( - - ) : ( - - )}{" "} - {LOG_BROWSER} - - ); -} - -function HistoryButton({ queryLength, handleHistoryClick, isMobile }) { - const [buttonState, setButtonState] = useState(false); - - useEffect(() => { - if (queryLength > 0) { - setButtonState(true); - } else { - setButtonState(false); - } - }, [queryLength]); - - return ( - - - - - - ); -} +import { css } from "@emotion/css"; +import { MobileTopQueryMenu, QueryBarContainer } from "./components/styled"; +import HistoryButton from "./components/HistoryButton/HistoryButton"; +import ShowLabelsButton from "./components/ShowLabelsButton/ShowLabelsButton"; +import ShowLogsButton from "./components/ShowLogsButton/ShowLogsButton"; +import queryInit from "./helpers/queryInit"; +import onQueryValid from "./helpers/onQueryValid"; +import debugLog from "./helpers/debugLog"; export const QueryBar = () => { const dispatch = useDispatch(); @@ -162,59 +36,27 @@ export const QueryBar = () => { const [queryInput, setQueryInput] = useState(query); const [queryValid, setQueryValid] = useState(false); - const [queryValue, setQueryValue] = useState( - query.split(/[ ]+/).map((m) => ({ - type: "paragraph", - children: [ - { - text: m, - }, - ], - })) || [ - { - type: "paragraph", - children: [ - { - text: "Enter a cLoki Query", - }, - ], - }, - ] - ); - const SHOW_LOGS = "Show Logs"; + const [queryValue, setQueryValue] = useState(queryInit(query)); const queryHistory = useSelector((store) => store.queryHistory); const saveUrl = localUrl(); - const onQueryValid = (query) => { - return query !== "{" && query !== "}" && query !== "{}" && query !== ""; // TODO: make a proper query validation - }; - useEffect(() => { - // force a query to be run after load of component - if (debug) - console.log("🚧 LOGIC/QueryBar/", typeof query, query.length); - - if (onQueryValid(query && isSubmit === "true")) { - if (debug) { - console.log( - "🚧 LOGIC/QueryBar/ dispatch ", - query !== "{}", - query.length > 0, - query !== "{}" || query.length > 1 - ); - // here - } - - dispatch(setLoading(true)); - dispatch(loadLogs()); - - setTimeout(() => { - dispatch(setIsSubmit(false)); - }, 200); - } else if (!onQueryValid(query) && isSubmit === "true") { - dispatch(setIsSubmit(false)); - } + const dLog = debugLog(query); + debug && dLog.logicQueryBar(); + + if (onQueryValid(query && isSubmit === "true")) { + debug && dLog.queryBarDispatch(); + + dispatch(setLoading(true)); + dispatch(loadLogs()); + + setTimeout(() => { + dispatch(setIsSubmit(false)); + }, 200); + } else if (!onQueryValid(query) && isSubmit === "true") { + dispatch(setIsSubmit(false)); + } }, []); useEffect(() => { @@ -276,27 +118,34 @@ export const QueryBar = () => { dispatch(setHistoryOpen(!historyOpen)); } return ( -
+
- - +
+ + +
+ - {" "} - {SHOW_LOGS} - + /> { /> - {SHOW_LOGS} - + isMobile={false} + />
); diff --git a/src/components/LabelBrowser/components/HistoryButton/HistoryButton.js b/src/components/LabelBrowser/components/HistoryButton/HistoryButton.js new file mode 100644 index 00000000..1e255f8d --- /dev/null +++ b/src/components/LabelBrowser/components/HistoryButton/HistoryButton.js @@ -0,0 +1,29 @@ + + +import { Tooltip } from '@mui/material'; +import { useEffect, useState } from 'react'; +import { HistoryButtonStyled, HistoryIconStyled } from '../styled'; + +export default function HistoryButton({ queryLength, handleHistoryClick, isMobile }) { + const [buttonState, setButtonState] = useState(false); + + useEffect(() => { + if (queryLength > 0) { + setButtonState(true); + } else { + setButtonState(false); + } + }, [queryLength]); + + return ( + + + + {isMobile && History} + + + ); +} \ No newline at end of file diff --git a/src/components/LabelBrowser/components/ShowLabelsButton/ShowLabelsButton.js b/src/components/LabelBrowser/components/ShowLabelsButton/ShowLabelsButton.js new file mode 100644 index 00000000..e4d3a03a --- /dev/null +++ b/src/components/LabelBrowser/components/ShowLabelsButton/ShowLabelsButton.js @@ -0,0 +1,24 @@ +import { ShowLabelsBtn } from "../styled"; +import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; +import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight"; + + + +export default function ShowLabelsButton({ onValueDisplay, labelsBrowserOpen, isMobile }) { + const LOG_BROWSER = "Labels"; + + return ( + + {labelsBrowserOpen ? ( + + ) : ( + + )}{" "} + {LOG_BROWSER} + + ); +} \ No newline at end of file diff --git a/src/components/LabelBrowser/components/ShowLogsButton/ShowLogsButton.js b/src/components/LabelBrowser/components/ShowLogsButton/ShowLogsButton.js new file mode 100644 index 00000000..4293f06f --- /dev/null +++ b/src/components/LabelBrowser/components/ShowLogsButton/ShowLogsButton.js @@ -0,0 +1,15 @@ +import { ShowLogsBtn } from "../styled"; + +export default function ShowLogsButton({ disabled, onClick, isMobile }) { + const SHOW_LOGS = "Show Logs"; + return ( + + {SHOW_LOGS} + + ); +} diff --git a/src/components/LabelBrowser/components/styled/index.js b/src/components/LabelBrowser/components/styled/index.js new file mode 100644 index 00000000..f72b104f --- /dev/null +++ b/src/components/LabelBrowser/components/styled/index.js @@ -0,0 +1,104 @@ +import styled from "@emotion/styled"; + +import HistoryIcon from "@mui/icons-material/History"; +import darkTheme from "../../../../theme/dark"; + +// get theme from main state + +const theme = darkTheme; + +export const HistoryIconStyled = styled(HistoryIcon)` + color: ${(props) => props.color}; +`; +export const HistoryButtonStyled = styled.button` + 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; + } + @media screen and (max-width: 864px) { + display: ${(props) => (props.isMobile ? "flex" : "none")}; + } +`; + +export const ShowLabelsBtn = styled.button` + background: ${(props) => (props.browserActive ? theme.buttonDefault : theme.buttonHover)}; + font-size: 1em; + display: flex; + cursor: pointer; + align-items: center; + 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 { + background: ${theme.buttonHover}; + } + @media screen and (max-width: 864px) { + display: ${(props) => (props.isMobile ? "flex" : "none")}; + + margin: 0; + } +`; + +export const QueryBarContainer = styled.div` + display: flex; + padding: 3px 6px; + margin: 5px 0px; + margin-left: 0px; + background: ${theme.widgetContainer}; + flex-wrap: wrap; + border-radius: 3px; +`; +export const ShowLogsBtn = styled.button` + 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}; + } + &:disabled { + background: ${theme.buttonDefault}; + cursor: not-allowed; + } + @media screen and (max-width: 864px) { + display: ${(props) => (props.isMobile ? "flex" : "none")}; + + margin: 0; + } +`; + +export const MobileTopQueryMenu = styled.div` + display: none; + @media screen and (max-width: 864px) { + display: flex; + justify-content: space-between; + margin: 10px; + } +`; diff --git a/src/components/LabelBrowser/helpers/debugLog.js b/src/components/LabelBrowser/helpers/debugLog.js new file mode 100644 index 00000000..e0036185 --- /dev/null +++ b/src/components/LabelBrowser/helpers/debugLog.js @@ -0,0 +1,14 @@ +export default function debugLog(query) { + const logicQueryBar = () => { + console.log("🚧 LOGIC/QueryBar/", typeof query, query.length); + }; + const queryBarDispatch = () => { + console.log( + "🚧 LOGIC/QueryBar/ dispatch ", + query !== "{}", + query.length > 0, + query !== "{}" || query.length > 1 + ); + }; + return {logicQueryBar, queryBarDispatch} +} diff --git a/src/components/LabelBrowser/helpers/onQueryValid.js b/src/components/LabelBrowser/helpers/onQueryValid.js new file mode 100644 index 00000000..f791b522 --- /dev/null +++ b/src/components/LabelBrowser/helpers/onQueryValid.js @@ -0,0 +1,3 @@ +export default function onQueryValid(query){ + return query !== "{" && query !== "}" && query !== "{}" && query !== ""; // TODO: make a proper query validation +} \ No newline at end of file diff --git a/src/components/LabelBrowser/helpers/queryInit.js b/src/components/LabelBrowser/helpers/queryInit.js new file mode 100644 index 00000000..98d3ec5a --- /dev/null +++ b/src/components/LabelBrowser/helpers/queryInit.js @@ -0,0 +1,21 @@ +export default function queryInit(query) { + return ( + query.split(/[ ]+/).map((m) => ({ + type: "paragraph", + children: [ + { + text: m, + }, + ], + })) || [ + { + type: "paragraph", + children: [ + { + text: "Enter a cLoki Query", + }, + ], + }, + ] + ); +} diff --git a/src/components/StatusBar/components/apiselector/ApiSelector.js b/src/components/StatusBar/components/apiselector/ApiSelector.js index 78c17a84..2580a64a 100644 --- a/src/components/StatusBar/components/apiselector/ApiSelector.js +++ b/src/components/StatusBar/components/apiselector/ApiSelector.js @@ -55,26 +55,24 @@ export function ApiSelector() { return ( -
- - {apiSelectorOpen ? ( -
- {API_URL} - - -
- ) : null} -
+ + {apiSelectorOpen ? ( +
+ {API_URL} + + +
+ ) : null} ); } diff --git a/src/components/StatusBar/components/daterangepicker/index.js b/src/components/StatusBar/components/daterangepicker/index.js index 486cf61c..137da478 100644 --- a/src/components/StatusBar/components/daterangepicker/index.js +++ b/src/components/StatusBar/components/daterangepicker/index.js @@ -41,7 +41,13 @@ import AccessTimeOutlinedIcon from "@mui/icons-material/AccessTimeOutlined"; import { Tooltip } from "@mui/material"; import loadLogs from "../../../../actions/loadLogs"; import { setLabelsBrowserOpen } from "../../../../actions/setLabelsBrowserOpen"; + + + import TimeLabel from "./components/TimeLabel"; +import { DatePickerButton } from "../../styled"; + + export function DateRangePickerMain(props) { const today = Date.now(); const { isOpen, minDate, maxDate } = props; @@ -189,18 +195,6 @@ export function DateRangePickerMain(props) { ); }; - const dateButtonStyles = { - border: "none", - height: "21px", - background: "#121212", - color: "orange", - padding: "3px 6px", - borderRadius: "3px", - fontSize: ".85em", - display: "flex", - alignItems: "center", - marginLeft: "20px", - }; const helpers = { inHoverRange, @@ -237,8 +231,8 @@ export function DateRangePickerMain(props) { : ""} > - + {rangeOpen ? (
diff --git a/src/components/StatusBar/styled/index.js b/src/components/StatusBar/styled/index.js index 41819f29..1a6b1fca 100644 --- a/src/components/StatusBar/styled/index.js +++ b/src/components/StatusBar/styled/index.js @@ -1,11 +1,17 @@ import styled from "@emotion/styled"; - +import darkTheme from "../../../theme/dark"; +const theme = darkTheme; export const MenuButton = styled.button` - display: none; + padding: 0px 8px; + font-size: 1em; + line-height: 1.5; + display: flex; + align-items: center; background: none; border: none; - margin-left: 10px; - color: ${(props) => (props.isActive ? "orange" : "#ddd")}; + display: none; + color: ${(props) => + props.isActive ? theme.inputTextFocus : theme.textColor}; cursor: pointer; @media screen and (max-width: 850px) { @@ -26,14 +32,31 @@ export const StatusBarCont = styled.div` export const StatusCont = styled.div` display: flex; align-items: center; + .selector { + margin-left: 10px; + .label { + flex: 1; + color: ${theme.inputLabelColor}; + padding: 4px 8px; + font-size: 0.85em; + text-transform: uppercase; + background: ${theme.inputLabelBg}; + border-radius: 4px; + } + } input { - color: orange; - background: #121212; + color: #ddd; + background: ${theme.inputBg}; border: none; - margin: 3px; - padding: 3px 6px; - font-size: 13px; + outline: none; + padding: 4px 8px; + font-size: 1em; border-radius: 3px; + line-height: 1.5; + margin: 0px 5px; + &:focus { + color: orange; + } &.limit { width: 50px; } @@ -42,29 +65,63 @@ export const StatusCont = styled.div` } &.date-time-range { width: 120px; - color: orange; - background: #121212; } } `; export const ApiSelectorStyled = styled.div` display: flex; align-items: center; - @media screen and (max-width: 850px) { - display: none; + margin-left: 20px; + display: flex; + align-items: center; + transition: 0.2s all; + + input { + color: ${theme.textColor}; + background: ${theme.inputBg}; + border: none; + outline: none; + padding: 4px 8px; + font-size: 1em; + border-radius: 3px; + line-height: 1.5; + margin: 0px 5px; + &:focus { + color: orange; + } + &.url { + width: 175px; + } + } + + button { + display: flex; + align-items: center; + border: none; + padding: 4px 8px; + border-radius: 3px; + background: #7b7b7b3b; + color: #d1d1d1; + font-size: 1em; + cursor: pointer; + line-height: 1.5; + white-space: nowrap; + text-overflow: ellipsis; + transition: 0.2s all; + &:hover { + background: #9e9e9e3b; + } } + .selector { margin-left: 10px; .label { flex: 1; - color: #bfbfbf; - min-width: 51px; - padding: 6px 6px; - margin: 5px; - font-size: 0.7rem; + color: ${theme.inputLabelColor}; + padding: 4px 8px; + font-size: 0.85em; text-transform: uppercase; - letter-spacing: 1px; - background: #12121267; + background: ${theme.inputLabelBg}; border-radius: 4px; } } @@ -72,31 +129,49 @@ export const ApiSelectorStyled = styled.div` display: flex; align-items: center; } + @media screen and (max-width: 850px) { + display: none; + } `; export const UrlCopyButton = styled.button` display: flex; align-items: center; - height: 20px; - font-size: 18px; border: none; - margin: 3px; - padding: 5px 8px; + padding: 4px 8px; background: #7b7b7b3b; + border-radius: 3px; color: ${({ isActive }) => (isActive ? "orange" : "#7b7b7b")}; - font-size: 0.9em; cursor: ${({ isActive }) => (isActive ? "pointer" : "not-allowed")}; align-items: center; white-space: nowrap; text-overflow: ellipsis; transition: 0.2s all; + font-size: 1em; + line-height: 1.5; span { margin-left: 4px; - text-transform: uppercase; - font-size: 0.85em; - color: #d1d1d1; + color: ${theme.textColor}; } &:hover { background: #9e9e9e3b; } `; + +export const DatePickerButton = styled.button` + cursor:pointer; + border: none; + background: ${theme.inputBg}; + color: ${theme.textColor}; + padding: 4px 8px; + border-radius: 3px; + font-size: 1em; + line-height: 1.5; + display: flex; + align-items: center; + margin-left: 10px; + span{ margin-left:5px;} + &:hover{ + color:orange; + } +`; diff --git a/src/scss/modules/date-range-picker.scss b/src/scss/modules/date-range-picker.scss index fa845334..835fce08 100644 --- a/src/scss/modules/date-range-picker.scss +++ b/src/scss/modules/date-range-picker.scss @@ -12,6 +12,10 @@ } @media screen and (max-width: 1200px) { .date-time-selector { + font-size: 1em; + padding: 8px; + color:#ddd; + line-height: 1.5; svg { margin-right: 0; } diff --git a/src/scss/modules/status-bar.scss b/src/scss/modules/status-bar.scss index 8db06fdc..24687c39 100644 --- a/src/scss/modules/status-bar.scss +++ b/src/scss/modules/status-bar.scss @@ -15,14 +15,9 @@ .label { flex: 1; color: #bfbfbf; - min-width: 51px; - padding: 6px 6px; - margin: 5px; - font-size: 0.7rem; + text-transform: uppercase; - letter-spacing: 1px; - background: #12121267; - border-radius: 4px; + border-radius: 3px; } } & div { diff --git a/src/store/createInitialState.js b/src/store/createInitialState.js index 9ab3a5aa..896e01e3 100644 --- a/src/store/createInitialState.js +++ b/src/store/createInitialState.js @@ -39,7 +39,8 @@ const initialState = () => { apiUrl: externalState.apiUrl || environment.apiUrl || '', isSubmit: externalState.isSubmit || false, chartType:'line', - notifications: [] + notifications: [], + theme: 'darkTheme' } if (debug) console.log('🚧 LOGIC/ INITIAL STATE ::: ', state) return state diff --git a/src/theme/dark.js b/src/theme/dark.js new file mode 100644 index 00000000..0574d21a --- /dev/null +++ b/src/theme/dark.js @@ -0,0 +1,83 @@ +// this is the set for dark theme colors + +// black +const black = { + b10: "#12121267", + b15: "#121212", + b100: "#0a0a0a", + b200: "#141414", + b300: "#1a1a1a", + b400: "#292929", + b500: "#333333", +}; +const white = { + w100: "#fff", + w200: "#f5f5f5", + w300: "#ebebeb", + w400: "#e0e0e0", + w500: "#d6d6d6", +}; + +const lightgrey = { + lg100: "#ccc", + lg200: "#c2c2c2", //text + lg300: "#b8b8b8", + lg400: "#adadad", // label + lg500: "#a3a3a3", +}; + +const darkgrey = { + dg10: "##7b7b7b3b", + dg15: "#7b7b7b55", + dg100: "#474747", + dg200: "#525252", + dg300: "#5c5c5c", + dg400: "#666", + dg500: "#707070", +}; + +const turquoise = { + tq100: "#1b7474", + tq200: "#208989", // button + tq300: "#2bb6b6", // button hover + tq400: "#39d0d0", + tq500: "#5ad8d8", +}; + +const orange = { + or100: "orange", +}; + +const textColor = lightgrey.lg200; +const inputBg = black.b15; +const primaryDark = turquoise.tq200; +const primaryLight = turquoise.tq300; +const widgetContainer = black.b400; +const buttonDefault = darkgrey.dg100; +const buttonHover = darkgrey.dg15; +const buttonInactive = black.b400; +const inputTextFocus = orange.or100; +const inputLabelColor = lightgrey.lg400; +const inputLabelBg = black.bg10; + + +const darkTheme = { + black, + white, + lightgrey, + textColor, + primaryDark, + primaryLight, + widgetContainer, + buttonDefault, + buttonHover, + buttonInactive, + inputBg, + inputTextFocus, + inputLabelColor, + inputLabelBg, + darkgrey, + turquoise, + +}; +export default darkTheme;