-
{
- adjustTimeRange("backward");
- }}
- attachedside={"r"}
- emptySide={"l"}
- className={"date-time-selector"}
- >
-
-
-
-
-
-
-
: ""}
- >
+
+
+
+
+
+
+
+ )}
+
+
: ""}>
- {timeLabel
- ? timeLabel
+ {label
+ ? label
: (isValid(dateRange.dateStart)
? format(
dateRange.dateStart,
@@ -390,45 +448,55 @@ export function DateRangePickerMain(props: any) {
-
-
-
-
-
-
{
- adjustTimeRange("forward");
- }}
- attachedside={"l"}
- className={"date-time-selector"}
- >
-
-
- {rangeOpen ? (
+ {timeAdjustmentOptions.map((option) => (
+
+ ))}
+
+
{
+ adjustTimeRange("forward");
+ }}
+ attachedside={"l"}
+ className={cx(DTStyles)}
+ >
+
+
+
+ )}
+
+ {pickerOpen ? (
diff --git a/src/components/StatusBar/components/statusbarselectors/StatusBarSelectors.tsx b/src/components/StatusBar/components/statusbarselectors/StatusBarSelectors.tsx
index 7f9864ab..3a4fe267 100644
--- a/src/components/StatusBar/components/statusbarselectors/StatusBarSelectors.tsx
+++ b/src/components/StatusBar/components/statusbarselectors/StatusBarSelectors.tsx
@@ -1,9 +1,5 @@
-import { useState } from "react";
-import { DateRangePicker } from "../daterangepicker";
import CopyLinkButton from "../copylinkbutton/CopyLinkButton";
import { ThemeProvider } from "@emotion/react";
-import SplitViewButton from "../SplitViewButton";
-import { useMediaQuery } from "react-responsive";
import { useTheme } from "../../../DataViews/components/QueryBuilder/hooks";
import { css, cx } from "@emotion/css";
@@ -33,25 +29,14 @@ const StatusSelectors = css`
`;
export function StatusBarSelectors() {
- const [open, setOpen] = useState(false);
- const isTabletOrMobile = useMediaQuery({ query: "(max-width: 914px)" });
-
const theme = useTheme();
- const isOpen = (e: any) => {
- e?.preventDefault();
- setOpen(!open);
- };
return (
- {!isTabletOrMobile && }
-
-
-
);
diff --git a/src/components/StatusBar/index.tsx b/src/components/StatusBar/index.tsx
deleted file mode 100644
index 1654f4c3..00000000
--- a/src/components/StatusBar/index.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { ApiSelector } from "./components/apiselector/ApiSelector";
-import { StatusBarSelectors } from "./components/statusbarselectors/StatusBarSelectors";
-import Logo from "./assets/qryn-logo.png";
-import { StatusBarCont, StatusCont } from "./styled";
-import ClokiMenu from "../../plugins/settingsmenu/Menu";
-import { useSelector } from "react-redux";
-import { themes } from "../../theme/themes";
-import { ThemeProvider } from "@emotion/react";
-
-export default function StatusBar() {
- const _themes: any = themes;
- const theme = useSelector(({ theme }: any) => theme)
- return (
-
-
-
-
-
-
- );
-}
diff --git a/src/components/StatusBar/styled.ts b/src/components/StatusBar/styled.ts
index 56fdf142..71871132 100644
--- a/src/components/StatusBar/styled.ts
+++ b/src/components/StatusBar/styled.ts
@@ -123,14 +123,9 @@ export const DatePickerButton: any = styled(BtnSmall)`
background: ${(props: any) => props.theme.buttonDefault};
border: 1px solid ${(props: any) => props.theme.buttonBorder};
color: ${(props: any) => props.theme.textColor};
- border-top-left-radius: ${(props: any) => props.attachedSide === 'l' || props.attachedSide === 'both' ? '0 !important' : ''};
- border-top-right-radius: ${(props: any) => props.attachedSide === 'r' || props.attachedSide === 'both' ? '0 !important' : ''};
- border-bottom-left-radius: ${(props: any) => props.attachedSide === 'l' || props.attachedSide === 'both' ? '0 !important' : ''};
- border-bottom-right-radius: ${(props: any) => props.attachedSide === 'r' || props.attachedSide === 'both' ? '0 !important' : ''};
- border-right: ${(props: any) => props.attachedSide === 'r' || props.attachedSide === 'both' ? 'unset' : ''};
+ border-radius: 3px;
height: 26px;
- margin-left: ${(props: any) => props.emptySide === 'l' || props.emptySide === 'both' ? '10px' : props.attachedSide === 'l' || props.attachedSide === 'both' ? "0px !important" : ''};
- margin-right: ${(props: any) => props.emptySide === 'r' || props.emptySide === 'both' ? '10px' : props.attachedSide === 'r' || props.attachedSide === 'both' ? "0px !important" : ''};
+ margin:0px 1px;
padding: ${(props: any) => props.size === 'small' ? '3px 5px' : ''};
span {
margin-left: 5px;
diff --git a/src/components/StatusBar/styled/index.ts b/src/components/StatusBar/styled/index.ts
deleted file mode 100644
index ef638b3f..00000000
--- a/src/components/StatusBar/styled/index.ts
+++ /dev/null
@@ -1,158 +0,0 @@
-import styled from "@emotion/styled";
-import { BtnSmall } from "../../../theme/styles/Button";
-import { InputSmall } from "../../../theme/styles/Input";
-export const MenuButton = styled(BtnSmall)`
- background: none;
- border: none;
- display: flex;
- height: 26px;
- color: ${(props:any) =>
- props.isActive ? props.theme.inputTextFocus : props.theme.textColor};
- cursor: pointer;
-`;
-
-export const StatusBarCont = styled.div`
- display: flex;
- justify-content: space-between;
- padding: 10px 7px 4px 5px;
- background: ${({ theme }:{ theme:any }) => theme.widgetContainer};
-`;
-
-export const StatusCont = styled.div`
- display: flex;
- align-items: center;
- .selector {
- margin-left: 10px;
- .label {
- flex: 1;
- color: ${(props:any) => props.theme.inputLabelColor};
- padding: 4px 8px;
- font-size: 12px;
- text-transform: uppercase;
- background: ${(props:any) => props.theme.inputLabelBg};
- border-radius: 4px;
- white-space: nowrap;
- }
- }
- input {
- color: ${(props:any) => props.theme.textColor};
- background: ${(props:any) => props.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;
- }
- &.limit {
- width: 50px;
- }
-
- &.date-time-range {
- width: 120px;
- }
- }
-`;
-
-export const ApiSelectorStyled = styled.div`
- display: flex;
- align-items: center;
- margin-left: 20px;
- display: flex;
- align-items: center;
- transition: 0.2s all;
- height: 26px;
- .selector {
- margin-left: 10px;
- .label {
- flex: 1;
- color: ${(props:any) => props.theme.inputLabelColor};
- padding: 4px 8px;
- font-size: 12px;
- text-transform: uppercase;
- background: ${(props:any) => props.theme.mainBgColor};
- border-radius: 4px;
- white-space: nowrap;
- }
- .input {
- background: ${(props:any) => props.theme.inputLabelBg};
- }
- }
- & div {
- display: flex;
- align-items: center;
- }
-`;
-
-export const ApiSelectorButton = styled(BtnSmall)`
- background: ${(props:any) => props.theme.buttonDefault};
- border: 1px solid ${(props:any) => props.theme.buttonBorder};
- color: ${(props:any) => props.theme.textColor};
- text-overflow: ellipsis;
- transition: 0.2s all;
- display:flex;
- align-items:center;
- height: 26px;
- &:hover {
- background: ${(props:any) => props.theme.buttonHover};
- }
- span {
- margin:0;
- padding:0;
- }
-`;
-export const ApiSelectorInput = styled(InputSmall)`
- color: ${(props:any) => props.theme.textColor};
- background: ${(props:any) => props.theme.inputBg};
- border: 1px solid ${({ theme }:{ theme:any }) => theme.buttonBorder};
- height: 18px;
- margin-right: 4px;
- &:focus {
- color: orange;
- }
-`;
-
-
-export const DatePickerButton = styled(BtnSmall)`
- background: ${(props:any) => props.theme.buttonDefault};
- border: 1px solid ${(props:any) => props.theme.buttonBorder};
- color: ${(props:any) => props.theme.textColor};
- border-top-left-radius: ${(props:any) => props.attachedside === 'l' || props.attachedside === 'both' ? '0 !important' : ''};
- border-top-right-radius: ${(props:any) => props.attachedside === 'r' || props.attachedside === 'both' ? '0 !important' : ''};
- border-bottom-left-radius: ${(props:any) => props.attachedside === 'l' || props.attachedside === 'both' ? '0 !important' : ''};
- border-bottom-right-radius: ${(props:any) => props.attachedside === 'r' || props.attachedside === 'both' ? '0 !important' : ''};
- border-right: ${(props:any) => props.attachedside === 'r' || props.attachedside === 'both' ? 'unset' : ''};
- height: 26px;
- margin-left: ${(props:any) => props.emptySide === 'l' || props.emptySide === 'both' ? '10px' : props.attachedside === 'l' || props.attachedside === 'both' ? "0px !important" : ''};
- margin-right: ${(props:any) => props.emptySide === 'r' || props.emptySide === 'both' ? '10px' : props.attachedside === 'r' || props.attachedside === 'both' ? "0px !important" : ''};
- padding: ${(props:any) => props.size === 'small' ? '3px 5px' : ''};
- span {
- margin-left: 5px;
- }
- svg {
- margin: 0;
- padding: 0;
- }
- &:hover {
- color: orange;
- }
-`;
-export const UrlCopyButton = styled.div`
-
- background: ${(props:any) => props.theme.buttonDefault};
- color: ${({ isActive, theme }:{ isActive:any; theme:any }) => (isActive ? "orange" : theme.textColor)};
- cursor: ${({ isActive }:{ isActive:any }) => (isActive ? "pointer" : "not-allowed")};
- text-overflow: ellipsis;
- transition: 0.2s all;
- margin-right:3px;
- span {
- margin-left: 4px;
- color: ${(props:any) => props.theme.textColor};
- }
- &:hover {
- background: ${(props:any) => props.theme.buttonHover};
- }
-`;
\ No newline at end of file
diff --git a/src/components/TraceSearch/TraceSearch.tsx b/src/components/TraceSearch/TraceSearch.tsx
index 7470ac1b..f7dd2372 100644
--- a/src/components/TraceSearch/TraceSearch.tsx
+++ b/src/components/TraceSearch/TraceSearch.tsx
@@ -2,9 +2,8 @@
import { css, cx } from "@emotion/css";
import { useEffect, useMemo, useState, forwardRef } from "react";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
import getData from "../../actions/getData";
-import { themes } from "../../theme/themes";
import { Field /* Select */ } from "../../views/DataSources/ui";
import { formatUrl } from "./tracesSearchUrl";
import { useTraceNames } from "./useTraceNames";
@@ -13,7 +12,7 @@ import Select, { components } from "react-select";
import { useTheme } from "../DataViews/components/QueryBuilder/hooks";
import { cStyles } from "../DataViews/components/QueryBuilder/styles";
import { selectTheme } from "../DataViews/components/QueryBuilder/helpers";
-
+import DOMPurify from "isomorphic-dompurify";
const SearchColumn = css`
display: flex;
flex-direction: column;
@@ -29,7 +28,7 @@ const SearchRow = css`
const TraceButton = (theme: any) => css`
background: ${theme.primaryDark};
- border: 1px solid ${theme.buttonBorder};
+ border: 1px solid ${theme.primaryBorder};
border-radius: 3px;
color: ${theme.buttonText};
margin-left: 5px;
@@ -52,7 +51,6 @@ const TraceButton = (theme: any) => css`
export const TRACE_SEARCH_LABEL_WIDTH = 75;
-
export const SelectOptionStyle = {
display: "flex",
alignItems: "center",
@@ -161,10 +159,6 @@ export default function TracesSearch(props: any) {
} = props;
const dispatch = useDispatch();
-
- const storeTheme = useSelector(
- (store: { theme: "dark" | "light" }) => store.theme
- );
const serviceNameOpts = useTraceServiceName({ id: dataSourceId });
const traceNameOpts = useTraceNames({ id: dataSourceId });
const [searchValue, setSearchValue] = useState({
@@ -176,11 +170,7 @@ export default function TracesSearch(props: any) {
traceNameOpts[0] || { name: "", value: "", label: "" }
);
-
-
- const theme = useMemo(() => {
- return themes[storeTheme];
- }, [storeTheme]);
+ const theme = useTheme();
const [urlState, setUrlState] = useState({
searchName: searchValue.value || "",
name: spanValue.value || "",
@@ -196,7 +186,7 @@ export default function TracesSearch(props: any) {
if (serviceNameOpts.length > 0) {
setUrlString(formatUrl(urlState));
}
- // eslint-disable-next-line react-hooks/exhaustive-deps
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [urlState]);
const emit = () => {
@@ -207,9 +197,10 @@ export default function TracesSearch(props: any) {
limit: urlState.limit,
name,
id,
+ open: true,
direction: "forward",
dataSourceId,
- url: dataSourceURL + "/api/" + urlString,
+ url: `${dataSourceURL}/api/${urlString}`,
};
};
@@ -245,7 +236,7 @@ export default function TracesSearch(props: any) {
id,
"forward",
dataSourceId,
- dataSourceURL + "/api/" + urlString
+ `${dataSourceURL}/api/${urlString}`
)
);
}
@@ -271,38 +262,19 @@ export default function TracesSearch(props: any) {
onSelectChange={onSpanChange}
labelWidth={TRACE_SEARCH_LABEL_WIDTH}
/>
- {/*
-
-
*/}
onChange(e, "tags")}
- value={urlState.tags}
+ value={DOMPurify.sanitize(urlState.tags)}
labelWidth={TRACE_SEARCH_LABEL_WIDTH}
/>
onChange(e, "limit")}
- value={urlState.limit}
+ value={DOMPurify.sanitize(String(urlState.limit))}
labelWidth={TRACE_SEARCH_LABEL_WIDTH}
/>
@@ -310,14 +282,14 @@ export default function TracesSearch(props: any) {
label={"Min Duration"}
placeholder={"e.g. 1.2s, 100ms"}
onChange={(e: any) => onChange(e, "minDuration")}
- value={urlState.minDuration}
+ value={DOMPurify.sanitize(urlState.minDuration)}
labelWidth={TRACE_SEARCH_LABEL_WIDTH}
/>
onChange(e, "maxDuration")}
- value={urlState.maxDuration}
+ value={DOMPurify.sanitize(urlState.maxDuration)}
labelWidth={TRACE_SEARCH_LABEL_WIDTH}
/>
diff --git a/src/components/TraceSearch/TracesSwitch.tsx b/src/components/TraceSearch/TracesSwitch.tsx
index 55bd3c96..aaa7d5ce 100644
--- a/src/components/TraceSearch/TracesSwitch.tsx
+++ b/src/components/TraceSearch/TracesSwitch.tsx
@@ -4,7 +4,6 @@ import { useState } from "react";
import QueryTypeSwitch from "../QueryTypeBar/components/QueryTypeSwitch";
const QueryTraceSwitch = css`
- margin-top: 10px;
display: flex;
height:30px;
`;
diff --git a/src/components/styles.ts b/src/components/styles.ts
index 9b2f19a6..9ff857c0 100644
--- a/src/components/styles.ts
+++ b/src/components/styles.ts
@@ -44,7 +44,8 @@ export const SettingsInputContainer = styled.div`
export const SettingLabel = styled.label`
- font-size: 12px;
+ font-size: 11px;
+ white-space: nowrap;
color: ${({ theme }: any) => theme.textColor};
margin-left: 10px;
`;
diff --git a/src/datasources/logs/index.ts b/src/datasources/logs/index.ts
deleted file mode 100644
index 1c8246ea..00000000
--- a/src/datasources/logs/index.ts
+++ /dev/null
@@ -1,165 +0,0 @@
-import { nanoid } from "nanoid";
-
-interface DataSourceHeader {
- name: string;
- isDefault: boolean;
-}
-
-interface HTTPHeaders {
- url: string;
- allowedCookies: string[];
- timeOut: number;
-}
-
-interface DatasourceAuth {
- basicAuth: boolean;
- withCredentials: boolean;
- TLSClientAuth: boolean;
- withCACert: boolean;
- skipTLSVerify: boolean;
- forwardOAuthIdentity: boolean;
-}
-
-interface CustomHTTPHeader {
- header: string;
- value: string; // this one should be a password type field
-}
-
-interface SettingsAlerting {
- manageAlertsViaAlertingUI: boolean;
- alertManagerDataSource: string;
- maximumLines: number;
-}
-
-interface LinkedField {
- id:string;
- name: string;
- regex: RegExp;
- query: string;
- url: string; // internal link switch: true: query, false: url
- urlLabel: string;
- internalLink: boolean;
- dataSource: string;
-}
-
-export class LogsDataSource {
-
- get datasourceHeader():DataSourceHeader {
- return this.datasourceHeader
- }
-
- set datasourceHeader(val:DataSourceHeader) {
- this.datasourceHeader = val
- }
-
- get httpHeaders():HTTPHeaders {
- return this.httpHeaders
- }
-
- set httpHeaders(val:HTTPHeaders) {
- this.httpHeaders = val
- }
-
- get dataSourceAuth():DatasourceAuth {
- return this.dataSourceAuth
- }
-
- set dataSourceAuth(val:DatasourceAuth) {
- this.dataSourceAuth = val
- }
-
- get customHTTPHeader():CustomHTTPHeader {
- return this.customHTTPHeader
- }
-
- set customHTTPHeader(val:CustomHTTPHeader) {
- this.customHTTPHeader = val
- }
-
- get settingsAlerting():SettingsAlerting {
- return this.settingsAlerting;
- }
-
- set settingsAlerting(val:SettingsAlerting) {
- this.settingsAlerting = val;
- }
-
- get linkedFileds():LinkedField[] {
- return this.linkedFileds
- }
- set linkedFields(val:LinkedField[]) {
- this.linkedFields = val
- }
-
- constuctor(){
- this.datasourceHeader = { name: "Logs", isDefault: false };
-
- this.httpHeaders = {
- url: "http://logs:3100",
- allowedCookies: [],
- timeOut: 0,
- };
-
- this.dataSourceAuth = {
- basicAuth: false,
- withCredentials: false,
- TLSClientAuth: false,
- withCACert: false,
- skipTLSVerify: false,
- forwardOAuthIdentity: false,
- };
-
- this.customHTTPHeader = {
- header: "",
- value: "",
- };
-
- this.settingsAlerting = {
- manageAlertsViaAlertingUI: false,
- alertManagerDataSource: "",
- maximumLines: 1000,
- };
-
- this.linkedFields = [
- { id:nanoid(),
- name: "traceId",
- regex: /^.*?traceI[d|D]=(\w+).*$/,
- query: "${__value.raw}",
- url: "",
- urlLabel: "",
- internalLink: true,
- dataSource: "Tempo",
- },
- { id:nanoid(),
- name: "traceID",
- regex: /^.*?"traceID":"(\w+)".*$/,
- query: "${__value.raw}",
- url: "",
- urlLabel: "",
- internalLink: true,
- dataSource: "Tempo",
- },
- ];
- }
-
- setLinkField(val:LinkedField) {
- this.linkedFields = [...this.linkedFields, val]
- }
-
- removeLinkedField(val:LinkedField) {
- let linkedFieldsCopy = JSON.parse(JSON.stringify(this.linkedFields))
- const filtered = linkedFieldsCopy.filter((lf:LinkedField)=> lf.id !== val.id)
- this.linkedFields = filtered;
- }
-
- updateLinkedField(val:LinkedField) {
- let linkedFieldsCopy = JSON.parse(JSON.stringify(this.linkedFields))
- linkedFieldsCopy.forEach((field:LinkedField)=> {
- if (field.id === val.id) {
- field = {...val}
- }
- })
- }
-
-}
-
diff --git a/src/helpers/UpdateStateFromQueryParams.ts b/src/helpers/UpdateStateFromQueryParams.ts
index 7d95abda..1b36573f 100644
--- a/src/helpers/UpdateStateFromQueryParams.ts
+++ b/src/helpers/UpdateStateFromQueryParams.ts
@@ -2,7 +2,7 @@ import * as moment from "moment";
import { useEffect, useMemo, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useLocation } from "react-router-dom";
-
+import DOMPurify from "isomorphic-dompurify";
import {
setIsSubmit,
setQueryTime,
@@ -22,7 +22,6 @@ import setToTime from "../actions/setToTime";
import { setUrlLocation } from "../actions/setUrlLocation";
import { setUrlQueryParams } from "../actions/setUrlQueryParams";
import { setSplitView } from "../components/StatusBar/components/SplitViewButton/setSplitView";
-// import { environment } from "../environment/env.dev";
export const STRING_VALUES = ["step", "theme", "time"];
export const READ_ONLY_STRING_VALUES = ["label"];
@@ -125,7 +124,7 @@ export function UpdateStateFromQueryParams() {
if (Object.keys(startParams).length > 0) {
dispatch(setUrlQueryParams({ ...urlQueryParams, startParams }));
- dispatch(setUrlLocation(hash));
+ dispatch(setUrlLocation(DOMPurify.sanitize(hash)));
Object.keys(startParams).forEach((param) => {
if (
@@ -133,9 +132,15 @@ export function UpdateStateFromQueryParams() {
READ_ONLY_STRING_VALUES.includes(param)) &&
startParams[param] !== ""
) {
- dispatch(STORE_ACTIONS[param](startParams[param]));
+ dispatch(
+ STORE_ACTIONS[param](
+ DOMPurify.sanitize(startParams[param])
+ )
+ );
} else if (param === "theme") {
- dispatch(STORE_ACTIONS[param](themeSet));
+ dispatch(
+ STORE_ACTIONS[param](DOMPurify.sanitize(themeSet))
+ );
} else if (
TIME_VALUES.includes(param) &&
startParams[param] !== ""
@@ -162,7 +167,7 @@ export function UpdateStateFromQueryParams() {
[]
);
- if(parsed?.length > 0) {
+ if (parsed?.length > 0) {
dispatch(STORE_ACTIONS[param](parsed));
}
} catch (e) {
@@ -177,12 +182,21 @@ export function UpdateStateFromQueryParams() {
.concat(ARRAY_VALUES);
allParams.forEach((param) => {
if (STRING_VALUES.includes(param)) {
- urlFromHash.set(param, STORE_KEYS[param]?.toString());
+ urlFromHash.set(
+ param,
+ DOMPurify.sanitize(STORE_KEYS[param]?.toString())
+ );
} else if (param === "theme") {
- urlFromHash.set(param, themeSet.toString());
+ urlFromHash.set(
+ param,
+ DOMPurify.sanitize(themeSet.toString())
+ );
} else if (TIME_VALUES.includes(param)) {
const time_value = STORE_KEYS[param]?.getTime() * 1000000;
- urlFromHash.set(param, time_value.toString());
+ urlFromHash.set(
+ param,
+ DOMPurify.sanitize(time_value.toString())
+ );
} else if (BOOLEAN_VALUES.includes(param)) {
try {
urlFromHash.set(
@@ -203,7 +217,7 @@ export function UpdateStateFromQueryParams() {
});
(window as any).location.hash = urlFromHash;
}
- // eslint-disable-next-line react-hooks/exhaustive-deps
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useEffect(() => {
@@ -218,7 +232,9 @@ export function UpdateStateFromQueryParams() {
STRING_VALUES.includes(store_key) &&
previousParams[store_key] !== STORE_KEYS[store_key]
) {
- const updated = STORE_KEYS[store_key].toString().trim();
+ const updated = DOMPurify.sanitize(
+ STORE_KEYS[store_key].toString().trim()
+ );
paramsFromHash.set(store_key, updated);
} else if (
@@ -227,7 +243,10 @@ export function UpdateStateFromQueryParams() {
encodeTs(STORE_KEYS[store_key])
) {
const encodedTs = encodeTs(STORE_KEYS[store_key]);
- paramsFromHash.set(store_key, encodedTs);
+ paramsFromHash.set(
+ store_key,
+ DOMPurify.sanitize(encodedTs)
+ );
} else if (
BOOLEAN_VALUES.includes(store_key) &&
previousParams[store_key] !== STORE_KEYS[store_key]
@@ -242,15 +261,15 @@ export function UpdateStateFromQueryParams() {
}
} else if (store_key === "left") {
const parsed = JSON.stringify(left);
- paramsFromHash.set("left", parsed);
+ paramsFromHash.set("left", DOMPurify.sanitize(parsed));
} else if (store_key === "right") {
const parsed = JSON.stringify(right);
- paramsFromHash.set("right", parsed);
+ paramsFromHash.set("right", DOMPurify.sanitize(parsed));
}
});
(window as any).location.hash = paramsFromHash;
}
- // eslint-disable-next-line react-hooks/exhaustive-deps
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [STORE_KEYS]);
}
diff --git a/src/helpers/decodeQuery.ts b/src/helpers/decodeQuery.ts
index 71d9cdd8..420639fa 100644
--- a/src/helpers/decodeQuery.ts
+++ b/src/helpers/decodeQuery.ts
@@ -12,7 +12,7 @@ export function decodeQuery(
return;
}
const queryArr = query
- .match(/[^{\}]+(?=})/g)
+ .match(/[^{}]+(?=})/g)
?.map((m) => m.split(","))
?.flat();
@@ -127,7 +127,7 @@ export function decodeExpr(expr: string) {
if (expr.length > 7) {
const exprArr = expr
- ?.match(/[^{\}]+(?=})/g)
+ ?.match(/[^{}]+(?=})/g)
?.map((m) => m.split(","))
?.flat();
diff --git a/src/helpers/stateFromQueryParams.ts b/src/helpers/stateFromQueryParams.ts
index 244beab3..cb22a770 100644
--- a/src/helpers/stateFromQueryParams.ts
+++ b/src/helpers/stateFromQueryParams.ts
@@ -1,9 +1,10 @@
import { environment } from "../environment/env.dev";
import setDebug from "./setDebug";
-import * as moment from "moment";
+import moment from "moment";
import { nanoid } from "nanoid";
-
+import DOMPurify from 'isomorphic-dompurify';
const BOOLEAN_VALUES = ["isSubmit", "isSplit", "autoTheme", "isEmbed"];
+
export const initialUrlState = {
query: "",
queryType: "range",
@@ -34,6 +35,12 @@ export const initialUrlState = {
labels: [], // name: selected:
values: [], // label name selected
response: {}, // the target should be just the last one
+ open:true,
+ start: new Date(Date.now() - 5 * 60000),
+ time: "", // for instant queries
+ stop: new Date(Date.now()),
+ label:"",
+ pickerOpen:false, // time picker
},
],
@@ -59,6 +66,12 @@ export const initialUrlState = {
labels: [], // name: selected:
values: [], // label name selected
response: {}, // the target should be just the last one
+ open:false,
+ start: new Date(Date.now() - 5 * 60000),
+ time: "", // for instant queries
+ stop: new Date(Date.now()),
+ label:"",
+ pickerOpen:false, // time picker
},
],
@@ -91,29 +104,29 @@ export default function stateFromQueryParams() {
for (let [key, value] of urlFromHash.entries()) {
if (debug) console.log("🚧 LOGIC/startParams/", key, value);
if (key === "stop" || key === "start") {
- const croppedTime = parseInt(value) / 1000000;
+ const croppedTime = parseInt(DOMPurify.sanitize(value)) / 1000000;
startParams[key] = new Date(
(moment as any)(croppedTime).format("YYYY-MM-DDTHH:mm:ss.SSSZ")
);
} else if (key === "left" || key === "right") {
- let panel = decodeURIComponent(value)
+ let panel = decodeURIComponent(DOMPurify.sanitize(value))
if(typeof panel === 'string') {
- const parsedQuery = JSON.parse(decodeURIComponent(value)||"[]");
+ const parsedQuery = JSON.parse(decodeURIComponent(DOMPurify.sanitize(value)||"[]"));
startParams[key] = parsedQuery;
}
} else if (BOOLEAN_VALUES.includes(key)) {
try {
- startParams[key] = JSON.parse(value || 'false');
+ startParams[key] = JSON.parse(DOMPurify.sanitize(value || 'false'));
} catch(e) {
console.error(key);
startParams[key] = false;
}
} else {
- startParams[key] = value;
+ startParams[key] = DOMPurify.sanitize(value);
}
if (startParams.theme) {
- localStorage.setItem("theme", JSON.stringify({ theme: startParams.theme, auto: !!startParams.autoTheme }));
+ localStorage.setItem("theme", DOMPurify.sanitize(JSON.stringify({ theme: startParams.theme, auto: !!startParams.autoTheme })));
}
}
diff --git a/src/hooks/useLabels.ts b/src/hooks/useLabels.ts
index 40d644dd..64966457 100644
--- a/src/hooks/useLabels.ts
+++ b/src/hooks/useLabels.ts
@@ -79,7 +79,7 @@ export const sendLabels = async (
if (response?.data?.data?.length > 0) {
const labels = response?.data?.data
- .sort()
+
.map((label: any) => ({
name: label,
selected: false,
diff --git a/src/index.tsx b/src/index.tsx
index f2aef394..1310f32f 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,30 +1,58 @@
-import {StrictMode} from "react";
+import { StrictMode } from "react";
import ReactDOM from "react-dom";
import "./scss/app.scss";
-import App from "./App";
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+//import App from "./App";
import axios from "axios";
import errorInterceptor from "./helpers/error.interceptor";
import { Provider } from "react-redux";
import store from "./store/store";
-import DataSources from "./views/DataSources/DataSources";
import { Notification } from "./qryn-ui/notifications";
import { CookiesProvider } from "react-cookie";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { lazy, Suspense } from "react";
+import ScreenLoader from "./views/ScreenLoader";
import ProtectedRoute from "./providers/ProtectedRoute";
+const AppRoute = lazy(() => import("./App"));
+const DataSourcesRoute = lazy(() => import("./views/DataSources/DataSources"));
+const MainRoute = lazy(() => import("./views/Main"));
+const PluginsRoute = lazy(() => import("./plugins/Plugins"));
+const UserRoles = lazy(()=> import("./views/User/UserRoles"))
errorInterceptor(axios);
ReactDOM.render(
-
- } />
- } />
- }
- />
-
+ }>
+
+ }>
+ } />
+ }
+ />
+ }
+ />
+ }
+ />
+
+
+ {" "}
+
+
+ }
+ />
+
+
+
diff --git a/src/plugins/Aggregation/index.tsx b/src/plugins/Aggregation/index.tsx
new file mode 100644
index 00000000..9f174d55
--- /dev/null
+++ b/src/plugins/Aggregation/index.tsx
@@ -0,0 +1,855 @@
+import { nanoid } from "nanoid";
+import { Plugin } from "../types";
+import { useTheme } from "../../theme";
+import { useEffect, useMemo, useState } from "react";
+import { cx, css } from "@emotion/css";
+import axios from "axios";
+import useDataSources from "./useDataSources";
+import useDataSourceConfig from "./useDataSourceConfig";
+import InfoIcon from "@mui/icons-material/Info";
+import { Switch } from "@mui/material";
+
+
+export const AggregationsResponseStyles = (theme: any) => css`
+ display: flex;
+ flex-direction: column;
+ .response-column-headers {
+ color: ${theme.textColor};
+ display: flex;
+ border-bottom: 1px solid ${theme.buttonBorder};
+ border-top: 1px solid ${theme.buttonBorder};
+ padding: 4px 0px;
+ justify-content: space-between;
+ p {
+ display: flex;
+ font-size: 14px;
+
+ flex: 1;
+ }
+ .res-name {
+ flex: 3;
+ }
+ .res-done {
+ width: 100px;
+ justify-content: flex-start;
+ }
+ .res-actions {
+ flex: 0.5;
+ width: 100px;
+ }
+ }
+ .response-entries {
+ font-size: 12px;
+ line-height: 1.5;
+ display: flex;
+ flex-direction: column;
+ max-height: 500px;
+ overflow: hidden;
+ overflow-y: scroll;
+ code {
+ font-family: monospace;
+ }
+ .entry-row {
+ display: flex;
+ flex-direction: row;
+ flex: 1;
+ padding: 8px 0px;
+ border-bottom: 1px solid ${theme.buttonBorder};
+
+ .res-name {
+ flex: 3;
+ cursor: pointer;
+ &:hover {
+ background: ${theme.widgetContainer};
+ }
+ p {
+ margin-bottom: 10px;
+ }
+ .log {
+ margin-bottom: 4px;
+ }
+ }
+ .res-done {
+ flex: 1;
+ width: 100px;
+ progress {
+ background: ${theme.inputBg};
+ border-radius: 3px;
+ width: 50%;
+ height: 12px;
+
+ border: 1px solid ${theme.buttonBorder};
+ }
+ progress::-webkit-progress-bar {
+ background-color: ${theme.inputBg};
+ border-radius: 3px;
+ }
+ progress::-webkit-progress-value {
+ background-color: ${theme.widgetContainer};
+ border-radius: 3px;
+ }
+ progress::-moz-progress-bar {
+ background-color: ${theme.widgetContainer};
+ border-radius: 3px;
+ }
+ }
+ .res-actions {
+ flex: 0.5;
+ display: flex;
+ }
+ .cancel-button {
+ border-radius: 3px;
+ display: flex;
+ align-items: center;
+ border: 1px solid ${theme.buttonBorder};
+ color: ${theme.textColor};
+ background: ${theme.buttonDefault};
+
+ height: 21px;
+ font-size: 12px;
+ cursor: pointer;
+ }
+ }
+ }
+`;
+export const apiGet = async (apiUrl: string, config: any) => {
+ let res = {};
+ axios
+ .get(`${apiUrl}/reports/loki`, config)
+ .then((data) => {
+ res = data;
+ })
+ .catch((e) => {
+ console.log(e);
+ });
+ return res;
+};
+export const AggregationLabelsStyle = (theme: any) => css`
+ border: 1px solid ${theme.buttonBorder};
+ border-radius: 3px;
+ margin: 8px;
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ padding: 10px;
+ color: ${theme.textColor};
+
+ .aggr-title {
+ font-size: 14px;
+ margin-bottom: 10px;
+ padding-bottom: 10px;
+ border-bottom: 1px solid ${theme.buttonBorder};
+ cursor: pointer;
+ padding: 4px;
+ &:hover {
+ background: ${theme.widgetContainer};
+ }
+ }
+ .aggr-sign {
+ padding: 10px;
+ border: 1px solid ${theme.buttonBorder};
+ border-radius: 3px;
+ font-size: 12px;
+ color: ${theme.textColor};
+ width: fit-content;
+ display: flex;
+ flex-direction: column;
+ transition: 0.25s all;
+ background: ${theme.widgetContainer};
+ cursor: pointer;
+ p {
+ line-height: 1.5;
+ }
+ &:hover {
+ background: ${theme.inputBg};
+ }
+ }
+ .subtitle {
+ font-size: 14px;
+ padding: 8px 0px;
+ }
+ .input-group {
+ display: flex;
+ // flex: 1;
+ align-items: center;
+ margin: 8px 0px;
+ input {
+ display: flex;
+ height: 21px;
+ border-radius: 3px;
+ flex: 1;
+ background: ${theme.inputBg};
+ color: ${theme.textColor};
+ border: 1px solid ${theme.buttonBorder};
+ }
+ textarea {
+ margin: 0px 1px;
+ border-radius: 3px;
+ color: ${theme.textColor};
+ font-size: 12px;
+ padding: 4px 8px;
+ background: ${theme.inputBg};
+ border: 1px solid ${theme.buttonBorder};
+ flex: 1;
+ }
+ label {
+ font-size: 12px;
+ display: flex;
+ padding: 4px;
+ padding-right: 8px;
+ //width: 100px;
+ &.switch {
+ padding-right: 3px;
+ }
+ }
+ }
+
+ .labels-root {
+ .labels-title {
+ display: flex;
+ align-items: center;
+ flex: 1;
+ width: 100%;
+ p {
+ color: ${theme.textColor};
+ font-size: 12px;
+ padding: 10px;
+ }
+ button {
+ height: 20px;
+ background: ${theme.widgetContainer};
+ border: 1px solid ${theme.buttonBorder};
+ border-radius: 3px;
+ color: ${theme.textColor};
+ cursor: pointer;
+ }
+ }
+ .labels-cont {
+ display: flex;
+ flex-wrap: wrap;
+
+ .label-value {
+ display: flex;
+ margin: 2px;
+ align-items: center;
+ textarea {
+ display: flex;
+ flex: 1;
+ margin: 0px 1px;
+ border-radius: 3px;
+ color: ${theme.textColor};
+ font-size: 12px;
+ padding: 4px 8px;
+ background: ${theme.inputBg};
+ border: 1px solid ${theme.buttonBorder};
+ }
+ input {
+ margin: 0px 1px;
+ border-radius: 3px;
+ color: ${theme.textColor};
+ height: 21px;
+ font-size: 12px;
+ background: ${theme.inputBg};
+ border: 1px solid ${theme.buttonBorder};
+ }
+
+ button {
+ border: 1px solid ${theme.buttonBorder};
+ border-radius: 3px;
+ background: ${theme.widgetContainer};
+ cursor: pointer;
+ color: ${theme.textColor};
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 18px;
+ }
+ }
+ }
+ }
+ .action-buttons {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ }
+ .go-button {
+ margin: 10px;
+ color: ${theme.buttonText};
+ background: ${theme.primaryDark};
+ border: 1px solid ${theme.primaryBorder};
+ border-radius: 3px;
+ padding: 3px;
+ width: 70px;
+ align-self: flex-end;
+ cursor: pointer;
+ }
+`;
+
+interface AggregationLabel {
+ id: string; // nanoid
+ name: string;
+ value: string;
+}
+export type AggregationLabelsProps = {
+ labels: AggregationLabel[] | any[];
+ onLabelsChange(e: any): void;
+};
+
+export type AggregationLabelProps = {
+ onLabelChange(e: any): void;
+ onLabelRemove(e: any): void;
+ label: AggregationLabel;
+};
+
+/**
+ * Aggregation Label Item:
+ * An aggregation label unit with key / value pair and 'remove label' button
+ * @param props [ onLabelChange, onLabelRemove, label ]
+ * @returns
+ */
+
+function formatPercentage(num: number) {
+ if (num === 100) {
+ return num;
+ }
+ return num.toFixed(2);
+}
+export const AggregationLabelItem: React.FC = (
+ props
+) => {
+ const { onLabelChange, onLabelRemove, label } = props;
+
+ const [labelName, setLabelName] = useState(label.name);
+ const [labelValue, setLabelValue] = useState(label.name);
+
+ useEffect(() => {
+ setLabelName(label.name);
+ setLabelValue(label.value);
+ }, [label.name, label.value]);
+
+ const onNameChange = (e: any) => {
+ let name = e?.target?.value;
+ setLabelName(() => name);
+ let newLabel = { ...label, name };
+ onLabelChange(newLabel);
+ };
+
+ const onValueChange = (e: any) => {
+ let value = e?.target?.value;
+ setLabelValue(() => value);
+ let newLabel = { ...label, value };
+ onLabelChange(newLabel);
+ };
+
+ return (
+
+
+
+
+
+ );
+};
+
+/**
+ * Aggregations Labels:
+ * Aggregations Labels container with header and 'add labels' button.
+ * @param props AggregationLabelsProps [labels, onLabelsChange]
+ * @returns
+ *
+ */
+
+export const AggregationLabels: React.FC = (
+ props: any
+) => {
+ const { labels, onLabelsChange } = props;
+ const onLabelAdd = () => {
+ let newLabel: AggregationLabel = {
+ id: nanoid(),
+ name: "",
+ value: "",
+ };
+
+ let newLabels = [...labels, newLabel];
+ onLabelsChange(newLabels);
+ };
+
+ const onLabelRemove = (e: any) => {
+ let { id } = e;
+ if (labels?.some((s: any) => s.id === id)) {
+ let filtered = labels?.filter((f: any) => f.id !== id);
+ onLabelsChange(filtered);
+ }
+ };
+
+ const onLabelChange = (e: any) => {
+ let { id } = e;
+ if (labels?.some((s: any) => s.id === id)) {
+ let newLabels = labels?.map((label: any) => {
+ if (label?.id === id) {
+ return { ...e };
+ }
+ return label;
+ });
+
+ onLabelsChange(newLabels);
+ }
+ };
+
+ return (
+
+
+
+ {labels?.length > 0 &&
+ labels?.map((label: AggregationLabel, key: number) => (
+
+ ))}
+
+
+
+
Name
{" "}
+
Done
{" "}
+
Actions
+
+
+ {sorted?.length > 0 &&
+ sorted?.map((k: any, v: number) => (
+
+
+
+
{formatPercentage(k.done)}%{" "}
+
+
+
+
+
+
+
+ ))}
+
+
+
+ Query: {entry?.parameters.query}
+
+ {showDetail && (
+ <>
+
+ By: {entry?.parameters.params[0].name} [
+ {entry?.parameters?.params[0]?.values?.length} values]
+
+ {entry?.parameters?.add_labels && (
+ <>
+
Labels:
+
{JSON.stringify(entry?.parameters?.add_labels)}
+
+
+ )}
+
Logs:
+ {entry?.logs?.length > 0 &&
+ entry?.logs.map((log: string, idx: number) => (
+
+ {log}
+
+ ))}
+
+ )}
+
+
+ Aggregations{" "}
+
+ {showForms && (
+ <>
+
+ Specify a query to downsample to match with time range.
+
+
+
+
+
+
+
+
+ {" "}
+ - Add Label __name__ with value 'sampled_*' prefix
+ to easily find newly created metric points.
+
+
+ {" "}
+ - Add other labels, to more easily distinguish the
+ new metric Use `{param}` to create dynamic label
+ values
+
+
+
+
+
+ Use parameter name to replace the chosen {param} inside
+ your query and labels. Enter each value on a new line.
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+
+
+
+ {aggrResponse?.length > 0 && (
+
+ )}
+
+
+
+ {!loading && aggrResponse?.length > 0 && (
+
+ )}
+
+ {title}{" "}
+
+
+ {open && (
+
+ {children}
+
+ )}
+
+ );
+};
+
+const aggregationsPlugin: Plugin = {
+ name: "Aggregations",
+ section: "Query Item",
+ id: nanoid(),
+ Component: Aggregations,
+ roles:["admin","superAdmin"],
+ description: "QRYN Reader Aggregation Reports ",
+ active: false,
+};
+
+export default aggregationsPlugin;
diff --git a/src/plugins/Aggregation/useDataSourceConfig.tsx b/src/plugins/Aggregation/useDataSourceConfig.tsx
new file mode 100644
index 00000000..b8115bfb
--- /dev/null
+++ b/src/plugins/Aggregation/useDataSourceConfig.tsx
@@ -0,0 +1,31 @@
+import { useMemo } from "react";
+
+const useDataSourceConfig = (ds: any) => {
+ return useMemo(() => {
+ const { auth } = ds;
+ let headersMap = ds.headers?.map((k: any) => ({ [k.header]: k.value }));
+ let headers: any = {};
+
+ for (let header of headersMap) {
+ let entries: any = Object.entries(header)[0];
+ headers[entries[0]] = entries[1];
+ }
+ const config: any = { headers };
+ const hasBasicAuth = auth.basicAuth.value;
+
+ if (hasBasicAuth) {
+ const {
+ fields: {
+ basicAuth: [us, pw],
+ },
+ } = auth;
+ const username = us.value;
+ const password = pw.value;
+ config.auth = { username, password };
+ }
+
+ return config;
+ }, [ds]);
+};
+
+export default useDataSourceConfig;
diff --git a/src/plugins/Aggregation/useDataSources.tsx b/src/plugins/Aggregation/useDataSources.tsx
new file mode 100644
index 00000000..008c2149
--- /dev/null
+++ b/src/plugins/Aggregation/useDataSources.tsx
@@ -0,0 +1,15 @@
+import { useMemo } from "react";
+import { useSelector } from "react-redux";
+
+const useDataSources = (type:any) => {
+ let dataSources = useSelector((store: any) => store.dataSources);
+
+ const dsSelect = useMemo(() => {
+ return dataSources?.reduce((a: any, b: any) => {
+ return { ...a, [b.type]: b };
+ }, {});
+ }, [dataSources]);
+
+ return dsSelect[type];
+};
+export default useDataSources;
diff --git a/src/plugins/Clock/index.tsx b/src/plugins/Clock/index.tsx
new file mode 100644
index 00000000..f6037de7
--- /dev/null
+++ b/src/plugins/Clock/index.tsx
@@ -0,0 +1,46 @@
+import { css, cx } from "@emotion/css";
+import { nanoid } from "nanoid";
+import React, { useState, useEffect } from "react";
+import { Plugin } from "../types";
+import { useTheme } from "../../theme";
+
+const ClockStyles = (theme: any) => css`
+ color: ${theme.textColor};
+ background: ${theme.widgetContainer};
+ display: flex;
+ font-size: 10px;
+ letter-spacing: 1px;
+ font-family: "Courier New", Courier, monospace;
+ margin: 0px 10px;
+`;
+
+const Clock: React.FC = () => {
+ const [time, setTime] = useState(new Date());
+ const theme = useTheme();
+ useEffect(() => {
+ const interval = setInterval(() => {
+ setTime(new Date());
+ }, 1000);
+ return () => clearInterval(interval);
+ }, []);
+
+ return (
+
+
+
{time.toLocaleString()}
+
+
+ {filteredComponentList?.length > 0 &&
+ filteredComponentList?.map((component: any, k: number) => (
+
+ ))}
+
+ {plugins?.length > 0 &&
+ plugins?.map(([section, components]: any, index: number) => (
+
+ ))}
+
+ {PluginManager.getPlugins(section)?.length > 0 &&
+ PluginManager.getPlugins(section)?.map(
+ (
+ {
+ name,
+ Component,
+ }: {
+ name: string;
+ Component: React.FC<
+ PluginRendererProps["localProps"]
+ >;
+ },
+ idx: number
+ ) => {
+ return (
+
+ );
+ }
+ )}
+
+ );
+};
+
+export default PluginRenderer;
diff --git a/src/plugins/QueryTest/index.tsx b/src/plugins/QueryTest/index.tsx
new file mode 100644
index 00000000..b251564e
--- /dev/null
+++ b/src/plugins/QueryTest/index.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import ReactJson from "react-json-view";
+
+const QueryTest: React.FC = (props: any) => {
+ return (
+ <>
+
+
+ );
+};
+
+export default QueryTest;
diff --git a/src/plugins/README.md b/src/plugins/README.md
new file mode 100644
index 00000000..bc7c283f
--- /dev/null
+++ b/src/plugins/README.md
@@ -0,0 +1,101 @@
+
+
+[](https://github.com/metrico/cloki-view/actions/workflows/npm_build_test.yml)
+[](https://github.com/metrico/cloki-view/actions/workflows/codeql-scanner.yml)
+
+# Qryn View
+
+
+### Qryn-View Custom Plugins
+
+This documentation describes the process of creating a plugin for Qryn-View, including activation, deactivation, and development.
+
+## Activation / Deactivation
+
+To activate or deactivate you plugin:
+
+1. Navigate to the "Settings" menu.
+2. Look for the "Plugins" section.
+3. Locate the plugin you want to activate or deactivate.
+4. Click and toggle the Activate / Deactivate switch next to the plugin.
+5. Close the settings menu.
+
+## Development
+
+To develop a custom plugin for this Qryn-View:
+
+1. Create a new folder at `./src/plugins/YourPlugin`.
+2. Create a React TypeScript `index.tsx` file for your plugin component in the new folder.
+3. It should be exported in the following format:
+
+```typescript
+export interface Plugin {
+ name: string;
+ section: string;
+ id: string;
+ Component: React.FC;
+ description: string;
+ active: boolean;
+}
+
+// see /plugins/Clock as example
+
+type YourPluginProps = {
+ // the props will be inherited from the section component
+ localProps:any //
+}
+const YourPluginComponent:React.FC(props) {
+ // content
+ // you can import useTheme() hook from ../../themes
+ const theme = useTheme()
+ const {localProps} = props
+ return <>...
+}
+
+const yourPlugin: Plugin = {
+ name: "YourPlugin",
+ section: "YourSection",
+ id: "your-plugin-id",
+ Component: YourPluginComponent,
+ description: "YourPlugin description",
+ active: true,
+};
+
+export default yourPlugin;
+```
+
+4. Use the following object as a reference to define your plugin's `section` in the UI:
+
+```typescript
+export const locations: ILocations = {
+ Main: { parent: "", children: ["Status Bar", "Panel"] },
+ "Status Bar": { parent: "Main", children: [""] },
+ Panel: { parent: "Main", children: ["Queries", "Data Views"] },
+ Queries: { parent: "Panel", children: ["Stats", "Data Views"] },
+ Stats: { parent: "Queries", children: [""] },
+ "Data Views": { parent: "Panel", children: ["Data View Header", "View"] },
+ "Query Item": { parent: "Queries", children: [] },
+};
+```
+
+5. Import your plugin in the `./src/plugins/index.tsx` file as follows:
+
+```typescript
+import yourPlugin from "./YourPlugin";
+
+// add to the plugins array
+const plugins: Plugin[] = [yourPlugin];
+
+```
+
+---
+
+### About qryn
+
+Consult the [qryn Wiki](https://github.com/metrico/qryn/wiki/LogQL-Supported-Queries) for a detailed list of the project and its supported features, [changelog](https://github.com/metrico/qryn/wiki/Changelog) and [API functionality](https://github.com/metrico/qryn/wiki/HTTP-API)
+
+### Acknowledgements
+- (C) 2022 QXIP BV see LICENSE for details
+
+[^1]: qryn is not affiliated or endorsed by Grafana Labs or ClickHouse Inc. All rights belong to their respective owners.
+[^2]: qryn-view is part of the qryn project, licensed under the AGPLv3 LICENSE by QXIP BV
diff --git a/src/plugins/Raggix/HeaderSection.tsx b/src/plugins/Raggix/HeaderSection.tsx
new file mode 100644
index 00000000..fd4ec0ab
--- /dev/null
+++ b/src/plugins/Raggix/HeaderSection.tsx
@@ -0,0 +1,241 @@
+import { Switch } from "@mui/material";
+import { css, cx } from "@emotion/css";
+import PlayArrowOutlinedIcon from "@mui/icons-material/PlayArrowOutlined";
+import { useMemo } from "react";
+
+const HeaderSectionStyles = (theme: any) => css`
+ color: ${theme.textColor};
+ .raggix-options {
+ display: flex;
+ align-items: center;
+ }
+ .raggix-buttons {
+ display: flex;
+ align-items: center;
+ }
+ .raggix-name {
+ display: flex;
+ align-items: center;
+ }
+ .title {
+ display: flex;
+ align-items: center;
+ font-weight: bold;
+ font-family: monospace;
+ font-size: 10px;
+ letter-spacing: 1px;
+ color: ${theme.textColor};
+ background: ${theme.inputBg};
+ padding: 6px;
+ border-radius: 3px 3px 0px 0px;
+ border-bottom: 1px solid ${theme.buttonBorder};
+ justify-content: space-between;
+ }
+ .content {
+ display: flex;
+ padding: 6px;
+ align-items: center;
+ justify-content: space-between;
+ }
+ select {
+ height: 26px;
+ color: ${theme.textColor};
+ background: ${theme.inputBg};
+ border: 1px solid ${theme.buttonBorder};
+ border-radius: 3px;
+ padding: 0px 6px;
+ }
+ label {
+ padding: 10px;
+ display: flex;
+ align-items: center;
+ font-size: 11px;
+ }
+ button {
+ border: 1px solid ${theme.primaryBorder};
+ border-radius: 3px;
+ padding: 4px 8px;
+ background: ${theme.primaryDark};
+ color: ${theme.buttonText};
+ margin: 0px 3px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ height: 30px;
+ &:hover {
+ background: ${theme.primaryLight};
+ }
+ &.toggle-button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: none;
+ color:${theme.textColor};
+ border:none;
+ font-size:14px;
+ width: 16px;
+ height: 16px;
+ }
+ }
+`;
+
+const LoaderStyle = css`
+ border: 2px solid #f3f3f3; /* Light grey */
+ border-top: 2px solid #3498db; /* Blue */
+ border-radius: 50%;
+ width: 5px;
+ height: 5px;
+ margin-left: 2px;
+ animation: spin 2s linear infinite;
+ @keyframes spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+ }
+`;
+
+const Loader = () => {
+ return ;
+};
+
+type HeaderProps = {
+ handleRecurrent: (e: any) => void;
+ handleReset: (e: any) => void;
+ openLogs: (e: any) => void;
+ launchLogs: (e: any) => void;
+ setRangeValue: (e: any) => void;
+ setRecurrentValue: (e: any) => void;
+ handleToggleRaggix: () => void;
+ recurrentValue: number;
+ isRecurrent: boolean;
+ open: boolean;
+ rangeValue: number;
+ loading: boolean;
+ raggixOpen:boolean;
+ theme: any;
+};
+
+const HeaderSection: React.FC = (props) => {
+ const {
+ isRecurrent,
+ handleRecurrent,
+ handleReset,
+ open,
+ openLogs,
+ loading,
+ theme,
+ launchLogs,
+ rangeValue,
+ setRangeValue,
+ setRecurrentValue,
+ recurrentValue,
+ handleToggleRaggix,
+ raggixOpen
+ } = props;
+
+ const rangeOpts = useMemo(() => {
+ return [
+ ["5s", 5000],
+ ["10s", 10000],
+ ["20s", 20000],
+ ["30s", 30000],
+ ["5m", 300000],
+ ["10m", 600000]
+ ].map(([label, value]) => {
+ return { label, value };
+ });
+ }, []);
+
+ const periodicOpts = useMemo(() => {
+ return [
+ ["30s", 30000],
+ ["1m", 60000],
+ ["5m", 300000],
+ ["10m", 600000],
+ ].map(([label, value]) => {
+ return { label, value };
+ });
+ }, []);
+
+ const handleSelectChange = (e: any) => {
+ if (e?.target?.value) {
+ setRangeValue(() => parseInt(e.target.value));
+ }
+ };
+
+ const handleRecurrentChange = (e: any) => {
+ if (e?.target?.value) {
+ setRecurrentValue(() => parseInt(e.target.value));
+ }
+ };
+
+ return (
+
+
+
+
+ Raggix Lookup
+ {loading && }
+
+
+
+
+
+ {" "}
+
+
+
+ {" "}
+
+ {isRecurrent && (
+ <>
+
+
+
+ )}
+
+
+
+
+
openLog(index)}
+ onMouseEnter={() => showLabels(JSON.stringify(props.log.stream))}
+ >
+ );
+};
+
+export default LogItem;
diff --git a/src/plugins/Raggix/LogsCounter.tsx b/src/plugins/Raggix/LogsCounter.tsx
new file mode 100644
index 00000000..848c6577
--- /dev/null
+++ b/src/plugins/Raggix/LogsCounter.tsx
@@ -0,0 +1,41 @@
+import { css, cx } from "@emotion/css";
+import LogItem from "./LogItem";
+
+const LogsCounterStyles = (theme: any) => css`
+ margin: 0px 10px;
+ display: flex;
+ flex-wrap: wrap;
+`;
+
+type Props = {
+ loading: boolean;
+ logs: any[];
+ theme: any;
+ openLog: Function;
+ showLabels: (e: any) => void;
+};
+
+const LogsCounter: React.FC = (props) => {
+ const { logs, loading, openLog, showLabels, theme } = props;
+
+ if (!loading) {
+ return (
+
+ {logs?.length > 0 &&
+ logs?.map((log: any, index: number) => (
+
+
+
+ ))}
+
+ {logs?.values?.length > 0 &&
+ logs?.values?.map((log: any, idx: any) => {
+ const [ts, text] = log;
+ return (
+
+ {ts}{" "}
+ {text}
+
+ );
+ })}
+
+
+
+ {raggixOpen && (
+
+
+ {" "}
+ {labelString}
+
+
+
+
+
+
+ {logs && (
+
+ )}
+
+
+ )}
+
+ {renderPlugin(name, PluginManager.getPlugin(section,name)['Component'])}
+
+
+}
+
+export default SinglePlugin;
\ No newline at end of file
diff --git a/src/plugins/SinglePluginRenderer.tsx b/src/plugins/SinglePluginRenderer.tsx
new file mode 100644
index 00000000..f21657a0
--- /dev/null
+++ b/src/plugins/SinglePluginRenderer.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import PluginManager from ".";
+
+interface SingleRendererProps {
+ section: string;
+ localProps: any;
+ name?: any;
+}
+
+const SinglePluginRenderer: React.FC = (props) => {
+ const { section, localProps, name } = props;
+
+ const renderPlugin = (
+ name: any,
+ Component: React.FC
+ ) => {
+ return (
+
+ );
+ };
+
+ return (
+
+ {renderPlugin(name, PluginManager.getPlugin(section, name))}
+
+ );
+};
+
+export default SinglePluginRenderer;
diff --git a/src/plugins/actions.tsx b/src/plugins/actions.tsx
new file mode 100644
index 00000000..d44fcce0
--- /dev/null
+++ b/src/plugins/actions.tsx
@@ -0,0 +1,6 @@
+export const setPlugins = (plugins:any) => (dispatch:Function) => {
+ dispatch({
+ type: "SET_PLUGINS",
+ plugins
+ })
+}
diff --git a/src/plugins/index.tsx b/src/plugins/index.tsx
new file mode 100644
index 00000000..c3e616c8
--- /dev/null
+++ b/src/plugins/index.tsx
@@ -0,0 +1,15 @@
+import { initPlugins, PluginManager } from "./PluginManagerFactory";
+import clockPlugin from "./Clock";
+//import raggixPlugin from "./Raggix";
+//import aggregationPlugin from "./Aggregation"
+
+let plugins = [
+ clockPlugin,
+ // raggixPlugin,
+ // aggregationPlugin
+
+]
+
+initPlugins(plugins)
+
+export default PluginManager;
diff --git a/src/plugins/queryeditor.tsx b/src/plugins/queryeditor.tsx
index 6fd69652..2032aec5 100644
--- a/src/plugins/queryeditor.tsx
+++ b/src/plugins/queryeditor.tsx
@@ -1,36 +1,29 @@
import styled from "@emotion/styled";
import { css } from "@emotion/css";
-import React, { useCallback, useState, useMemo, useEffect, useRef } from "react";
-
+import { useCallback, useState, useMemo, useEffect, useRef } from "react";
import { createEditor, Text } from "slate";
import { Slate, Editable, withReact } from "slate-react";
import { withHistory } from "slate-history";
import Prism from "prismjs";
import "prismjs/components/prism-promql";
import "prismjs/components/prism-sql";
-import { themes } from "../theme/themes";
import { ThemeProvider } from "@emotion/react";
-import { useSelector } from "react-redux";
+import { useTheme } from "../theme";
const CustomEditor = styled(Editable)`
flex: 1;
- // height: 100%;
- background: ${({theme}: any) => theme.inputBg};
- border: 1px solid ${({theme}: any) => theme.buttonBorder};
- color: ${({theme}: any) => theme.textColor};
+ background: ${({ theme }: any) => theme.inputBg};
+ border: 1px solid ${({ theme }: any) => theme.buttonBorder};
+ color: ${({ theme }: any) => theme.textColor};
padding: 4px 8px;
- font-size: 1em;
+ font-size: 12px;
font-family: monospace;
margin: 0px 5px;
- // margin-bottom: 20px;
border-radius: 3px;
line-height: 1.5;
line-break: anywhere;
overflow-y: scroll;
`;
-// const Resizable = css`
-// margin-bottom: 10px;
-// width: 100%;
-// `;
+
const QueryBar = styled.div`
display: flex;
align-items: center;
@@ -39,8 +32,7 @@ const QueryBar = styled.div`
`;
function Leaf({ attributes, children, leaf }: any) {
- const theme = useSelector((store: any) => store.theme);
- const _themes: any = themes;
+ const theme = useTheme();
return (
store.theme);
+}: // wrapperRef
+any) {
+ const theme = useTheme();
const renderLeaf = useCallback((props) => , []);
- // const [height, setHeight] = useState(0);
- // const [width, setWidth] = useState(0);
- const editor = useMemo(() => withHistory(withReact(createEditor() as any)), []);
- const ref = useRef(null);
-
- // useEffect(()=> {
- // setHeight(30)
- // },[setHeight])
- // useEffect(()=> {
- // setWidth(wrapperRef)
- // },[width, setWidth, isSplit, wrapperRef])
- // Keep track of state for the value of the editor.
-
+ const editor = useMemo(
+ () => withHistory(withReact(createEditor() as any)),
+ []
+ );
+ const ref = useRef(null);
const [language] = useState("sql");
const decorate = useCallback(
@@ -168,38 +152,30 @@ export default function QueryEditor({
useEffect(() => {
setEditorValue(value);
- // eslint-disable-next-line react-hooks/exhaustive-deps
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useEffect(() => {
setEditorValue(value);
editor.children = value;
- // eslint-disable-next-line react-hooks/exhaustive-deps
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [value, setEditorValue]);
- const _themes: any = themes;
-
return (
-
+
- {/* */}
-
-
- {/* */}
+
diff --git a/src/plugins/queryhistory/components/AlertDialog.tsx b/src/plugins/queryhistory/components/AlertDialog.tsx
index 5c950cfb..8084ba0f 100644
--- a/src/plugins/queryhistory/components/AlertDialog.tsx
+++ b/src/plugins/queryhistory/components/AlertDialog.tsx
@@ -13,23 +13,23 @@ import {
Tooltip,
} from "@mui/material";
import { ThemeProvider } from "@mui/styles";
-import { useSelector } from "react-redux";
-import { themes } from "../../../theme/themes";
import styled from "@emotion/styled";
import { DialogStyles } from "../../settingsdialog/SettingsDialog";
+import { useTheme } from "../../../components/DataViews/components/QueryBuilder/hooks";
const AlertCont = styled.div`
- background: ${({theme}: any) => theme.widgetContainer};
+ background: ${({ theme }: any) => theme.widgetContainer};
#alert-dialog-title {
- color: ${({theme}: any) => theme.textColor};
+ color: ${({ theme }: any) => theme.textColor};
}
#alert-dialog-description {
- color: ${({theme}: any) => theme.textOff};
+ color: ${({ theme }: any) => theme.textOff};
font-weight: normal;
}
`;
export default function AlertDialog({ clearHistory, dialogType }: any) {
const [open, setOpen] = useState(false);
- const theme = useSelector((store: any) => store.theme);
+
+ const theme = useTheme();
const handleClickOpen = () => {
setOpen(true);
@@ -42,9 +42,8 @@ export default function AlertDialog({ clearHistory, dialogType }: any) {
clearHistory();
setOpen(false);
}
- const _themes: any = themes;
return (
-
+
@@ -58,9 +57,9 @@ export default function AlertDialog({ clearHistory, dialogType }: any) {
aria-describedby="alert-dialog-description"
PaperProps={{
classes: {
- root: DialogStyles
- }
- }}
+ root: DialogStyles,
+ },
+ }}
>
diff --git a/src/plugins/queryhistory/index.tsx b/src/plugins/queryhistory/index.tsx
index 6cb0caea..453554dd 100644
--- a/src/plugins/queryhistory/index.tsx
+++ b/src/plugins/queryhistory/index.tsx
@@ -29,7 +29,7 @@ import ZoomOutMapIcon from "@mui/icons-material/ZoomOutMap";
import ZoomInMapIcon from "@mui/icons-material/ZoomInMap";
import KeyboardArrowDownOutlinedIcon from "@mui/icons-material/KeyboardArrowDownOutlined";
import { Typography } from "@mui/material";
-
+import DOMPurify from "isomorphic-dompurify";
import localUrl from "../../services/localUrl";
import setLinksHistory from "../../actions/setLinksHistory";
@@ -59,10 +59,10 @@ import {
import AlertDialog from "./components/AlertDialog";
import EmptyHistoryDisplay from "./components/EmptyHistoryDisplay";
import CloseButton from "./components/CloseButton";
-import { themes } from "../../theme/themes";
import { notificationTypes } from "../../qryn-ui/notifications/consts";
import { CustomMenu } from "../../components/StatusBar/components/daterangepicker";
+import { useTheme } from "../../components/DataViews/components/QueryBuilder/hooks";
function QueryHistoryTabs(props: any) {
const {
@@ -180,10 +180,13 @@ function HistoryLinkParams({
}}
>
{" "}
-
+
{" "}
@@ -258,8 +261,7 @@ function HistoryLinkTools(props: any) {
handleSubmit,
label,
}: any = props;
- const storeTheme = useSelector((store: any) => store.theme);
- const qrynTheme = (themes as any)[storeTheme];
+ const theme = useTheme();
const [anchorEl, setAnchorEl] = useState(null);
const open = Boolean(anchorEl);
const [isRelative, setIsRelative] = useState(false);
@@ -282,7 +284,7 @@ function HistoryLinkTools(props: any) {
display: "flex",
flexDirection: onOpen ? "column-reverse" : "row",
justifyContent: "space-between",
- alignItems:'center'
+ alignItems: "center",
}}
>
<>
@@ -318,7 +320,7 @@ function HistoryLinkTools(props: any) {
anchorEl={anchorEl}
open={open}
onClose={handleClose}
- qryntheme={qrynTheme}
+ qryntheme={theme}
size={"small"}
>