diff --git a/src/actions/loadLogs.js b/src/actions/loadLogs.js index da20d9d4..dda20106 100644 --- a/src/actions/loadLogs.js +++ b/src/actions/loadLogs.js @@ -6,8 +6,7 @@ import setMatrixData from "./setMatrixData"; import { nanoid } from "nanoid"; import { setStartTime, setStopTime } from "./"; import { findRangeByLabel } from "../components/StatusBar/components/daterangepicker/utils"; -import { createAlert } from "./createAlert"; -import { errorHandler } from "./errorHandler"; + export default function loadLogs() { const localStore = store.getState(); @@ -128,7 +127,7 @@ export default function loadLogs() { dispatch(setMatrixData([])); dispatch(setLoading(false)); - const handler = errorHandler(url, error, type) + }); }; diff --git a/src/components/LabelBrowser/QueryBar.js b/src/components/LabelBrowser/QueryBar.js index 7975ec59..51242be7 100644 --- a/src/components/LabelBrowser/QueryBar.js +++ b/src/components/LabelBrowser/QueryBar.js @@ -1,6 +1,6 @@ import React, { useState, useEffect } from "react"; import { useSelector, useDispatch } from "react-redux"; -import { setIsSubmit, setQuery } from "../../actions"; +import { setQuery } from "../../actions"; import loadLogs from "../../actions/loadLogs"; import setLoading from "../../actions/setLoading"; import { setLabelsBrowserOpen } from "../../actions/setLabelsBrowserOpen"; @@ -33,7 +33,6 @@ export const QueryBar = () => { const apiUrl = useSelector((store) => store.apiUrl); const historyOpen = useSelector((store) => store.historyOpen); const isEmbed = useSelector((store) => store.isEmbed) - const apiWarning = useSelector((store) => store.apiWarning) const [queryInput, setQueryInput] = useState(query); const [queryValid, setQueryValid] = useState(false); const [queryValue, setQueryValue] = useState(queryInit(query)); diff --git a/src/components/LabelBrowser/ValuesList.js b/src/components/LabelBrowser/ValuesList.js index bbd80359..9b6f9bbf 100644 --- a/src/components/LabelBrowser/ValuesList.js +++ b/src/components/LabelBrowser/ValuesList.js @@ -8,7 +8,6 @@ import { setQuery } from "../../actions"; import loadLabelValues from "../../actions/loadLabelValues"; import Tooltip from "@mui/material/Tooltip"; -import store from "../../store/store"; import styled from "@emotion/styled"; import loadLabels from "../../actions/loadLabels"; diff --git a/src/components/LabelBrowser/helpers/querybuilder.js b/src/components/LabelBrowser/helpers/querybuilder.js index 6116f211..9e2a4e98 100644 --- a/src/components/LabelBrowser/helpers/querybuilder.js +++ b/src/components/LabelBrowser/helpers/querybuilder.js @@ -2,9 +2,7 @@ import { setQuery } from "../../../actions"; import store from "../../../store/store"; export function queryBuilder(labels) { - const actualLabels = store.getState().labels const actualQuery = store.getState().query - // console.log(actualLabels) const preTags = actualQuery.split("{")[0] const postTags = actualQuery.split("}")[1] const selectedLabels = []; diff --git a/src/components/StatusBar/components/daterangepicker/defaults.js b/src/components/StatusBar/components/daterangepicker/defaults.js index 9138cefb..c7a965a3 100644 --- a/src/components/StatusBar/components/daterangepicker/defaults.js +++ b/src/components/StatusBar/components/daterangepicker/defaults.js @@ -1,55 +1,51 @@ -import { - addDays, - startOfWeek, - endOfWeek, - addWeeks, - startOfMonth, - endOfMonth, - addMonths, - addMinutes, - addHours, - addSeconds, - startOfDay, - endOfDay, - getHours -} from "date-fns"; - -const getDefaultRanges = (date) => [ - { - label: "Today", - dateStart: startOfDay, - dateEnd: endOfDay - }, - { - label: "Yesterday", - dateStart: addDays(date, -1), - dateEnd: addDays(date, -1) - }, - { - label: "This Week", - dateStart: startOfWeek(date), - dateEnd: endOfWeek(date) - }, - { - label: "Last Week", - dateStart: startOfWeek(addWeeks(date, -1)), - dateEnd: endOfWeek(addWeeks(date, -1)) - }, - { - label: "Last 7 Days", - dateStart: addWeeks(date, -1), - dateEnd: date - }, - { - label: "This Month", - dateStart: startOfMonth(date), - dateEnd: endOfMonth(date) - }, - { - label: "Last Month", - dateStart: startOfMonth(addMonths(date, -1)), - dateEnd: endOfMonth(addMonths(date, -1)) - } -]; - +import { + addDays, + startOfWeek, + endOfWeek, + addWeeks, + startOfMonth, + endOfMonth, + addMonths, + startOfDay, + endOfDay, +} from "date-fns"; + +const getDefaultRanges = (date) => [ + { + label: "Today", + dateStart: startOfDay, + dateEnd: endOfDay + }, + { + label: "Yesterday", + dateStart: addDays(date, -1), + dateEnd: addDays(date, -1) + }, + { + label: "This Week", + dateStart: startOfWeek(date), + dateEnd: endOfWeek(date) + }, + { + label: "Last Week", + dateStart: startOfWeek(addWeeks(date, -1)), + dateEnd: endOfWeek(addWeeks(date, -1)) + }, + { + label: "Last 7 Days", + dateStart: addWeeks(date, -1), + dateEnd: date + }, + { + label: "This Month", + dateStart: startOfMonth(date), + dateEnd: endOfMonth(date) + }, + { + label: "Last Month", + dateStart: startOfMonth(addMonths(date, -1)), + dateEnd: endOfMonth(addMonths(date, -1)) + } +]; + export const defaultRanges = getDefaultRanges(new Date()); \ No newline at end of file diff --git a/src/components/StatusBar/components/daterangepicker/index.js b/src/components/StatusBar/components/daterangepicker/index.js index c1e97947..b684b014 100644 --- a/src/components/StatusBar/components/daterangepicker/index.js +++ b/src/components/StatusBar/components/daterangepicker/index.js @@ -178,10 +178,7 @@ export function DateRangePickerMain(props) { dispatch(setRangeOpen(false)); isOpen(e); }; - const onQueryValid = (query) => { - return query !== "{" && query !== "}" && query !== "{}" && query !== ""; // TODO: make a proper query validation - }; - // helpers + const inHoverRange = (day) => { return ( dateStart && diff --git a/src/components/StatusBar/components/timepickerbutton/TimePickerButton.js b/src/components/StatusBar/components/timepickerbutton/TimePickerButton.js index 665fb03f..2ffe6f52 100644 --- a/src/components/StatusBar/components/timepickerbutton/TimePickerButton.js +++ b/src/components/StatusBar/components/timepickerbutton/TimePickerButton.js @@ -1,21 +1,20 @@ -import { TimePickerButtonStyled } from "./styled"; -import { useDispatch, useSelector } from "react-redux"; -import setTimePickerOpen from "./actions/setTimePickerOpen"; -import AccessTimeIcon from "@mui/icons-material/AccessTime"; -import { setRangeOpen } from "../../../../actions"; - -export default function TimePickerButton() { - const dispatch = useDispatch(); - const timePickerOpen = useSelector((store) => store.rangeOpen); - - function openTimePicker() { - const shouldOpen = timePickerOpen ? false : true; - - dispatch(setRangeOpen(shouldOpen)); - } - return ( - - - - ); -} +import { TimePickerButtonStyled } from "./styled"; +import { useDispatch, useSelector } from "react-redux"; +import AccessTimeIcon from "@mui/icons-material/AccessTime"; +import { setRangeOpen } from "../../../../actions"; + +export default function TimePickerButton() { + const dispatch = useDispatch(); + const timePickerOpen = useSelector((store) => store.rangeOpen); + + function openTimePicker() { + const shouldOpen = timePickerOpen ? false : true; + + dispatch(setRangeOpen(shouldOpen)); + } + return ( + + + + ); +} diff --git a/src/plugins/charts/UseTooltip.js b/src/plugins/charts/UseTooltip.js index 284a4760..4f9ae024 100644 --- a/src/plugins/charts/UseTooltip.js +++ b/src/plugins/charts/UseTooltip.js @@ -1,114 +1,114 @@ -import * as moment from "moment"; -import { - highlightItems, - isFloat, - isLAbelSelected, - makeTolltipItems, -} from "./helpers"; - -const $q = window.jQuery; - -export default function UseTooltip(plot) { - let previousPoint = null; - $q("#tooltip").remove(); - previousPoint = null; - $q(this).bind("plothover", function (event, pos, item) { - let labels = ``; - plot.unhighlight(); - if (item) { - let plotData = plot.getData(); - const [plotTime, _] = item.datapoint; - const selectedPlots = JSON.parse( - localStorage.getItem("labelsSelected") - ); - const itemValue = isFloat(parseFloat(item.datapoint[1])) - ? parseFloat(item.datapoint[1]).toFixed(3) - : item.datapoint[1]; - - const isSelectedPlots = selectedPlots.length > 0; - const labelsList = []; - for (let i = 0; i < plotData.length; i++) { - const plotIsVisible = isSelectedPlots - ? isLAbelSelected(plotData[i]) - : true; - const plotTimes = plotData[i].data - .map((d) => d) - .map((e) => e[0]); - const plotPoints = plotData[i].data.map((d) => d); - - if (plotTimes.includes(plotTime) && plotIsVisible) { - const plotIndex = plotTimes.indexOf(plotTime); - - const [_, value] = plotPoints.find( - ([time, _]) => time === plotTime - ); - labelsList.push({ - color: plotData[i].color, - label: plotData[i].label, - value: value, - plot, - plotIndex, - item, - i, - }); - } - } - - highlightItems(labelsList); - const labelsFormatted = makeTolltipItems(labelsList); - if (previousPoint !== item.datapoint) { - previousPoint = item.datapoint; - $q("#tooltip").remove(); - const tooltipTemplate = ` -
-

${moment(item.datapoint[0]).format( - "YYYY-MM-DDTHH:mm:ss.SSSZ" - )}

- -

- Value: ${itemValue}

-
-
- ${labelsFormatted} -
- `; - const labelLength = item.series.label.length; - showTooltip( - item.pageX, - item.pageY, - tooltipTemplate, - labelLength - ); - } - } else { - $q("#tooltip").remove(); - previousPoint = null; - } - }); -} - -function showTooltip(x, y, contents, length) { - let wWidth = window.innerWidth; - let posX = x + 20; - if (x * 2 > wWidth) { - posX = x - length * 8; - } - - // use ref for tooltip as made with chart! - - $q(`
` + contents + `
`) - .css({ - position: "absolute", - display: "none", - top: y, - left: posX, - padding: "6px", - "font-size": "12px", - size: "10", - "border-radius": "6px 6px 6px 6px", - "background-color": "#333", - color: "#aaa", - }) - .appendTo("body") - .fadeIn(125); -} +import * as moment from "moment"; +import { + highlightItems, + isFloat, + isLAbelSelected, + makeTolltipItems, +} from "./helpers"; + +const $q = window.jQuery; + +export default function UseTooltip(plot) { + let previousPoint = null; + $q("#tooltip").remove(); + previousPoint = null; + $q(this).bind("plothover", function (event, pos, item) { + + plot.unhighlight(); + if (item) { + let plotData = plot.getData(); + const [plotTime, _] = item.datapoint; + const selectedPlots = JSON.parse( + localStorage.getItem("labelsSelected") + ); + const itemValue = isFloat(parseFloat(item.datapoint[1])) + ? parseFloat(item.datapoint[1]).toFixed(3) + : item.datapoint[1]; + + const isSelectedPlots = selectedPlots.length > 0; + const labelsList = []; + for (let i = 0; i < plotData.length; i++) { + const plotIsVisible = isSelectedPlots + ? isLAbelSelected(plotData[i]) + : true; + const plotTimes = plotData[i].data + .map((d) => d) + .map((e) => e[0]); + const plotPoints = plotData[i].data.map((d) => d); + + if (plotTimes.includes(plotTime) && plotIsVisible) { + const plotIndex = plotTimes.indexOf(plotTime); + + const [_, value] = plotPoints.find( + ([time, _]) => time === plotTime + ); + labelsList.push({ + color: plotData[i].color, + label: plotData[i].label, + value: value, + plot, + plotIndex, + item, + i, + }); + } + } + + highlightItems(labelsList); + const labelsFormatted = makeTolltipItems(labelsList); + if (previousPoint !== item.datapoint) { + previousPoint = item.datapoint; + $q("#tooltip").remove(); + const tooltipTemplate = ` +
+

${moment(item.datapoint[0]).format( + "YYYY-MM-DDTHH:mm:ss.SSSZ" + )}

+ +

+ Value: ${itemValue}

+
+
+ ${labelsFormatted} +
+ `; + const labelLength = item.series.label.length; + showTooltip( + item.pageX, + item.pageY, + tooltipTemplate, + labelLength + ); + } + } else { + $q("#tooltip").remove(); + previousPoint = null; + } + }); +} + +function showTooltip(x, y, contents, length) { + let wWidth = window.innerWidth; + let posX = x + 20; + if (x * 2 > wWidth) { + posX = x - length * 8; + } + + // use ref for tooltip as made with chart! + + $q(`
` + contents + `
`) + .css({ + position: "absolute", + display: "none", + top: y, + left: posX, + padding: "6px", + "font-size": "12px", + size: "10", + "border-radius": "6px 6px 6px 6px", + "background-color": "#333", + color: "#aaa", + }) + .appendTo("body") + .fadeIn(125); +} diff --git a/src/plugins/settingsmenu/Menu.js b/src/plugins/settingsmenu/Menu.js index 7c97ff5c..de317285 100644 --- a/src/plugins/settingsmenu/Menu.js +++ b/src/plugins/settingsmenu/Menu.js @@ -1,5 +1,4 @@ import * as React from "react"; -import Button from "@mui/material/Button"; import Menu from "@mui/material/Menu"; import MenuItem from "@mui/material/MenuItem"; import DisplaySettingsIcon from "@mui/icons-material/DisplaySettings"; diff --git a/src/store/createInitialState.js b/src/store/createInitialState.js index 89341cab..ce366e75 100644 --- a/src/store/createInitialState.js +++ b/src/store/createInitialState.js @@ -18,7 +18,6 @@ export default function initialState() { const urlState = stateFromQueryParams(); const historyService = localService().historyStore(); const linkService = localUrl(); - const lastQuery = linkService.getAll()?.[0]?.params const state = { debugMode: debugLocal().isActive|| false,