Skip to content

Commit

Permalink
Merge pull request #74 from metrico/jacovinus-mutiple-label-tooltip
Browse files Browse the repository at this point in the history 
theming init
  • Loading branch information
@jacovinus
jacovinus authored Apr 5, 2022
2 parents dfcb8ec + 542bd83 commit 7517817
Show file tree
Hide file tree
Showing 15 changed files with 483 additions and 276 deletions.
257 changes: 52 additions & 205 deletions src/components/LabelBrowser/QueryBar.js
View file
Original file line number Diff line number Diff line change
@@ -1,153 +1,27 @@
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";
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 (
<ShowLabelsBtn
onClick={onValueDisplay}
browserActive={labelsBrowserOpen}
isMobile={isMobile}
>
{labelsBrowserOpen ? (
<KeyboardArrowDownIcon fontSize={"small"} />
) : (
<KeyboardArrowRightIcon fontSize={"small"} />
)}{" "}
{LOG_BROWSER}
</ShowLabelsBtn>
);
}

function HistoryButton({ queryLength, handleHistoryClick, isMobile }) {
const [buttonState, setButtonState] = useState(false);

useEffect(() => {
if (queryLength > 0) {
setButtonState(true);
} else {
setButtonState(false);
}
}, [queryLength]);

return (
<Tooltip title={"Query History (" + queryLength + ")"}>
<HistoryButtonStyled
isMobile={isMobile}
onClick={handleHistoryClick}
>
<HistoryIconStyled color={buttonState ? "orange" : "#ddd"} />
</HistoryButtonStyled>
</Tooltip>
);
}
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();
Expand All @@ -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(() => {
Expand Down Expand Up @@ -276,27 +118,34 @@ export const QueryBar = () => {
dispatch(setHistoryOpen(!historyOpen));
}
return (
<div style={{ maxWidth: "100%" }}>
<div
className={css`
max-width: 100%;
`}
>
<MobileTopQueryMenu>
<ShowLabelsButton
onValueDisplay={onValueDisplay}
labelsBrowserOpen={labelsBrowserOpen}
isMobile={true}
/>
<HistoryButton
queryLength={queryHistory.length}
handleHistoryClick={handleHistoryClick}
isMobile={true}
/>
<div
className={css`
display: flex;
`}
>
<ShowLabelsButton
onValueDisplay={onValueDisplay}
labelsBrowserOpen={labelsBrowserOpen}
isMobile={true}
/>
<HistoryButton
queryLength={queryHistory.length}
handleHistoryClick={handleHistoryClick}
isMobile={true}
/>
</div>

<ShowLogsButton
disabled={!queryValid}
type="submit"
onClick={onSubmit}
isMobile={true}
>
{" "}
{SHOW_LOGS}
</ShowLogsButton>
/>
</MobileTopQueryMenu>
<QueryBarContainer>
<ShowLabelsButton
Expand All @@ -316,11 +165,9 @@ export const QueryBar = () => {
/>
<ShowLogsButton
disabled={!queryValid}
type="submit"
onClick={onSubmit}
>
{SHOW_LOGS}
</ShowLogsButton>
isMobile={false}
/>
</QueryBarContainer>
</div>
);
Expand Down
29 changes: 29 additions & 0 deletions src/components/LabelBrowser/components/HistoryButton/HistoryButton.js
View file
Original file line number Diff line number Diff line change
@@ -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 (
<Tooltip title={"Query History (" + queryLength + ")"}>
<HistoryButtonStyled
isMobile={isMobile}
onClick={handleHistoryClick}
>
<HistoryIconStyled color={buttonState ? "orange" : "#ddd"} />
{isMobile && <span>History</span>}
</HistoryButtonStyled>
</Tooltip>
);
}
24 changes: 24 additions & 0 deletions src/components/LabelBrowser/components/ShowLabelsButton/ShowLabelsButton.js
View file
Original file line number Diff line number Diff line change
@@ -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 (
<ShowLabelsBtn
onClick={onValueDisplay}
browserActive={labelsBrowserOpen}
isMobile={isMobile}
>
{labelsBrowserOpen ? (
<KeyboardArrowDownIcon fontSize={"small"} />
) : (
<KeyboardArrowRightIcon fontSize={"small"} />
)}{" "}
{LOG_BROWSER}
</ShowLabelsBtn>
);
}
15 changes: 15 additions & 0 deletions src/components/LabelBrowser/components/ShowLogsButton/ShowLogsButton.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { ShowLogsBtn } from "../styled";

export default function ShowLogsButton({ disabled, onClick, isMobile }) {
const SHOW_LOGS = "Show Logs";
return (
<ShowLogsBtn
disabled={disabled}
type="submit"
onClick={onClick}
isMobile={isMobile}
>
{SHOW_LOGS}
</ShowLogsBtn>
);
}
Loading

0 comments on commit 7517817

Please sign in to comment.