`
- color: ${({theme}: any) => theme.textColor};
+ color: ${({theme}: any) => theme.contrast};
width: 100%;
`;
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/TraceTimelineViewer/index.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/TraceTimelineViewer/index.tsx
similarity index 96%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/TraceTimelineViewer/index.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/TraceTimelineViewer/index.tsx
index da321e9e..af413788 100644
--- a/src/components/DataViews/components/Traces/Jaeger-ui/src/TraceTimelineViewer/index.tsx
+++ b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/TraceTimelineViewer/index.tsx
@@ -14,7 +14,7 @@
import { RefObject } from "react";
-import * as React from "react";
+import React from 'react';
import { Accessors } from "../ScrollManager";
import { merge as mergeShortcuts } from "../keyboard-shortcuts";
@@ -44,7 +44,7 @@ type TExtractUiFindFromStateReturn = {
};
const TraceTimelineViewer = styled.div<{theme:any}>`
- border-bottom: 1px solid ${({theme})=>theme.buttonBorder};
+ border-bottom: 1px solid ${({theme})=>theme.accentNeutral};
& .json-markup {
line-height: 17px;
@@ -58,21 +58,21 @@ const TraceTimelineViewer = styled.div<{theme:any}>`
}
& .json-markup-bool {
- color: ${({theme})=>theme.textColor};
+ color: ${({theme})=>theme.contrast};
}
& .json-markup-string {
- color: ${({theme})=>theme.textColor};
+ color: ${({theme})=>theme.contrast};
font-size:12px;
font-family:monospace;
}
& .json-markup-null {
- color: ${({theme})=>theme.textColor};
+ color: ${({theme})=>theme.contrast};
}
& .json-markup-number {
- color: ${({theme})=>theme.textColor};
+ color: ${({theme})=>theme.contrast};
}
`;
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/TraceTimelineViewer/types.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/TraceTimelineViewer/types.tsx
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/TraceTimelineViewer/types.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/TraceTimelineViewer/types.tsx
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/TraceTimelineViewer/utils.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/TraceTimelineViewer/utils.tsx
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/TraceTimelineViewer/utils.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/TraceTimelineViewer/utils.tsx
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/Tween.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/Tween.tsx
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/Tween.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/Tween.tsx
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/common/BreakableText.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/common/BreakableText.tsx
similarity index 50%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/common/BreakableText.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/common/BreakableText.tsx
index f51d4354..aac3a8a3 100644
--- a/src/components/DataViews/components/Traces/Jaeger-ui/src/common/BreakableText.tsx
+++ b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/common/BreakableText.tsx
@@ -12,48 +12,51 @@
// See the License for the specific language governing permissions and
// limitations under the License.
-import { css } from '@emotion/css';
-import * as React from 'react';
-
+import { css } from "@emotion/css";
+import React from "react";
const BreakableTextStyle = css`
- display: inline-block;
- white-space: pre;
- `
-
+ display: inline-block;
+ white-space: pre;
+`;
const WORD_RX = /\W*\w+\W*/g;
type Props = {
- text: string;
- className?: string;
- wordRegexp?: RegExp;
+ text: string;
+ className?: string;
+ wordRegexp?: RegExp;
};
// TODO typescript doesn't understand text or null as react nodes
// https://github.com/Microsoft/TypeScript/issues/21699
export default function BreakableText(
- props: Props
+ props: Props
): any /* React.ReactNode /* React.ReactElement | React.ReactElement[] \*\/ */ {
- const { className, text, wordRegexp = WORD_RX } = props;
-// const styles = useStyles2(getStyles);
- if (!text) {
- return typeof text === 'string' ? text : null;
- }
- const spans = [];
- wordRegexp.exec('');
- // if the given text has no words, set the first match to the entire text
- let match: RegExpExecArray | string[] | null = wordRegexp.exec(text) || [text];
- while (match) {
- spans.push(
-
- {match[0]}
-
- );
- match = wordRegexp.exec(text);
- }
- return spans;
+ const { className, text, wordRegexp = WORD_RX } = props;
+ // const styles = useStyles2(getStyles);
+ if (!text) {
+ return typeof text === "string" ? text : null;
+ }
+ const spans = [];
+ wordRegexp.exec("");
+ // if the given text has no words, set the first match to the entire text
+ let match: RegExpExecArray | string[] | null = wordRegexp.exec(text) || [
+ text,
+ ];
+ while (match) {
+ spans.push(
+
+ {match[0]}
+
+ );
+ match = wordRegexp.exec(text);
+ }
+ return spans;
}
BreakableText.defaultProps = {
- wordRegexp: WORD_RX,
+ wordRegexp: WORD_RX,
};
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/common/CopyIcon.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/common/CopyIcon.tsx
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/common/CopyIcon.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/common/CopyIcon.tsx
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/common/Divider.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/common/Divider.tsx
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/common/Divider.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/common/Divider.tsx
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/common/ExternalLinks.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/common/ExternalLinks.tsx
similarity index 93%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/common/ExternalLinks.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/common/ExternalLinks.tsx
index 96e388af..72eccf46 100644
--- a/src/components/DataViews/components/Traces/Jaeger-ui/src/common/ExternalLinks.tsx
+++ b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/common/ExternalLinks.tsx
@@ -12,7 +12,7 @@
// See the License for the specific language governing permissions and
// limitations under the License.
-import * as React from 'react';
+import React, {ReactNode} from 'react';
import NewWindowIcon from './NewWindowIcon';
@@ -26,7 +26,7 @@ type ExternalLinksProps = {
className?: string;
};
-const LinkValue = (props: { href: string; title?: string; children?: React.ReactNode; className?: string }) => (
+const LinkValue = (props: { href: string; title?: string; children?: ReactNode; className?: string }) => (
{props.children}
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/common/LabeledList.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/common/LabeledList.tsx
similarity index 90%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/common/LabeledList.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/common/LabeledList.tsx
index bf9c125a..e4ab414c 100644
--- a/src/components/DataViews/components/Traces/Jaeger-ui/src/common/LabeledList.tsx
+++ b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/common/LabeledList.tsx
@@ -15,7 +15,7 @@
import { css } from "@emotion/css";
import styled from "@emotion/styled";
import cx from "classnames";
-import * as React from "react";
+import React, { ReactNode } from "react";
const LabeledListStyles = css`
list-style: none;
@@ -36,12 +36,12 @@ const LabeledListItemDivider = (color: string) => css`
padding: 0 8px;
`;
const LabeledListLabel = styled.span<{ theme: any }>`
- color: ${({theme}: any) => theme.textColor};
+ color: ${({ theme }: any) => theme.contrast};
margin-right: 0.25rem;
font-size: 12px;
`;
const LabeledListValue = styled.strong<{ theme: any }>`
- color: ${({theme}: any) => theme.textColor};
+ color: ${({ theme }: any) => theme.contrast};
margin-right: 0.55rem;
font-size: 12px;
`;
@@ -52,8 +52,8 @@ type LabeledListProps = {
theme: any;
items: Array<{
key: string;
- label: React.ReactNode;
- value: React.ReactNode;
+ label: ReactNode;
+ value: ReactNode;
}>;
};
@@ -75,7 +75,7 @@ export default function LabeledList(props: LabeledListProps) {
LabeledListItem,
divider
? LabeledListItemDivider(
- props.theme.buttonBorder
+ props.theme.accentNeutral
)
: ""
)}
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/common/NewWindowIcon.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/common/NewWindowIcon.tsx
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/common/NewWindowIcon.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/common/NewWindowIcon.tsx
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/common/TraceName.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/common/TraceName.tsx
similarity index 96%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/common/TraceName.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/common/TraceName.tsx
index 69f0afba..9eebbda2 100644
--- a/src/components/DataViews/components/Traces/Jaeger-ui/src/common/TraceName.tsx
+++ b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/common/TraceName.tsx
@@ -11,9 +11,7 @@
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
-
-import * as React from 'react';
-
+import React from 'react'
import { FALLBACK_TRACE_NAME } from '../constants';
import { TNil } from '../types';
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/common/UiFindInput.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/common/UiFindInput.tsx
similarity index 98%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/common/UiFindInput.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/common/UiFindInput.tsx
index 89d83db9..55527442 100644
--- a/src/components/DataViews/components/Traces/Jaeger-ui/src/common/UiFindInput.tsx
+++ b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/common/UiFindInput.tsx
@@ -12,7 +12,7 @@
// See the License for the specific language governing permissions and
// limitations under the License.
-import * as React from 'react';
+import React from 'react';
import { TNil } from '../types/index';
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/constants/default-config.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/constants/default-config.tsx
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/constants/default-config.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/constants/default-config.tsx
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/constants/index.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/constants/index.tsx
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/constants/index.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/constants/index.tsx
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/constants/tag-keys.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/constants/tag-keys.tsx
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/constants/tag-keys.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/constants/tag-keys.tsx
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/index.ts b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/index.ts
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/index.ts
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/index.ts
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/keyboard-mappings.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/keyboard-mappings.tsx
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/keyboard-mappings.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/keyboard-mappings.tsx
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/keyboard-shortcuts.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/keyboard-shortcuts.tsx
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/keyboard-shortcuts.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/keyboard-shortcuts.tsx
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/model/link-patterns.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/model/link-patterns.tsx
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/model/link-patterns.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/model/link-patterns.tsx
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/model/span.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/model/span.tsx
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/model/span.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/model/span.tsx
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/model/trace-viewer.ts b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/model/trace-viewer.ts
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/model/trace-viewer.ts
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/model/trace-viewer.ts
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/model/transform-trace-data.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/model/transform-trace-data.tsx
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/model/transform-trace-data.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/model/transform-trace-data.tsx
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/scroll-page.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/scroll-page.tsx
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/scroll-page.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/scroll-page.tsx
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/selectors/process.ts b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/selectors/process.ts
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/selectors/process.ts
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/selectors/process.ts
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/selectors/span.ts b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/selectors/span.ts
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/selectors/span.ts
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/selectors/span.ts
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/selectors/trace.fixture.ts b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/selectors/trace.fixture.ts
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/selectors/trace.fixture.ts
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/selectors/trace.fixture.ts
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/selectors/trace.ts b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/selectors/trace.ts
similarity index 98%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/selectors/trace.ts
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/selectors/trace.ts
index cbae57f6..7fddeac3 100644
--- a/src/components/DataViews/components/Traces/Jaeger-ui/src/selectors/trace.ts
+++ b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/selectors/trace.ts
@@ -116,7 +116,7 @@ export const getTraceTimestamp = createSelector(getTraceSpans, (spans) =>
)
);
-export const getTraceDuration = createSelector(getTraceSpans, getTraceTimestamp, (spans, timestamp) =>
+export const getTraceDuration:any = createSelector(getTraceSpans, getTraceTimestamp, (spans, timestamp) =>
spans.reduce(
(prevDuration:any, span:any) =>
prevDuration
@@ -251,7 +251,7 @@ export const getTicksForTrace:any = createSelector(
width:any
// timestamps will be spaced over the interval, starting from the initial timestamp
) =>
- [...(interval + 1).keys()].map((num) => ({
+ [...(interval + 1).keys()].map((num:number) => ({
timestamp: getTraceTimestamp(trace) + getTraceDuration(trace) * (num / interval),
width,
}))
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/settings/SpanBarSettings.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/settings/SpanBarSettings.tsx
similarity index 98%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/settings/SpanBarSettings.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/settings/SpanBarSettings.tsx
index 44b22375..e659edac 100644
--- a/src/components/DataViews/components/Traces/Jaeger-ui/src/settings/SpanBarSettings.tsx
+++ b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/settings/SpanBarSettings.tsx
@@ -1,5 +1,5 @@
// import { css } from '@emotion/css';
-// import * as React from 'react';
+// import React from 'react';
export interface DataSourceJsonData {
authType?: string;
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/types/TNil.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/types/TNil.tsx
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/types/TNil.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/types/TNil.tsx
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/types/TTraceDiffState.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/types/TTraceDiffState.tsx
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/types/TTraceDiffState.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/types/TTraceDiffState.tsx
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/types/TTraceTimeline.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/types/TTraceTimeline.tsx
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/types/TTraceTimeline.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/types/TTraceTimeline.tsx
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/types/api-error.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/types/api-error.tsx
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/types/api-error.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/types/api-error.tsx
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/types/archive.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/types/archive.tsx
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/types/archive.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/types/archive.tsx
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/types/config.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/types/config.tsx
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/types/config.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/types/config.tsx
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/types/embedded.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/types/embedded.tsx
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/types/embedded.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/types/embedded.tsx
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/types/index.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/types/index.tsx
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/types/index.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/types/index.tsx
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/types/links.ts b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/types/links.ts
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/types/links.ts
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/types/links.ts
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/types/search.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/types/search.tsx
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/types/search.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/types/search.tsx
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/types/trace.ts b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/types/trace.ts
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/types/trace.ts
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/types/trace.ts
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/uberUtilityStyles.ts b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/uberUtilityStyles.ts
similarity index 94%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/uberUtilityStyles.ts
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/uberUtilityStyles.ts
index 23a9fdf8..64524c65 100644
--- a/src/components/DataViews/components/Traces/Jaeger-ui/src/uberUtilityStyles.ts
+++ b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/uberUtilityStyles.ts
@@ -4,8 +4,8 @@ export const ubRelative = css`
position: relative;
`;
-export const textColor = (theme:any) => css`
-color: ${theme.textColor};
+export const contrast = (theme:any) => css`
+color: ${theme.contrast};
`
export const ubMb1 = css`
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/url/ReferenceLink.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/url/ReferenceLink.tsx
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/url/ReferenceLink.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/url/ReferenceLink.tsx
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/DraggableManager.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/DraggableManager.tsx
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/DraggableManager.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/DraggableManager.tsx
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/EUpdateTypes.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/EUpdateTypes.tsx
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/EUpdateTypes.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/EUpdateTypes.tsx
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/README.md b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/README.md
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/README.md
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/README.md
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/demo/DividerDemo.css b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/demo/DividerDemo.css
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/demo/DividerDemo.css
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/demo/DividerDemo.css
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/demo/DividerDemo.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/demo/DividerDemo.tsx
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/demo/DividerDemo.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/demo/DividerDemo.tsx
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/demo/DraggableManagerDemo.css b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/demo/DraggableManagerDemo.css
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/demo/DraggableManagerDemo.css
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/demo/DraggableManagerDemo.css
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/demo/DraggableManagerDemo.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/demo/DraggableManagerDemo.tsx
similarity index 98%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/demo/DraggableManagerDemo.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/demo/DraggableManagerDemo.tsx
index 439a7b5c..740fbbe9 100644
--- a/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/demo/DraggableManagerDemo.tsx
+++ b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/demo/DraggableManagerDemo.tsx
@@ -28,7 +28,7 @@ export type DraggableManagerDemoState = {
};
export default class DraggableManagerDemo extends React.PureComponent<{}, DraggableManagerDemoState> {
- state: DraggableManagerDemoState;
+ // state: DraggableManagerDemoState;
constructor(props: {}) {
super(props);
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/demo/RegionDemo.css b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/demo/RegionDemo.css
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/demo/RegionDemo.css
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/demo/RegionDemo.css
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/demo/RegionDemo.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/demo/RegionDemo.tsx
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/demo/RegionDemo.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/demo/RegionDemo.tsx
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/demo/demo-ux.gif b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/demo/demo-ux.gif
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/demo/demo-ux.gif
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/demo/demo-ux.gif
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/demo/index.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/demo/index.tsx
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/demo/index.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/demo/index.tsx
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/index.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/index.tsx
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/index.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/index.tsx
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/types.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/types.tsx
similarity index 96%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/types.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/types.tsx
index b10c4581..24b2b144 100644
--- a/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/types.tsx
+++ b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/DraggableManager/types.tsx
@@ -12,7 +12,7 @@
// See the License for the specific language governing permissions and
// limitations under the License.
-import * as React from 'react';
+import React from 'react';
import { TNil } from '../../types';
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/TreeNode.ts b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/TreeNode.ts
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/utils/TreeNode.ts
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/TreeNode.ts
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/color-generator.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/color-generator.tsx
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/utils/color-generator.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/color-generator.tsx
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/config/get-config.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/config/get-config.tsx
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/utils/config/get-config.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/config/get-config.tsx
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/date.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/date.tsx
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/utils/date.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/date.tsx
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/filter-spans.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/filter-spans.tsx
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/utils/filter-spans.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/filter-spans.tsx
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/number.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/number.tsx
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/utils/number.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/number.tsx
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/sort.ts b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/sort.ts
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/utils/sort.ts
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/sort.ts
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/span-ancestor-ids.tsx b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/span-ancestor-ids.tsx
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/utils/span-ancestor-ids.tsx
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/span-ancestor-ids.tsx
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/test/requestAnimationFrame.ts b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/test/requestAnimationFrame.ts
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/utils/test/requestAnimationFrame.ts
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/src/utils/test/requestAnimationFrame.ts
diff --git a/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/tsconfig.json b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/tsconfig.json
new file mode 100644
index 00000000..be3e4efb
--- /dev/null
+++ b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/tsconfig.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "baseUrl": ".",
+ "allowJs": true,
+ "jsx": "react-jsx",
+ "moduleResolution": "bundler",
+ "esModuleInterop": true,
+ "strict": false,
+ "noUnusedLocals": false,
+ "noUnusedParameters": false,
+ "noFallthroughCasesInSwitch": false,
+ "noImplicitAny": false,
+ "allowSyntheticDefaultImports": true,
+ },
+ "exclude": ["dist", "node_modules"],
+// "extends": "/tsconfig.json",
+ "include": [
+ "src/**/*.ts*",
+ "typings",
+ "../../public/app/types/jquery/*.ts",
+ "../../public/app/types/*.d.ts"
+ ]
+}
\ No newline at end of file
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/typings/custom.d.ts b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/typings/custom.d.ts
similarity index 80%
rename from src/components/DataViews/components/Traces/Jaeger-ui/typings/custom.d.ts
rename to packages/main/src/components/DataViews/components/Traces/Jaeger-ui/typings/custom.d.ts
index dd70a671..82ca8daa 100644
--- a/src/components/DataViews/components/Traces/Jaeger-ui/typings/custom.d.ts
+++ b/packages/main/src/components/DataViews/components/Traces/Jaeger-ui/typings/custom.d.ts
@@ -13,18 +13,18 @@
// limitations under the License.
// For inlined envvars
-declare const process: {
- env: {
- NODE_ENV: string;
- REACT_APP_GA_DEBUG?: string;
- REACT_APP_VSN_STATE?: string;
- };
-};
+// declare const process: {
+// env: {
+// NODE_ENV: string;
+// REACT_APP_GA_DEBUG?: string;
+// REACT_APP_VSN_STATE?: string;
+// };
+// };
declare module 'combokeys' {
export default class Combokeys {
constructor(element: HTMLElement);
- bind: (binding: string | string[], handler: CombokeysHandler) => void;
+ bind: (binding: string | string[], handler: any) => void;
reset: () => void;
}
}
diff --git a/src/components/DataViews/components/Traces/TraceModels.ts b/packages/main/src/components/DataViews/components/Traces/TraceModels.ts
similarity index 100%
rename from src/components/DataViews/components/Traces/TraceModels.ts
rename to packages/main/src/components/DataViews/components/Traces/TraceModels.ts
diff --git a/src/components/DataViews/components/Traces/TraceView.tsx b/packages/main/src/components/DataViews/components/Traces/TraceView.tsx
similarity index 99%
rename from src/components/DataViews/components/Traces/TraceView.tsx
rename to packages/main/src/components/DataViews/components/Traces/TraceView.tsx
index ed7e4e34..eb253a83 100644
--- a/src/components/DataViews/components/Traces/TraceView.tsx
+++ b/packages/main/src/components/DataViews/components/Traces/TraceView.tsx
@@ -9,7 +9,7 @@ import { mapSpanFields, mapTracesResponse } from "./mapTracesResponse";
import { ViewHeader } from "../ViewHeader";
import { ViewStyled } from "./styled";
import { ThemeProvider } from "@emotion/react";
-import { useTheme } from "../../../../theme";
+import useTheme from "@ui/theme/useTheme";
function noop() /* : {} */ {
return {};
diff --git a/packages/main/src/components/DataViews/components/Traces/mapTracesResponse.ts b/packages/main/src/components/DataViews/components/Traces/mapTracesResponse.ts
new file mode 100644
index 00000000..560e63ed
--- /dev/null
+++ b/packages/main/src/components/DataViews/components/Traces/mapTracesResponse.ts
@@ -0,0 +1,289 @@
+export function attrValue(value:any):any {
+ if (!!value?.stringValue) {
+ return value.stringValue;
+ }
+
+ if (!!value?.boolValue) {
+ return Boolean(value.boolValue);
+ }
+
+ if (!!value?.initValue) {
+ return parseInt(value.intValue, 10);
+ }
+
+ if (!!value?.doubleValue) {
+ return parseFloat(value.doubleValue);
+ }
+
+ if (!!value?.arrayValue) {
+ const arrayValue = [];
+ for (let arValue of value.arrayValue.values) {
+ arrayValue.push(attrValue(arValue));
+ }
+
+ return arrayValue;
+ }
+
+ return "";
+}
+
+export function mapSpanFields(spans:any) {
+ const mappedFields = [
+ {
+ name: "traceID",
+ type: "string",
+ typeInfo: {
+ frame: "string",
+ },
+ },
+ {
+ name: "spanID",
+ type: "string",
+ typeInfo: {
+ frame: "string",
+ },
+ },
+ {
+ name: "parentSpanID",
+ type: "string",
+ typeInfo: {
+ frame: "string",
+ },
+ },
+ {
+ name: "operationName",
+ type: "string",
+ typeInfo: {
+ frame: "string",
+ },
+ },
+ {
+ name: "serviceName",
+ type: "string",
+ typeInfo: {
+ frame: "string",
+ },
+ },
+ {
+ name: "serviceTags",
+ type: "other",
+ typeInfo: {
+ frame: "json.RawMessage",
+ },
+ },
+ {
+ name: "startTime",
+ type: "number",
+ typeInfo: {
+ frame: "float64",
+ },
+ },
+ {
+ name: "duration",
+ type: "number",
+ typeInfo: {
+ frame: "float64",
+ },
+ },
+ {
+ name: "logs",
+ type: "other",
+ typeInfo: {
+ frame: "json.RawMessage",
+ },
+ },
+ {
+ name: "references",
+ type: "other",
+ typeInfo: {
+ frame: "json.RawMessage",
+ },
+ },
+ {
+ name: "tags",
+ type: "other",
+ typeInfo: {
+ frame: "json.RawMessage",
+ },
+ },
+ ];
+
+ return mappedFields.map(({ name, type, typeInfo }) => ({
+ name,
+ type,
+ typeInfo,
+ config: {},
+ values: spans?.map((sp:any) => sp[name]),
+ entities: {},
+ state: null,
+ }));
+}
+
+export const TREE_ROOT_ID = "__root__";
+
+export function countSpanDepth(spans:any, count = 0) {
+
+ spans.forEach((span:any) => {
+ span.depth = count;
+ if (span.children?.length > 0) {
+ count += 1;
+ span.children.forEach((child:any) => {
+ if (span.spanID === child) {
+ countSpanDepth(spans, count);
+ }
+ });
+ }
+ });
+
+}
+
+function getSpans(data:any) {
+
+ const mappedSpans = data.resourceSpans?.map((rs:any) => {
+ const resource = rs.resource;
+ return rs.instrumentationLibrarySpans.map((m:any) =>
+ m.spans.map((sp:any) => ({ ...sp, resource }))
+ );
+ });
+
+ return mappedSpans.flat(2);
+}
+
+export function mapTracesResponse(data:any) {
+ const allSpans = getSpans(data);
+ const mapped = data?.resourceSpans?.map((trace) => {
+ const { instrumentationLibrarySpans } = trace;
+ const parent = allSpans.find((m) => m.parentSpanId === undefined);
+ const instSpans = [...allSpans];
+ const orderedSpans = instSpans?.sort(
+ (a, b) => parseInt(a.startTimeUnixNano) - parseInt(b.startTimeUnixNano)
+ );
+
+ const firstTs = orderedSpans[0]?.startTimeUnixNano / 1000;
+ const lastTimestamps = orderedSpans
+ .map((m) => m.endTimeUnixNano)
+ ?.sort()
+ ?.reverse();
+ const lastTs = lastTimestamps[0] / 1000;
+ const spans:any = instSpans.map((m, idx) => {
+ const tags = m.attributes?.map((attr) => ({
+ key: attr?.key,
+ value: attr?.value?.stringValue,
+ }));
+
+ const serviceTags = m?.resource?.attributes?.map((attr) => ({
+ key: attr?.key,
+ value: attr?.value?.stringValue,
+ }));
+
+ const duration =
+ Math.round(m?.endTimeUnixNano / 1000) -
+ Math.round(m?.startTimeUnixNano / 1000);
+ const startTime = m?.startTimeUnixNano / 1000;
+
+ const process = {
+ serviceName: m?.serviceName,
+ tags: serviceTags,
+ };
+
+ return {
+ traceID: m?.traceID || m?.traceId,
+ spanID: m?.spanID || m.spanId,
+ parentSpanID: m?.parentSpanID || m?.parentSpanId || "",
+ operationName: m?.name,
+ serviceName: m?.serviceName,
+ serviceTags,
+ startTime,
+ duration,
+ relativeStartTime: 0,
+ events: m?.events || [],
+ logs: m?.logs || [],
+ references: m?.references || [],
+ tags,
+ processID: m?.spanID,
+ flags: 0,
+ dataFrameRowIndex: idx,
+ process,
+ children: m?.children || [],
+ };
+ });
+
+ if (spans?.length > 0) {
+ try {
+ const spanMap = Object.create(null); // Use Object.create(null) for better performance
+ const rootSpan = spans[0].startTime;
+
+ for (const span of spans) {
+ const { spanID, parentSpanID, startTime, references, children } = span;
+ const hasParent = parentSpanID !== "" && spanMap[parentSpanID];
+
+ if (hasParent) {
+ spanMap[parentSpanID].children.push(spanID);
+ references.push({
+ refType: "CHILD_OF",
+ spanID: parentSpanID,
+ traceID: spanMap[parentSpanID].traceID,
+ span: { ...spanMap[parentSpanID] },
+ });
+ }
+
+ if (children.length > 0) {
+ span.hasChildren = true;
+ span.childSpanCount = children.length;
+ span.relativeStartTime = startTime - rootSpan;
+ } else {
+ span.relativeStartTime = startTime - rootSpan;
+ }
+
+ spanMap[spanID] = span;
+ }
+ } catch (e) {
+ console.log(e);
+ }
+ }
+
+ countSpanDepth(spans);
+
+ let traceObj = {
+ services: [],
+ spans: [],
+ traceID: "",
+ traceName: "",
+ processes: {}, // use processing fn
+ duration: 0,
+ startTime: 0,
+ endTime: 0,
+ };
+
+ const firstSpan:any = spans?.[0];
+
+ if (instrumentationLibrarySpans && lastTs && firstTs) {
+ const {
+ serviceName: firstServiceName,
+ name: firstName,
+ traceID: firstTraceID,
+ } = firstSpan;
+
+ traceObj = {
+ services: spans.map((span) => {
+ return {
+ name: span.serviceName,
+ numberOfSpans: spans.length,
+ };
+ }),
+ spans,
+ traceID: parent ? parent?.traceID : firstTraceID,
+ traceName: parent
+ ? `${parent?.serviceName}: ${parent?.name}`
+ : `${firstServiceName}: ${firstName}`,
+ processes: {}, // use processing fn
+ duration: lastTs - firstTs,
+ startTime: firstTs,
+ endTime: lastTs,
+ };
+ }
+ return traceObj;
+ });
+
+ return mapped
+}
diff --git a/src/components/DataViews/components/Traces/styled/index.ts b/packages/main/src/components/DataViews/components/Traces/styled/index.ts
similarity index 93%
rename from src/components/DataViews/components/Traces/styled/index.ts
rename to packages/main/src/components/DataViews/components/Traces/styled/index.ts
index 4efa1681..0c078e9d 100644
--- a/src/components/DataViews/components/Traces/styled/index.ts
+++ b/packages/main/src/components/DataViews/components/Traces/styled/index.ts
@@ -5,7 +5,7 @@ export const ViewStyled = styled.div`
margin: 4px;
padding: 5px;
margin-top:0px;
- border: 1px solid ${(props:any) => props.theme?.buttonBorder};
+ border: 1px solid ${(props:any) => props.theme?.accentNeutral};
border-radius: 3px;
display:flex;
flex-direction:column;
diff --git a/src/components/DataViews/components/Traces/trace_sample.md b/packages/main/src/components/DataViews/components/Traces/trace_sample.md
similarity index 100%
rename from src/components/DataViews/components/Traces/trace_sample.md
rename to packages/main/src/components/DataViews/components/Traces/trace_sample.md
diff --git a/src/components/DataViews/components/Traces/useChildrenState.ts b/packages/main/src/components/DataViews/components/Traces/useChildrenState.ts
similarity index 100%
rename from src/components/DataViews/components/Traces/useChildrenState.ts
rename to packages/main/src/components/DataViews/components/Traces/useChildrenState.ts
diff --git a/src/components/DataViews/components/Traces/useDetailState.ts b/packages/main/src/components/DataViews/components/Traces/useDetailState.ts
similarity index 100%
rename from src/components/DataViews/components/Traces/useDetailState.ts
rename to packages/main/src/components/DataViews/components/Traces/useDetailState.ts
diff --git a/src/components/DataViews/components/Traces/useHoverIntentGuide.ts b/packages/main/src/components/DataViews/components/Traces/useHoverIntentGuide.ts
similarity index 100%
rename from src/components/DataViews/components/Traces/useHoverIntentGuide.ts
rename to packages/main/src/components/DataViews/components/Traces/useHoverIntentGuide.ts
diff --git a/src/components/DataViews/components/Traces/useViewRange.ts b/packages/main/src/components/DataViews/components/Traces/useViewRange.ts
similarity index 100%
rename from src/components/DataViews/components/Traces/useViewRange.ts
rename to packages/main/src/components/DataViews/components/Traces/useViewRange.ts
diff --git a/src/components/DataViews/components/ValueTags/FilterButtons.tsx b/packages/main/src/components/DataViews/components/ValueTags/FilterButtons.tsx
similarity index 100%
rename from src/components/DataViews/components/ValueTags/FilterButtons.tsx
rename to packages/main/src/components/DataViews/components/ValueTags/FilterButtons.tsx
diff --git a/src/components/DataViews/components/ValueTags/LinkButtonWithTraces.tsx b/packages/main/src/components/DataViews/components/ValueTags/LinkButtonWithTraces.tsx
similarity index 100%
rename from src/components/DataViews/components/ValueTags/LinkButtonWithTraces.tsx
rename to packages/main/src/components/DataViews/components/ValueTags/LinkButtonWithTraces.tsx
diff --git a/src/components/DataViews/components/ValueTags/ValueTags.tsx b/packages/main/src/components/DataViews/components/ValueTags/ValueTags.tsx
similarity index 93%
rename from src/components/DataViews/components/ValueTags/ValueTags.tsx
rename to packages/main/src/components/DataViews/components/ValueTags/ValueTags.tsx
index 2cfb8046..d1436cba 100644
--- a/src/components/DataViews/components/ValueTags/ValueTags.tsx
+++ b/packages/main/src/components/DataViews/components/ValueTags/ValueTags.tsx
@@ -1,13 +1,13 @@
import { useSelector, useDispatch } from "react-redux";
import { setSplitView } from "../../../StatusBar/components/SplitViewButton/setSplitView";
import { ThemeProvider } from "@emotion/react";
-import { setRightPanel } from "../../../../actions/setRightPanel";
-import getData from "../../../../actions/getData";
+import { setRightPanel } from "@ui/store/actions/setRightPanel";
+import getData from "@ui/store/actions/getData";
import { useMediaQuery } from "react-responsive";
import { LinkButtonWithTraces } from "./LinkButtonWithTraces";
import { ValueTagsStyled } from "./styled";
import { FilterButtons } from "./FilterButtons";
-import { useTheme } from "../../../../theme";
+import useTheme from "@ui/theme/useTheme";
/**
*
@@ -19,13 +19,14 @@ import { useTheme } from "../../../../theme";
* @returns Component for the Tags for the Log rows
*/
+
export default function ValueTags(props: any) {
const { tags, actQuery, dataSourceData, linkedFieldTags } = props;
const isTabletOrMobile = useMediaQuery({ query: "(max-width: 1013px)" });
// const dataSources = useSelector((store: any) => store.dataSources);
const theme = useTheme();
const isEmbed = useSelector((store: any) => store.isEmbed);
- const dispatch = useDispatch();
+ const dispatch: any = useDispatch();
const rightPanel = useSelector((store: any) => store.right);
const openTraces = (
@@ -89,7 +90,7 @@ export default function ValueTags(props: any) {
};
return (
- {Object.entries(tags).map(([label, value], k) => (
+ {Object.entries(tags).map(([label, value]:[string,string], k) => (
{!isEmbed && (
diff --git a/src/components/DataViews/components/ValueTags/ValueTagsCont.tsx b/packages/main/src/components/DataViews/components/ValueTags/ValueTagsCont.tsx
similarity index 100%
rename from src/components/DataViews/components/ValueTags/ValueTagsCont.tsx
rename to packages/main/src/components/DataViews/components/ValueTags/ValueTagsCont.tsx
diff --git a/src/components/DataViews/components/ValueTags/helpers.tsx b/packages/main/src/components/DataViews/components/ValueTags/helpers.tsx
similarity index 100%
rename from src/components/DataViews/components/ValueTags/helpers.tsx
rename to packages/main/src/components/DataViews/components/ValueTags/helpers.tsx
diff --git a/src/components/DataViews/components/ValueTags/styled.tsx b/packages/main/src/components/DataViews/components/ValueTags/styled.tsx
similarity index 73%
rename from src/components/DataViews/components/ValueTags/styled.tsx
rename to packages/main/src/components/DataViews/components/ValueTags/styled.tsx
index 440d4571..63815ded 100644
--- a/src/components/DataViews/components/ValueTags/styled.tsx
+++ b/packages/main/src/components/DataViews/components/ValueTags/styled.tsx
@@ -1,7 +1,7 @@
import styled from '@emotion/styled'
export const TracesButton: any = styled.div`
- color: ${({ theme }: any) => theme.buttonText};
+ color: ${({ theme }: any) => theme.maxContrast};
flex: 0;
background-color: hsl(220, 67%, 55%);
display: flex;
@@ -14,11 +14,11 @@ export const TracesButton: any = styled.div`
`;
export const ValueTagsStyled: any = styled.div`
- color: ${({ theme }: any) => theme.textPrimary};
+ color: ${({ theme }: any) => theme.hardContrast};
flex: 1;
display: flex;
&:hover {
- background: ${({ theme }: any) => theme.widgetContainer};
+ background: ${({ theme }: any) => theme.shadow};
}
`;
diff --git a/src/components/DataViews/components/ValueTags/types.tsx b/packages/main/src/components/DataViews/components/ValueTags/types.tsx
similarity index 100%
rename from src/components/DataViews/components/ValueTags/types.tsx
rename to packages/main/src/components/DataViews/components/ValueTags/types.tsx
diff --git a/src/components/DataViews/components/ViewHeader.tsx b/packages/main/src/components/DataViews/components/ViewHeader.tsx
similarity index 99%
rename from src/components/DataViews/components/ViewHeader.tsx
rename to packages/main/src/components/DataViews/components/ViewHeader.tsx
index b7495163..9fa27892 100644
--- a/src/components/DataViews/components/ViewHeader.tsx
+++ b/packages/main/src/components/DataViews/components/ViewHeader.tsx
@@ -8,7 +8,7 @@ import InfoIcon from "@mui/icons-material/Info";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import { InfoDialog } from "./InfoDialog";
-import { useTheme } from "./QueryBuilder/hooks";
+import useTheme from "@ui/theme/useTheme"
export function ViewHeader(props: any) {
const { fixedSize } = props || { fixedSize: false };
diff --git a/src/components/DataViews/components/ViewLabel.tsx b/packages/main/src/components/DataViews/components/ViewLabel.tsx
similarity index 100%
rename from src/components/DataViews/components/ViewLabel.tsx
rename to packages/main/src/components/DataViews/components/ViewLabel.tsx
diff --git a/src/components/DataViews/helpers.ts b/packages/main/src/components/DataViews/helpers.ts
similarity index 100%
rename from src/components/DataViews/helpers.ts
rename to packages/main/src/components/DataViews/helpers.ts
diff --git a/src/components/DataViews/hooks.ts b/packages/main/src/components/DataViews/hooks.ts
similarity index 100%
rename from src/components/DataViews/hooks.ts
rename to packages/main/src/components/DataViews/hooks.ts
diff --git a/src/components/DataViews/index.tsx b/packages/main/src/components/DataViews/index.tsx
similarity index 84%
rename from src/components/DataViews/index.tsx
rename to packages/main/src/components/DataViews/index.tsx
index 3b264520..72d3ccd2 100644
--- a/src/components/DataViews/index.tsx
+++ b/packages/main/src/components/DataViews/index.tsx
@@ -1,14 +1,15 @@
import { ThemeProvider } from "@emotion/react";
import { useMemo, useState } from "react";
import { useSelector } from "react-redux";
-import PluginRenderer from "../../plugins/PluginsRenderer";
+import PluginRenderer from "@ui/plugins/PluginsRenderer";
import { DataViewItem } from "./components/DataViewItem";
-import { useTheme } from "./components/QueryBuilder/hooks";
+import useTheme from "@ui/theme/useTheme";
import { DataviewsContainer } from "./styled";
export default function DataViews(props: any) {
const { name, open } = props;
const theme = useTheme();
+ const isCardinality = useSelector((store: any) => store.isCardinality);
const [side] = useState(name);
const dataViews = useSelector((store: any) => store[`${side}DataView`]);
@@ -26,7 +27,7 @@ export default function DataViews(props: any) {
theme.mainBgColor};
- border: 1px solid ${({ theme }: any) => theme.buttonBorder};
+ background: ${({ theme }: any) => theme.background};
+ border: 1px solid ${({ theme }: any) => theme.accentNeutral};
margin: 5px;
padding: 6px;
overflow-y: auto;
@@ -21,7 +21,7 @@ export const DataViewStyled = styled.div`
&::-webkit-scrollbar-thumb {
border-radius: 5px;
- background: ${({ theme }: any) => theme.scrollbarThumb};
+ background: ${({ theme }: any) => theme.alphaPlusNeutral};
}
`;
@@ -34,8 +34,8 @@ export const EmptyViewContainer = styled.div`
font-size: 0.75em;
letter-spacing: 1px;
padding: 30px;
- color: ${({ theme }: any) => theme.textOff};
- background: ${({ theme }: any) => theme.secondaryWidgetContainer};
+ color: ${({ theme }: any) => theme.lightContrast};
+ background: ${({ theme }: any) => theme.background};
text-align: center;
`;
@@ -45,12 +45,12 @@ export const DataViewHeader = styled.div`
font-size: 10px;
font-family: monospace;
margin: 0px 10px;
- color: ${({ theme }: any) => theme.textColor};
+ color: ${({ theme }: any) => theme.contrast};
span {
- background: ${({ theme }: any) => theme.inputBg};
+ background: ${({ theme }: any) => theme.deep};
padding: 4px;
border-radius: 4px;
- border: 1px solid ${({ theme }: any) => theme.buttonBorder};
+ border: 1px solid ${({ theme }: any) => theme.accentNeutral};
margin: 0px 5px;
display: flex;
align-items: center;
@@ -94,7 +94,7 @@ export const DataviewsContainer = styled.div`
export const ViewHeaderStyled = styled.div`
display: flex;
align-items: center;
- color: ${({ theme }: any) => theme.textColor};
+ color: ${({ theme }: any) => theme.contrast};
font-size: 12px;
.header-actions {
justify-self: flex-end;
@@ -103,9 +103,9 @@ export const ViewHeaderStyled = styled.div`
margin: 0px 2px;
border-radius: 3px;
cursor: pointer;
- color: ${({ theme }: any) => theme.textColor};
+ color: ${({ theme }: any) => theme.contrast};
&:hover {
- background: ${({ theme }: any) => theme.buttonDefault};
+ background: ${({ theme }: any) => theme.neutral};
}
}
}
@@ -126,7 +126,7 @@ export const LabelChip = styled.div`
margin: 0px 2px;
padding: 2px;
font-size: 10px;
- border: 1px solid ${({ theme }: any) => theme.buttonBorder};
+ border: 1px solid ${({ theme }: any) => theme.accentNeutral};
border-radius: 3px;
`;
@@ -146,13 +146,13 @@ export const HeadLabelsCont = styled.div`
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
- background: ${({ theme }: any) => theme.scrollbarThumb};
+ background: ${({ theme }: any) => theme.alphaPlusNeutral};
}
`;
export const StyledInfoContent = styled.div`
- background: ${({ theme }: any) => theme.widgetContainer};
- color: ${({ theme }: any) => theme.textColor};
+ background: ${({ theme }: any) => theme.shadow};
+ color: ${({ theme }: any) => theme.contrast};
display: flex;
flex-direction: column;
padding: 20px;
@@ -169,8 +169,8 @@ export const StyledInfoContent = styled.div`
align-items: center;
flex-wrap: wrap;
span.label {
- background: ${({ theme }: any) => theme.buttonBorder};
- color: ${({ theme }: any) => theme.widgetContainer};
+ background: ${({ theme }: any) => theme.accentNeutral};
+ color: ${({ theme }: any) => theme.shadow};
margin: 2px;
padding: 2px;
border-radius: 2px;
@@ -179,7 +179,7 @@ export const StyledInfoContent = styled.div`
h4 {
margin-bottom: 20px;
padding-bottom: 4px;
- border-bottom: 1px solid ${({ theme }: any) => theme.buttonBorder};
+ border-bottom: 1px solid ${({ theme }: any) => theme.accentNeutral};
}
pre {
font-family: monospace;
diff --git a/src/components/DataViews/views/EmptyView.tsx b/packages/main/src/components/DataViews/views/EmptyView.tsx
similarity index 100%
rename from src/components/DataViews/views/EmptyView.tsx
rename to packages/main/src/components/DataViews/views/EmptyView.tsx
diff --git a/src/components/DataViews/views/LabelLinks.tsx b/packages/main/src/components/DataViews/views/LabelLinks.tsx
similarity index 71%
rename from src/components/DataViews/views/LabelLinks.tsx
rename to packages/main/src/components/DataViews/views/LabelLinks.tsx
index 42468a88..ed71dfd8 100644
--- a/src/components/DataViews/views/LabelLinks.tsx
+++ b/packages/main/src/components/DataViews/views/LabelLinks.tsx
@@ -1,11 +1,11 @@
import { ThemeProvider } from "@emotion/react";
import styled from "@emotion/styled";
-import { useTheme } from "../../../theme";
+import useTheme from "@ui/theme/useTheme"
const PageContainer = styled.div`
- background: ${({ theme }: any) => theme.viewBg};
+ background: ${({ theme }: any) => theme.background};
p {
- color: ${({ theme }: any) => theme.textColor};
+ color: ${({ theme }: any) => theme.contrast};
}
`;
diff --git a/src/components/DataViews/views/LogsView.tsx b/packages/main/src/components/DataViews/views/LogsView.tsx
similarity index 54%
rename from src/components/DataViews/views/LogsView.tsx
rename to packages/main/src/components/DataViews/views/LogsView.tsx
index ec31b58a..a2158561 100644
--- a/src/components/DataViews/views/LogsView.tsx
+++ b/packages/main/src/components/DataViews/views/LogsView.tsx
@@ -1,16 +1,16 @@
-import { TabsUnstyled } from "@mui/base";
-import { LogRows } from "../components/Logs/LogRows";
+import { useMemo, useState, SyntheticEvent, useEffect } from "react";
+import { useSelector } from "react-redux";
+import { Tabs } from "@mui/base";
import { VectorTable } from "../components/Table/VectorTable/VectorTable";
import { ViewHeader } from "../components/ViewHeader";
-import { TabsList, Tab, TabPanel, ViewStyled } from "./styled";
-import ReactJSON from "react-json-view";
-import { useSelector } from "react-redux";
-import { useMemo, useState, SyntheticEvent } from "react";
-
+import { TabsListq, Tabq, TabPanelq, ViewStyled } from "./styled";
import { localTabsState } from "../helpers";
import QrynChart from "../components/Charts";
+import { LogRows } from "../components/Logs/LogRows";
+import ReactJson from "@microlink/react-json-view";
+import React from "react";
-export default function LogsView(props: any) {
+const LogsView: React.FunctionComponent = (props: any) => {
const {
viewRef,
panelSize,
@@ -27,12 +27,15 @@ export default function LogsView(props: any) {
streamData,
logsVolumeData,
} = props;
- const { isLogsVolume } = actualQuery;
+ const { isLogsVolume, loading } = actualQuery;
const { limit } = actualQuery;
const [tabsState, setTabsState] = useState(
localTabsState(actualQuery)[actualQuery.id] || 0
);
+
+ const [actStreamData, setActStreamData] = useState(props.streamData);
+
const rawData = useMemo(() => {
return JSON.parse(JSON.stringify(props?.dataView?.raw)) || [];
}, [props?.dataView?.raw]);
@@ -45,6 +48,7 @@ export default function LogsView(props: any) {
}
return "tomorrow";
}, [theme]);
+
const onTabChange = (
e: SyntheticEvent,
value: number | string | boolean
@@ -53,11 +57,19 @@ export default function LogsView(props: any) {
...localTabsState(actualQuery),
[actualQuery.id]: value,
};
+
localStorage.setItem("tabsState", JSON.stringify(newState));
if (typeof value === "number") {
setTabsState(() => value);
}
};
+
+ useEffect(() => {
+ if (!loading) {
+ setActStreamData(props.streamData);
+ }
+ }, [props.streamData]);
+
return (
-
)}
-
-
- Logs
- {tableData && Table }
+
+ Logs
+ {tableData && Table }
- Raw
-
-
+ Raw
+
+
-
-
-
+
+
-
-
-
+
+
-
-
-
+
+
);
-}
+};
+
+export default LogsView;
diff --git a/src/components/DataViews/views/MatrixView.tsx b/packages/main/src/components/DataViews/views/MatrixView.tsx
similarity index 57%
rename from src/components/DataViews/views/MatrixView.tsx
rename to packages/main/src/components/DataViews/views/MatrixView.tsx
index 8b495eee..c64f398c 100644
--- a/src/components/DataViews/views/MatrixView.tsx
+++ b/packages/main/src/components/DataViews/views/MatrixView.tsx
@@ -1,12 +1,12 @@
import QrynChart from "../components/Charts";
import { VectorTable } from "../components/Table/VectorTable/VectorTable";
import { ViewHeader } from "../components/ViewHeader";
-import { TabsUnstyled } from "@mui/base";
-import { TabsList, Tab, TabPanel, ViewStyled } from "./styled";
+import { Tabs } from "@mui/base";
+import { TabsListq, Tabq, TabPanelq, ViewStyled } from "./styled";
-import ReactJSON from "react-json-view";
+import ReactJson from "@microlink/react-json-view";
import { useSelector } from "react-redux";
-import { useMemo, useState, SyntheticEvent } from "react";
+import { useMemo, useState, SyntheticEvent, useEffect } from "react";
import { localTabsState } from "../helpers";
export const MatrixView = (props: any) => {
@@ -26,7 +26,10 @@ export const MatrixView = (props: any) => {
limit,
streamData,
} = props;
+ const { loading } = actualQuery;
const theme = useSelector((store: any) => store.theme);
+
+ const [actStreamData, setActStreamData] = useState([]);
const jsonTheme = useMemo(() => {
if (theme === "light") {
return "rjv-default";
@@ -56,6 +59,12 @@ export const MatrixView = (props: any) => {
}
};
+ useEffect(() => {
+ if (!loading && streamData?.[0]?.metric) {
+ setActStreamData(streamData);
+ }
+ }, [streamData]);
+
return (
{
type={type}
{...props}
/>
-
-
- Chart
- Table
- Raw
-
-
+
+ Chart
+ Table
+ Raw
+
+
-
-
-
+
+
-
-
-
+
+
-
-
-
+
+
);
};
diff --git a/src/components/DataViews/views/VectorView.tsx b/packages/main/src/components/DataViews/views/VectorView.tsx
similarity index 66%
rename from src/components/DataViews/views/VectorView.tsx
rename to packages/main/src/components/DataViews/views/VectorView.tsx
index b72048cc..e804d4e9 100644
--- a/src/components/DataViews/views/VectorView.tsx
+++ b/packages/main/src/components/DataViews/views/VectorView.tsx
@@ -1,10 +1,10 @@
-import { TabsUnstyled } from "@mui/base";
+import { Tabs } from "@mui/base";
import { useMemo, useRef, useState, SyntheticEvent } from "react";
import QrynChart from "../components/Charts";
import { VectorTable } from "../components/Table/VectorTable/VectorTable";
import { ViewHeader } from "../components/ViewHeader";
-import { TabsList, Tab, TabPanel, ViewStyled } from "./styled";
-import ReactJSON from "react-json-view";
+import { TabsListq, Tabq, TabPanelq, ViewStyled } from "./styled";
+import ReactJson from "@microlink/react-json-view";
import { useSelector } from "react-redux";
import { localTabsState } from "../helpers";
import DOMPurify from "isomorphic-dompurify";
@@ -24,6 +24,7 @@ export const VectorView = (props: any) => {
viewWidth,
limit,
} = props;
+ const { loading } = actualQuery;
const theme = useSelector((store: any) => store.theme);
const jsonTheme = useMemo(() => {
if (theme === "light") {
@@ -67,52 +68,58 @@ export const VectorView = (props: any) => {
type={type}
{...props}
/>
-
-
- Table
+
+ Table
- Raw
- {streamData?.chartData && Chart }
-
-
+ Raw
+ {streamData?.chartData && Chart }
+
+
-
-
-
+
+
-
-
+
{streamData?.chartData && (
-
+
-
-
+
)}
-
+
);
};
diff --git a/src/components/DataViews/views/styled.ts b/packages/main/src/components/DataViews/views/styled.ts
similarity index 64%
rename from src/components/DataViews/views/styled.ts
rename to packages/main/src/components/DataViews/views/styled.ts
index a962a7b5..ac6168b9 100644
--- a/src/components/DataViews/views/styled.ts
+++ b/packages/main/src/components/DataViews/views/styled.ts
@@ -1,18 +1,18 @@
import styled from "@emotion/styled";
import {
- TabPanelUnstyled,
- TabsListUnstyled,
- TabsUnstyled,
- TabUnstyled,
+ TabPanel,
+ TabsList,
+ Tabs,
+ Tab,
} from "@mui/base";
-import { tabUnstyledClasses } from "@mui/base/TabUnstyled";
-import { buttonUnstyledClasses } from "@mui/base/ButtonUnstyled";
+import { tabClasses } from "@mui/base/Tab";
+import { buttonClasses } from "@mui/base/Button";
export const ViewStyled: any = styled.div`
margin: 4px;
padding: 5px;
margin-top: 0px;
- border: 1px solid ${({ theme }: any) => theme.buttonBorder};
+ border: 1px solid ${({ theme }: any) => theme.accentNeutral};
border-radius: 3px;
display: flex;
flex-direction: column;
@@ -43,29 +43,29 @@ export const ViewStyled: any = styled.div`
}
`;
-export const TabPanel = styled(TabPanelUnstyled)`
+export const TabPanelq = styled(TabPanel)`
width: 100%;
- background: ${({ theme }: any) => theme.widgetContainer};
+ background: ${({ theme }: any) => theme.shadow};
height: inherit;
flex: 1;
`;
-export const TabsContainer = styled(TabsUnstyled)`
+export const TabsContainer = styled(Tabs)`
display: flex;
height: 100%;
`;
-export const TabsList: any = styled(TabsListUnstyled)`
+export const TabsListq: any = styled(TabsList)`
min-width: 320px;
- background: ${({ theme }: any) => theme.tabHeader};
- border-bottom: 4px solid ${({ theme }: any) => theme.historyRow};
+ background: ${({ theme }: any) => theme.shadow};
+ border-bottom: 4px solid ${({ theme }: any) => theme.bgNeutral};
display: ${({ panelsize }: any) => (panelsize === "min" ? "none" : "flex")};
align-items: center;
align-content: space-between;
`;
-export const Tab = styled(TabUnstyled)`
- color: ${({ theme }: any) => theme.textColor};
- background: ${({ theme }: any) => theme.buttonDefault};
- border: 1px solid ${(props: any) => props.theme.buttonBorder};
+export const Tabq = styled(Tab)`
+ color: ${({ theme }: any) => theme.contrast};
+ background: ${({ theme }: any) => theme.neutral};
+ border: 1px solid ${(props: any) => props.theme.accentNeutral};
cursor: pointer;
font-size: 13px;
background-color: transparent;
@@ -79,22 +79,22 @@ export const Tab = styled(TabUnstyled)`
transition: 0.2s all;
&:hover {
- background-color: ${({ theme }: any) => theme.buttonHover};
+ background-color: ${({ theme }: any) => theme.lightNeutral};
}
&:focus {
- color: ${({ theme }: any) => theme.textColor};
- background: ${({ theme }: any) => theme.buttonDefault};
+ color: ${({ theme }: any) => theme.contrast};
+ background: ${({ theme }: any) => theme.neutral};
border-radius: 3px 3px 0px 0px;
outline-offset: 2px;
}
- &.${tabUnstyledClasses.selected} {
- border-bottom: 1px solid ${({ theme }: any) => theme.primaryDark};
+ &.${tabClasses.selected} {
+ border-bottom: 1px solid ${({ theme }: any) => theme.primary};
}
- &.${buttonUnstyledClasses.disabled} {
+ &.${buttonClasses.disabled} {
opacity: 0.5;
cursor: not-allowed;
}
diff --git a/src/qryn-ui/Buttons/Button.model.ts b/packages/main/src/components/LabelBrowser/components/Buttons/Button.model.ts
similarity index 100%
rename from src/qryn-ui/Buttons/Button.model.ts
rename to packages/main/src/components/LabelBrowser/components/Buttons/Button.model.ts
diff --git a/src/components/LabelBrowser/components/Buttons/HistoryButton.tsx b/packages/main/src/components/LabelBrowser/components/Buttons/HistoryButton.tsx
similarity index 89%
rename from src/components/LabelBrowser/components/Buttons/HistoryButton.tsx
rename to packages/main/src/components/LabelBrowser/components/Buttons/HistoryButton.tsx
index 6393e61a..0d711cfe 100644
--- a/src/components/LabelBrowser/components/Buttons/HistoryButton.tsx
+++ b/packages/main/src/components/LabelBrowser/components/Buttons/HistoryButton.tsx
@@ -2,7 +2,7 @@ import { ThemeProvider } from "@emotion/react";
import { Tooltip } from "@mui/material";
import { useEffect, useState } from "react";
import { HistoryButtonStyled, HistoryIconStyled } from "../styled";
-import { useTheme } from "../../../../theme";
+import useTheme from "@ui/theme/useTheme";
export default function HistoryButton({
queryLength,
handleHistoryClick,
@@ -26,7 +26,7 @@ export default function HistoryButton({
onClick={handleHistoryClick}
>
History }
diff --git a/src/components/LabelBrowser/components/Buttons/ShowLabelsButton.tsx b/packages/main/src/components/LabelBrowser/components/Buttons/ShowLabelsButton.tsx
similarity index 91%
rename from src/components/LabelBrowser/components/Buttons/ShowLabelsButton.tsx
rename to packages/main/src/components/LabelBrowser/components/Buttons/ShowLabelsButton.tsx
index 6bc55367..03d8f541 100644
--- a/src/components/LabelBrowser/components/Buttons/ShowLabelsButton.tsx
+++ b/packages/main/src/components/LabelBrowser/components/Buttons/ShowLabelsButton.tsx
@@ -4,11 +4,11 @@ import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
import { ThemeProvider } from "@emotion/react";
import { useSelector, useDispatch } from "react-redux";
import { useEffect, useMemo, useState } from "react";
-import { setLeftPanel } from "../../../../actions/setLeftPanel";
-import { setRightPanel } from "../../../../actions/setRightPanel";
+import { setLeftPanel } from "@ui/store/actions/setLeftPanel";
+import { setRightPanel } from "@ui/store/actions/setRightPanel";
import { css, cx } from "@emotion/css";
import { Tooltip } from "@mui/material";
-import { useTheme } from "../../../../theme";
+import useTheme from "@ui/theme/useTheme";
export function panelAction(name: string, value: any) {
if (name === "left") {
@@ -23,7 +23,7 @@ export const ArrowIcon = css`
`;
export default function ShowLabelsButton(props: any) {
- const dispatch = useDispatch();
+ const dispatch: any = useDispatch();
const { name } = props;
const { id, browserOpen } = props.data;
const open = useMemo(() => browserOpen, [browserOpen]);
diff --git a/src/components/LabelBrowser/components/Buttons/ShowLogsButton.tsx b/packages/main/src/components/LabelBrowser/components/Buttons/ShowLogsButton.tsx
similarity index 91%
rename from src/components/LabelBrowser/components/Buttons/ShowLogsButton.tsx
rename to packages/main/src/components/LabelBrowser/components/Buttons/ShowLogsButton.tsx
index e8478c73..7e2cefd2 100644
--- a/src/components/LabelBrowser/components/Buttons/ShowLogsButton.tsx
+++ b/packages/main/src/components/LabelBrowser/components/Buttons/ShowLogsButton.tsx
@@ -1,22 +1,22 @@
-import { ShowLogsBtn } from "../styled";
-import { ThemeProvider } from "@emotion/react";
-import { useTheme } from "../../../../theme";
-
-export default function ShowLogsButton(props: any) {
- const { isDisabled, onClick, isMobile, alterText, loading = false } = props;
- const SHOW_LOGS = "Show Results";
- const theme = useTheme();
- return (
-
-
- {loading ? <>Loading... : <>{alterText || SHOW_LOGS}}
-
-
- );
-}
+import { ShowLogsBtn } from "../styled";
+import { ThemeProvider } from "@emotion/react";
+import useTheme from "@ui/theme/useTheme";
+
+export default function ShowLogsButton(props: any) {
+ const { isDisabled, onClick, isMobile, alterText, loading = false } = props;
+ const SHOW_LOGS = "Show Results";
+ const theme = useTheme();
+ return (
+
+
+ {loading ? <>Loading... : <>{alterText || SHOW_LOGS}}
+
+
+ );
+}
diff --git a/src/components/LabelBrowser/components/Buttons/ShowLogsRateButton.tsx b/packages/main/src/components/LabelBrowser/components/Buttons/ShowLogsRateButton.tsx
similarity index 93%
rename from src/components/LabelBrowser/components/Buttons/ShowLogsRateButton.tsx
rename to packages/main/src/components/LabelBrowser/components/Buttons/ShowLogsRateButton.tsx
index 2a656020..e22d4b17 100644
--- a/src/components/LabelBrowser/components/Buttons/ShowLogsRateButton.tsx
+++ b/packages/main/src/components/LabelBrowser/components/Buttons/ShowLogsRateButton.tsx
@@ -1,6 +1,6 @@
import { HistoryButtonStyled } from "../styled";
import { ThemeProvider } from "@emotion/react";
-import { useTheme } from "../../../../theme";
+import useTheme from "@ui/theme/useTheme";
export default function ShowLogsRateButton({
isDisabled,
diff --git a/src/components/LabelBrowser/components/Buttons/ShowQuerySettingsButton.tsx b/packages/main/src/components/LabelBrowser/components/Buttons/ShowQuerySettingsButton.tsx
similarity index 92%
rename from src/components/LabelBrowser/components/Buttons/ShowQuerySettingsButton.tsx
rename to packages/main/src/components/LabelBrowser/components/Buttons/ShowQuerySettingsButton.tsx
index 8ac745fe..356e9bb5 100644
--- a/src/components/LabelBrowser/components/Buttons/ShowQuerySettingsButton.tsx
+++ b/packages/main/src/components/LabelBrowser/components/Buttons/ShowQuerySettingsButton.tsx
@@ -1,6 +1,6 @@
import { ShowSettingsBtn } from "../styled";
import { ThemeProvider } from "@emotion/react";
-import { useTheme } from "../../../../theme";
+import useTheme from "@ui/theme/useTheme";
export default function ShowQuerySettingsButton({
disabled,
diff --git a/src/components/LabelBrowser/components/LabelsSelector/LabelsList.tsx b/packages/main/src/components/LabelBrowser/components/LabelsSelector/LabelsList.tsx
similarity index 97%
rename from src/components/LabelBrowser/components/LabelsSelector/LabelsList.tsx
rename to packages/main/src/components/LabelBrowser/components/LabelsSelector/LabelsList.tsx
index d297014b..8f6015d2 100644
--- a/src/components/LabelBrowser/components/LabelsSelector/LabelsList.tsx
+++ b/packages/main/src/components/LabelBrowser/components/LabelsSelector/LabelsList.tsx
@@ -5,7 +5,7 @@ import styled from "@emotion/styled";
export const EmptyLabels = (props: any) => {
const EmptyCont = styled.div`
- color: ${({ theme }: any) => theme.textColor};
+ color: ${({ theme }: any) => theme.contrast};
padding: 10px;
`;
diff --git a/src/components/LabelBrowser/components/LabelsSelector/ValuesList.tsx b/packages/main/src/components/LabelBrowser/components/LabelsSelector/ValuesList.tsx
similarity index 97%
rename from src/components/LabelBrowser/components/LabelsSelector/ValuesList.tsx
rename to packages/main/src/components/LabelBrowser/components/LabelsSelector/ValuesList.tsx
index 5aeec91c..f3ee3b71 100644
--- a/src/components/LabelBrowser/components/LabelsSelector/ValuesList.tsx
+++ b/packages/main/src/components/LabelBrowser/components/LabelsSelector/ValuesList.tsx
@@ -1,10 +1,10 @@
import { useEffect, useState, useMemo, useCallback } from "react";
import useLabelValues from "./useLabelValues";
import { useDispatch } from "react-redux";
-import { decodeQuery } from "../../../../components/LabelBrowser/helpers/querybuilder";
+import { decodeQuery } from "@ui/main/components/LabelBrowser/helpers/querybuilder";
import { nanoid } from "nanoid";
-import { setLeftPanel } from "../../../../actions/setLeftPanel";
-import { setRightPanel } from "../../../../actions/setRightPanel";
+import { setLeftPanel } from "@ui/store/actions/setLeftPanel";
+import { setRightPanel } from "@ui/store/actions/setRightPanel";
import { Loader, LoaderCont, SmallInput } from "./styled";
export function panelAction(name: any, value: any) {
@@ -117,7 +117,7 @@ type ValuesListProps = {
};
const ValuesList: React.FC = (props) => {
- const dispatch = useDispatch();
+ const dispatch: any = useDispatch();
const { name, data, labelsSelected, label, queries } = props;
const { dataSourceId, start, stop, labels: propsLabels } = data;
diff --git a/src/components/LabelBrowser/components/LabelsSelector/ValuesListStyled.ts b/packages/main/src/components/LabelBrowser/components/LabelsSelector/ValuesListStyled.ts
similarity index 84%
rename from src/components/LabelBrowser/components/LabelsSelector/ValuesListStyled.ts
rename to packages/main/src/components/LabelBrowser/components/LabelsSelector/ValuesListStyled.ts
index de02b0ac..5455d186 100644
--- a/src/components/LabelBrowser/components/LabelsSelector/ValuesListStyled.ts
+++ b/packages/main/src/components/LabelBrowser/components/LabelsSelector/ValuesListStyled.ts
@@ -1,7 +1,7 @@
import styled from "@emotion/styled";
const ValuesListStyled = styled.div`
- background: ${({theme}: any) => theme.widgetContainer};
+ background: ${({theme}: any) => theme.shadow};
.valuesList {
transition: 0.02s all;
@@ -65,9 +65,9 @@ const ValuesListStyled = styled.div`
.valuelist-content {
small {
- color: ${({theme}: any) => theme.textColor};
- background: ${({theme}: any) => theme.buttonDefault};
- border: 1px solid ${({theme}: any) => theme.buttonBorder};
+ color: ${({theme}: any) => theme.contrast};
+ background: ${({theme}: any) => theme.neutral};
+ border: 1px solid ${({theme}: any) => theme.accentNeutral};
margin: 2px;
padding: 2px 7px;
@@ -82,11 +82,11 @@ const ValuesListStyled = styled.div`
max-width: 40ch;
transition: .5s all;
&:hover {
- background: ${({ theme }: any) => theme.buttonHover};
+ background: ${({ theme }: any) => theme.lightNeutral};
}
&.metric {
- color: ${({theme}: any) => theme.buttonText};
- background: ${({theme}: any) => theme.primaryDark};
+ color: ${({theme}: any) => theme.maxContrast};
+ background: ${({theme}: any) => theme.primary};
}
}
}
@@ -105,11 +105,11 @@ const ValuesListStyled = styled.div`
min-width: 278px;
max-width: 278px;
flex: 1;
- background: ${({theme}: any) => theme.buttonHover};
+ background: ${({theme}: any) => theme.lightNeutral};
.column {
- border: 1px solid ${({theme}: any) => theme.buttonBorder};
- background: ${({theme}: any) => theme.widgetContainer};
+ border: 1px solid ${({theme}: any) => theme.accentNeutral};
+ background: ${({theme}: any) => theme.shadow};
border-top: none;
max-height: 350px;
&::-webkit-scrollbar {
@@ -133,9 +133,9 @@ const ValuesListStyled = styled.div`
flex: 1;
transition: 0.02s all;
justify-content: space-between;
- color: ${({theme}: any) => theme.textColor};
- background: ${({theme}: any) => theme.widgetContainer};
- border: 1px solid ${({theme}: any) => theme.buttonBorder};
+ color: ${({theme}: any) => theme.contrast};
+ background: ${({theme}: any) => theme.shadow};
+ border: 1px solid ${({theme}: any) => theme.accentNeutral};
.close-column {
align-self: flex-end;
justify-self: end;
diff --git a/src/components/LabelBrowser/components/LabelsSelector/ValuesSelector.tsx b/packages/main/src/components/LabelBrowser/components/LabelsSelector/ValuesSelector.tsx
similarity index 94%
rename from src/components/LabelBrowser/components/LabelsSelector/ValuesSelector.tsx
rename to packages/main/src/components/LabelBrowser/components/LabelsSelector/ValuesSelector.tsx
index bc017273..49e36f02 100644
--- a/src/components/LabelBrowser/components/LabelsSelector/ValuesSelector.tsx
+++ b/packages/main/src/components/LabelBrowser/components/LabelsSelector/ValuesSelector.tsx
@@ -1,7 +1,7 @@
import { useEffect, useMemo, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
-import { setLeftPanel } from "../../../../actions/setLeftPanel";
-import { setRightPanel } from "../../../../actions/setRightPanel";
+import { setLeftPanel } from "@ui/store/actions/setLeftPanel";
+import { setRightPanel } from "@ui/store/actions/setRightPanel";
import { queryBuilder } from "../../helpers/querybuilder";
import ShowLogsButton from "../Buttons/ShowLogsButton";
import ValuesList from "./ValuesList";
@@ -17,7 +17,7 @@ function panelAction(name: string, value: any) {
export default function ValuesSelector(props: any) {
const { data, name } = props;
const { dataSourceType } = data;
- const dispatch = useDispatch();
+ const dispatch: any = useDispatch();
const panelQuery = useSelector((store: any) => store[name]);
const [labels, setLabels] = useState(props.labelsSelected);
diff --git a/src/components/LabelBrowser/components/LabelsSelector/helpers.ts b/packages/main/src/components/LabelBrowser/components/LabelsSelector/helpers.ts
similarity index 100%
rename from src/components/LabelBrowser/components/LabelsSelector/helpers.ts
rename to packages/main/src/components/LabelBrowser/components/LabelsSelector/helpers.ts
diff --git a/src/components/LabelBrowser/components/LabelsSelector/index.tsx b/packages/main/src/components/LabelBrowser/components/LabelsSelector/index.tsx
similarity index 96%
rename from src/components/LabelBrowser/components/LabelsSelector/index.tsx
rename to packages/main/src/components/LabelBrowser/components/LabelsSelector/index.tsx
index 214458b5..bbfe294e 100644
--- a/src/components/LabelBrowser/components/LabelsSelector/index.tsx
+++ b/packages/main/src/components/LabelBrowser/components/LabelsSelector/index.tsx
@@ -10,10 +10,10 @@ import ValuesSelector from "./ValuesSelector";
import useLabels from "./useLabels";
import ValuesListStyled from "./ValuesListStyled";
import labelHelpers from "./helpers";
-import { useTheme } from "../../../../theme";
+import useTheme from "@ui/theme/useTheme";
import { useDispatch } from "react-redux";
-import { setLeftPanel } from "../../../../actions/setLeftPanel";
-import { setRightPanel } from "../../../../actions/setRightPanel";
+import { setLeftPanel } from "@ui/store/actions/setLeftPanel";
+import { setRightPanel } from "@ui/store/actions/setRightPanel";
const panelAction = (side: "left" | "right", data: any) => {
if (side === "left") {
@@ -24,7 +24,7 @@ const panelAction = (side: "left" | "right", data: any) => {
export default function LabelsSelector(props: any) {
const { data, name, queries } = props;
- const dispatch = useDispatch();
+ const dispatch: any = useDispatch();
const {
dataSourceId,
labels: propsLabels,
diff --git a/src/components/LabelBrowser/components/LabelsSelector/styled.ts b/packages/main/src/components/LabelBrowser/components/LabelsSelector/styled.ts
similarity index 72%
rename from src/components/LabelBrowser/components/LabelsSelector/styled.ts
rename to packages/main/src/components/LabelBrowser/components/LabelsSelector/styled.ts
index 93a3cabc..d866ac4a 100644
--- a/src/components/LabelBrowser/components/LabelsSelector/styled.ts
+++ b/packages/main/src/components/LabelBrowser/components/LabelsSelector/styled.ts
@@ -16,10 +16,10 @@ export const Loader = styled(CircularProgress)`
`;
export const SmallInput = styled.input`
- background: ${({ theme }: any) => theme.inputBg};
- color: ${({ theme }: any) => theme.textColor};
+ background: ${({ theme }: any) => theme.deep};
+ color: ${({ theme }: any) => theme.contrast};
font-size: 10px;
- border: 1px solid ${({ theme }: any) => theme.buttonBorder};
+ border: 1px solid ${({ theme }: any) => theme.accentNeutral};
border-radius: 3px;
outline: none;
`;
diff --git a/src/components/LabelBrowser/components/LabelsSelector/useLabelValues.ts b/packages/main/src/components/LabelBrowser/components/LabelsSelector/useLabelValues.ts
similarity index 100%
rename from src/components/LabelBrowser/components/LabelsSelector/useLabelValues.ts
rename to packages/main/src/components/LabelBrowser/components/LabelsSelector/useLabelValues.ts
diff --git a/src/components/LabelBrowser/components/LabelsSelector/useLabels.ts b/packages/main/src/components/LabelBrowser/components/LabelsSelector/useLabels.ts
similarity index 96%
rename from src/components/LabelBrowser/components/LabelsSelector/useLabels.ts
rename to packages/main/src/components/LabelBrowser/components/LabelsSelector/useLabels.ts
index fbb7b050..082752b2 100644
--- a/src/components/LabelBrowser/components/LabelsSelector/useLabels.ts
+++ b/packages/main/src/components/LabelBrowser/components/LabelsSelector/useLabels.ts
@@ -1,8 +1,8 @@
import axios from "axios";
import { useEffect, useState, useMemo } from "react";
import { useSelector, useDispatch } from "react-redux";
-import { createAlert } from "../../../../actions";
-import { notificationTypes } from "../../../../qryn-ui/notifications/consts";
+import { createAlert } from "@ui/store/actions";
+import { notificationTypes } from "@ui/qrynui/notifications/consts";
import { getDsHeaders } from "../../../DataViews/components/QueryBuilder/helpers";
function getTimeParsed(time: any) {
@@ -31,7 +31,7 @@ const getTimestamp = (time: any, type: any): any => {
export default function useLabels(id:string, dataSourceURL = "", startTs?:string , stopTs?:string ) {
- const dispatch = useDispatch();
+ const dispatch:any = useDispatch();
const start = startTs || new Date(Date.now() + 30000)
const stop = stopTs || new Date(Date.now())
diff --git a/src/components/LabelBrowser/components/QueryBar/MobileQueryBarCont.tsx b/packages/main/src/components/LabelBrowser/components/QueryBar/MobileQueryBarCont.tsx
similarity index 99%
rename from src/components/LabelBrowser/components/QueryBar/MobileQueryBarCont.tsx
rename to packages/main/src/components/LabelBrowser/components/QueryBar/MobileQueryBarCont.tsx
index ece0522a..aed81535 100644
--- a/src/components/LabelBrowser/components/QueryBar/MobileQueryBarCont.tsx
+++ b/packages/main/src/components/LabelBrowser/components/QueryBar/MobileQueryBarCont.tsx
@@ -37,7 +37,7 @@ type MobileQueryMenuContProps = {
};
const MobileQueryMenuCont: React.FC = (props) => {
- const dispatch = useDispatch();
+ const dispatch: any = useDispatch();
const {
isSplit,
onShowQuerySettings,
diff --git a/src/components/LabelBrowser/components/QueryBar/QueryBar.tsx b/packages/main/src/components/LabelBrowser/components/QueryBar/QueryBar.tsx
similarity index 90%
rename from src/components/LabelBrowser/components/QueryBar/QueryBar.tsx
rename to packages/main/src/components/LabelBrowser/components/QueryBar/QueryBar.tsx
index 5bd8ead1..711fac63 100644
--- a/src/components/LabelBrowser/components/QueryBar/QueryBar.tsx
+++ b/packages/main/src/components/LabelBrowser/components/QueryBar/QueryBar.tsx
@@ -1,995 +1,988 @@
-/**React */
-import { useState, useEffect, useMemo } from "react";
-import { useLocation } from "react-router-dom";
-import { useSelector, useDispatch } from "react-redux";
-/**npm */
-import { css, cx } from "@emotion/css";
-import { ThemeProvider } from "@emotion/react";
-
-import { useMediaQuery } from "react-responsive";
-import DOMPurify from "isomorphic-dompurify";
-/**Actions */
-import getData from "../../../../actions/getData";
-import setQueryHistory from "../../../../actions/setQueryHistory";
-import setHistoryOpen from "../../../../actions/setHistoryOpen";
-import setLinksHistory from "../../../../actions/setLinksHistory";
-import setIsEmptyView from "../../../../actions/setIsEmptyView";
-import { setLeftPanel } from "../../../../actions/setLeftPanel";
-import { setRightPanel } from "../../../../actions/setRightPanel";
-
-/**Services */
-import localService from "../../../../services/localService";
-import localUrl from "../../../../services/localUrl";
-
-/**Buttons */
-import ShowLogsButton from "../Buttons/ShowLogsButton";
-import ShowLogsRateButton from "../Buttons/ShowLogsRateButton";
-
-/**Helpers */
-import queryInit from "../../helpers/queryInit";
-import onQueryValid from "../../helpers/onQueryValid";
-import { QueryLocalService } from "../LabelsSelector/helpers";
-/**Components */
-import QueryTypeBar from "../../../QueryTypeBar";
-import QuerySetting from "../QuerySetting";
-import MobileQueryMenuCont from "./MobileQueryBarCont";
-import QueryBarCont from "./QueryBarCont";
-/**Theme */
-
-import setDataSources from "../../../../views/DataSources/store/setDataSources";
-import { defaultDataSources } from "../../../../views/DataSources/store/defaults";
-import TracesSearch from "../../../TraceSearch/TraceSearch";
-import TracesSwitch from "../../../TraceSearch/TracesSwitch";
-import { setSplitView } from "../../../StatusBar/components/SplitViewButton/setSplitView";
-
-import { Switch } from "@mui/material";
-import { SettingLabel } from "../styled";
-import MetricsSearch from "../../../DataViews/components/Metrics/MetricsSearch";
-import LogsSearch from "../../../DataViews/components/Logs/LogsSearch/LogsSearch";
-import { useTheme } from "../../../DataViews/components/QueryBuilder/hooks";
-
-export function panelAction(name: any, value: any) {
- if (name === "left") {
- return setLeftPanel(value);
- }
- return setRightPanel(value);
-}
-export const SWITCH_OPTIONS = [
- { value: "range", label: "Range" },
- { value: "instant", label: "Instant" },
-];
-
-export const DIRECTION_SWITCH_OPTIONS = [
- { value: "forward", label: "Forward" },
- { value: "backwards", label: "Backwards" },
-];
-
-export const TRACE_OPTIONS = [
- { value: "traceId", label: "TraceId" },
- { value: "search", label: "Search" },
-];
-const maxWidth = css`
- max-width: 100%;
-`;
-
-/**
- *
- * @param props
- * @returns The Main Query bar component
- */
-
-type QueryBarProps = {
- data: any;
- queries: any;
- name: string;
- width: number;
- launchQuery: string;
-};
-
-const QueryBar: React.FC = (props) => {
- const { data, name, width, launchQuery } = props;
- const {
- queryType,
- limit,
- id,
- dataSourceType,
- direction,
- dataSourceId,
- splitted,
- } = data;
- const {
- data: {
- loading,
- hasStats,
- isShowStats,
- isBuilder,
- isLogsVolume,
- logsVolumeQuery,
- },
- } = props;
-
- const { getLocalQueryItem, getLocalDataSources, setLocalQueryData } =
- QueryLocalService;
-
- const { hash } = useLocation();
- const dispatch = useDispatch();
- const saveUrl = localUrl();
- const historyService = localService().historyStore();
- const theme = useTheme();
- const { historyOpen, isEmbed, queryHistory, start, stop } = useSelector(
- (store: any) => store
- );
- const isSplit = useSelector((store: any) => store.isSplit);
- const panelQuery = useSelector((store: any) => store[name]);
- const isTabletOrMobile = useMediaQuery({ query: "(max-width: 1070px)" });
- const [queryInput, setQueryInput] = useState(data.expr);
- const [queryValid, setQueryValid] = useState(false);
- const [queryValue, setQueryValue] = useState(queryInit(data.expr));
- const [traceQueryType, setTraceQueryType] = useState("traceId");
- const [labels] = useState([]);
- // eslint-disable-next-line
- const [traceSearch, setTraceSearch] = useState({});
- const [showStatsOpen, setShowStatsOpen] = useState(
- isShowStats || false
- );
- const [open, setOpen] = useState(false);
- const dataSources = useSelector((store: any) => store.dataSources);
- const panelData = useSelector((store: any) => store[name]);
-
- const initialDefault = useMemo(() => {
- return defaultDataSources.find((f) => f.id === dataSourceId);
- }, [dataSourceId]);
-
- const findCurrentDataSource = (dataSources: any, id: string) => {
- return dataSources?.find((f: any) => f.id === dataSourceId);
- };
-
- useEffect(() => {
- const { expr } = getLocalQueryItem(dataSourceId, id) || "";
- const localDataSource = getLocalDataSources(dataSourceId);
-
- setQueryInput(expr);
- setQueryValue([{ children: [{ text: expr }] }]);
-
- setLogsLevel(expr, isLogsVolume);
-
- const dataSource: any = findCurrentDataSource(dataSources, id);
-
- let currentDataSource: any = {};
-
- if (
- localDataSource &&
- localDataSource?.url !== initialDefault &&
- localDataSource?.url !== ""
- ) {
- currentDataSource = { ...localDataSource };
- // update datasources inside panel from local if there is datasources from local
- const panelCP = [...panelData];
- panelCP.forEach((query) => {
- if (query.id === id) {
- query.dataSourceId = currentDataSource.id;
- query.dataSourceType = currentDataSource.type;
- query.dataSourceURL = currentDataSource.url;
- }
- });
-
- dispatch(panelAction(name, panelCP));
-
- const dsCopy = [...dataSources];
- dsCopy.forEach((ds) => {
- if (ds.id === dataSourceId) {
- ds = currentDataSource;
- }
- });
-
- dispatch(setDataSources(dsCopy));
- } else if (dataSource && dataSource.url !== "") {
- currentDataSource = { ...dataSource };
- }
-
- if (isEmbed)
- dispatch(
- getData(
- dataSourceType,
- queryInput,
- queryType,
- limit,
- name,
- id,
- direction,
- dataSourceId,
- currentDataSource?.url
- )
- );
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, []);
-
- // force single view from small width
-
- useEffect(() => {
- setQueryInput(data.expr);
- setQueryValue([
- { children: [{ text: DOMPurify.sanitize(data.expr) }] },
- ]);
- }, [data.expr]);
-
- useEffect(() => {
- let queryText = queryValue[0].children[0].text;
- setQueryInput(queryText);
- }, [queryValue]);
-
- useEffect(() => {
- if (isTabletOrMobile && isSplit) {
- dispatch(setSplitView(false));
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [isTabletOrMobile]);
-
- useEffect(() => {
- let { expr } = getLocalQueryItem(dataSourceId, id) || "";
- let actLocalDs = getLocalDataSources(dataSourceId);
- setQueryInput(expr);
- setQueryValue([{ children: [{ text: DOMPurify.sanitize(expr) }] }]);
-
- if (isLogsVolume && logsVolumeQuery) {
- setLogsLevel(expr, isLogsVolume);
- }
- const dataSource: any = dataSources?.find(
- (f: any) => f.id === dataSourceId
- );
-
- let currentDataSource: any = {};
-
- if (
- actLocalDs &&
- actLocalDs?.url !== initialDefault &&
- actLocalDs?.url !== ""
- ) {
- currentDataSource = { ...actLocalDs };
-
- const panelCP = [...panelData];
-
- panelCP.forEach((query) => {
- if (query.id === id) {
- query.dataSourceId = currentDataSource.id;
- query.dataSourceType = currentDataSource.type;
- query.dataSourceURL = currentDataSource.url;
- }
- });
-
- dispatch(panelAction(name, panelCP));
-
- const dsCopy = [...dataSources];
- dsCopy.forEach((ds) => {
- if (ds.id === dataSourceId) {
- ds = currentDataSource;
- }
- });
-
- dispatch(setDataSources(dsCopy));
- } else if (dataSource && dataSource.url !== "") {
- currentDataSource = { ...dataSource };
- }
-
- let { isMatrix } = getIntvalData(expr);
- if (expr !== "" && expr?.length > 6) {
- dispatch(
- getData(
- dataSourceType,
- expr,
- queryType,
- limit,
- name,
- id,
- direction,
- dataSourceId,
- currentDataSource?.url
- )
- );
- }
-
- // setLogsLevel(queryInput, isLogsVolume);
- if (
- isLogsVolume &&
- logsVolumeQuery?.query &&
- logsVolumeQuery?.query !== "" &&
- dataSourceType === "logs" &&
- !isMatrix
- ) {
- dispatch(
- getData(
- dataSourceType,
- logsVolumeQuery.query,
- queryType,
- limit,
- name,
- id,
- direction,
- dataSourceId,
- currentDataSource.url,
- logsVolumeQuery.customStep,
- true // isLogsVolume
- )
- );
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [dataSourceId, id]);
-
- useEffect(() => {
- if (typeof queryInput === "string") {
- setQueryInput(queryInput);
- setQueryValue([
- { children: [{ text: DOMPurify.sanitize(queryInput) }] },
- ]);
- saveQuery();
- if (isLogsVolume) {
- setLogsLevel(queryInput, true);
- }
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [queryInput]);
-
- useEffect(() => {
- if (typeof launchQuery === "string" && launchQuery !== "") {
- setQueryInput(launchQuery);
- setQueryValue([
- { children: [{ text: DOMPurify.sanitize(launchQuery) }] },
- ]);
- saveQuery();
- if (isLogsVolume) {
- setLogsLevel(launchQuery, true);
- }
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [launchQuery]);
-
- useEffect(() => {
- setLogsLevel(queryInput, isLogsVolume);
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [queryInput]);
-
- function setLogsLevel(queryInput: string, isLogsVolume: boolean) {
- if (isLogsVolume && queryInput !== "") {
- // eslint-disable-next-line
- let pureLabels = queryInput.match(/[^{\}]+(?=})/g);
- if (Array.isArray(pureLabels) && pureLabels?.length > 0) {
- let pureLabelsString = `{${pureLabels?.join(",")}}`;
- let logsVolumeQuery = `sum by(level) (count_over_time(${pureLabelsString}[$__interval]))`;
- onLogVolumeChange(logsVolumeQuery);
- }
- }
- }
-
- function handleQueryChange(e: any) {
- setQueryValue(e);
- saveQuery(e);
- }
-
- const handleInputKeyDown = (e: any) => {
- if (e.code === "Enter" && e.ctrlKey) {
- onSubmit(e);
- }
- };
-
- const onMetricChange = (e: any) => {
- const query = [{ children: [{ text: DOMPurify.sanitize(e) }] }];
- handleQueryChange(query);
- };
-
- const onLogChange = (e: any) => {
- const query = [{ children: [{ text: DOMPurify.sanitize(e) }] }];
-
- handleQueryChange(query);
- };
-
- const setQueryTimeInterval = (
- query: string,
- width: number,
- start: Date | any,
- stop: Date | any
- ) => {
- let querySubmit = "";
-
- let customStep = 0;
-
- if (query.includes(`$__interval`)) {
- const timeDiff = (stop.getTime() - start.getTime()) / 1000;
-
- const timeProportion = timeDiff / 30;
-
- const screenProportion = Number(
- (width / window.innerWidth).toFixed(1)
- );
-
- const intval = timeProportion / screenProportion;
-
- const ratiointval = Math.round(
- intval * Number(window.devicePixelRatio.toFixed(2))
- );
-
- querySubmit = query.replace(
- /\[\$__interval\]/,
- `[${ratiointval}s]`
- );
- customStep = ratiointval;
- } else {
- querySubmit = query;
- }
- return { query: querySubmit, customStep };
- };
-
- const onLogVolumeChange = (queryString: string) => {
- const { query, customStep } = setQueryTimeInterval(
- queryString,
- width,
- start,
- stop
- );
- saveLogsVolumeQuery({ query, customStep });
- };
- const onSubmit = (e: any) => {
- e.preventDefault();
- const ds: any = dataSources.find((f: any) => f.id === dataSourceId);
- if (onQueryValid(queryInput) && ds) {
- try {
- updateHistory(
- ds.type,
- queryInput,
- queryType,
- limit,
- id,
- direction,
- ds.id,
- ds.url
- );
-
- if (isLogsVolume && !logsVolumeQuery) {
- setLogsLevel(queryInput, isLogsVolume);
- }
-
- decodeQueryAndUpdatePanel(queryInput, true);
-
- updateLinksHistory();
-
- setLocalQueryData(queryInput, id, dataSourceId);
- } catch (e) {
- console.error(e);
- }
- } else {
- dispatch(setIsEmptyView(true));
-
- console.log("Please make a log query", queryInput);
- }
- };
-
- const saveQuery = (e = []) => {
- if (e?.length > 0) {
- const queryParams = new URLSearchParams(hash.replace(/#/, ""));
- const multiline = e
- ?.map((text: any) => text.children[0].text)
- .join("\n");
- const panel = [...panelQuery];
- panel.forEach((query) => {
- if (query.id === id) {
- if (multiline) {
- query.expr = multiline;
- }
- }
- });
- dispatch(panelAction(name, panel));
- queryParams.set(name, JSON.stringify(panel));
- setLocalQueryData(queryInput, id, dataSourceId);
- }
- };
-
- const saveLogsVolumeQuery = (logsVolume: {
- query: string;
- customStep: any;
- }) => {
- const panel = [...panelQuery];
- panel.forEach((query) => {
- if (query.id === id) {
- if (logsVolume && logsVolume.query !== "") {
- query.logsVolumeQuery = {
- query: logsVolume.query,
- customStep: logsVolume.customStep,
- };
- }
- }
- });
- dispatch(panelAction(name, panel));
- };
-
- function addQueryInterval(queryInput: string) {
- const isEmptyQuery = queryInput.length === 0;
- let query = "";
- if (!isEmptyQuery) {
- const isRate = queryInput.startsWith("rate(");
-
- if (dataSourceType === "metrics") {
- if (isRate) {
- query = queryInput.replace(/{([^}]+)}/g, "{}");
- query = query.replace(/\[\d+ms\]/, "[$__interval]");
- } else {
- query = `rate(${queryInput.replace(
- /{([^}]+)}/g,
- "{}"
- )}[$__interval])`;
- }
- } else {
- if (!isRate) {
- query = `rate(${queryInput}[$__interval])`;
- } else {
- query = queryInput.replace(/\[\d+ms\]/, "[$__interval]");
- }
- }
- }
- return query;
- }
- const onSubmitRate = (e: any) => {
- e.preventDefault();
- const isEmptyQuery = queryInput.length === 0;
- let query = "";
- // check how to update back the query preview
- if (!isEmptyQuery) {
- query = addQueryInterval(queryInput);
- setQueryInput(query);
- setQueryValue([
- { children: [{ text: DOMPurify.sanitize(query) }] },
- ]);
- setQueryValid(onQueryValid(query));
- }
-
- if (onQueryValid(query)) {
- tryUpdateHistory(query);
- }
- };
-
- function tryUpdateHistory(query: string) {
- const ds = dataSources.find((f: any) => f.id === dataSourceId);
- try {
- updateHistory(
- ds.type,
- query,
- queryType,
- limit,
- id,
- direction,
- ds.id,
- ds.url
- );
- updateLinksHistory();
- } catch (e) {
- console.error(e);
- }
- }
-
- const updateHistory = (
- type: any,
- queryInput: any,
- queryType: any,
- limit: any,
- id: any,
- direction: any,
- dataSourceId: any,
- url: any
- ) => {
- const historyUpdated = historyService.add(
- {
- data: JSON.stringify({
- type,
- queryInput,
- queryType,
- limit,
- direction,
- dataSourceId: dataSourceId,
- url,
- panel: name,
- id,
- }),
- url: window.location.hash,
- },
- 10
- );
-
- dispatch(setQueryHistory(historyUpdated));
- };
- const decodeQueryAndUpdatePanel = (queryExpr: any, isSearch: any) => {
- const currentDataSource = dataSources.find(
- (f: any) => f.id === dataSourceId
- );
- const panel = [...panelQuery];
-
- if (dataSourceType === "logs") {
- panel.forEach((query: any) => {
- if (query.id === id) {
- query.browserOpen = false;
- }
- });
- }
- dispatch(panelAction(name, panel));
-
- let { querySubmit, customStep, isMatrix } = getIntvalData(queryExpr);
-
- if (isSearch && querySubmit !== "" && querySubmit?.length > 6) {
- dispatch(
- getData(
- dataSourceType,
- querySubmit,
- queryType,
- limit,
- name,
- id,
- direction,
- dataSourceId,
- currentDataSource.url,
- customStep,
- isLogsVolume && !isMatrix
- )
- );
- }
-
- // get here if the previous is a matrix type response
- if (
- isLogsVolume &&
- logsVolumeQuery?.query &&
- logsVolumeQuery?.query !== "" &&
- !isMatrix
- ) {
- dispatch(
- getData(
- dataSourceType,
- logsVolumeQuery.query,
- queryType,
- limit,
- name,
- id,
- direction,
- dataSourceId,
- currentDataSource.url,
- logsVolumeQuery.customStep,
- true // isLogsVolume
- )
- );
- }
- };
-
- function getIntvalData(queryExpr: string): {
- customStep: number;
- querySubmit: string;
- isMatrix: boolean;
- } {
- let querySubmit = "";
- let customStep = 0;
- let isMatrix = false;
- let matrixType = queryExpr.match(/\((.*?)\)/);
- if (matrixType !== null) {
- isMatrix = true;
- }
-
- if (queryExpr.includes("$__interval")) {
- isMatrix = true;
- const timeDiff = (stop.getTime() - start.getTime()) / 1000;
- const timeProportion = timeDiff / 30;
- const screenProportion = Number(
- (width / window.innerWidth).toFixed(1)
- );
- const intval = timeProportion / screenProportion;
-
- const ratiointval = Math.round(
- intval * Number(window.devicePixelRatio.toFixed(2))
- );
- querySubmit = queryExpr.replace(
- /\[\$__interval\]/,
- `[${ratiointval}s]`
- );
- customStep = ratiointval;
- } else {
- querySubmit = queryExpr;
- }
-
- return { customStep, querySubmit, isMatrix };
- }
- const updateLinksHistory = () => {
- const ds = dataSources.find((f: any) => f.id === dataSourceId);
- const storedUrl = saveUrl.add(
- {
- data: {
- href: window.location.href,
- url: ds.url,
- type: dataSourceType,
- queryInput,
- queryType,
- limit,
- panel: name,
- id,
- },
- description: "From Query Submit",
- },
- 10
- );
-
- dispatch(setLinksHistory(storedUrl));
- };
- function handleHistoryClick(e: any) {
- dispatch(setHistoryOpen(!historyOpen));
- }
- function onShowQuerySettings() {
- setOpen(open ? false : true);
- }
- function onClose() {
- onShowQuerySettings();
- }
-
- function onTraceSearchChange(e: any) {
- setTraceSearch(() => e);
- }
-
- function handleStatsOpen(e: any) {
- const value = e.target.checked;
- setShowStatsOpen(() => value);
-
- const prevPanel = JSON.parse(JSON.stringify(panelData));
-
- const newPanel = prevPanel?.map((m: any) => {
- if (m.id === id) {
- return { ...m, isShowStats: value };
- }
- return m;
- });
-
- dispatch(panelAction(name, newPanel));
- }
-
- const switchTraceQueryType = (e: any) => {
- setTraceQueryType(() => e);
- };
-
- // renderers
-
- const inlineQueryOptionsRenderer = (
- type: any,
- isSplit: any,
- isMobile: any,
- typeBar: any
- ) => {
- const isFullView = !isMobile && !isSplit;
- const isMetrics = type === "metrics" || type === "logs";
-
- if (isFullView && isMetrics) {
- return typeBar;
- }
- return null;
- };
-
- const querySettingRenderer = (
- isMobile: any,
- isSplit: any,
- dataSourceType: any,
- settingComp: any
- ) => {
- if (
- isMobile ||
- isSplit ||
- dataSourceType !== "flux" ||
- dataSourceType !== "traces"
- ) {
- return settingComp;
- }
- return null;
- };
-
- if (isEmbed) {
- return null;
- }
-
- const queryTypeRenderer = (
- type: any,
- traceSearch: any,
- querySearch: any,
- metricsSearch: any,
- logsSearch: any,
- showResultButton: any
- ) => {
- if (type === "traces") {
- return (
- <>
-
-
- {traceQueryType === "traceId" && querySearch}
- {traceQueryType === "search" && traceSearch}
-
- );
- }
-
- if (type === "metrics") {
- return (
- <>
- {metricsSearch}
- {querySearch}
-
- );
- }
-
- if (type === "logs") {
- return (
- <>
- {isBuilder && logsSearch}
- {querySearch}
-
- );
- }
-
- return querySearch;
- };
-
- // render
-
- if (isEmbed) {
- return null;
- }
-
- return (
-
-
- {dataSourceType !== "metrics" &&
- dataSourceType !== "traces" &&
- (isTabletOrMobile || isSplit) && (
-
- Show Stats
-
- }
- handleMetricValueChange={onMetricChange}
- />,
-
- Show Stats
-
- }
- handleLogValueChange={onLogChange}
- handleLogsVolumeChange={onLogVolumeChange}
- />,
-
-
= (props) => {
+ const { data, name, width, launchQuery } = props;
+ const {
+ queryType,
+ limit,
+ id,
+ dataSourceType,
+ direction,
+ dataSourceId,
+ splitted,
+ } = data;
+ const {
+ data: {
+ loading,
+ hasStats,
+ isShowStats,
+ isBuilder,
+ isLogsVolume,
+ logsVolumeQuery,
+ },
+ } = props;
+
+ const { getLocalQueryItem, getLocalDataSources, setLocalQueryData } =
+ QueryLocalService;
+
+ const { hash } = useLocation();
+ const dispatch: any = useDispatch();
+ const saveUrl = localUrl();
+ const historyService = localService().historyStore();
+ const theme = useTheme();
+ const historyOpen = useSelector((store: any) => store.historyOpen);
+ const isEmbed = useSelector((store: any) => store.isEmbed);
+ const queryHistory = useSelector((store: any) => store.queryHistory);
+ const start = useSelector((store: any) => store.start);
+ const stop = useSelector((store: any) => store.stop);
+ const isSplit = useSelector((store: any) => store.isSplit);
+ const panelQuery = useSelector((store: any) => store[name]);
+ const isTabletOrMobile = useMediaQuery({ query: "(max-width: 1070px)" });
+ const [queryInput, setQueryInput] = useState(data.expr);
+ const [queryValid, setQueryValid] = useState(false);
+ const [queryValue, setQueryValue] = useState(queryInit(data.expr));
+ const [traceQueryType, setTraceQueryType] = useState("traceId");
+ const [labels] = useState([]);
+ // eslint-disable-next-line
+ const [traceSearch, setTraceSearch] = useState({});
+ const [showStatsOpen, setShowStatsOpen] = useState(
+ isShowStats || false
+ );
+ const [open, setOpen] = useState(false);
+ const dataSources = useSelector((store: any) => store.dataSources);
+ const panelData = useSelector((store: any) => store[name]);
+
+ const initialDefault = useMemo(() => {
+ return defaultDataSources.find((f) => f.id === dataSourceId);
+ }, [dataSourceId]);
+
+ const findCurrentDataSource = (dataSources: any, id: string) => {
+ return dataSources?.find((f: any) => f.id === dataSourceId);
+ };
+
+ useEffect(() => {
+ const { expr } = getLocalQueryItem(dataSourceId, id);
+ const localDataSource = getLocalDataSources(dataSourceId);
+
+ setQueryInput(expr);
+ setQueryValue([{ children: [{ text: expr }] }]);
+
+ setLogsLevel(expr, isLogsVolume);
+
+ const dataSource: any = findCurrentDataSource(dataSources, id);
+
+ let currentDataSource: any = {};
+
+ if (
+ localDataSource &&
+ localDataSource?.url !== initialDefault &&
+ localDataSource?.url !== ""
+ ) {
+ currentDataSource = { ...localDataSource };
+ // update datasources inside panel from local if there is datasources from local
+ const panelCP = [...panelData];
+ panelCP.forEach((query) => {
+ if (query.id === id) {
+ query.dataSourceId = currentDataSource.id;
+ query.dataSourceType = currentDataSource.type;
+ query.dataSourceURL = currentDataSource.url;
+ }
+ });
+
+ dispatch(panelAction(name, panelCP));
+
+ const dsCopy = [...dataSources];
+ dsCopy.forEach((ds) => {
+ if (ds.id === dataSourceId) {
+ ds = currentDataSource;
+ }
+ });
+
+ dispatch(setDataSources(dsCopy));
+ } else if (dataSource && dataSource.url !== "") {
+ currentDataSource = { ...dataSource };
+ }
+
+ if (isEmbed)
+ dispatch(
+ getData(
+ dataSourceType,
+ queryInput,
+ queryType,
+ limit,
+ name,
+ id,
+ direction,
+ dataSourceId,
+ currentDataSource?.url
+ )
+ );
+ }, []);
+
+ // force single view from small width
+
+ useEffect(() => {
+ setQueryInput(data.expr);
+ setQueryValue([{ children: [{ text: sanitizeWithSigns(data.expr) }] }]);
+ }, [data.expr]);
+
+ useEffect(() => {
+ let queryText = queryValue[0].children[0].text;
+ setQueryInput(queryText);
+ }, [queryValue]);
+
+ useEffect(() => {
+ if (isTabletOrMobile && isSplit) {
+ dispatch(setSplitView(false));
+ }
+ }, [isTabletOrMobile]);
+
+ useEffect(() => {
+ let { expr } = getLocalQueryItem(dataSourceId, id);
+ let actLocalDs = getLocalDataSources(dataSourceId);
+ setQueryInput(expr);
+ setQueryValue([{ children: [{ text: sanitizeWithSigns(expr) }] }]);
+
+ if (isLogsVolume && logsVolumeQuery) {
+ setLogsLevel(expr, isLogsVolume);
+ }
+ const dataSource: any = dataSources?.find(
+ (f: any) => f.id === dataSourceId
+ );
+
+ let currentDataSource: any = {};
+
+ if (
+ actLocalDs &&
+ actLocalDs?.url !== initialDefault &&
+ actLocalDs?.url !== ""
+ ) {
+ currentDataSource = { ...actLocalDs };
+
+ const panelCP = [...panelData];
+
+ panelCP.forEach((query) => {
+ if (query.id === id) {
+ query.dataSourceId = currentDataSource.id;
+ query.dataSourceType = currentDataSource.type;
+ query.dataSourceURL = currentDataSource.url;
+ }
+ });
+
+ dispatch(panelAction(name, panelCP));
+
+ const dsCopy = [...dataSources];
+ dsCopy.forEach((ds) => {
+ if (ds.id === dataSourceId) {
+ ds = currentDataSource;
+ }
+ });
+
+ dispatch(setDataSources(dsCopy));
+ } else if (dataSource && dataSource.url !== "") {
+ currentDataSource = { ...dataSource };
+ }
+
+ let { isMatrix } = getIntvalData(expr);
+ if (expr !== "" && expr?.length > 6) {
+ dispatch(
+ getData(
+ dataSourceType,
+ expr,
+ queryType,
+ limit,
+ name,
+ id,
+ direction,
+ dataSourceId,
+ currentDataSource?.url
+ )
+ );
+ }
+
+ // setLogsLevel(queryInput, isLogsVolume);
+ if (
+ isLogsVolume &&
+ logsVolumeQuery?.query &&
+ logsVolumeQuery?.query !== "" &&
+ dataSourceType === "logs" &&
+ !isMatrix
+ ) {
+ dispatch(
+ getData(
+ dataSourceType,
+ logsVolumeQuery.query,
+ queryType,
+ limit,
+ name,
+ id,
+ direction,
+ dataSourceId,
+ currentDataSource.url,
+ logsVolumeQuery.customStep,
+ true // isLogsVolume
+ )
+ );
+ }
+ }, [dataSourceId, id]);
+
+ useEffect(() => {
+ if (typeof queryInput === "string") {
+ setQueryInput(queryInput);
+ setQueryValue([
+ { children: [{ text: sanitizeWithSigns(queryInput) }] },
+ ]);
+ saveQuery();
+ if (isLogsVolume) {
+ setLogsLevel(queryInput, true);
+ }
+ }
+ }, [queryInput]);
+
+ useEffect(() => {
+ if (typeof launchQuery === "string" && launchQuery !== "") {
+ setQueryInput(launchQuery);
+ setQueryValue([
+ { children: [{ text: sanitizeWithSigns(launchQuery) }] },
+ ]);
+ saveQuery();
+ if (isLogsVolume) {
+ setLogsLevel(launchQuery, true);
+ }
+ }
+ }, [launchQuery]);
+
+ useEffect(() => {
+ setLogsLevel(queryInput, isLogsVolume);
+ }, [queryInput]);
+
+ function setLogsLevel(queryInput: string, isLogsVolume: boolean) {
+ if (isLogsVolume && queryInput !== "") {
+ // eslint-disable-next-line
+ let pureLabels = queryInput.match(/[^{\}]+(?=})/g);
+ if (Array.isArray(pureLabels) && pureLabels?.length > 0) {
+ let pureLabelsString = `{${pureLabels?.join(",")}}`;
+ let logsVolumeQuery = `sum by(level) (count_over_time(${pureLabelsString}[$__interval]))`;
+ onLogVolumeChange(logsVolumeQuery);
+ }
+ }
+ }
+
+ function handleQueryChange(e: any) {
+ setQueryValue(e);
+ saveQuery(e);
+ }
+
+ const handleInputKeyDown = (e: any) => {
+ if (e.code === "Enter" && e.ctrlKey) {
+ onSubmit(e);
+ }
+ };
+
+ const onMetricChange = (e: any) => {
+ const query = [{ children: [{ text: sanitizeWithSigns(e) }] }];
+ handleQueryChange(query);
+ };
+
+ const onLogChange = (e: any) => {
+ const query = [{ children: [{ text: sanitizeWithSigns(e) }] }];
+
+ handleQueryChange(query);
+ };
+
+ const setQueryTimeInterval = (
+ query: string,
+ width: number,
+ start: Date | any,
+ stop: Date | any
+ ) => {
+ let querySubmit = "";
+
+ let customStep = 0;
+
+ if (query.includes(`$__interval`)) {
+ const timeDiff = (stop.getTime() - start.getTime()) / 1000;
+
+ const timeProportion = timeDiff / 30;
+
+ const screenProportion = Number(
+ (width / window.innerWidth).toFixed(1)
+ );
+
+ const intval = timeProportion / screenProportion;
+
+ const ratiointval = Math.round(
+ intval * Number(window.devicePixelRatio.toFixed(2))
+ );
+
+ querySubmit = query.replace(
+ /\[\$__interval\]/,
+ `[${ratiointval}s]`
+ );
+ customStep = ratiointval;
+ } else {
+ querySubmit = query;
+ }
+ return { query: querySubmit, customStep };
+ };
+
+ const onLogVolumeChange = (queryString: string) => {
+ const { query, customStep } = setQueryTimeInterval(
+ queryString,
+ width,
+ start,
+ stop
+ );
+ saveLogsVolumeQuery({ query, customStep });
+ };
+ const onSubmit = (e: any) => {
+ e.preventDefault();
+ const ds: any = dataSources.find((f: any) => f.id === dataSourceId);
+ if (onQueryValid(queryInput) && ds) {
+ try {
+ updateHistory(
+ ds.type,
+ queryInput,
+ queryType,
+ limit,
+ id,
+ direction,
+ ds.id,
+ ds.url
+ );
+
+ if (isLogsVolume && !logsVolumeQuery) {
+ setLogsLevel(queryInput, isLogsVolume);
+ }
+
+ decodeQueryAndUpdatePanel(queryInput, true);
+
+ updateLinksHistory();
+
+ setLocalQueryData(queryInput, id, dataSourceId);
+ } catch (e) {
+ console.error(e);
+ }
+ } else {
+ dispatch(setIsEmptyView(true));
+
+ console.log("Please make a log query", queryInput);
+ }
+ };
+
+ const saveQuery = (e: any = []) => {
+ if (e?.length > 0) {
+ const queryParams = new URLSearchParams(hash.replace(/#/, ""));
+ const multiline = e
+ ?.map((text: any) => text.children[0].text)
+ .join("\n");
+
+ const panel = [...panelQuery];
+ panel.forEach((query) => {
+ if (query.id === id) {
+ if (multiline) {
+ query.expr = multiline;
+ }
+ }
+ });
+ dispatch(panelAction(name, panel));
+ queryParams.set(name, JSON.stringify(panel));
+ setLocalQueryData(queryInput, id, dataSourceId);
+ }
+ };
+
+ const saveLogsVolumeQuery = (logsVolume: {
+ query: string;
+ customStep: any;
+ }) => {
+ const panel = [...panelQuery];
+ panel.forEach((query) => {
+ if (query.id === id) {
+ if (logsVolume && logsVolume.query !== "") {
+ query.logsVolumeQuery = {
+ query: logsVolume.query,
+ customStep: logsVolume.customStep,
+ };
+ }
+ }
+ });
+ dispatch(panelAction(name, panel));
+ };
+
+ function addQueryInterval(queryInput: string) {
+ const isEmptyQuery = queryInput.length === 0;
+ let query = "";
+ if (!isEmptyQuery) {
+ const isRate = queryInput.startsWith("rate(");
+
+ if (dataSourceType === "metrics") {
+ if (isRate) {
+ query = queryInput.replace(/{([^}]+)}/g, "{}");
+ query = query.replace(/\[\d+ms\]/, "[$__interval]");
+ } else {
+ query = `rate(${queryInput.replace(
+ /{([^}]+)}/g,
+ "{}"
+ )}[$__interval])`;
+ }
+ } else {
+ if (!isRate) {
+ query = `rate(${queryInput}[$__interval])`;
+ } else {
+ query = queryInput.replace(/\[\d+ms\]/, "[$__interval]");
+ }
+ }
+ }
+ return query;
+ }
+ const onSubmitRate = (e: any) => {
+ e.preventDefault();
+ const isEmptyQuery = queryInput.length === 0;
+ let query = "";
+ // check how to update back the query preview
+ if (!isEmptyQuery) {
+ query = addQueryInterval(queryInput);
+ setQueryInput(query);
+ setQueryValue([{ children: [{ text: sanitizeWithSigns(query) }] }]);
+ setQueryValid(onQueryValid(query));
+ }
+
+ if (onQueryValid(query)) {
+ tryUpdateHistory(query);
+ }
+ };
+
+ function tryUpdateHistory(query: string) {
+ const ds = dataSources.find((f: any) => f.id === dataSourceId);
+ try {
+ updateHistory(
+ ds.type,
+ query,
+ queryType,
+ limit,
+ id,
+ direction,
+ ds.id,
+ ds.url
+ );
+ updateLinksHistory();
+ } catch (e) {
+ console.error(e);
+ }
+ }
+
+ const updateHistory = (
+ type: any,
+ queryInput: any,
+ queryType: any,
+ limit: any,
+ id: any,
+ direction: any,
+ dataSourceId: any,
+ url: any
+ ) => {
+ const historyUpdated = historyService.add(
+ {
+ data: JSON.stringify({
+ type,
+ queryInput,
+ queryType,
+ limit,
+ direction,
+ dataSourceId: dataSourceId,
+ url,
+ panel: name,
+ id,
+ }),
+ url: window.location.hash,
+ },
+ 10
+ );
+
+ dispatch(setQueryHistory(historyUpdated));
+ };
+ const decodeQueryAndUpdatePanel = (queryExpr: any, isSearch: any) => {
+ const currentDataSource = dataSources.find(
+ (f: any) => f.id === dataSourceId
+ );
+ const panel = [...panelQuery];
+
+ if (dataSourceType === "logs") {
+ panel.forEach((query: any) => {
+ if (query.id === id) {
+ query.browserOpen = false;
+ }
+ });
+ }
+ dispatch(panelAction(name, panel));
+
+ let { querySubmit, customStep, isMatrix } = getIntvalData(queryExpr);
+
+ if (isSearch && querySubmit !== "" && querySubmit?.length > 6) {
+ dispatch(
+ getData(
+ dataSourceType,
+ querySubmit,
+ queryType,
+ limit,
+ name,
+ id,
+ direction,
+ dataSourceId,
+ currentDataSource.url,
+ customStep,
+ isLogsVolume && !isMatrix
+ )
+ );
+ }
+
+ // get here if the previous is a matrix type response
+ if (
+ isLogsVolume &&
+ logsVolumeQuery?.query &&
+ logsVolumeQuery?.query !== "" &&
+ !isMatrix
+ ) {
+ dispatch(
+ getData(
+ dataSourceType,
+ logsVolumeQuery.query,
+ queryType,
+ limit,
+ name,
+ id,
+ direction,
+ dataSourceId,
+ currentDataSource.url,
+ logsVolumeQuery.customStep,
+ true // isLogsVolume
+ )
+ );
+ }
+ };
+
+ function getIntvalData(queryExpr: string): {
+ customStep: number;
+ querySubmit: string;
+ isMatrix: boolean;
+ } {
+ let querySubmit = "";
+ let customStep = 0;
+ let isMatrix = false;
+ let matrixType = queryExpr.match(/\((.*?)\)/);
+ if (matrixType !== null) {
+ isMatrix = true;
+ }
+
+ if (queryExpr.includes("$__interval")) {
+ isMatrix = true;
+ const timeDiff = (stop.getTime() - start.getTime()) / 1000;
+ const timeProportion = timeDiff / 30;
+ const screenProportion = Number(
+ (width / window.innerWidth).toFixed(1)
+ );
+ const intval = timeProportion / screenProportion;
+
+ const ratiointval = Math.round(
+ intval * Number(window.devicePixelRatio.toFixed(2))
+ );
+ querySubmit = queryExpr.replace(
+ /\[\$__interval\]/,
+ `[${ratiointval}s]`
+ );
+ customStep = ratiointval;
+ } else {
+ querySubmit = queryExpr;
+ }
+
+ return { customStep, querySubmit, isMatrix };
+ }
+ const updateLinksHistory = () => {
+ const ds = dataSources.find((f: any) => f.id === dataSourceId);
+ const storedUrl = saveUrl.add(
+ {
+ data: {
+ href: window.location.href,
+ url: ds.url,
+ type: dataSourceType,
+ queryInput,
+ queryType,
+ limit,
+ panel: name,
+ id,
+ },
+ description: "From Query Submit",
+ },
+ 10
+ );
+
+ dispatch(setLinksHistory(storedUrl));
+ };
+ function handleHistoryClick() {
+ dispatch(setHistoryOpen(!historyOpen));
+ }
+ function onShowQuerySettings() {
+ setOpen(open ? false : true);
+ }
+ function onClose() {
+ onShowQuerySettings();
+ }
+
+ function onTraceSearchChange(e: any) {
+ setTraceSearch(() => e);
+ }
+
+ function handleStatsOpen(e: any) {
+ const value = e.target.checked;
+ setShowStatsOpen(() => value);
+
+ const prevPanel = JSON.parse(JSON.stringify(panelData));
+
+ const newPanel = prevPanel?.map((m: any) => {
+ if (m.id === id) {
+ return { ...m, isShowStats: value };
+ }
+ return m;
+ });
+
+ dispatch(panelAction(name, newPanel));
+ }
+
+ const switchTraceQueryType = (e: any) => {
+ setTraceQueryType(() => e);
+ };
+
+ // renderers
+
+ const inlineQueryOptionsRenderer = (
+ type: any,
+ isSplit: any,
+ isMobile: any,
+ typeBar: any
+ ) => {
+ const isFullView = !isMobile && !isSplit;
+ const isMetrics = type === "metrics" || type === "logs";
+
+ if (isFullView && isMetrics) {
+ return typeBar;
+ }
+ return null;
+ };
+
+ const querySettingRenderer = (
+ isMobile: any,
+ isSplit: any,
+ dataSourceType: any,
+ settingComp: any
+ ) => {
+ if (
+ isMobile ||
+ isSplit ||
+ dataSourceType !== "flux" ||
+ dataSourceType !== "traces"
+ ) {
+ return settingComp;
+ }
+ return null;
+ };
+
+ if (isEmbed) {
+ return null;
+ }
+
+ const queryTypeRenderer = (
+ type: any,
+ traceSearch: any,
+ querySearch: any,
+ metricsSearch: any,
+ logsSearch: any,
+ showResultButton: any
+ ) => {
+ if (type === "traces") {
+ return (
+ <>
+
+
+ {traceQueryType === "traceId" && querySearch}
+ {traceQueryType === "search" && traceSearch}
+
+ );
+ }
+
+ if (type === "metrics") {
+ return (
+ <>
+ {metricsSearch}
+ {querySearch}
+
+ );
+ }
+
+ if (type === "logs") {
+ return (
+ <>
+ {isBuilder && logsSearch}
+ {querySearch}
+
+ );
+ }
+
+ return querySearch;
+ };
+
+ // render
+
+ if (isEmbed) {
+ return null;
+ }
+
+ return (
+
+
+ {dataSourceType !== "metrics" &&
+ dataSourceType !== "traces" &&
+ (isTabletOrMobile || isSplit) && (
+
+ Show Stats
+
+ }
+ handleMetricValueChange={onMetricChange}
+ />,
+
+ Show Stats
+
+ }
+ handleLogValueChange={onLogChange}
+ handleLogsVolumeChange={onLogVolumeChange}
+ />,
+
+
= (props) => {
} = props;
const isSplit = useSelector((store: any) => store.isSplit);
const dType = (type: string) => dataSourceType === type;
-
+
const buttonsHidden = () =>
!isSplit && dataSourceType !== "flux" && dataSourceType !== "traces";
@@ -61,11 +61,12 @@ const QueryBarCont: React.FC = (props) => {
{!isTabletOrMobile && !isSplit && !isBuilder && dType("logs") && (
= (props) => {
- const dispatch = useDispatch();
+ const dispatch: any = useDispatch();
const responseType = useSelector((store: any) => store.responseType);
const { hash } = useLocation();
const { id, idRef, dataSourceType, isBuilder } = props.data;
@@ -55,26 +55,30 @@ const QuerySetting: React.FC = (props) => {
const urlParams = new URLSearchParams(hash.replace(/#/, ""));
const urlPanel: any = urlParams.get(name);
- const parsedUrlPanel = JSON.parse(decodeURIComponent(urlPanel));
+ try {
+ const parsedUrlPanel = JSON.parse(decodeURIComponent(urlPanel));
- if (parsedUrlPanel?.length > 0) {
- const queryFromUrl = parsedUrlPanel.find((f: any) => f.idRef === idRef);
- if (queryFromUrl) {
+ if (parsedUrlPanel?.length > 0) {
+ const queryFromUrl = parsedUrlPanel.find(
+ (f: any) => f.idRef === idRef
+ );
+ if (queryFromUrl) {
+ const panel = [...actPanel];
- const panel = [...actPanel];
+ const query = getPanelQueryByIDRef(panel, idRef);
- const query = getPanelQueryByIDRef(panel, idRef);
-
- if (typeof query !== "undefined") {
- query.queryType = queryFromUrl.queryType;
- query.direction = queryFromUrl.direction;
- dispatch(panelAction(name, panel));
+ if (typeof query !== "undefined") {
+ query.queryType = queryFromUrl.queryType;
+ query.direction = queryFromUrl.direction;
+ dispatch(panelAction(name, panel));
+ }
}
}
+ } catch (e) {
+ console.log(e);
}
- // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
-
+
const getPanelQueryByID = (panel: any, queryId: any) => {
return panel.find((query: any) => {
return query.id === queryId;
diff --git a/src/components/LabelBrowser/components/ValuesList.tsx b/packages/main/src/components/LabelBrowser/components/ValuesList.tsx
similarity index 97%
rename from src/components/LabelBrowser/components/ValuesList.tsx
rename to packages/main/src/components/LabelBrowser/components/ValuesList.tsx
index 9528232e..fe3416aa 100644
--- a/src/components/LabelBrowser/components/ValuesList.tsx
+++ b/packages/main/src/components/LabelBrowser/components/ValuesList.tsx
@@ -3,7 +3,7 @@ import styled from "@emotion/styled";
import { ThemeProvider } from "@emotion/react";
import LabelsSelector from "./LabelsSelector";
import { useEffect, useState } from "react";
-import { useTheme } from "../../../theme";
+import useTheme from "@ui/theme/useTheme"
const ErrorContainer = styled.div`
padding: 20px;
diff --git a/src/components/LabelBrowser/components/styled.ts b/packages/main/src/components/LabelBrowser/components/styled.ts
similarity index 66%
rename from src/components/LabelBrowser/components/styled.ts
rename to packages/main/src/components/LabelBrowser/components/styled.ts
index 7c364c46..7260119b 100644
--- a/src/components/LabelBrowser/components/styled.ts
+++ b/packages/main/src/components/LabelBrowser/components/styled.ts
@@ -1,8 +1,8 @@
import styled from "@emotion/styled";
import isPropValid from "@emotion/is-prop-valid";
import HistoryIcon from "@mui/icons-material/History";
-import { BtnSmall as btnSmall } from "../../../theme/styles/Button";
-import { InputSmall } from "../../../theme/styles/Input";
+import { BtnSmall as btnSmall } from "@ui/theme/styles/Button";
+import { InputSmall } from "@ui/theme/styles/Input";
const BtnSmall = btnSmall as any;
export const HistoryIconStyled: any = styled(HistoryIcon)`
@@ -13,9 +13,9 @@ export const HistoryIconStyled: any = styled(HistoryIcon)`
export const HistoryButtonStyled: any = styled(BtnSmall)`
background: none;
margin-left: 5px;
- color: ${(props) => props.theme.textColor};
- background: ${(props) => props.theme.buttonDefault};
- border: 1px solid ${(props) => props.theme.buttonBorder};
+ color: ${(props) => props.theme.contrast};
+ background: ${(props) => props.theme.neutral};
+ border: 1px solid ${(props) => props.theme.accentNeutral};
height: 28px;
span {
margin-left: 5px;
@@ -27,16 +27,16 @@ export const HistoryButtonStyled: any = styled(BtnSmall)`
`;
export const ShowLabelsBtn: any = styled(BtnSmall)`
- background: ${({ theme }) => theme.buttonDefault};
- border: 1px solid ${(props) => props.theme.buttonBorder};
+ background: ${({ theme }) => theme.neutral};
+ border: 1px solid ${(props) => props.theme.accentNeutral};
text-overflow: ellipsis;
transition: 0.25s all;
padding-left: 6px;
justify-content: flex-start;
- color: ${({ theme }: any) => theme.textColor};
+ color: ${({ theme }: any) => theme.contrast};
height: 28px;
&:hover {
- background: ${({ theme }: any) => theme.buttonHover};
+ background: ${({ theme }: any) => theme.lightNeutral};
}
@media screen and (max-width: 1070px) {
display: ${({ isMobile }) => (isMobile ? "flex" : "none")};
@@ -56,9 +56,9 @@ export const ShowLogsBtn: any = styled(BtnSmall, {
shouldForwardProp: (prop) => isPropValid(prop) && prop !== "loading",
})`
background: ${(props) =>
- props.loading ? "#44bcd8" : props.theme.primaryDark};
- border: 1px solid ${(props) => props.theme.primaryBorder};
- color: ${(props) => props.theme.buttonText};
+ props.loading ? "#44bcd8" : props.theme.primary};
+ border: 1px solid ${(props) => props.theme.primaryAccent};
+ color: ${(props) => props.theme.maxContrast};
transition: 0.25s all;
justify-content: center;
height: 28px;
@@ -67,10 +67,10 @@ export const ShowLogsBtn: any = styled(BtnSmall, {
background: ${(props) => props.theme.primaryLight};
}
&:disabled {
- background: ${(props) => props.theme.buttonDefault};
- border: 1px solid ${(props) => props.theme.buttonBorder};
+ background: ${(props) => props.theme.neutral};
+ border: 1px solid ${(props) => props.theme.accentNeutral};
cursor: not-allowed;
- color: ${(props) => props.theme.textColor};
+ color: ${(props) => props.theme.contrast};
}
@media screen and (max-width: 1070px) {
display: flex;
@@ -82,9 +82,9 @@ export const ShowLogsBtn: any = styled(BtnSmall, {
export const ShowSettingsBtn: any = styled(BtnSmall)`
background: none;
margin-left: 5px;
- color: ${(props) => props.theme.textColor};
- background: ${(props) => props.theme.buttonDefault};
- border: 1px solid ${(props) => props.theme.buttonBorder};
+ color: ${(props) => props.theme.contrast};
+ background: ${(props) => props.theme.neutral};
+ border: 1px solid ${(props) => props.theme.accentNeutral};
height: 28px;
span {
margin-left: 5px;
@@ -120,7 +120,7 @@ export const SettingCont: any = styled.div<{ theme: any }>`
display: flex;
flex: 1;
flex-direction: column;
- background: ${({ theme }) => theme.widgetContainer};
+ background: ${({ theme }) => theme.shadow};
`;
export const SettingsInputContainer: any = styled.div`
@@ -136,20 +136,20 @@ export const SettingsInputContainer: any = styled.div`
`;
export const SettingInput: any = styled(InputSmall)`
- background: ${({ theme }: any) => theme.inputBg};
+ background: ${({ theme }: any) => theme.deep};
margin: 5px;
flex: 1;
padding: 5px 12px;
- border: 1px solid ${({ theme }: any) => theme.buttonBorder};
- color: ${({ theme }: any) => theme.textColor};
+ border: 1px solid ${({ theme }: any) => theme.accentNeutral};
+ color: ${({ theme }: any) => theme.contrast};
&:focus {
- border: 1px solid ${({ theme }: any) => theme.buttonHover};
+ border: 1px solid ${({ theme }: any) => theme.lightNeutral};
}
`;
export const SettingButton: any = styled(BtnSmall)`
- background: ${({ theme }: any) => theme.primaryDark};
- border: 1px solid ${(props: any) => props.theme.primaryBorder};
- color: ${({ theme }: any) => theme.buttonText};
+ background: ${({ theme }: any) => theme.primary};
+ border: 1px solid ${(props: any) => props.theme.primaryAccent};
+ color: ${({ theme }: any) => theme.maxContrast};
height: 30px;
&:hover {
background: ${({ theme }: any) => theme.primaryLight};
@@ -158,7 +158,7 @@ export const SettingButton: any = styled(BtnSmall)`
export const SettingLabel: any = styled.label`
font-size: 12px;
- color: ${({ theme }: any) => theme.inputLabelColor};
+ color: ${({ theme }: any) => theme.alphaNeutral};
margin-left: 10px;
`;
@@ -170,11 +170,11 @@ export const SettingHeader: any = styled.div`
h3 {
margin-left: 10px;
font-size: 1em;
- color: ${({ theme }: any) => theme.textColor};
+ color: ${({ theme }: any) => theme.contrast};
}
`;
export const SettingCloseBtn: any = styled(BtnSmall)`
background: none;
padding: 0;
- color: ${({ theme }: any) => theme.textColor};
+ color: ${({ theme }: any) => theme.contrast};
`;
diff --git a/src/components/LabelBrowser/helpers/debugLog.ts b/packages/main/src/components/LabelBrowser/helpers/debugLog.ts
similarity index 100%
rename from src/components/LabelBrowser/helpers/debugLog.ts
rename to packages/main/src/components/LabelBrowser/helpers/debugLog.ts
diff --git a/src/components/LabelBrowser/helpers/onQueryValid.ts b/packages/main/src/components/LabelBrowser/helpers/onQueryValid.ts
similarity index 100%
rename from src/components/LabelBrowser/helpers/onQueryValid.ts
rename to packages/main/src/components/LabelBrowser/helpers/onQueryValid.ts
diff --git a/packages/main/src/components/LabelBrowser/helpers/queryInit.ts b/packages/main/src/components/LabelBrowser/helpers/queryInit.ts
new file mode 100644
index 00000000..09e8f01f
--- /dev/null
+++ b/packages/main/src/components/LabelBrowser/helpers/queryInit.ts
@@ -0,0 +1,20 @@
+import DOMPurify from "isomorphic-dompurify";
+export default function queryInit(query: any) {
+ return query.split(/[ ]+/).map((m: any) => ({
+
+ children: [
+ {
+ text: DOMPurify.sanitize(m),
+ },
+ ],
+ })) || [
+ {
+
+ children: [
+ {
+ text: DOMPurify.sanitize("Enter a cLoki Query"),
+ },
+ ],
+ },
+ ];
+}
diff --git a/src/components/LabelBrowser/helpers/querybuilder.ts b/packages/main/src/components/LabelBrowser/helpers/querybuilder.ts
similarity index 98%
rename from src/components/LabelBrowser/helpers/querybuilder.ts
rename to packages/main/src/components/LabelBrowser/helpers/querybuilder.ts
index b70d4a12..646f4578 100644
--- a/src/components/LabelBrowser/helpers/querybuilder.ts
+++ b/packages/main/src/components/LabelBrowser/helpers/querybuilder.ts
@@ -1,6 +1,6 @@
-import { setLeftPanel } from "../../../actions/setLeftPanel";
-import { setRightPanel } from "../../../actions/setRightPanel";
-import store from "../../../store/store";
+import { setLeftPanel } from "@ui/store/actions/setLeftPanel";
+import { setRightPanel } from "@ui/store/actions/setRightPanel";
+import store from "@ui/store/store";
export const PIPE_PARSE = [
{
@@ -331,7 +331,7 @@ export function queryBuilderWithLabels(
pipeLabels = []
) {
const [key, val] = keyVal;
- const dispatch = store.dispatch;
+ const dispatch: any = store.dispatch;
const operator = () => {
if (isInverted) {
return "!=";
diff --git a/src/components/LabelBrowser/helpers/useLabelsFromQuery.ts b/packages/main/src/components/LabelBrowser/helpers/useLabelsFromQuery.ts
similarity index 100%
rename from src/components/LabelBrowser/helpers/useLabelsFromQuery.ts
rename to packages/main/src/components/LabelBrowser/helpers/useLabelsFromQuery.ts
diff --git a/src/components/LabelBrowser/index.tsx b/packages/main/src/components/LabelBrowser/index.tsx
similarity index 100%
rename from src/components/LabelBrowser/index.tsx
rename to packages/main/src/components/LabelBrowser/index.tsx
diff --git a/src/components/LabelsSelector/LabelsList.tsx b/packages/main/src/components/LabelsSelector/LabelsList.tsx
similarity index 97%
rename from src/components/LabelsSelector/LabelsList.tsx
rename to packages/main/src/components/LabelsSelector/LabelsList.tsx
index a13858fe..b092c701 100644
--- a/src/components/LabelsSelector/LabelsList.tsx
+++ b/packages/main/src/components/LabelsSelector/LabelsList.tsx
@@ -5,7 +5,7 @@ import styled from "@emotion/styled";
export const EmptyLabels = (props: any) => {
const EmptyCont = styled.div`
- color: ${({ theme }: any) => theme.textColor};
+ color: ${({ theme }: any) => theme.contrast};
padding: 10px;
`;
diff --git a/src/components/LabelsSelector/ValuesList.tsx b/packages/main/src/components/LabelsSelector/ValuesList.tsx
similarity index 98%
rename from src/components/LabelsSelector/ValuesList.tsx
rename to packages/main/src/components/LabelsSelector/ValuesList.tsx
index 5be45122..d9e8e90a 100644
--- a/src/components/LabelsSelector/ValuesList.tsx
+++ b/packages/main/src/components/LabelsSelector/ValuesList.tsx
@@ -55,12 +55,13 @@ export const LabelValue = (props: any) => {
};
export default function ValuesList(props: any) {
- const dispatch = useDispatch();
+ const dispatch: any = useDispatch();
const { name, data } = props;
const { dataSourceId } = data;
- const { start, stop }: any = useSelector((store) => store);
+ const start = useSelector ((store:any)=> store.start)
+ const stop = useSelector ((store:any)=> store.stop)
const panelQuery = useSelector((store: any) => store[name]);
const [filterState, setFilterState] = useState("");
diff --git a/src/components/LabelsSelector/ValuesListStyled.ts b/packages/main/src/components/LabelsSelector/ValuesListStyled.ts
similarity index 84%
rename from src/components/LabelsSelector/ValuesListStyled.ts
rename to packages/main/src/components/LabelsSelector/ValuesListStyled.ts
index de02b0ac..5455d186 100644
--- a/src/components/LabelsSelector/ValuesListStyled.ts
+++ b/packages/main/src/components/LabelsSelector/ValuesListStyled.ts
@@ -1,7 +1,7 @@
import styled from "@emotion/styled";
const ValuesListStyled = styled.div`
- background: ${({theme}: any) => theme.widgetContainer};
+ background: ${({theme}: any) => theme.shadow};
.valuesList {
transition: 0.02s all;
@@ -65,9 +65,9 @@ const ValuesListStyled = styled.div`
.valuelist-content {
small {
- color: ${({theme}: any) => theme.textColor};
- background: ${({theme}: any) => theme.buttonDefault};
- border: 1px solid ${({theme}: any) => theme.buttonBorder};
+ color: ${({theme}: any) => theme.contrast};
+ background: ${({theme}: any) => theme.neutral};
+ border: 1px solid ${({theme}: any) => theme.accentNeutral};
margin: 2px;
padding: 2px 7px;
@@ -82,11 +82,11 @@ const ValuesListStyled = styled.div`
max-width: 40ch;
transition: .5s all;
&:hover {
- background: ${({ theme }: any) => theme.buttonHover};
+ background: ${({ theme }: any) => theme.lightNeutral};
}
&.metric {
- color: ${({theme}: any) => theme.buttonText};
- background: ${({theme}: any) => theme.primaryDark};
+ color: ${({theme}: any) => theme.maxContrast};
+ background: ${({theme}: any) => theme.primary};
}
}
}
@@ -105,11 +105,11 @@ const ValuesListStyled = styled.div`
min-width: 278px;
max-width: 278px;
flex: 1;
- background: ${({theme}: any) => theme.buttonHover};
+ background: ${({theme}: any) => theme.lightNeutral};
.column {
- border: 1px solid ${({theme}: any) => theme.buttonBorder};
- background: ${({theme}: any) => theme.widgetContainer};
+ border: 1px solid ${({theme}: any) => theme.accentNeutral};
+ background: ${({theme}: any) => theme.shadow};
border-top: none;
max-height: 350px;
&::-webkit-scrollbar {
@@ -133,9 +133,9 @@ const ValuesListStyled = styled.div`
flex: 1;
transition: 0.02s all;
justify-content: space-between;
- color: ${({theme}: any) => theme.textColor};
- background: ${({theme}: any) => theme.widgetContainer};
- border: 1px solid ${({theme}: any) => theme.buttonBorder};
+ color: ${({theme}: any) => theme.contrast};
+ background: ${({theme}: any) => theme.shadow};
+ border: 1px solid ${({theme}: any) => theme.accentNeutral};
.close-column {
align-self: flex-end;
justify-self: end;
diff --git a/src/components/LabelsSelector/ValuesSelector.tsx b/packages/main/src/components/LabelsSelector/ValuesSelector.tsx
similarity index 95%
rename from src/components/LabelsSelector/ValuesSelector.tsx
rename to packages/main/src/components/LabelsSelector/ValuesSelector.tsx
index deaaa41a..270b972a 100644
--- a/src/components/LabelsSelector/ValuesSelector.tsx
+++ b/packages/main/src/components/LabelsSelector/ValuesSelector.tsx
@@ -1,6 +1,6 @@
import { useEffect, useMemo, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
-import ShowLogsButton from "../../qryn-ui/Buttons/ShowLogsButton";
+import ShowLogsButton from "@ui/qrynui/Buttons/ShowLogsButton";
import { queryBuilder } from "../LabelBrowser/helpers/querybuilder";
import { panelAction } from "../QueryTypeBar";
@@ -10,7 +10,7 @@ import ValuesList from "./ValuesList";
export default function ValuesSelector(props: any) {
const { data, name } = props;
const { dataSourceType } = data;
- const dispatch = useDispatch();
+ const dispatch: any = useDispatch();
const panelQuery = useSelector((store: any) => store[name]);
const [labels, setLabels] = useState(props.labelsSelected);
diff --git a/src/components/LabelsSelector/helpers.ts b/packages/main/src/components/LabelsSelector/helpers.ts
similarity index 100%
rename from src/components/LabelsSelector/helpers.ts
rename to packages/main/src/components/LabelsSelector/helpers.ts
diff --git a/src/components/LabelsSelector/index.tsx b/packages/main/src/components/LabelsSelector/index.tsx
similarity index 98%
rename from src/components/LabelsSelector/index.tsx
rename to packages/main/src/components/LabelsSelector/index.tsx
index ea43098f..bf4c5e6c 100644
--- a/src/components/LabelsSelector/index.tsx
+++ b/packages/main/src/components/LabelsSelector/index.tsx
@@ -5,7 +5,7 @@ import ValuesSelector from "./ValuesSelector";
import useLabels from "./useLabels";
import ValuesListStyled from "./ValuesListStyled";
import labelHelpers from "./helpers";
-import { useTheme } from "../../theme";
+import useTheme from "@ui/theme/useTheme";
export default function LabelsSelector(props: any) {
const { data } = props;
diff --git a/src/components/LabelsSelector/styled.ts b/packages/main/src/components/LabelsSelector/styled.ts
similarity index 72%
rename from src/components/LabelsSelector/styled.ts
rename to packages/main/src/components/LabelsSelector/styled.ts
index 93a3cabc..d866ac4a 100644
--- a/src/components/LabelsSelector/styled.ts
+++ b/packages/main/src/components/LabelsSelector/styled.ts
@@ -16,10 +16,10 @@ export const Loader = styled(CircularProgress)`
`;
export const SmallInput = styled.input`
- background: ${({ theme }: any) => theme.inputBg};
- color: ${({ theme }: any) => theme.textColor};
+ background: ${({ theme }: any) => theme.deep};
+ color: ${({ theme }: any) => theme.contrast};
font-size: 10px;
- border: 1px solid ${({ theme }: any) => theme.buttonBorder};
+ border: 1px solid ${({ theme }: any) => theme.accentNeutral};
border-radius: 3px;
outline: none;
`;
diff --git a/src/components/LabelsSelector/useLabelValues.ts b/packages/main/src/components/LabelsSelector/useLabelValues.ts
similarity index 100%
rename from src/components/LabelsSelector/useLabelValues.ts
rename to packages/main/src/components/LabelsSelector/useLabelValues.ts
diff --git a/src/components/LabelsSelector/useLabels.ts b/packages/main/src/components/LabelsSelector/useLabels.ts
similarity index 94%
rename from src/components/LabelsSelector/useLabels.ts
rename to packages/main/src/components/LabelsSelector/useLabels.ts
index 0c0c2023..8689179e 100644
--- a/src/components/LabelsSelector/useLabels.ts
+++ b/packages/main/src/components/LabelsSelector/useLabels.ts
@@ -1,8 +1,8 @@
import axios from "axios";
import { useEffect, useState, useMemo } from "react";
import { useSelector, useDispatch } from "react-redux";
-import { createAlert } from "../../actions";
-import { notificationTypes } from "../../qryn-ui/notifications/consts";
+import { createAlert } from "@ui/store/actions";
+import { notificationTypes } from "@ui/qrynui/notifications/consts";
import { getDsHeaders } from "../QueryBuilder/Operations/helpers";
function getTimeParsed(time: any) {
@@ -30,8 +30,9 @@ const getTimestamp = (time: any, type: any): any => {
};
export default function useLabels(id: any, dataSourceURL = "") {
- const dispatch = useDispatch();
- const { start, stop }: any = useSelector((store) => store);
+ const dispatch: any = useDispatch();
+ const start = useSelector ((store:any)=> store.start)
+ const stop = useSelector ((store:any)=> store.stop)
const dataSources = useSelector((store: any) => store.dataSources);
const currentDataSource = useMemo(() => {
diff --git a/src/components/QueryBuilder/Forms/NativeSelect.tsx b/packages/main/src/components/QueryBuilder/Forms/NativeSelect.tsx
similarity index 100%
rename from src/components/QueryBuilder/Forms/NativeSelect.tsx
rename to packages/main/src/components/QueryBuilder/Forms/NativeSelect.tsx
diff --git a/src/components/QueryBuilder/Forms/styled.ts b/packages/main/src/components/QueryBuilder/Forms/styled.ts
similarity index 67%
rename from src/components/QueryBuilder/Forms/styled.ts
rename to packages/main/src/components/QueryBuilder/Forms/styled.ts
index 487caa86..56a51002 100644
--- a/src/components/QueryBuilder/Forms/styled.ts
+++ b/packages/main/src/components/QueryBuilder/Forms/styled.ts
@@ -9,9 +9,9 @@ export const InputGroup = styled.div`
flex-direction: row;
align-items: center;
select {
- background: ${({theme}: any) => theme.inputBg};
- color: ${({theme}: any) => theme.textColor};
- border: 1px solid ${({theme}: any) => theme.buttonBorder};
+ background: ${({theme}: any) => theme.deep};
+ color: ${({theme}: any) => theme.contrast};
+ border: 1px solid ${({theme}: any) => theme.accentNeutral};
border-radius:3px;
font-size:12px;
height:26px;
@@ -19,7 +19,7 @@ export const InputGroup = styled.div`
`;
export const Label = styled.div`
- color: ${({theme}: any) => theme.textColor};
+ color: ${({theme}: any) => theme.contrast};
display: flex;
align-items: center;
font-size: 12px;
diff --git a/src/components/QueryBuilder/LabelSelectors/LabelSelectorsItem.tsx b/packages/main/src/components/QueryBuilder/LabelSelectors/LabelSelectorsItem.tsx
similarity index 93%
rename from src/components/QueryBuilder/LabelSelectors/LabelSelectorsItem.tsx
rename to packages/main/src/components/QueryBuilder/LabelSelectors/LabelSelectorsItem.tsx
index 9c48a48c..7330252d 100644
--- a/src/components/QueryBuilder/LabelSelectors/LabelSelectorsItem.tsx
+++ b/packages/main/src/components/QueryBuilder/LabelSelectors/LabelSelectorsItem.tsx
@@ -6,7 +6,7 @@ import useLabels from "../../LabelBrowser/components/LabelsSelector/useLabels";
import useLabelValues from "../../LabelBrowser/components/LabelsSelector/useLabelValues";
import NativeSelect from "../Forms/NativeSelect";
import Select from "react-select";
-import { useTheme } from "../../../theme";
+import useTheme from "@ui/theme/useTheme";
export const cStyles = {
menu: (base: any) => ({
@@ -149,13 +149,13 @@ export function ValueSelect(props: any) {
fontSize: 12,
colors: {
...theme.colors,
- primary: mainTheme.inputBg,
- neutral90: mainTheme.textColor,
- neutral80: mainTheme.textColor,
- neutral0: mainTheme.inputBg,
- primary25: mainTheme.widgetContainer,
- neutral5: mainTheme.widgetContainer,
- neutral10: mainTheme.widgetContainer,
+ primary: mainTheme.deep,
+ neutral90: mainTheme.contrast,
+ neutral80: mainTheme.contrast,
+ neutral0: mainTheme.deep,
+ primary25: mainTheme.shadow,
+ neutral5: mainTheme.shadow,
+ neutral10: mainTheme.shadow,
},
})}
onChange={onChange}
diff --git a/src/components/QueryBuilder/LabelSelectors/index.tsx b/packages/main/src/components/QueryBuilder/LabelSelectors/index.tsx
similarity index 91%
rename from src/components/QueryBuilder/LabelSelectors/index.tsx
rename to packages/main/src/components/QueryBuilder/LabelSelectors/index.tsx
index 5a0aeb5a..32ed92c1 100644
--- a/src/components/QueryBuilder/LabelSelectors/index.tsx
+++ b/packages/main/src/components/QueryBuilder/LabelSelectors/index.tsx
@@ -2,17 +2,17 @@ import { ThemeProvider } from "@emotion/react";
import styled from "@emotion/styled";
import { nanoid } from "nanoid";
import { useEffect, useState } from "react";
-import { useTheme } from "../../../theme";
+import useTheme from "@ui/theme/useTheme";
import LabelSelectorItem from "./LabelSelectorsItem";
interface Theme {
- widgetContainer: string;
- textColor: string;
+ shadow: string;
+ contrast: string;
}
const LabelsCont = styled.div`
- background: ${({ theme }: { theme: Theme }) => theme.widgetContainer};
- color: ${({ theme }: { theme: Theme }) => theme.textColor};
+ background: ${({ theme }: { theme: Theme }) => theme.shadow};
+ color: ${({ theme }: { theme: Theme }) => theme.contrast};
padding: 10px;
.label {
font-size: 12px;
diff --git a/src/components/QueryBuilder/Operations/Components/body.tsx b/packages/main/src/components/QueryBuilder/Operations/Components/body.tsx
similarity index 89%
rename from src/components/QueryBuilder/Operations/Components/body.tsx
rename to packages/main/src/components/QueryBuilder/Operations/Components/body.tsx
index a6616da3..19a49cff 100644
--- a/src/components/QueryBuilder/Operations/Components/body.tsx
+++ b/packages/main/src/components/QueryBuilder/Operations/Components/body.tsx
@@ -1,5 +1,5 @@
import { useState, useCallback, useEffect, useMemo } from "react";
-import { useTheme } from "../../../DataViews/components/QueryBuilder/hooks";
+import useTheme from "@ui/theme/useTheme"
import { cx } from "@emotion/css";
import { OperationContainerProps, FilterState } from "../types";
import { OperationBodyStyles } from "../OperationStyles";
@@ -10,7 +10,8 @@ import {
QuantilesSelector,
} from "./selectors";
import { useLabelsFromProps } from "../hooks";
-import DOMPurify from "isomorphic-dompurify";
+import sanitizeWithSigns from "@ui/helpers/sanitizeWithSigns";
+
export const JSONFormatBody = (props: any) => {
const { setOperations, id } = props;
@@ -19,7 +20,7 @@ export const JSONFormatBody = (props: any) => {
// we need: input and 'add expression' button
// here: add the expressions
- const onExpChange = useCallback((e, index) => {
+ const onExpChange = useCallback((e:any, index:number) => {
setExpressions((prev: any) => {
let n = [...prev];
n[index] = e?.target?.value;
@@ -36,7 +37,7 @@ export const JSONFormatBody = (props: any) => {
return m;
});
});
- // eslint-disable-next-line react-hooks/exhaustive-deps
+
}, []);
const onExpRemove = (e: any, index: number) => {
@@ -78,7 +79,7 @@ export const JSONFormatBody = (props: any) => {
{" "}
onExpRemove(e, index)}>x {" "}
@@ -117,14 +118,14 @@ export const PatternFormatBody = (props: OperationContainerProps) => {
});
});
},
- // eslint-disable-next-line react-hooks/exhaustive-deps
+
[expression]
);
return (
"}
onChange={onExpChange}
/>
@@ -137,7 +138,7 @@ export const UnwrapFormatBody: React.FC = (props: any) => {
const theme = useTheme();
const [labelValue, setLabelValue] = useState
("");
const onLabelValueChange = useCallback(
- (e) => {
+ (e:any) => {
setLabelValue(e.target.value);
setOperations((prev: any) => {
@@ -151,11 +152,11 @@ export const UnwrapFormatBody: React.FC = (props: any) => {
});
});
},
- // eslint-disable-next-line react-hooks/exhaustive-deps
+
[labelValue]
);
- const onConversionFunctionChange = useCallback((e) => {
+ const onConversionFunctionChange = useCallback((e:any) => {
setOperations((prev: any) => {
const next = [...prev];
return next?.map((m: any) => {
@@ -166,13 +167,13 @@ export const UnwrapFormatBody: React.FC = (props: any) => {
return m;
});
});
- // eslint-disable-next-line react-hooks/exhaustive-deps
+
}, []);
return (
@@ -206,14 +207,14 @@ export const RegexpFormatBody = (props: any) => {
});
});
},
- // eslint-disable-next-line react-hooks/exhaustive-deps
+
[expression]
);
return (
"}
onChange={onExpChange}
/>
@@ -241,14 +242,14 @@ export const LineFormatBody = (props: any) => {
});
});
},
- // eslint-disable-next-line react-hooks/exhaustive-deps
+
[expression]
);
return (
@@ -263,11 +264,11 @@ export const ClampBody = (props: any) => {
const theme = useTheme();
const onMaxChange = (e: any) => {
- setMaximum((prev: any) => e.target.value);
+ setMaximum(() => e.target.value);
};
const onMinChange = (e: any) => {
- setMinimum((prev: any) => e.target.value);
+ setMinimum(() => e.target.value);
};
useEffect(() => {
@@ -285,7 +286,7 @@ export const ClampBody = (props: any) => {
return m;
});
});
- // eslint-disable-next-line react-hooks/exhaustive-deps
+
}, [minimum, maximum]);
return (
@@ -293,7 +294,7 @@ export const ClampBody = (props: any) => {
Minimum Scalar
@@ -301,7 +302,7 @@ export const ClampBody = (props: any) => {
Maximum Scalar
@@ -316,7 +317,7 @@ export const ClampMinBody = (props: any) => {
const theme = useTheme();
const onMinChange = (e: any) => {
- setMinimum((prev: any) => e.target.value);
+ setMinimum(() => e.target.value);
};
useEffect(() => {
let clapArr = [minimum];
@@ -333,7 +334,7 @@ export const ClampMinBody = (props: any) => {
return m;
});
});
- // eslint-disable-next-line react-hooks/exhaustive-deps
+
}, [minimum]);
return (
@@ -341,7 +342,7 @@ export const ClampMinBody = (props: any) => {
Minimum Scalar
@@ -354,7 +355,7 @@ export const ClampMaxBody = (props: any) => {
const [maximum, setMaximum] = useState("1");
const theme = useTheme();
const onMaxChange = (e: any) => {
- setMaximum((prev: any) => e.target.value);
+ setMaximum(() => e.target.value);
};
useEffect(() => {
@@ -372,7 +373,7 @@ export const ClampMaxBody = (props: any) => {
return m;
});
});
- // eslint-disable-next-line react-hooks/exhaustive-deps
+
}, [maximum]);
return (
@@ -380,7 +381,7 @@ export const ClampMaxBody = (props: any) => {
Maximum Scalar
@@ -408,7 +409,7 @@ export const QuantileBody = (props: any) => {
return m;
});
});
- // eslint-disable-next-line react-hooks/exhaustive-deps
+
}, [quantile]);
return (
@@ -416,7 +417,7 @@ export const QuantileBody = (props: any) => {
Quantile
@@ -430,7 +431,7 @@ export const RoundBody = (props: any) => {
const [round, setRound] = useState("1");
const theme = useTheme();
const onRoundChange = (e: any) => {
- setRound((prev: any) => e.target.value);
+ setRound(() => e.target.value);
};
useEffect(() => {
@@ -444,7 +445,7 @@ export const RoundBody = (props: any) => {
return m;
});
});
- // eslint-disable-next-line react-hooks/exhaustive-deps
+
}, [round]);
return (
@@ -452,7 +453,7 @@ export const RoundBody = (props: any) => {
Nearest Scalar
@@ -506,7 +507,7 @@ export const LabelReplaceBody = (props: any) => {
return m;
});
});
- // eslint-disable-next-line react-hooks/exhaustive-deps
+
}, [destinationLabel, replacement, sourceLabel, regex]);
return (
@@ -514,7 +515,7 @@ export const LabelReplaceBody = (props: any) => {
Destination Label
@@ -522,7 +523,7 @@ export const LabelReplaceBody = (props: any) => {
Replacement
@@ -530,7 +531,7 @@ export const LabelReplaceBody = (props: any) => {
Source Label
@@ -538,7 +539,7 @@ export const LabelReplaceBody = (props: any) => {
Regex
@@ -547,7 +548,7 @@ export const LabelReplaceBody = (props: any) => {
);
};
-export const DefaultFormatBody = (props: any) => {
+export const DefaultFormatBody = () => {
return <>;
};
@@ -571,7 +572,7 @@ export const RangeBody = (props: any) => {
});
});
},
- // eslint-disable-next-line react-hooks/exhaustive-deps
+
[range]
);
@@ -597,7 +598,7 @@ export const HistogramQuantileBody = (props: any) => {
return m;
});
});
- // eslint-disable-next-line react-hooks/exhaustive-deps
+
}, [props.quantile]);
const theme = useTheme();
@@ -616,7 +617,7 @@ export const HistogramQuantileBody = (props: any) => {
});
});
},
- // eslint-disable-next-line react-hooks/exhaustive-deps
+
[quantile]
);
@@ -641,7 +642,7 @@ export const LabelJoinBody = (props: any) => {
const theme = useTheme();
- const onSourceLabelAdd = (e: any) => {
+ const onSourceLabelAdd = () => {
setSourceLabelSelectors((prev: any) => [...prev, ""]);
};
@@ -668,7 +669,7 @@ export const LabelJoinBody = (props: any) => {
return next?.filter((_, i) => i !== index);
});
},
- // eslint-disable-next-line react-hooks/exhaustive-deps
+
[sourceLabelSelectors]
);
@@ -709,7 +710,7 @@ export const LabelJoinBody = (props: any) => {
return m;
});
});
- // eslint-disable-next-line react-hooks/exhaustive-deps
+
}, [destinationLabel, sourceLabelSelectors, separator]);
return (
@@ -726,7 +727,7 @@ export const LabelJoinBody = (props: any) => {
Replacement
@@ -747,7 +748,7 @@ export const LabelRangeBody = (props: any) => {
const [range, setRange] = useState(props.range);
const [quantile, setQuantile] = useState(props.quantile);
const theme = useTheme();
- const onLabelAdd = (e: any) => {
+ const onLabelAdd = () => {
setLabels((prev) => [...prev, ""]);
};
@@ -770,7 +771,7 @@ export const LabelRangeBody = (props: any) => {
});
});
},
- // eslint-disable-next-line react-hooks/exhaustive-deps
+
[labels]
);
@@ -793,7 +794,7 @@ export const LabelRangeBody = (props: any) => {
});
});
},
- // eslint-disable-next-line react-hooks/exhaustive-deps
+
[labels]
);
@@ -812,7 +813,7 @@ export const LabelRangeBody = (props: any) => {
});
});
},
- // eslint-disable-next-line react-hooks/exhaustive-deps
+
[range]
);
@@ -831,7 +832,7 @@ export const LabelRangeBody = (props: any) => {
});
});
},
- // eslint-disable-next-line react-hooks/exhaustive-deps
+
[range]
);
@@ -858,7 +859,7 @@ export const LabelRangeBody = (props: any) => {
{props.header === "Quantile Over Time" && (
)}
Add Label
@@ -874,7 +875,7 @@ export const AggregationsBody = (props: any) => {
const [kValue, setKValue] = useState
(props.kValue || []);
const theme = useTheme();
- const onLabelAdd = (e: any) => {
+ const onLabelAdd = () => {
setLabels((prev) => [...prev, ""]);
setOperations((prev: any) => {
@@ -910,7 +911,7 @@ export const AggregationsBody = (props: any) => {
});
});
},
- // eslint-disable-next-line react-hooks/exhaustive-deps
+
[labels]
);
@@ -933,7 +934,7 @@ export const AggregationsBody = (props: any) => {
});
});
},
- // eslint-disable-next-line react-hooks/exhaustive-deps
+
[labels]
);
@@ -952,7 +953,7 @@ export const AggregationsBody = (props: any) => {
});
});
},
- // eslint-disable-next-line react-hooks/exhaustive-deps
+
[kValue]
);
@@ -981,7 +982,7 @@ export const AggregationsBody = (props: any) => {
{isKValue(aggrType) && (
onChange(e, "label")}
/>
@@ -1057,7 +1058,7 @@ export const LabelFilterBody = (props: any) => {
(opt: { name: string; value: string }, key: number) => (
{opt.name}
@@ -1066,7 +1067,7 @@ export const LabelFilterBody = (props: any) => {
onChange(e, "value")}
/>
@@ -1109,14 +1110,14 @@ export const BinaryOperationsBody = (props: any) => {
});
});
},
- // eslint-disable-next-line react-hooks/exhaustive-deps
+
[binaryOperationState]
);
return (
@@ -1160,7 +1161,7 @@ export const LineFilterBody = (props: any) => {
return (
diff --git a/src/components/QueryBuilder/Operations/Components/renderers.tsx b/packages/main/src/components/QueryBuilder/Operations/Components/renderers.tsx
similarity index 100%
rename from src/components/QueryBuilder/Operations/Components/renderers.tsx
rename to packages/main/src/components/QueryBuilder/Operations/Components/renderers.tsx
diff --git a/src/components/QueryBuilder/Operations/Components/selectors.tsx b/packages/main/src/components/QueryBuilder/Operations/Components/selectors.tsx
similarity index 100%
rename from src/components/QueryBuilder/Operations/Components/selectors.tsx
rename to packages/main/src/components/QueryBuilder/Operations/Components/selectors.tsx
diff --git a/src/components/QueryBuilder/Operations/DragAndDropContainer.tsx b/packages/main/src/components/QueryBuilder/Operations/DragAndDropContainer.tsx
similarity index 100%
rename from src/components/QueryBuilder/Operations/DragAndDropContainer.tsx
rename to packages/main/src/components/QueryBuilder/Operations/DragAndDropContainer.tsx
diff --git a/src/components/QueryBuilder/Operations/OperationContainer.tsx b/packages/main/src/components/QueryBuilder/Operations/OperationContainer.tsx
similarity index 97%
rename from src/components/QueryBuilder/Operations/OperationContainer.tsx
rename to packages/main/src/components/QueryBuilder/Operations/OperationContainer.tsx
index aa82ad5f..b3de7272 100644
--- a/src/components/QueryBuilder/Operations/OperationContainer.tsx
+++ b/packages/main/src/components/QueryBuilder/Operations/OperationContainer.tsx
@@ -1,7 +1,7 @@
import { cx } from "@emotion/css";
import CloseIcon from "@mui/icons-material/Close";
import { useCallback, useState, useEffect } from "react";
-import { useTheme } from "../../DataViews/components/QueryBuilder/hooks";
+import useTheme from "@ui/theme/useTheme"
import { opTypeSwitch } from "./Components/renderers";
import { OperationSelectorFromType } from "./OperationSelector";
import { CloseIconStyle, OperationContainerStyles } from "./OperationStyles";
diff --git a/src/components/QueryBuilder/Operations/OperationSelector.tsx b/packages/main/src/components/QueryBuilder/Operations/OperationSelector.tsx
similarity index 90%
rename from src/components/QueryBuilder/Operations/OperationSelector.tsx
rename to packages/main/src/components/QueryBuilder/Operations/OperationSelector.tsx
index ae632b84..92fc8d58 100644
--- a/src/components/QueryBuilder/Operations/OperationSelector.tsx
+++ b/packages/main/src/components/QueryBuilder/Operations/OperationSelector.tsx
@@ -12,7 +12,7 @@ import { css, cx, keyframes } from "@emotion/css";
import NavigateNextIcon from "@mui/icons-material/NavigateNext";
import classNames from "classnames";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
-import { useTheme } from "../../DataViews/components/QueryBuilder/hooks";
+import useTheme from "@ui/theme/useTheme"
const menuShow = keyframes`
from {
opacity: 0;
@@ -27,8 +27,8 @@ const menu = (theme: any) => css`
font-family: sans-serif;
font-size: 12px;
user-select: none;
- color: ${theme.textColor} !important;
- background: ${theme.inputBg} !important;
+ color: ${theme.contrast} !important;
+ background: ${theme.deep} !important;
box-shadow: 1px 1px 20px 1px rgba(0, 0, 0, 0.1);
border-radius: 3px;
padding: 6px;
@@ -38,8 +38,8 @@ const menu = (theme: any) => css`
const submenuItem = (theme: any) => css`
position: relative;
font-size: 12px;
- color: ${theme.textColor} !important;
- background: ${theme.inputBg} !important;
+ color: ${theme.contrast} !important;
+ background: ${theme.deep} !important;
&::after {
// content:
;
position: absolute;
@@ -47,7 +47,7 @@ const submenuItem = (theme: any) => css`
right: 0.625rem;
}
&:hover {
- background: ${theme.widgetContainer} !important;
+ background: ${theme.shadow} !important;
}
`;
@@ -59,9 +59,9 @@ const customSubMenu = css`
`;
const menuButtonStyles = (theme: any) => css`
- background: ${theme.inputBg};
- color: ${theme.textColor};
- border: 1px solid ${theme.buttonBorder};
+ background: ${theme.deep};
+ color: ${theme.contrast};
+ border: 1px solid ${theme.accentNeutral};
border-radius: 3px;
padding: 6px;
display: flex;
@@ -81,18 +81,18 @@ const menuClosing = css`
const menuItem = (theme: any) => css`
// color:white;
- background: ${theme.inputBg} !important;
- color: ${theme.textColor} !important;
+ background: ${theme.deep} !important;
+ color: ${theme.contrast} !important;
border-radius: 3px;
padding: 0.275rem 0.525rem;
&:hover {
- background: ${theme.widgetContainer} !important;
+ background: ${theme.shadow} !important;
}
`;
const menuItemHover = (theme: any) => css`
// color: white !important;
- color: ${theme.textColor};
- background: ${theme.widgetContainer} !important;
+ color: ${theme.contrast};
+ background: ${theme.shadow} !important;
`;
const menuItemClassName = ({ hover, disabled }: any, theme: any) =>
@@ -263,12 +263,12 @@ export function CustomSubMenu({ item }: any) {
export const mainMenu = (theme: any) => css`
margin-bottom: 6px;
.szh-menu {
- background: ${theme.inputBg} !important;
- color: ${theme.textColor} !important;
+ background: ${theme.deep} !important;
+ color: ${theme.contrast} !important;
}
.szh-menu__item {
&:hover {
- background: ${theme.widgetContainer} !important;
+ background: ${theme.shadow} !important;
}
}
`;
diff --git a/src/components/QueryBuilder/Operations/OperationStyles.tsx b/packages/main/src/components/QueryBuilder/Operations/OperationStyles.tsx
similarity index 77%
rename from src/components/QueryBuilder/Operations/OperationStyles.tsx
rename to packages/main/src/components/QueryBuilder/Operations/OperationStyles.tsx
index 10fb6a58..747bc9d4 100644
--- a/src/components/QueryBuilder/Operations/OperationStyles.tsx
+++ b/packages/main/src/components/QueryBuilder/Operations/OperationStyles.tsx
@@ -4,10 +4,10 @@ export const OperationContainerStyles = (theme: any) => css`
display: flex;
flex-direction: column;
.operation-header {
- background: ${theme.viewBg};
- color: ${theme.textColor};
+ background: ${theme.background};
+ color: ${theme.contrast};
padding: 0px 8px;
- border-bottom: 1px solid ${theme.buttonBorder};
+ border-bottom: 1px solid ${theme.accentNeutral};
display: flex;
justify-content: space-between;
align-items: center;
@@ -50,13 +50,13 @@ export const OperationBodyStyles = (theme: any) => css`
}
label {
font-size: 12px;
- color: ${theme.textColor};
+ color: ${theme.contrast};
}
input {
height: 26px;
- color: ${theme.textColor};
- background: ${theme.inputBg};
- border: 1px solid ${theme.buttonBorder};
+ color: ${theme.contrast};
+ background: ${theme.deep};
+ border: 1px solid ${theme.accentNeutral};
border-radius: 3px;
padding: 0px 6px;
max-width: 100px;
@@ -68,17 +68,17 @@ export const OperationBodyStyles = (theme: any) => css`
select {
height: 26px;
- color: ${theme.textColor};
- background: ${theme.inputBg};
- border: 1px solid ${theme.buttonBorder};
+ color: ${theme.contrast};
+ background: ${theme.deep};
+ border: 1px solid ${theme.accentNeutral};
border-radius: 3px;
padding: 0px 6px;
}
button {
height: 26px;
- color: ${theme.textColor};
- background: ${theme.inputBg};
- border: 1px solid ${theme.buttonBorder};
+ color: ${theme.contrast};
+ background: ${theme.deep};
+ border: 1px solid ${theme.accentNeutral};
border-radius: 3px;
padding: 4px 8px;
cursor: pointer;
@@ -89,7 +89,7 @@ export const OperationBodyStyles = (theme: any) => css`
display: flex;
align-items: center;
justify-content: space-between;
- background: ${theme.widgetContainer};
+ background: ${theme.shadow};
border-radius: 3px;
padding: 6px;
.binary-operation-cont {
diff --git a/src/components/QueryBuilder/Operations/Operations.tsx b/packages/main/src/components/QueryBuilder/Operations/Operations.tsx
similarity index 96%
rename from src/components/QueryBuilder/Operations/Operations.tsx
rename to packages/main/src/components/QueryBuilder/Operations/Operations.tsx
index 4e2282a0..3769ee8c 100644
--- a/src/components/QueryBuilder/Operations/Operations.tsx
+++ b/packages/main/src/components/QueryBuilder/Operations/Operations.tsx
@@ -2,7 +2,7 @@ import type { Identifier, XYCoord } from "dnd-core";
import type { FC } from "react";
import { useRef } from "react";
import { useDrag, useDrop } from "react-dnd";
-import { useTheme } from "../../DataViews/components/QueryBuilder/hooks";
+import useTheme from "@ui/theme/useTheme"
import OperationContainer from "./OperationContainer";
export const ItemTypes = {
@@ -10,8 +10,8 @@ export const ItemTypes = {
};
const style = (theme: any) => ({
- border: `1px solid ${theme.buttonBorder}`,
- backgroundColor: `${theme.inputBg}`,
+ border: `1px solid ${theme.accentNeutral}`,
+ backgroundColor: `${theme.deep}`,
fontSize: "12px",
cursor: "move",
display: "flex",
diff --git a/src/components/QueryBuilder/Operations/builders/Aggregations.test.tsx b/packages/main/src/components/QueryBuilder/Operations/builders/Aggregations.test.tsx
similarity index 100%
rename from src/components/QueryBuilder/Operations/builders/Aggregations.test.tsx
rename to packages/main/src/components/QueryBuilder/Operations/builders/Aggregations.test.tsx
diff --git a/src/components/QueryBuilder/Operations/builders/AggregationsBTK.test.tsx b/packages/main/src/components/QueryBuilder/Operations/builders/AggregationsBTK.test.tsx
similarity index 100%
rename from src/components/QueryBuilder/Operations/builders/AggregationsBTK.test.tsx
rename to packages/main/src/components/QueryBuilder/Operations/builders/AggregationsBTK.test.tsx
diff --git a/src/components/QueryBuilder/Operations/builders/index.tsx b/packages/main/src/components/QueryBuilder/Operations/builders/index.tsx
similarity index 100%
rename from src/components/QueryBuilder/Operations/builders/index.tsx
rename to packages/main/src/components/QueryBuilder/Operations/builders/index.tsx
diff --git a/src/components/QueryBuilder/Operations/consts.tsx b/packages/main/src/components/QueryBuilder/Operations/consts.tsx
similarity index 100%
rename from src/components/QueryBuilder/Operations/consts.tsx
rename to packages/main/src/components/QueryBuilder/Operations/consts.tsx
diff --git a/src/components/QueryBuilder/Operations/helpers/index.tsx b/packages/main/src/components/QueryBuilder/Operations/helpers/index.tsx
similarity index 100%
rename from src/components/QueryBuilder/Operations/helpers/index.tsx
rename to packages/main/src/components/QueryBuilder/Operations/helpers/index.tsx
diff --git a/src/components/QueryBuilder/Operations/hooks/index.tsx b/packages/main/src/components/QueryBuilder/Operations/hooks/index.tsx
similarity index 100%
rename from src/components/QueryBuilder/Operations/hooks/index.tsx
rename to packages/main/src/components/QueryBuilder/Operations/hooks/index.tsx
diff --git a/src/components/QueryBuilder/Operations/hooks/useLabelSeries.tsx b/packages/main/src/components/QueryBuilder/Operations/hooks/useLabelSeries.tsx
similarity index 90%
rename from src/components/QueryBuilder/Operations/hooks/useLabelSeries.tsx
rename to packages/main/src/components/QueryBuilder/Operations/hooks/useLabelSeries.tsx
index cc3b92f8..a61b3acb 100644
--- a/src/components/QueryBuilder/Operations/hooks/useLabelSeries.tsx
+++ b/packages/main/src/components/QueryBuilder/Operations/hooks/useLabelSeries.tsx
@@ -14,7 +14,8 @@ export const useLabelSeries: UseLabelSeriesFn = (
dataSourceId: string,
label: string
) => {
- const { start, stop } = useSelector((store: any) => store);
+ const start = useSelector ((store:any)=> store.start)
+ const stop = useSelector ((store:any)=> store.stop)
const dataSources = useSelector((store: any) => store.dataSources);
const [res, setRes] = useState
({});
const [loading, setLoading] = useState(false);
diff --git a/src/components/QueryBuilder/Operations/types/index.tsx b/packages/main/src/components/QueryBuilder/Operations/types/index.tsx
similarity index 100%
rename from src/components/QueryBuilder/Operations/types/index.tsx
rename to packages/main/src/components/QueryBuilder/Operations/types/index.tsx
diff --git a/src/components/QueryBuilder/chevron-right-solid.svg b/packages/main/src/components/QueryBuilder/chevron-right-solid.svg
similarity index 100%
rename from src/components/QueryBuilder/chevron-right-solid.svg
rename to packages/main/src/components/QueryBuilder/chevron-right-solid.svg
diff --git a/src/components/QueryItem/DataSourceSelect/DataSourceSelect.tsx b/packages/main/src/components/QueryItem/DataSourceSelect/DataSourceSelect.tsx
similarity index 100%
rename from src/components/QueryItem/DataSourceSelect/DataSourceSelect.tsx
rename to packages/main/src/components/QueryItem/DataSourceSelect/DataSourceSelect.tsx
diff --git a/src/components/QueryItem/DataSourceSelect/DataSourceSelectOption.tsx b/packages/main/src/components/QueryItem/DataSourceSelect/DataSourceSelectOption.tsx
similarity index 95%
rename from src/components/QueryItem/DataSourceSelect/DataSourceSelectOption.tsx
rename to packages/main/src/components/QueryItem/DataSourceSelect/DataSourceSelectOption.tsx
index 96883f20..0ae35c9c 100644
--- a/src/components/QueryItem/DataSourceSelect/DataSourceSelectOption.tsx
+++ b/packages/main/src/components/QueryItem/DataSourceSelect/DataSourceSelectOption.tsx
@@ -1,10 +1,10 @@
import { forwardRef, useMemo } from "react";
import Select, { components } from "react-select";
-import { Icon } from "../../../views/DataSources/ui";
+import { Icon } from "@ui/views/DataSources/ui";
//import { InfoContent } from "../../DataViews/components/InfoContent";
import { selectTheme } from "../../DataViews/components/QueryBuilder/helpers";
-import { useTheme } from "../../DataViews/components/QueryBuilder/hooks";
+import useTheme from "@ui/theme/useTheme"
import { cStyles } from "../../DataViews/components/QueryBuilder/styles";
diff --git a/src/components/QueryItem/DataSourceSelect/assets/logs_icon.png b/packages/main/src/components/QueryItem/DataSourceSelect/assets/logs_icon.png
similarity index 100%
rename from src/components/QueryItem/DataSourceSelect/assets/logs_icon.png
rename to packages/main/src/components/QueryItem/DataSourceSelect/assets/logs_icon.png
diff --git a/src/components/QueryItem/DataSourceSelect/assets/metrics_icon.png b/packages/main/src/components/QueryItem/DataSourceSelect/assets/metrics_icon.png
similarity index 100%
rename from src/components/QueryItem/DataSourceSelect/assets/metrics_icon.png
rename to packages/main/src/components/QueryItem/DataSourceSelect/assets/metrics_icon.png
diff --git a/src/components/QueryItem/DataSourceSelect/assets/qryn-logo.png b/packages/main/src/components/QueryItem/DataSourceSelect/assets/qryn-logo.png
similarity index 100%
rename from src/components/QueryItem/DataSourceSelect/assets/qryn-logo.png
rename to packages/main/src/components/QueryItem/DataSourceSelect/assets/qryn-logo.png
diff --git a/src/components/QueryItem/DataSourceSelect/assets/traces_icon.png b/packages/main/src/components/QueryItem/DataSourceSelect/assets/traces_icon.png
similarity index 100%
rename from src/components/QueryItem/DataSourceSelect/assets/traces_icon.png
rename to packages/main/src/components/QueryItem/DataSourceSelect/assets/traces_icon.png
diff --git a/src/components/QueryItem/QueryId.tsx b/packages/main/src/components/QueryItem/QueryId.tsx
similarity index 89%
rename from src/components/QueryItem/QueryId.tsx
rename to packages/main/src/components/QueryItem/QueryId.tsx
index d9201bdd..4342cc6a 100644
--- a/src/components/QueryItem/QueryId.tsx
+++ b/packages/main/src/components/QueryItem/QueryId.tsx
@@ -1,9 +1,10 @@
import { useState } from "react";
-import DOMPurify from "isomorphic-dompurify";
+
import { css, cx } from "@emotion/css";
import { Tooltip } from "@mui/material";
-import { useTheme } from "../DataViews/components/QueryBuilder/hooks";
+import useTheme from "@ui/theme/useTheme"
+import sanitizeWithSigns from "@ui/helpers/sanitizeWithSigns";
export const QueryTitleStyles = (theme: any) => css`
margin-left: 20px;
@@ -12,7 +13,7 @@ export const QueryTitleStyles = (theme: any) => css`
text-overflow: ellipsis;
overflow: hidden;
max-width: 100px;
- color: ${theme.textColor};
+ color: ${theme.contrast};
background: transparent;
border: none;
outline: none;
@@ -47,7 +48,7 @@ export function QueryId(props: any) {
- {!isEmbed && (
+ {(!isEmbed && !isCardinality) && (
void;
expr: string;
isQueryOpen: any;
idRef: string;
diff --git a/src/components/QueryItem/StyledTabs.tsx b/packages/main/src/components/QueryItem/StyledTabs.tsx
similarity index 89%
rename from src/components/QueryItem/StyledTabs.tsx
rename to packages/main/src/components/QueryItem/StyledTabs.tsx
index 777284d8..c58191ee 100644
--- a/src/components/QueryItem/StyledTabs.tsx
+++ b/packages/main/src/components/QueryItem/StyledTabs.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
import { styled } from '@mui/material/styles';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
@@ -31,7 +31,7 @@ import Tab from '@mui/material/Tab';
'& .MuiTabs-indicatorSpan': {
maxWidth: 40,
width: '100%',
- backgroundColor: theme?.primaryDark,
+ backgroundColor: theme?.primary,
},
}))
@@ -45,9 +45,9 @@ import Tab from '@mui/material/Tab';
padding:0,
marginRight: '8px',
- color: theme.textOff,
+ color: theme.lightContrast,
'&.Mui-selected': {
- color: theme.textColor,
+ color: theme.contrast,
},
'&.Mui-focusVisible': {
backgroundColor: 'rgba(100, 95, 228, 0.32)',
diff --git a/src/components/QueryItem/style.tsx b/packages/main/src/components/QueryItem/style.tsx
similarity index 78%
rename from src/components/QueryItem/style.tsx
rename to packages/main/src/components/QueryItem/style.tsx
index c176f401..659872b5 100644
--- a/src/components/QueryItem/style.tsx
+++ b/packages/main/src/components/QueryItem/style.tsx
@@ -4,8 +4,8 @@ import styled from "@emotion/styled";
export const QueryItemContainerStyled = styled.div`
- background: ${({ theme }: any) => `${theme.secondaryWidgetContainer}`};
- color: ${({ theme }: any) => `${theme.textColor}`};
+ background: ${({ theme }: any) => `${theme.background}`};
+ color: ${({ theme }: any) => `${theme.contrast}`};
display: flex;
flex-direction:column;
border-radius: 3px;
@@ -51,12 +51,12 @@ export const ShowQueryButton = styled.button`
export const OpenQuery = styled(KeyboardArrowDownOutlinedIcon)`
font-size: 13px;
- color: ${({ theme }: any) => theme.textColor};
+ color: ${({ theme }: any) => theme.contrast};
`;
export const CloseQuery = styled(KeyboardArrowRightOutlinedIcon)`
font-size: 13px;
- color: ${({ theme }: any) => theme.textColor};
+ color: ${({ theme }: any) => theme.contrast};
`;
export const InputGroup = styled.div`
@@ -66,9 +66,9 @@ export const InputGroup = styled.div`
margin-top: 5px;
align-items: center;
select {
- background: ${(props: any) => props.theme.inputBg};
- color: ${(props: any) => props.theme.textColor};
- border: 1px solid ${(props: any) => props.theme.buttonBorder};
+ background: ${(props: any) => props.theme.deep};
+ color: ${(props: any) => props.theme.contrast};
+ border: 1px solid ${(props: any) => props.theme.accentNeutral};
border-radius:3px;
font-size:12px;
height:26px;
@@ -76,7 +76,7 @@ export const InputGroup = styled.div`
`;
export const Label = styled.div`
- color: ${(props: any) => props.theme.textColor};
+ color: ${(props: any) => props.theme.contrast};
display: flex;
align-items: center;
font-size: 12px;
diff --git a/src/components/QueryTypeBar/actions/setQueryResolution.ts b/packages/main/src/components/QueryTypeBar/actions/setQueryResolution.ts
similarity index 100%
rename from src/components/QueryTypeBar/actions/setQueryResolution.ts
rename to packages/main/src/components/QueryTypeBar/actions/setQueryResolution.ts
diff --git a/src/components/QueryTypeBar/components/QueryLimit.tsx b/packages/main/src/components/QueryTypeBar/components/QueryLimit.tsx
similarity index 80%
rename from src/components/QueryTypeBar/components/QueryLimit.tsx
rename to packages/main/src/components/QueryTypeBar/components/QueryLimit.tsx
index b8d77d51..1b7f6b00 100644
--- a/src/components/QueryTypeBar/components/QueryLimit.tsx
+++ b/packages/main/src/components/QueryTypeBar/components/QueryLimit.tsx
@@ -1,8 +1,8 @@
import styled from "@emotion/styled";
import { useEffect, useState, useMemo } from "react";
import { useSelector, useDispatch } from "react-redux";
-import { setRightPanel } from "../../../actions/setRightPanel";
-import { setLeftPanel } from "../../../actions/setLeftPanel";
+import { setRightPanel } from "@ui/store/actions/setRightPanel";
+import { setLeftPanel } from "@ui/store/actions/setLeftPanel";
import { Tooltip } from "@mui/material";
const InputGroup = styled.div`
@@ -11,8 +11,8 @@ const InputGroup = styled.div`
`;
const Label = styled.div`
- color: ${(props: any) => props.theme.textColor};
- background: ${(props: any) => props.theme.buttonInactive};
+ color: ${(props: any) => props.theme.contrast};
+ background: ${(props: any) => props.theme.shadow};
display: flex;
align-items: center;
justify-content: center;
@@ -23,9 +23,9 @@ const Label = styled.div`
const Input = styled.input`
flex: 1;
- background: ${(props: any) => props.theme.inputBg};
- color: ${(props: any) => props.theme.textColor};
- border: 1px solid ${(props: any) => props.theme.buttonBorder};
+ background: ${(props: any) => props.theme.deep};
+ color: ${(props: any) => props.theme.contrast};
+ border: 1px solid ${(props: any) => props.theme.accentNeutral};
border-radius: 3px;
max-width: 60px;
padding-left: 8px;
@@ -39,7 +39,7 @@ export function panelAction(name: any, value: any) {
}
export default function QueryLimit(props: any) {
- const dispatch = useDispatch();
+ const dispatch: any = useDispatch();
const { id }: any = props.data;
const { name }: any = props;
const panelQuery = useSelector((store: any) => store[name]);
diff --git a/src/components/QueryTypeBar/components/QueryResolution.tsx b/packages/main/src/components/QueryTypeBar/components/QueryResolution.tsx
similarity index 77%
rename from src/components/QueryTypeBar/components/QueryResolution.tsx
rename to packages/main/src/components/QueryTypeBar/components/QueryResolution.tsx
index f9fc6ce0..eb620ab2 100644
--- a/src/components/QueryTypeBar/components/QueryResolution.tsx
+++ b/packages/main/src/components/QueryTypeBar/components/QueryResolution.tsx
@@ -5,8 +5,8 @@ import { setQueryResolution } from "../actions/setQueryResolution";
import { DEFAULT_RESOLUTION, RESOLUTION_OPTIONS } from "../helpers";
const Label = styled.div`
- color: ${({theme}: any) => theme.textColor};
- background: ${({theme}: any) => theme.buttonInactive};
+ color: ${({theme}: any) => theme.contrast};
+ background: ${({theme}: any) => theme.shadow};
display: flex;
align-items: center;
justify-content: center;
@@ -18,9 +18,9 @@ const ResSelect = styled.select`
cursor: pointer;
position: relative;
font-size: 14px;
- color: ${({theme}: any) => theme.textColor};
- background: ${({theme}: any) => theme.inputBg};
- border: 1px solid ${({theme}: any) => theme.buttonBorder};
+ color: ${({theme}: any) => theme.contrast};
+ background: ${({theme}: any) => theme.deep};
+ border: 1px solid ${({theme}: any) => theme.accentNeutral};
border-radius: 3px;
padding: 4px 8px;
line-height: 20px;
@@ -28,19 +28,19 @@ const ResSelect = styled.select`
max-width: 70px;
&::-webkit-scrollbar {
width: 5px;
- background: ${({theme}: any) => theme.inputBg};
+ background: ${({theme}: any) => theme.deep};
}
&::-webkit-scrollbar-corner {
background: transparent;
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
- background: ${({theme}: any) => theme.scrollbarThumb};
+ background: ${({theme}: any) => theme.alphaPlusNeutral};
}
`;
export default function QueryResolution() {
- const dispatch = useDispatch();
+ const dispatch: any = useDispatch();
const [resValue, setResValue]: any = useState(DEFAULT_RESOLUTION.value);
function handleResChange(e: any): void {
diff --git a/src/sections/Browser/QueryTypeSwitch.tsx b/packages/main/src/components/QueryTypeBar/components/QueryTypeSwitch.tsx
similarity index 82%
rename from src/sections/Browser/QueryTypeSwitch.tsx
rename to packages/main/src/components/QueryTypeBar/components/QueryTypeSwitch.tsx
index fdc50f32..bc635976 100644
--- a/src/sections/Browser/QueryTypeSwitch.tsx
+++ b/packages/main/src/components/QueryTypeBar/components/QueryTypeSwitch.tsx
@@ -1,8 +1,8 @@
import styled from "@emotion/styled";
import { useEffect, useMemo, useState } from "react";
const Label: any = styled.div`
- color: ${(props: any) => props.theme.textColor};
- background: ${(props: any) => props.theme.buttonInactive};
+ color: ${(props: any) => props.theme.contrast};
+ background: ${(props: any) => props.theme.shadow};
display: flex;
align-items: center;
justify-content: center;
@@ -14,10 +14,10 @@ const QuerySwitchCont: any = styled.div`
display: flex;
align-items: center;
font-size: 12px;
- background-color: ${(props: any) => props.theme.buttonInactive};
+ background-color: ${(props: any) => props.theme.shadow};
- border: 1px solid ${(props: any) => props.theme.buttonBorder};
- color: ${(props: any) => props.theme.textColor};
+ border: 1px solid ${(props: any) => props.theme.accentNeutral};
+ color: ${(props: any) => props.theme.contrast};
border-radius: 3px;
margin-right: 10px;
`;
@@ -28,15 +28,15 @@ const QuerySwitchBtn: any = styled.div`
align-items: center;
background: ${(props: any) =>
props.selected
- ? props.theme.buttonDefault
- : props.theme.buttonInactive};
+ ? props.theme.neutral
+ : props.theme.shadow};
border-left: ${(props: any) =>
props.position === "last"
- ? `1px solid ${props.theme.buttonBorder}`
+ ? `1px solid ${props.theme.accentNeutral}`
: "none"};
border-right: ${(props: any) =>
props.position === "first"
- ? `1px solid ${props.theme.buttonBorder}`
+ ? `1px solid ${props.theme.accentNeutral}`
: "none"};
border-radius: ${({ position }: any) =>
position === "first"
diff --git a/src/components/QueryTypeBar/helpers/index.ts b/packages/main/src/components/QueryTypeBar/helpers/index.ts
similarity index 96%
rename from src/components/QueryTypeBar/helpers/index.ts
rename to packages/main/src/components/QueryTypeBar/helpers/index.ts
index bc5e8ea9..1d82506d 100644
--- a/src/components/QueryTypeBar/helpers/index.ts
+++ b/packages/main/src/components/QueryTypeBar/helpers/index.ts
@@ -1,70 +1,70 @@
-import { map } from "lodash";
-
-function getTime(date:any) {
- return Math.ceil(date.valueOf() * 1e6);
-}
-
-function adjustInterval(
- dynamicInterval:any, // number
- resolution:any, // number
- range:any // number time range
-) {
- let safeInterval = range / 1100;
- if (safeInterval > 1) {
- safeInterval = Math.ceil(safeInterval);
- }
- return Math.max(resolution * dynamicInterval, safeInterval);
-}
-
-const MILLISECOND = 1;
-const SECOND = 1000 * MILLISECOND;
-const MINUTE = 60 * SECOND;
-const HOUR = 60 * MINUTE;
-const DAY = 24 * HOUR;
-
-function getIntervalInfo(timespanMs:any) {
- let intervalMs = timespanMs;
-
- let interval = "";
- if (timespanMs < SECOND * 5) {
- intervalMs = MILLISECOND;
- interval = "1ms";
- } else if (intervalMs > HOUR) {
- intervalMs = DAY;
- interval = "1d";
- } else if (intervalMs > MINUTE) {
- intervalMs = HOUR;
- interval = "1h";
- } else if (intervalMs > SECOND) {
- intervalMs = MINUTE;
- interval = "1m";
- } else {
- intervalMs = SECOND;
- interval = "1s";
- }
- return { interval, intervalMs };
-}
-
-export const DEFAULT_RESOLUTION = {
- value: 1,
- label: "1/1",
-};
-
-export const RESOLUTION_OPTIONS = [DEFAULT_RESOLUTION].concat(
- map([2, 3, 4, 5, 10], (value) => ({
- value,
- label: "1/" + value,
- }))
-);
-
-
-export default function adjustedStep(target:any, options:any) {
-
- const resolution = target.resolution || DEFAULT_RESOLUTION.value;
- const startNs = getTime(options.range.from);
- const endNs = getTime(options.range.to);
- const rangeMs = Math.ceil((endNs - startNs) / 1e6);
- const { intervalMs } = getIntervalInfo(rangeMs);
- const intl = adjustInterval(intervalMs || 1000, resolution, rangeMs);
- return Math.ceil(intl) / 1000;
-}
+import { map } from "lodash";
+
+function getTime(date:any) {
+ return Math.ceil(date.valueOf() * 1e6);
+}
+
+function adjustInterval(
+ dynamicInterval:any, // number
+ resolution:any, // number
+ range:any // number time range
+) {
+ let safeInterval = range / 1100;
+ if (safeInterval > 1) {
+ safeInterval = Math.ceil(safeInterval);
+ }
+ return Math.max(resolution * dynamicInterval, safeInterval);
+}
+
+const MILLISECOND = 1;
+const SECOND = 1000 * MILLISECOND;
+const MINUTE = 60 * SECOND;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+
+function getIntervalInfo(timespanMs:any) {
+ let intervalMs = timespanMs;
+
+ let interval = "";
+ if (timespanMs < SECOND * 5) {
+ intervalMs = MILLISECOND;
+ interval = "1ms";
+ } else if (intervalMs > HOUR) {
+ intervalMs = DAY;
+ interval = "1d";
+ } else if (intervalMs > MINUTE) {
+ intervalMs = HOUR;
+ interval = "1h";
+ } else if (intervalMs > SECOND) {
+ intervalMs = MINUTE;
+ interval = "1m";
+ } else {
+ intervalMs = SECOND;
+ interval = "1s";
+ }
+ return { interval, intervalMs };
+}
+
+export const DEFAULT_RESOLUTION = {
+ value: 1,
+ label: "1/1",
+};
+
+export const RESOLUTION_OPTIONS = [DEFAULT_RESOLUTION].concat(
+ map([2, 3, 4, 5, 10], (value) => ({
+ value,
+ label: "1/" + value,
+ }))
+);
+
+
+export default function adjustedStep(target:any, options:any) {
+
+ const resolution = target.resolution || DEFAULT_RESOLUTION.value;
+ const startNs = getTime(options.range.from);
+ const endNs = getTime(options.range.to);
+ const rangeMs = Math.ceil((endNs - startNs) / 1e6);
+ const { intervalMs } = getIntervalInfo(rangeMs);
+ const intl = adjustInterval(intervalMs || 1000, resolution, rangeMs);
+ return Math.ceil(intl) / 1000;
+}
diff --git a/src/components/QueryTypeBar/index.tsx b/packages/main/src/components/QueryTypeBar/index.tsx
similarity index 93%
rename from src/components/QueryTypeBar/index.tsx
rename to packages/main/src/components/QueryTypeBar/index.tsx
index 5ad29b34..e6443608 100644
--- a/src/components/QueryTypeBar/index.tsx
+++ b/packages/main/src/components/QueryTypeBar/index.tsx
@@ -1,279 +1,279 @@
-import { ThemeProvider } from "@emotion/react";
-import styled from "@emotion/styled";
-import { useState, useEffect } from "react";
-import { useSelector, useDispatch } from "react-redux";
-import { InputGroup, SettingLabel } from "../styles";
-import QueryLimit from "./components/QueryLimit";
-import QueryTypeSwitch from "./components/QueryTypeSwitch";
-import { Switch } from "@mui/material";
-import { useLocation } from "react-router-dom";
-import { setLeftPanel } from "../../actions/setLeftPanel";
-import { setRightPanel } from "../../actions/setRightPanel";
-import { useTheme } from "../DataViews/components/QueryBuilder/hooks";
-import PluginRenderer from "../../plugins/PluginsRenderer";
-
-const QueryTypeCont = styled.div`
- display: flex;
- padding: 4px 8px;
- // background: ${(props: any) => props.theme.widgetContainer};
- color: ${(props: any) => props.color};
- height: 26px;
-`;
-export function panelAction(name: any, value: any) {
- if (name === "left") {
- return setLeftPanel(value);
- }
- return setRightPanel(value);
-}
-
-export const SWITCH_OPTIONS = [
- { value: "range", label: "Range" },
- { value: "instant", label: "Instant" },
-];
-
-export const DIRECTION_SWITCH_OPTIONS = [
- { value: "forward", label: "Forward" },
- { value: "backwards", label: "Backwards" },
-];
-
-
-// Bar with switches:
-// query type
-// timestamp
-// query builder
-// direction
-// query limit
-// logs volume
-
-export default function QueryTypeBar(props: any) {
- const dispatch = useDispatch();
- const { name, data } = props;
-
- const theme = useTheme();
- const panelQuery = useSelector((store: any) => store[name]);
-
- const responseType = useSelector((store: any) => store.responseType);
-
- const { hash } = useLocation();
- const {
- id,
- queryType,
- tableView,
- idRef,
- isShowTs,
- isBuilder,
- isLogsVolume,
- direction,
- dataSourceType,
- isShowStats,
- hasStats,
- } = data;
-
- const [isTableViewSet, setIsTableViewSet] = useState(tableView);
- const [isShowTsSet, setIsShowTsSet] = useState(isShowTs || false);
- const [isBuilderSet, setIsBuilderSet] = useState(isBuilder || false);
- const [isLogsVolumeSet, setIsLogsVolumeSet] = useState(
- isLogsVolume || false
- );
- const [isShowStatsSet, setIsShowStatsSet] = useState(isShowStats || false);
- const [queryTypeSwitch, setQueryTypeSwitch] = useState(queryType);
- const [directionSwitch, setDirectionSwitch] = useState(
- direction || "forward"
- );
-
- useEffect(() => {
- const urlParams = new URLSearchParams(hash.replace(/#/, ""));
- const urlPanel: any = urlParams.get(name);
-
- const parsedPanel = JSON.parse(decodeURIComponent(urlPanel) || "[]");
-
- if (parsedPanel?.length > 0) {
- const queryMD = parsedPanel.find((f: any) => f.idRef === idRef);
-
- if (queryMD) {
- const panel = [...panelQuery];
- panel.forEach((query) => {
- if (query.idRef === idRef) {
- query.queryType = queryMD.queryType;
- query.direction = queryMD.direction;
- }
- });
- dispatch(panelAction(name, panel));
- }
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, []);
-
- useEffect(() => {
- setIsTableViewSet(props.data.tableView);
- }, [setIsTableViewSet, props.data.tableView]);
- useEffect(() => {
- setIsShowTsSet(props.data.isShowTs);
- }, [setIsShowTsSet, props.data.isShowTs]);
-
- useEffect(() => {
- setIsBuilderSet(props.data.isBuilder);
- }, [setIsBuilderSet, props.data.isBuilder]);
-
- useEffect(() => {
- setIsLogsVolumeSet(props.data.isLogsVolume);
- }, [setIsLogsVolumeSet, props.data.isLogsVolume]);
-
- function onSwitchChange(e: any) {
- // modify query type switch value
- const panel = [...panelQuery];
- panel.forEach((query) => {
- if (query.id === id) {
- query.queryType = e;
- }
- });
- dispatch(panelAction(name, panel));
- setQueryTypeSwitch(e);
- }
-
- function onDirectionSwitchChange(e: any) {
- // modify query type switch value
- const panel = [...panelQuery];
- panel.forEach((query) => {
- if (query.id === id) {
- query.direction = e;
- }
- });
- dispatch(panelAction(name, panel));
- setDirectionSwitch(e);
- }
-
- function handleTableViewSwitch() {
- // modify table view switch value
- const panel = [...panelQuery];
- panel.forEach((query) => {
- if (query.id === id) {
- query.tableView = isTableViewSet ? false : true;
- }
- });
- dispatch(panelAction(name, panel));
- }
-
- function handleShowTsSwitch() {
- // modify table view switch value
- const panel = [...panelQuery];
- panel.forEach((query) => {
- if (query.id === id) {
- query.isShowTs = isShowTsSet ? false : true;
- }
- });
-
- dispatch(panelAction(name, panel));
- }
-
- function handleBuilderSwitch() {
- // modify table view switch value
- const panel = [...panelQuery];
- panel.forEach((query) => {
- if (query.id === id) {
- query.isBuilder = isBuilderSet ? false : true;
- }
- });
-
- dispatch(panelAction(name, panel));
- }
-
- function handleLogsVolumeSwitch() {
- const panel = [...panelQuery];
- panel.forEach((query) => {
- if (query.id === id) {
- query.isLogsVolume = isLogsVolumeSet ? false : true;
- }
- });
-
- dispatch(panelAction(name, panel));
- }
-
- function handleStatsInfoSwitch(e: any) {
- const value = e.target.checked;
- setIsShowStatsSet(() => value);
- const panel = [...panelQuery];
- panel.forEach((query) => {
- if (query.id === id) {
- query.isShowStats = isShowStatsSet ? false : true;
- }
- });
- dispatch(panelAction(name, panel));
- }
-
- return (
-
-
-
-
- Chart View
-
- )}
- {responseType !== "vector" && (
- <>
-
- Timestamp
-
-
- Query Builder
-
-
- Logs Volume
-
- {hasStats && (
-
- Stats Info
-
- )}
-
- )}
-
-
- );
-}
+import { ThemeProvider } from "@emotion/react";
+import styled from "@emotion/styled";
+import { useState, useEffect } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { InputGroup, SettingLabel } from "../styles";
+import QueryLimit from "./components/QueryLimit";
+import QueryTypeSwitch from "./components/QueryTypeSwitch";
+import { Switch } from "@mui/material";
+import { useLocation } from "react-router-dom";
+import { setLeftPanel } from "@ui/store/actions/setLeftPanel";
+import { setRightPanel } from "@ui/store/actions/setRightPanel";
+import useTheme from "@ui/theme/useTheme"
+import PluginRenderer from "@ui/plugins/PluginsRenderer";
+
+const QueryTypeCont = styled.div`
+ display: flex;
+ padding: 4px;
+ // background: ${(props: any) => props.theme.shadow};
+ color: ${(props: any) => props.color};
+ height: 26px;
+`;
+export function panelAction(name: any, value: any) {
+ if (name === "left") {
+ return setLeftPanel(value);
+ }
+ return setRightPanel(value);
+}
+
+export const SWITCH_OPTIONS = [
+ { value: "range", label: "Range" },
+ { value: "instant", label: "Instant" },
+];
+
+export const DIRECTION_SWITCH_OPTIONS = [
+ { value: "forward", label: "Forward" },
+ { value: "backwards", label: "Backwards" },
+];
+
+
+// Bar with switches:
+// query type
+// timestamp
+// query builder
+// direction
+// query limit
+// logs volume
+
+export default function QueryTypeBar(props: any) {
+ const dispatch: any = useDispatch();
+ const { name, data } = props;
+
+ const theme = useTheme();
+ const panelQuery = useSelector((store: any) => store[name]);
+
+ const responseType = useSelector((store: any) => store.responseType);
+
+ const { hash } = useLocation();
+ const {
+ id,
+ queryType,
+ tableView,
+ idRef,
+ isShowTs,
+ isBuilder,
+ isLogsVolume,
+ direction,
+ dataSourceType,
+ isShowStats,
+ hasStats,
+ } = data;
+
+ const [isTableViewSet, setIsTableViewSet] = useState(tableView);
+ const [isShowTsSet, setIsShowTsSet] = useState(isShowTs || false);
+ const [isBuilderSet, setIsBuilderSet] = useState(isBuilder || false);
+ const [isLogsVolumeSet, setIsLogsVolumeSet] = useState(
+ isLogsVolume || false
+ );
+ const [isShowStatsSet, setIsShowStatsSet] = useState(isShowStats || false);
+ const [queryTypeSwitch, setQueryTypeSwitch] = useState(queryType);
+ const [directionSwitch, setDirectionSwitch] = useState(
+ direction || "forward"
+ );
+
+ useEffect(() => {
+ const urlParams = new URLSearchParams(hash.replace(/#/, ""));
+ const urlPanel: any = urlParams.get(name);
+
+ const parsedPanel = JSON.parse(decodeURIComponent(urlPanel) || "[]");
+
+ if (parsedPanel?.length > 0) {
+ const queryMD = parsedPanel.find((f: any) => f.idRef === idRef);
+
+ if (queryMD) {
+ const panel = [...panelQuery];
+ panel.forEach((query) => {
+ if (query.idRef === idRef) {
+ query.queryType = queryMD.queryType;
+ query.direction = queryMD.direction;
+ }
+ });
+ dispatch(panelAction(name, panel));
+ }
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ useEffect(() => {
+ setIsTableViewSet(props.data.tableView);
+ }, [setIsTableViewSet, props.data.tableView]);
+ useEffect(() => {
+ setIsShowTsSet(props.data.isShowTs);
+ }, [setIsShowTsSet, props.data.isShowTs]);
+
+ useEffect(() => {
+ setIsBuilderSet(props.data.isBuilder);
+ }, [setIsBuilderSet, props.data.isBuilder]);
+
+ useEffect(() => {
+ setIsLogsVolumeSet(props.data.isLogsVolume);
+ }, [setIsLogsVolumeSet, props.data.isLogsVolume]);
+
+ function onSwitchChange(e: any) {
+ // modify query type switch value
+ const panel = [...panelQuery];
+ panel.forEach((query) => {
+ if (query.id === id) {
+ query.queryType = e;
+ }
+ });
+ dispatch(panelAction(name, panel));
+ setQueryTypeSwitch(e);
+ }
+
+ function onDirectionSwitchChange(e: any) {
+ // modify query type switch value
+ const panel = [...panelQuery];
+ panel.forEach((query) => {
+ if (query.id === id) {
+ query.direction = e;
+ }
+ });
+ dispatch(panelAction(name, panel));
+ setDirectionSwitch(e);
+ }
+
+ function handleTableViewSwitch() {
+ // modify table view switch value
+ const panel = [...panelQuery];
+ panel.forEach((query) => {
+ if (query.id === id) {
+ query.tableView = isTableViewSet ? false : true;
+ }
+ });
+ dispatch(panelAction(name, panel));
+ }
+
+ function handleShowTsSwitch() {
+ // modify table view switch value
+ const panel = [...panelQuery];
+ panel.forEach((query) => {
+ if (query.id === id) {
+ query.isShowTs = isShowTsSet ? false : true;
+ }
+ });
+
+ dispatch(panelAction(name, panel));
+ }
+
+ function handleBuilderSwitch() {
+ // modify table view switch value
+ const panel = [...panelQuery];
+ panel.forEach((query) => {
+ if (query.id === id) {
+ query.isBuilder = isBuilderSet ? false : true;
+ }
+ });
+
+ dispatch(panelAction(name, panel));
+ }
+
+ function handleLogsVolumeSwitch() {
+ const panel = [...panelQuery];
+ panel.forEach((query) => {
+ if (query.id === id) {
+ query.isLogsVolume = isLogsVolumeSet ? false : true;
+ }
+ });
+
+ dispatch(panelAction(name, panel));
+ }
+
+ function handleStatsInfoSwitch(e: any) {
+ const value = e.target.checked;
+ setIsShowStatsSet(() => value);
+ const panel = [...panelQuery];
+ panel.forEach((query) => {
+ if (query.id === id) {
+ query.isShowStats = isShowStatsSet ? false : true;
+ }
+ });
+ dispatch(panelAction(name, panel));
+ }
+
+ return (
+
+
+
+
+ Chart View
+
+ )}
+ {responseType !== "vector" && (
+ <>
+
+ Timestamp
+
+
+ Query Builder
+
+
+ Logs Volume
+
+ {hasStats && (
+
+ Stats Info
+
+ )}
+
+ )}
+
+
+ );
+}
diff --git a/src/components/Stats/Stats.tsx b/packages/main/src/components/Stats/Stats.tsx
similarity index 87%
rename from src/components/Stats/Stats.tsx
rename to packages/main/src/components/Stats/Stats.tsx
index fe14d2ef..1221b95f 100644
--- a/src/components/Stats/Stats.tsx
+++ b/packages/main/src/components/Stats/Stats.tsx
@@ -1,22 +1,22 @@
import { css, cx } from "@emotion/css";
import { useMemo } from "react";
-import { useTheme } from "../../theme";
+import useTheme from "@ui/theme/useTheme";
const StatsCont = (theme: any) => css`
- color: ${theme.textColor};
+ color: ${theme.contrast};
display: flex;
flex: 1;
flex-direction: column;
- border: 1px solid ${theme.buttonBorder};
+ border: 1px solid ${theme.accentNeutral};
margin-top: 5px;
border-radius: 5px;
`;
const StatsHeader = (theme: any) => css`
font-size: 14px;
- background: ${theme.widgetContainer};
+ background: ${theme.shadow};
padding: 5px;
- border-bottom: 1px solid ${theme.buttonBorder};
+ border-bottom: 1px solid ${theme.accentNeutral};
`;
const StatsTable = (theme: any) => css`
@@ -30,8 +30,8 @@ const StatsRow = css`
const StatsCell = (theme: any, type: "key" | "value") => css`
display: table-cell;
padding: 5px;
- border-top: 1px solid ${theme.buttonBorder};
- ${type === "key" ? `color:${theme.textPrimary};` : ""}
+ border-top: 1px solid ${theme.accentNeutral};
+ ${type === "key" ? `color:${theme.hardContrast};` : ""}
`;
const StatsKey = css`
diff --git a/src/components/StatusBar/actions/setMenuSettingsOpen.ts b/packages/main/src/components/StatusBar/actions/setMenuSettingsOpen.ts
similarity index 100%
rename from src/components/StatusBar/actions/setMenuSettingsOpen.ts
rename to packages/main/src/components/StatusBar/actions/setMenuSettingsOpen.ts
diff --git a/src/components/StatusBar/assets/qryn-logo.png b/packages/main/src/components/StatusBar/assets/qryn-logo.png
similarity index 100%
rename from src/components/StatusBar/assets/qryn-logo.png
rename to packages/main/src/components/StatusBar/assets/qryn-logo.png
diff --git a/src/components/StatusBar/components/SplitViewButton/index.tsx b/packages/main/src/components/StatusBar/components/SplitViewButton/index.tsx
similarity index 93%
rename from src/components/StatusBar/components/SplitViewButton/index.tsx
rename to packages/main/src/components/StatusBar/components/SplitViewButton/index.tsx
index f1b1d94e..af60d23d 100644
--- a/src/components/StatusBar/components/SplitViewButton/index.tsx
+++ b/packages/main/src/components/StatusBar/components/SplitViewButton/index.tsx
@@ -1,7 +1,7 @@
import { Tooltip } from "@mui/material";
import { useSelector, useDispatch } from "react-redux";
-import { setLeftPanel } from "../../../../actions/setLeftPanel";
-import { setRightPanel } from "../../../../actions/setRightPanel";
+import { setLeftPanel } from "@ui/store/actions/setLeftPanel";
+import { setRightPanel } from "@ui/store/actions/setRightPanel";
import { setSplitView } from "./setSplitView";
import { SplitButton } from "./styled";
import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
@@ -14,7 +14,7 @@ export function closePanel(
[leftOpen, rightOpen]: [leftOpen: boolean, rightOpen: boolean],
panel: "left" | "right",
prev: any,
- dispatch: Function
+ dispatch: any
) {
let data = [...prev];
let next = data?.map((m: any) => ({ ...m, open: false }));
@@ -29,7 +29,7 @@ export function closePanel(
export function openPanel(
[left, right]: [left: any, right: any],
- dispatch: Function
+ dispatch: any
) {
let leftCopy = [...left];
let rightCopy = [...right];
@@ -58,7 +58,7 @@ export default function SplitViewButton({
const left = useSelector((store: any) => store.left);
const right = useSelector((store: any) => store.right);
const usedSide = useSelector((store: any) => store[side]);
- const dispatch = useDispatch();
+ const dispatch:any = useDispatch();
const isSplitView = useSelector((store: any) => store.isSplit);
const splitView = (e: any) => {
diff --git a/src/components/StatusBar/components/SplitViewButton/setSplitView.ts b/packages/main/src/components/StatusBar/components/SplitViewButton/setSplitView.ts
similarity index 100%
rename from src/components/StatusBar/components/SplitViewButton/setSplitView.ts
rename to packages/main/src/components/StatusBar/components/SplitViewButton/setSplitView.ts
diff --git a/src/components/StatusBar/components/SplitViewButton/styled.ts b/packages/main/src/components/StatusBar/components/SplitViewButton/styled.ts
similarity index 62%
rename from src/components/StatusBar/components/SplitViewButton/styled.ts
rename to packages/main/src/components/StatusBar/components/SplitViewButton/styled.ts
index a7f4e820..46d77efa 100644
--- a/src/components/StatusBar/components/SplitViewButton/styled.ts
+++ b/packages/main/src/components/StatusBar/components/SplitViewButton/styled.ts
@@ -17,9 +17,9 @@ align-items: center;
`
export const SplitButton = styled(BtnSmall)`
- background: ${(props:any) => props.theme.buttonDefault};
- border:1px solid ${(props:any)=>props.theme.buttonBorder};
- color: ${({ theme }:{ theme:any }) => theme.textColor};
+ background: ${(props:any) => props.theme.neutral};
+ border:1px solid ${(props:any)=>props.theme.accentNeutral};
+ color: ${({ theme }:{ theme:any }) => theme.contrast};
cursor: pointer;
text-overflow: ellipsis;
transition: 0.2s all;
@@ -27,9 +27,9 @@ export const SplitButton = styled(BtnSmall)`
margin: 0px 6px;
span {
margin-left: 4px;
- color: ${(props:any) => props.theme.textColor};
+ color: ${(props:any) => props.theme.contrast};
}
&:hover {
- background: ${(props:any) => props.theme.buttonHover};
+ background: ${(props:any) => props.theme.lightNeutral};
}
`
\ No newline at end of file
diff --git a/src/components/StatusBar/components/apiselector/ApiSelector.tsx b/packages/main/src/components/StatusBar/components/apiselector/ApiSelector.tsx
similarity index 100%
rename from src/components/StatusBar/components/apiselector/ApiSelector.tsx
rename to packages/main/src/components/StatusBar/components/apiselector/ApiSelector.tsx
diff --git a/src/components/StatusBar/components/copylinkbutton/CopyLinkButton.tsx b/packages/main/src/components/StatusBar/components/copylinkbutton/CopyLinkButton.tsx
similarity index 94%
rename from src/components/StatusBar/components/copylinkbutton/CopyLinkButton.tsx
rename to packages/main/src/components/StatusBar/components/copylinkbutton/CopyLinkButton.tsx
index 808f8db4..24054045 100644
--- a/src/components/StatusBar/components/copylinkbutton/CopyLinkButton.tsx
+++ b/packages/main/src/components/StatusBar/components/copylinkbutton/CopyLinkButton.tsx
@@ -1,7 +1,7 @@
-import { createAlert } from "../../../../actions/createAlert";
+import { createAlert } from "@ui/store/actions/createAlert";
import { useDispatch, useSelector } from "react-redux";
-import setLinksHistory from "../../../../actions/setLinksHistory";
-import { setIsSubmit } from "../../../../actions/setIsSubmit";
+import setLinksHistory from "@ui/store/actions/setLinksHistory";
+import { setIsSubmit } from "@ui/store/actions/setIsSubmit";
import { DatePickerButton, UrlCopyButton } from "../../styled";
import ContentCopyIcon from "@mui/icons-material/ContentCopy";
import KeyboardArrowDownOutlinedIcon from "@mui/icons-material/KeyboardArrowDownOutlined";
@@ -18,12 +18,12 @@ import { CustomMenu } from "../daterangepicker";
import { useState } from "react";
import { useLocation } from "react-router-dom";
import { storedUrl } from ".";
-import { useTheme } from "../../../../theme";
+import useTheme from "@ui/theme/useTheme";
export default function CopyLinkButton() {
const LINK_COPIED = "Link Copied To Clipboard";
const theme = useTheme();
- const dispatch = useDispatch();
+ const dispatch: any = useDispatch();
const [anchorEl, setAnchorEl] = useState(null);
const open = Boolean(anchorEl);
const [isRelative, setIsRelative] = useState(false);
@@ -147,7 +147,7 @@ export default function CopyLinkButton() {
>
Relative time
diff --git a/src/components/StatusBar/components/copylinkbutton/components/CopyButton.tsx b/packages/main/src/components/StatusBar/components/copylinkbutton/components/CopyButton.tsx
similarity index 100%
rename from src/components/StatusBar/components/copylinkbutton/components/CopyButton.tsx
rename to packages/main/src/components/StatusBar/components/copylinkbutton/components/CopyButton.tsx
diff --git a/src/components/StatusBar/components/copylinkbutton/components/RelativeTimeMenu.tsx b/packages/main/src/components/StatusBar/components/copylinkbutton/components/RelativeTimeMenu.tsx
similarity index 100%
rename from src/components/StatusBar/components/copylinkbutton/components/RelativeTimeMenu.tsx
rename to packages/main/src/components/StatusBar/components/copylinkbutton/components/RelativeTimeMenu.tsx
diff --git a/packages/main/src/components/StatusBar/components/copylinkbutton/hooks/index.tsx b/packages/main/src/components/StatusBar/components/copylinkbutton/hooks/index.tsx
new file mode 100644
index 00000000..118ada25
--- /dev/null
+++ b/packages/main/src/components/StatusBar/components/copylinkbutton/hooks/index.tsx
@@ -0,0 +1,5 @@
+import { useSelector } from "react-redux";
+
+export function useTimeLabel() {
+ return useSelector((store: any) => store.label);
+}
diff --git a/src/components/StatusBar/components/copylinkbutton/index.ts b/packages/main/src/components/StatusBar/components/copylinkbutton/index.ts
similarity index 97%
rename from src/components/StatusBar/components/copylinkbutton/index.ts
rename to packages/main/src/components/StatusBar/components/copylinkbutton/index.ts
index 97829929..fa832e6f 100644
--- a/src/components/StatusBar/components/copylinkbutton/index.ts
+++ b/packages/main/src/components/StatusBar/components/copylinkbutton/index.ts
@@ -1,4 +1,4 @@
-import localUrl from "../../../../services/localUrl";
+import localUrl from "@ui/services/localUrl";
export function storedUrl() {
return localUrl().add(
diff --git a/src/components/StatusBar/components/copylinkbutton/styles/index.tsx b/packages/main/src/components/StatusBar/components/copylinkbutton/styles/index.tsx
similarity index 90%
rename from src/components/StatusBar/components/copylinkbutton/styles/index.tsx
rename to packages/main/src/components/StatusBar/components/copylinkbutton/styles/index.tsx
index 1ac0babe..8259a04e 100644
--- a/src/components/StatusBar/components/copylinkbutton/styles/index.tsx
+++ b/packages/main/src/components/StatusBar/components/copylinkbutton/styles/index.tsx
@@ -2,7 +2,7 @@ export const menuItemStyle = { padding: "0 14px" };
export const typoStyle = (theme:any) => ({
fontSize: "12px",
- color: theme.textColor,
+ color: theme.contrast,
});
export const formControlLabelStyle = (label:boolean) => ({
diff --git a/src/components/StatusBar/components/daterangepicker/components/AbsoluteSelector.tsx b/packages/main/src/components/StatusBar/components/daterangepicker/components/AbsoluteSelector.tsx
similarity index 81%
rename from src/components/StatusBar/components/daterangepicker/components/AbsoluteSelector.tsx
rename to packages/main/src/components/StatusBar/components/daterangepicker/components/AbsoluteSelector.tsx
index ec178f18..bbac0157 100644
--- a/src/components/StatusBar/components/daterangepicker/components/AbsoluteSelector.tsx
+++ b/packages/main/src/components/StatusBar/components/daterangepicker/components/AbsoluteSelector.tsx
@@ -1,9 +1,10 @@
import styled from "@emotion/styled";
import DateRangeIcon from "@mui/icons-material/DateRange";
-import { BtnSmall } from "../../../../../theme/styles/Button";
+import { BtnSmall } from "@ui/theme/styles/Button";
import { ThemeProvider } from "@emotion/react";
-import DOMPurify from "isomorphic-dompurify";
-import { useTheme } from "../../../../../theme";
+import useTheme from "@ui/theme/useTheme"
+import sanitizeWithSigns from "@ui/helpers/sanitizeWithSigns";
+
const SelectorsContainer: any = styled.div`
display: ${(props: any) => (props.isDisplay ? "flex" : "none")};
flex-direction: column;
@@ -15,7 +16,7 @@ const SelectorsContainer: any = styled.div`
margin-bottom: 15px;
.label {
font-size: 0.85em;
- color: ${(props: any) => props.theme.inputLabelColor};
+ color: ${(props: any) => props.theme.alphaNeutral};
width: 50px;
margin-left: 5px;
margin-bottom: 5px;
@@ -25,21 +26,21 @@ const SelectorsContainer: any = styled.div`
display: flex;
margin-bottom: 20px;
input {
- background:${(props:any)=> props.theme.inputBg};
- color:${(props:any)=> props.theme.textColor};
+ background:${(props:any)=> props.theme.deep};
+ color:${(props:any)=> props.theme.contrast};
}
.date-time-ranged {
font-size: 14px;
width: 170px;
line-height: 20px;
- border: 1px solid ${(props: any) => props.theme.buttonHover};
- color: ${(props: any) => props.theme.textColor};
+ border: 1px solid ${(props: any) => props.theme.lightNeutral};
+ color: ${(props: any) => props.theme.contrast};
margin: 0;
padding: 0px 8px;
margin-right: 5px;
&:focus {
border: 1px solid
- ${(props: any) => props.theme.buttonDefault};
+ ${(props: any) => props.theme.neutral};
}
}
}
@@ -47,8 +48,8 @@ const SelectorsContainer: any = styled.div`
`;
const AbsoluteSubmitButton: any = styled(BtnSmall)`
- color: ${(props: any) => props.theme.buttonText};
- background: ${(props: any) => props.theme.primaryDark};
+ color: ${(props: any) => props.theme.maxContrast};
+ background: ${(props: any) => props.theme.primary};
padding: 6px;
justify-content: center;
margin-top: 10px;
@@ -60,13 +61,13 @@ const AbsoluteSubmitButton: any = styled(BtnSmall)`
`;
const CalendarBtn = styled(BtnSmall)`
- color: ${(props: any) => props.theme.textColor};
- background: ${(props: any) => props.theme.buttonDefault};
- border: 1px solid ${(props: any) => props.theme.buttonBorder};
+ color: ${(props: any) => props.theme.contrast};
+ background: ${(props: any) => props.theme.neutral};
+ border: 1px solid ${(props: any) => props.theme.accentNeutral};
padding: 8px;
&:hover {
- background: ${(props: any) => props.theme.buttonHover};
- color: ${(props: any) => props.theme.textColor};
+ background: ${(props: any) => props.theme.lightNeutral};
+ color: ${(props: any) => props.theme.contrast};
}
`;
@@ -119,7 +120,7 @@ export default function AbsoluteSelector({
handleStart(e, false)}
onBlur={(e) => handleStart(e, true)}
/>
@@ -136,7 +137,7 @@ export default function AbsoluteSelector({
handleStop(e, false)}
onBlur={(e) => handleStop(e, true)}
/>
diff --git a/src/components/StatusBar/components/daterangepicker/components/Day.tsx b/packages/main/src/components/StatusBar/components/daterangepicker/components/Day.tsx
similarity index 91%
rename from src/components/StatusBar/components/daterangepicker/components/Day.tsx
rename to packages/main/src/components/StatusBar/components/daterangepicker/components/Day.tsx
index 0c536a1c..49386638 100644
--- a/src/components/StatusBar/components/daterangepicker/components/Day.tsx
+++ b/packages/main/src/components/StatusBar/components/daterangepicker/components/Day.tsx
@@ -1,12 +1,12 @@
-//import * as React from "react";
+//import React from 'react';
import { ThemeProvider } from "@emotion/react";
import { createStyles } from "@mui/styles";
import { IconButton, Typography } from "@mui/material";
-import { withStyles } from "@mui/styles";
+import { withStyles } from "tss-react/mui";
import { combine } from "../utils";
import { theme } from "./styles";
-const DayStyles = () => {
+const DayStyles:any = () => {
return createStyles({
leftBorderRadius: {
borderRadius: "50% 0 0 50%",
@@ -29,7 +29,7 @@ const DayStyles = () => {
outlined: {
border: `1px solid #11abab`,
},
- buttonText: {
+ maxContrast: {
lineHeight: 1.6,
color: "primary",
},
@@ -51,7 +51,7 @@ const DayStyles = () => {
});
};
-const Day = (props: any) => {
+const Day:any = (props: any) => {
// use theme as props for Day
const { classes } = props;
return (
@@ -80,7 +80,7 @@ const Day = (props: any) => {
!props.disabled ? "text.primary" : "text.secondary"
}
className={combine(
- classes.buttonText,
+ classes.maxContrast,
!props.disabled && props.filled && classes.contrast,
props.disabled && classes.inactive
)}
@@ -94,4 +94,4 @@ const Day = (props: any) => {
);
};
-export default withStyles(DayStyles)(Day);
+export default withStyles(Day,DayStyles);
diff --git a/src/components/StatusBar/components/daterangepicker/components/Heading.tsx b/packages/main/src/components/StatusBar/components/daterangepicker/components/Heading.tsx
similarity index 84%
rename from src/components/StatusBar/components/daterangepicker/components/Heading.tsx
rename to packages/main/src/components/StatusBar/components/daterangepicker/components/Heading.tsx
index e7a3a099..9f147310 100644
--- a/src/components/StatusBar/components/daterangepicker/components/Heading.tsx
+++ b/packages/main/src/components/StatusBar/components/daterangepicker/components/Heading.tsx
@@ -1,6 +1,7 @@
import { Grid, IconButton } from "@mui/material";
-import { withStyles, ThemeProvider } from "@mui/styles";
+import { ThemeProvider } from "@mui/material/styles";
+import { withStyles } from "tss-react/mui";
import ChevronLeft from "@mui/icons-material/ChevronLeft";
import ChevronRight from "@mui/icons-material/ChevronRight";
import { setMonth, getMonth, setYear, getYear } from "date-fns";
@@ -8,14 +9,14 @@ import { MONTHS } from "../consts";
import { HeadingStyles } from "./styles";
import { generateYears } from "../utils";
import styled from "@emotion/styled";
-import { useTheme } from "../../../../DataViews/components/QueryBuilder/hooks";
+import useTheme from "@ui/theme/useTheme"
const DateSelect = styled.select`
cursor: pointer;
position: relative;
font-size: 14px;
- color: ${(props: any) => props.theme.textColor};
- background: ${(props: any) => props.theme.inputBg};
+ color: ${(props: any) => props.theme.contrast};
+ background: ${(props: any) => props.theme.deep};
border: none;
border-radius: 3px;
padding: 4px 8px;
@@ -23,7 +24,7 @@ const DateSelect = styled.select`
flex: 1;
&::-webkit-scrollbar {
width: 5px;
- background: ${(props: any) => props.theme.inputBg};
+ background: ${(props: any) => props.theme.deep};
}
&::-webkit-scrollbar-corner {
background: transparent;
@@ -31,7 +32,7 @@ const DateSelect = styled.select`
&::-webkit-scrollbar-thumb {
border-radius: 5px;
- background: ${(props: any) => props.theme.scrollbarThumb};
+ background: ${(props: any) => props.theme.alphaPlusNeutral};
}
`;
@@ -45,7 +46,7 @@ export interface HeadingProps {
onClickPrevious: (e: any) => void;
}
-const Heading = ({
+const Heading:any = ({
date,
classes,
setDate,
@@ -79,8 +80,8 @@ const Heading = ({
@@ -119,8 +120,8 @@ const Heading = ({
@@ -130,4 +131,6 @@ const Heading = ({
);
};
-export default withStyles(HeadingStyles)(Heading);
+
+
+export default withStyles(Heading,HeadingStyles);
diff --git a/src/components/StatusBar/components/daterangepicker/components/Month.tsx b/packages/main/src/components/StatusBar/components/daterangepicker/components/Month.tsx
similarity index 94%
rename from src/components/StatusBar/components/daterangepicker/components/Month.tsx
rename to packages/main/src/components/StatusBar/components/daterangepicker/components/Month.tsx
index 8718dd7a..6030a2c4 100644
--- a/src/components/StatusBar/components/daterangepicker/components/Month.tsx
+++ b/packages/main/src/components/StatusBar/components/daterangepicker/components/Month.tsx
@@ -1,5 +1,6 @@
import { Paper, Grid } from "@mui/material";
-import { withStyles, createStyles } from "@mui/styles";
+import { withStyles } from "tss-react/mui";
+import {createStyles} from "@mui/styles";
import { useState, useEffect } from "react";
import {
@@ -21,7 +22,7 @@ import Heading from "./Heading";
import Day from "./Day";
import { WEEK_DAYS } from "../consts";
import { ThemeProvider } from "@emotion/react";
-import { useTheme } from "../../../../DataViews/components/QueryBuilder/hooks";
+import useTheme from "@ui/theme/useTheme"
const NAVIGATION_ACTION = { Previous: -1, Next: 1 };
@@ -29,7 +30,7 @@ const styles = (theme: any) =>
createStyles({
root: {
width: 260,
- background: theme.mainBgColor,
+ background: theme.background,
},
weekDaysContainer: {
marginTop: 5,
@@ -71,7 +72,7 @@ const Month = (props: any) => {
square
elevation={0}
className={classes.root}
- style={{ background: theme.mainBgColor }}
+ style={{ background: theme.background }}
>
{
{WEEK_DAYS.map((day) => (
{
);
};
-export default withStyles(styles)(Month);
+export default withStyles(Month,styles);
diff --git a/src/components/StatusBar/components/daterangepicker/components/Nav.tsx b/packages/main/src/components/StatusBar/components/daterangepicker/components/Nav.tsx
similarity index 98%
rename from src/components/StatusBar/components/daterangepicker/components/Nav.tsx
rename to packages/main/src/components/StatusBar/components/daterangepicker/components/Nav.tsx
index 6baeca3c..385e596d 100644
--- a/src/components/StatusBar/components/daterangepicker/components/Nav.tsx
+++ b/packages/main/src/components/StatusBar/components/daterangepicker/components/Nav.tsx
@@ -19,18 +19,18 @@ import {
setStartTime,
setStopTime,
setTimeRangeLabel,
-} from "../../../../../actions";
+} from "@ui/store/actions";
import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
import { findRangeByLabel } from "../utils";
import AbsoluteSelector from "./AbsoluteSelector";
import { useMediaQuery } from "react-responsive";
import styled from "@emotion/styled";
import { ThemeProvider } from "@emotion/react";
-import { useTheme } from "../../../../DataViews/components/QueryBuilder/hooks";
+import useTheme from "@ui/theme/useTheme"
const PickerTypeButton = styled.button`
padding: 10px;
border-radius: 3px;
- color: ${({ theme }: { theme: any }) => theme.textPrimaryAccent};
+ color: ${({ theme }: { theme: any }) => theme.accent};
font-size: 1em;
border: none;
background: none;
@@ -73,7 +73,7 @@ const StyledNav = styled.div`
display: flex;
flex-direction: column;
overflow-y: auto;
- background: ${({ theme }: { theme: any }) => theme.mainBgColor};
+ background: ${({ theme }: { theme: any }) => theme.background};
}
.applyButton {
color: white;
@@ -111,7 +111,7 @@ export const PickerNav = (props: any) => {
const canNavigateCloser =
differenceInCalendarMonths(secondMonth, firstMonth) >= 2;
const commonProps = { dateRange, minDate, maxDate, helpers, handlers };
- const dispatch = useDispatch();
+ const dispatch: any = useDispatch();
const [editedStartDate, setEditedStartDate] = useState(dateRange.dateStart);
const [editedEndDate, setEditedEndDate] = useState(dateRange.dateEnd);
const [relativeOpen, setRelativeOpen] = useState(true);
diff --git a/src/components/StatusBar/components/daterangepicker/components/Ranges.tsx b/packages/main/src/components/StatusBar/components/daterangepicker/components/Ranges.tsx
similarity index 84%
rename from src/components/StatusBar/components/daterangepicker/components/Ranges.tsx
rename to packages/main/src/components/StatusBar/components/daterangepicker/components/Ranges.tsx
index 0a435879..f65cb183 100644
--- a/src/components/StatusBar/components/daterangepicker/components/Ranges.tsx
+++ b/packages/main/src/components/StatusBar/components/daterangepicker/components/Ranges.tsx
@@ -1,7 +1,7 @@
import styled from "@emotion/styled";
import { isSameRange } from "../utils";
import { ThemeProvider } from '@emotion/react';
-import { useTheme } from "../../../../DataViews/components/QueryBuilder/hooks";
+import useTheme from "@ui/theme/useTheme"
const StyledList = styled.div`
display: flex;
@@ -15,7 +15,7 @@ const StyledList = styled.div`
padding: 5px;
&::-webkit-scrollbar {
width: 5px;
- background: ${(props:any) => props.theme.buttonHover};
+ background: ${(props:any) => props.theme.lightNeutral};
}
&::-webkit-scrollbar-corner {
background: transparent;
@@ -23,7 +23,7 @@ const StyledList = styled.div`
&::-webkit-scrollbar-thumb {
border-radius: 5px;
- background: ${(props:any) => props.theme.buttonDefault};
+ background: ${(props:any) => props.theme.neutral};
}
button {
background: none;
@@ -35,7 +35,7 @@ const StyledList = styled.div`
font-size: 12px;
cursor: pointer;
&:hover {
- background: ${(props:any) => props.theme.buttonHover};
+ background: ${(props:any) => props.theme.lightNeutral};
}
}
`;
@@ -61,7 +61,7 @@ const Ranges = (props:any) => {
: "normal",
color: isSameRange(range, props.selectedRange)
? "orange"
- : theme.textColor,
+ : theme.contrast,
whiteSpace: "nowrap",
}}
>
diff --git a/src/components/StatusBar/components/daterangepicker/components/TimeLabel.tsx b/packages/main/src/components/StatusBar/components/daterangepicker/components/TimeLabel.tsx
similarity index 93%
rename from src/components/StatusBar/components/daterangepicker/components/TimeLabel.tsx
rename to packages/main/src/components/StatusBar/components/daterangepicker/components/TimeLabel.tsx
index 692d29f5..7c2e222a 100644
--- a/src/components/StatusBar/components/daterangepicker/components/TimeLabel.tsx
+++ b/packages/main/src/components/StatusBar/components/daterangepicker/components/TimeLabel.tsx
@@ -1,7 +1,7 @@
import styled from "@emotion/styled";
import { format, isValid } from "date-fns";
import { ThemeProvider } from "@emotion/react";
-import { useTheme } from "../../../../DataViews/components/QueryBuilder/hooks";
+import useTheme from "@ui/theme/useTheme"
const TimeLabelCont = styled.div`
display: flex;
diff --git a/src/components/StatusBar/components/daterangepicker/components/styles.ts b/packages/main/src/components/StatusBar/components/daterangepicker/components/styles.ts
similarity index 74%
rename from src/components/StatusBar/components/daterangepicker/components/styles.ts
rename to packages/main/src/components/StatusBar/components/daterangepicker/components/styles.ts
index c1f1da1e..3828b997 100644
--- a/src/components/StatusBar/components/daterangepicker/components/styles.ts
+++ b/packages/main/src/components/StatusBar/components/daterangepicker/components/styles.ts
@@ -1,86 +1,95 @@
-import { createTheme } from "@mui/material/styles";
-import { createStyles } from '@mui/styles';
-import store from '../../../../../store/store'
-import {themes} from '../../../../../theme/themes'
-const actTheme:'light'|'dark' = store.getState().theme
-const themeSelected = themes[actTheme]
-
-export const DayStyles = () =>
-
- createStyles({
- leftBorderRadius: {
- borderRadius: "50% 0 0 50%"
- },
- rightBorderRadius: {
- borderRadius: "0 50% 50% 0"
- },
- buttonContainer: {
- display: "flex"
- },
- button: {
- height: 30,
- width: 30,
- padding: 0
- },
- buttonText: {
- lineHeight: 1.6,
- color: themeSelected.textColor
- },
- inactive: {
- color: 'gray'
- },
- outlined: {
- border: `1px solid #11abab`
- },
- filled: {
- "&:hover": {
- backgroundColor: '#11abab',
- color: 'primary'
- },
- backgroundColor: '#11abab',
- color: 'primary'
- },
-
- highlighted: {
- backgroundColor: '#14b8b852'
- },
- contrast: {
- color: 'primary'
- }
- });
-
-export const HeadingStyles = () => createStyles({
-
- iconContainer: {
- padding: 5,
- color: themeSelected.textColor
- },
- icon: {
- padding: 10,
- color: themeSelected.textColor,
- "&:hover": {
- color: themeSelected.textColor,
- background: "none"
- }
- },
- selector: {
- color: themeSelected.textColor,
- borderBottom: `1px solid ${themeSelected.textColor}`
- }
-});
-
-
-
-export const theme = () => {
-
- const theme = store.getState().theme;
-
- return createTheme({
- palette: {
- mode: theme,
- primary: {
- main:themeSelected.textColor
- }
- }
-})
+import { createTheme } from "@mui/material/styles";
+import { createStyles } from '@mui/styles';
+import store from "@ui/store/store"
+
+import { darkTheme } from '@ui/theme/dark'
+import { lightTheme } from '@ui/theme/light'
+
+const actTheme:'light'|'dark' = store.getState().theme
+
+const themes = {
+ light: lightTheme,
+ dark: darkTheme
+}
+
+const themeSelected = themes[actTheme]
+
+export const DayStyles = () =>
+
+ createStyles({
+ leftBorderRadius: {
+ borderRadius: "50% 0 0 50%"
+ },
+ rightBorderRadius: {
+ borderRadius: "0 50% 50% 0"
+ },
+ buttonContainer: {
+ display: "flex"
+ },
+ button: {
+ height: 30,
+ width: 30,
+ padding: 0
+ },
+ maxContrast: {
+ lineHeight: 1.6,
+ color: themeSelected.contrast
+ },
+ inactive: {
+ color: 'gray'
+ },
+ outlined: {
+ border: `1px solid #11abab`
+ },
+ filled: {
+ "&:hover": {
+ backgroundColor: '#11abab',
+ color: 'primary'
+ },
+ backgroundColor: '#11abab',
+ color: 'primary'
+ },
+
+ highlighted: {
+ backgroundColor: '#14b8b852'
+ },
+ contrast: {
+ color: 'primary'
+ }
+ });
+
+export const HeadingStyles = () => createStyles({
+
+ iconContainer: {
+ padding: 5,
+ color: themeSelected.contrast
+ },
+ icon: {
+ padding: 10,
+ color: themeSelected.contrast,
+ "&:hover": {
+ color: themeSelected.contrast,
+ background: "none"
+ }
+ },
+ selector: {
+ color: themeSelected.contrast,
+ borderBottom: `1px solid ${themeSelected.contrast}`
+ }
+});
+
+
+
+export const theme = () => {
+
+ const theme = store.getState().theme;
+
+ return createTheme({
+ palette: {
+ mode: theme,
+ primary: {
+ main:themeSelected.contrast
+ }
+ }
+})
}
\ No newline at end of file
diff --git a/src/components/StatusBar/components/daterangepicker/consts.ts b/packages/main/src/components/StatusBar/components/daterangepicker/consts.ts
similarity index 100%
rename from src/components/StatusBar/components/daterangepicker/consts.ts
rename to packages/main/src/components/StatusBar/components/daterangepicker/consts.ts
diff --git a/src/components/StatusBar/components/daterangepicker/defaults.ts b/packages/main/src/components/StatusBar/components/daterangepicker/defaults.ts
similarity index 94%
rename from src/components/StatusBar/components/daterangepicker/defaults.ts
rename to packages/main/src/components/StatusBar/components/daterangepicker/defaults.ts
index 6b65c1c9..90804381 100644
--- a/src/components/StatusBar/components/daterangepicker/defaults.ts
+++ b/packages/main/src/components/StatusBar/components/daterangepicker/defaults.ts
@@ -1,51 +1,51 @@
-import {
- addDays,
- startOfWeek,
- endOfWeek,
- addWeeks,
- startOfMonth,
- endOfMonth,
- addMonths,
- startOfDay,
- endOfDay,
-} from "date-fns";
-
-const getDefaultRanges = (date:any) => [
- {
- 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:any) => [
+ {
+ 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/hooks/useOutsideRef.tsx b/packages/main/src/components/StatusBar/components/daterangepicker/hooks/useOutsideRef.tsx
similarity index 90%
rename from src/components/StatusBar/components/daterangepicker/hooks/useOutsideRef.tsx
rename to packages/main/src/components/StatusBar/components/daterangepicker/hooks/useOutsideRef.tsx
index 5d21e348..0c7f3c56 100644
--- a/src/components/StatusBar/components/daterangepicker/hooks/useOutsideRef.tsx
+++ b/packages/main/src/components/StatusBar/components/daterangepicker/hooks/useOutsideRef.tsx
@@ -1,9 +1,9 @@
import { useEffect, useRef } from "react";
-import { setRangeOpen } from '../../../../../actions/setRangeOpen';
+import { setRangeOpen } from '@ui/store/actions/setRangeOpen';
import { useDispatch } from 'react-redux';
export default function useOutsideRef() {
- const dispatch = useDispatch()
+ const dispatch: any = useDispatch()
const ref = useRef
(null);
const handleHideDateRange = (event:any) => {
diff --git a/src/components/StatusBar/components/daterangepicker/index.tsx b/packages/main/src/components/StatusBar/components/daterangepicker/index.tsx
similarity index 98%
rename from src/components/StatusBar/components/daterangepicker/index.tsx
rename to packages/main/src/components/StatusBar/components/daterangepicker/index.tsx
index 114c34d8..f4340fb2 100644
--- a/src/components/StatusBar/components/daterangepicker/index.tsx
+++ b/packages/main/src/components/StatusBar/components/daterangepicker/index.tsx
@@ -37,7 +37,7 @@ import MenuItem from "@mui/material/MenuItem";
import { Tooltip } from "@mui/material";
import TimeLabel from "./components/TimeLabel";
import { DatePickerButton } from "../../styled";
-import { useTheme } from "../../../DataViews/components/QueryBuilder/hooks";
+import useTheme from "@ui/theme/useTheme"
import { useMediaQuery } from "react-responsive";
import { useSelector } from "react-redux";
@@ -93,8 +93,8 @@ export const CustomMenu = (props: any) => {
}}
PaperProps={{
sx: {
- background: props.qryntheme.buttonDefault,
- color: props.qryntheme.textColor,
+ background: props.qryntheme.neutral,
+ color: props.qryntheme.contrast,
},
}}
transformOrigin={{
@@ -359,10 +359,10 @@ export function DateRangePickerMain(props: DateRangePickerProps) {
const openRight = Boolean(anchorElRight);
const handleClick = (event: any) => {
- setAnchorEl((prev) => event.currentTarget);
+ setAnchorEl(() => event.currentTarget);
};
const handleClickRight = (event: any) => {
- setAnchorElRight((prev) => event.currentTarget);
+ setAnchorElRight(() => event.currentTarget);
};
const handleClose = (e: any, direction: any, option: any) => {
setAnchorEl(null);
diff --git a/src/components/StatusBar/components/daterangepicker/utils.ts b/packages/main/src/components/StatusBar/components/daterangepicker/utils.ts
similarity index 96%
rename from src/components/StatusBar/components/daterangepicker/utils.ts
rename to packages/main/src/components/StatusBar/components/daterangepicker/utils.ts
index 5ce0d200..d2f57dde 100644
--- a/src/components/StatusBar/components/daterangepicker/utils.ts
+++ b/packages/main/src/components/StatusBar/components/daterangepicker/utils.ts
@@ -1,199 +1,199 @@
-import {
- startOfDay,
- endOfDay,
- startOfWeek,
- startOfMonth,
- endOfWeek,
- endOfMonth,
- isBefore,
- addMinutes,
- addHours,
- addDays,
- addWeeks,
- addMonths,
- isSameDay,
- isWithinInterval,
- isSameMonth,
- toDate,
- parseISO,
- isValid,
- min,
- max,
-} from "date-fns";
-import isSameMinute from "date-fns/isSameMinute";
-
-export const chunks = (array: any, size: any) => {
- return Array.from({ length: Math.ceil(array.length / size) }, (v, i) =>
- array.slice(i * size, i * size + size)
- );
-};
-
-export const combine = (...args: any) => args.filter((f: any) => f).join(" ");
-
-// Date
-export const getDaysInMonth = (date: any) => {
- const startWeek = startOfWeek(startOfMonth(date));
- const endWeek = endOfWeek(endOfMonth(date));
- const days = [];
- for (let curr = startWeek; isBefore(curr, endWeek); ) {
- days.push(curr);
- curr = addDays(curr, 1);
- }
- return days;
-};
-
-export const isStartOfRange = ({ dateStart }: { dateStart: any }, day: any) =>
- dateStart && isSameDay(day, dateStart);
-
-export const isEndOfRange = ({ dateEnd }: { dateEnd: any }, day: any) =>
- dateEnd && isSameDay(day, dateEnd);
-
-export const inDateRange = (
- { dateStart, dateEnd }: { dateStart: any; dateEnd: any },
- day: any
-) =>
- dateStart &&
- dateEnd &&
- (isWithinInterval(day, {
- start: dateStart,
- end: dateEnd,
- }) ||
- isSameDay(day, dateStart) ||
- isSameDay(day, dateEnd));
-
-export const isRangeSameDay = ({ dateStart, dateEnd }:{ dateStart:any; dateEnd:any }) => {
- if (dateStart && dateEnd) {
- return isSameDay(dateStart, dateEnd);
- }
- return false;
-};
-
-export const findRange = (dateRange:any) => {
- return getDefaultRanges(new Date()).find((range) =>
- isSameRange(dateRange, range)
- )?.label;
-};
-export const findRangeByLabel = (label:any) => {
- return getDefaultRanges(new Date()).find((range) => range.label === label);
-};
-
-export const parseOptionalDate = (date:any, defaultValue:any) => {
- if (date instanceof Date) {
- const parsed = toDate(date);
- if (isValid(parsed)) {
- return parsed;
- }
- }
-
- if (date instanceof String) {
- const parsed = parseISO(date.toString());
- if (isValid(parsed)) {
- return parsed;
- }
- } else {
- return defaultValue;
- }
-};
-
-export const generateYears = (relativeTo:any, count:any) => {
- const half = Math.floor(count / 2);
- return Array(count)
- ?.fill(0)
- ?.map((y, i) => relativeTo?.getFullYear() - half + i);
-};
-
-export const isSameRange = (first:any, second:any) => {
- const { dateStart: fStart, dateEnd: fEnd, label: fLabel } = first;
- const { dateStart: sStart, dateEnd: sEnd, label: sLabel } = second;
- if (fLabel === sLabel) {
- return true;
- } else if (fStart && sStart && fEnd && sEnd) {
- return isSameMinute(fStart, sStart) && isSameMinute(fEnd, sEnd);
- }
- return false;
-};
-
-export const getValidatedMonths = (range:any, minDate:any, maxDate:any) => {
- let { dateStart, dateEnd } = range;
- if (dateStart && dateEnd) {
- const newStart = max([dateStart, minDate]);
- const newEnd = min([dateEnd, maxDate]);
-
- return [
- newStart,
- isSameMonth(newStart, newEnd) ? addMonths(newStart, 1) : newEnd,
- ];
- } else {
- return [dateStart, dateEnd];
- }
-};
-
-export const getDefaultRanges = (date:any) => [
- {
- label: "Last 5 minutes",
- dateStart: addMinutes(date, -5),
- dateEnd: date,
- },
- {
- label: "Last 15 minutes",
- dateStart: addMinutes(date, -15),
- dateEnd: date,
- },
- {
- label: "Last 30 minutes",
- dateStart: addMinutes(date, -30),
- dateEnd: date,
- },
- {
- label: "Last 1 hour",
- dateStart: addHours(date, -1),
- dateEnd: date,
- },
- {
- label: "Last 3 hours",
- dateStart: addHours(date, -3),
- dateEnd: date,
- },
- {
- label: "Last 6 hours",
- dateStart: addHours(date, -6),
- dateEnd: date,
- },
- {
- label: "Last 12 hours",
- dateStart: addHours(date, -12),
- dateEnd: date,
- },
- {
- label: "Last 24 hours",
- dateStart: addHours(date, -24),
- dateEnd: date,
- },
- {
- label: "Today",
- dateStart: startOfDay(date),
- dateEnd: endOfDay(date),
- },
- {
- label: "Yesterday",
- dateStart: startOfDay(addDays(date, -1)),
- dateEnd: endOfDay(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,
- },
-];
-
-export const defaultRanges = getDefaultRanges(new Date());
+import {
+ startOfDay,
+ endOfDay,
+ startOfWeek,
+ startOfMonth,
+ endOfWeek,
+ endOfMonth,
+ isBefore,
+ addMinutes,
+ addHours,
+ addDays,
+ addWeeks,
+ addMonths,
+ isSameDay,
+ isWithinInterval,
+ isSameMonth,
+ toDate,
+ parseISO,
+ isValid,
+ min,
+ max,
+} from "date-fns";
+import isSameMinute from "date-fns/isSameMinute";
+
+export const chunks = (array: any, size: any) => {
+ return Array.from({ length: Math.ceil(array.length / size) }, (v, i) =>
+ array.slice(i * size, i * size + size)
+ );
+};
+
+export const combine = (...args: any) => args.filter((f: any) => f).join(" ");
+
+// Date
+export const getDaysInMonth = (date: any) => {
+ const startWeek = startOfWeek(startOfMonth(date));
+ const endWeek = endOfWeek(endOfMonth(date));
+ const days = [];
+ for (let curr = startWeek; isBefore(curr, endWeek); ) {
+ days.push(curr);
+ curr = addDays(curr, 1);
+ }
+ return days;
+};
+
+export const isStartOfRange = ({ dateStart }: { dateStart: any }, day: any) =>
+ dateStart && isSameDay(day, dateStart);
+
+export const isEndOfRange = ({ dateEnd }: { dateEnd: any }, day: any) =>
+ dateEnd && isSameDay(day, dateEnd);
+
+export const inDateRange = (
+ { dateStart, dateEnd }: { dateStart: any; dateEnd: any },
+ day: any
+) =>
+ dateStart &&
+ dateEnd &&
+ (isWithinInterval(day, {
+ start: dateStart,
+ end: dateEnd,
+ }) ||
+ isSameDay(day, dateStart) ||
+ isSameDay(day, dateEnd));
+
+export const isRangeSameDay = ({ dateStart, dateEnd }:{ dateStart:any; dateEnd:any }) => {
+ if (dateStart && dateEnd) {
+ return isSameDay(dateStart, dateEnd);
+ }
+ return false;
+};
+
+export const findRange = (dateRange:any) => {
+ return getDefaultRanges(new Date()).find((range) =>
+ isSameRange(dateRange, range)
+ )?.label;
+};
+export const findRangeByLabel = (label:any) => {
+ return getDefaultRanges(new Date()).find((range) => range.label === label);
+};
+
+export const parseOptionalDate = (date:any, defaultValue:any) => {
+ if (date instanceof Date) {
+ const parsed = toDate(date);
+ if (isValid(parsed)) {
+ return parsed;
+ }
+ }
+
+ if (date instanceof String) {
+ const parsed = parseISO(date.toString());
+ if (isValid(parsed)) {
+ return parsed;
+ }
+ } else {
+ return defaultValue;
+ }
+};
+
+export const generateYears = (relativeTo:any, count:any) => {
+ const half = Math.floor(count / 2);
+ return Array(count)
+ ?.fill(0)
+ ?.map((y, i) => relativeTo?.getFullYear() - half + i);
+};
+
+export const isSameRange = (first:any, second:any) => {
+ const { dateStart: fStart, dateEnd: fEnd, label: fLabel } = first;
+ const { dateStart: sStart, dateEnd: sEnd, label: sLabel } = second;
+ if (fLabel === sLabel) {
+ return true;
+ } else if (fStart && sStart && fEnd && sEnd) {
+ return isSameMinute(fStart, sStart) && isSameMinute(fEnd, sEnd);
+ }
+ return false;
+};
+
+export const getValidatedMonths = (range:any, minDate:any, maxDate:any) => {
+ let { dateStart, dateEnd } = range;
+ if (dateStart && dateEnd) {
+ const newStart = max([dateStart, minDate]);
+ const newEnd = min([dateEnd, maxDate]);
+
+ return [
+ newStart,
+ isSameMonth(newStart, newEnd) ? addMonths(newStart, 1) : newEnd,
+ ];
+ } else {
+ return [dateStart, dateEnd];
+ }
+};
+
+export const getDefaultRanges = (date:any) => [
+ {
+ label: "Last 5 minutes",
+ dateStart: addMinutes(date, -5),
+ dateEnd: date,
+ },
+ {
+ label: "Last 15 minutes",
+ dateStart: addMinutes(date, -15),
+ dateEnd: date,
+ },
+ {
+ label: "Last 30 minutes",
+ dateStart: addMinutes(date, -30),
+ dateEnd: date,
+ },
+ {
+ label: "Last 1 hour",
+ dateStart: addHours(date, -1),
+ dateEnd: date,
+ },
+ {
+ label: "Last 3 hours",
+ dateStart: addHours(date, -3),
+ dateEnd: date,
+ },
+ {
+ label: "Last 6 hours",
+ dateStart: addHours(date, -6),
+ dateEnd: date,
+ },
+ {
+ label: "Last 12 hours",
+ dateStart: addHours(date, -12),
+ dateEnd: date,
+ },
+ {
+ label: "Last 24 hours",
+ dateStart: addHours(date, -24),
+ dateEnd: date,
+ },
+ {
+ label: "Today",
+ dateStart: startOfDay(date),
+ dateEnd: endOfDay(date),
+ },
+ {
+ label: "Yesterday",
+ dateStart: startOfDay(addDays(date, -1)),
+ dateEnd: endOfDay(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,
+ },
+];
+
+export const defaultRanges = getDefaultRanges(new Date());
diff --git a/src/components/StatusBar/components/statusbarinput/StatusBarInput.tsx b/packages/main/src/components/StatusBar/components/statusbarinput/StatusBarInput.tsx
similarity index 75%
rename from src/components/StatusBar/components/statusbarinput/StatusBarInput.tsx
rename to packages/main/src/components/StatusBar/components/statusbarinput/StatusBarInput.tsx
index ad9d32c5..4c063d76 100644
--- a/src/components/StatusBar/components/statusbarinput/StatusBarInput.tsx
+++ b/packages/main/src/components/StatusBar/components/statusbarinput/StatusBarInput.tsx
@@ -1,11 +1,14 @@
import { useDispatch } from "react-redux";
import { ThemeProvider } from "@emotion/react";
-import DOMPurify from "isomorphic-dompurify";
-import { useTheme } from "../../../DataViews/components/QueryBuilder/hooks";
+import useTheme from "@ui/theme/useTheme"
+import sanitizeWithSigns from "@ui/helpers/sanitizeWithSigns";
+
+
+
export function StatusBarInput(props: any) {
const theme = useTheme();
const { label, value, dispatchAction, type } = props;
- const dispatch = useDispatch();
+ const dispatch: any = useDispatch();
const handleStatusInputChange = (e: any) => {
dispatch(dispatchAction(e.target.value));
};
@@ -15,7 +18,7 @@ export function StatusBarInput(props: any) {
{label}
onChange(e, "limit")}
- value={DOMPurify.sanitize(String(urlState.limit))}
+ value={sanitizeWithSigns(String(urlState.limit))}
labelWidth={TRACE_SEARCH_LABEL_WIDTH}
/>
@@ -282,14 +283,14 @@ export default function TracesSearch(props: any) {
label={"Min Duration"}
placeholder={"e.g. 1.2s, 100ms"}
onChange={(e: any) => onChange(e, "minDuration")}
- value={DOMPurify.sanitize(urlState.minDuration)}
+ value={sanitizeWithSigns(urlState.minDuration)}
labelWidth={TRACE_SEARCH_LABEL_WIDTH}
/>
onChange(e, "maxDuration")}
- value={DOMPurify.sanitize(urlState.maxDuration)}
+ value={sanitizeWithSigns(urlState.maxDuration)}
labelWidth={TRACE_SEARCH_LABEL_WIDTH}
/>
diff --git a/src/components/TraceSearch/TracesSwitch.tsx b/packages/main/src/components/TraceSearch/TracesSwitch.tsx
similarity index 100%
rename from src/components/TraceSearch/TracesSwitch.tsx
rename to packages/main/src/components/TraceSearch/TracesSwitch.tsx
diff --git a/src/components/TraceSearch/helpers.ts b/packages/main/src/components/TraceSearch/helpers.ts
similarity index 100%
rename from src/components/TraceSearch/helpers.ts
rename to packages/main/src/components/TraceSearch/helpers.ts
diff --git a/src/components/TraceSearch/tracesSearchUrl.ts b/packages/main/src/components/TraceSearch/tracesSearchUrl.ts
similarity index 100%
rename from src/components/TraceSearch/tracesSearchUrl.ts
rename to packages/main/src/components/TraceSearch/tracesSearchUrl.ts
diff --git a/src/components/TraceSearch/useTraceNames.ts b/packages/main/src/components/TraceSearch/useTraceNames.ts
similarity index 97%
rename from src/components/TraceSearch/useTraceNames.ts
rename to packages/main/src/components/TraceSearch/useTraceNames.ts
index 3962a7e7..b967cb6e 100644
--- a/src/components/TraceSearch/useTraceNames.ts
+++ b/packages/main/src/components/TraceSearch/useTraceNames.ts
@@ -30,7 +30,7 @@ export function useTraceNames({ id }: any) {
try {
const req = await axios.get(url, traceHeaders);
- settraceNames(req || []);
+ settraceNames(req || {});
} catch (e) {
console.log("Error at loading Span Names", e);
}
diff --git a/src/components/TraceSearch/useTraceServiceName.ts b/packages/main/src/components/TraceSearch/useTraceServiceName.ts
similarity index 97%
rename from src/components/TraceSearch/useTraceServiceName.ts
rename to packages/main/src/components/TraceSearch/useTraceServiceName.ts
index bf172bc2..06481274 100644
--- a/src/components/TraceSearch/useTraceServiceName.ts
+++ b/packages/main/src/components/TraceSearch/useTraceServiceName.ts
@@ -24,7 +24,7 @@ export function useTraceServiceName({ id }: any) {
const apiRequest = async () => {
try {
const req = await axios.get(url, traceHeaders);
- setserviceNames(req || []);
+ setserviceNames(req || {});
} catch (e) {
console.log("Error at loading Service Names", e);
}
diff --git a/src/components/styles.ts b/packages/main/src/components/styles.ts
similarity index 74%
rename from src/components/styles.ts
rename to packages/main/src/components/styles.ts
index 9ff857c0..b6d28c48 100644
--- a/src/components/styles.ts
+++ b/packages/main/src/components/styles.ts
@@ -1,4 +1,5 @@
import styled from "@emotion/styled";
+import { QrynTheme } from "@ui/theme/types";
export const MainViewStyled = styled.div`
padding-top: 5px;
@@ -7,13 +8,13 @@ export const MainViewStyled = styled.div`
display: flex;
flex:1;
flex-direction: column;
- background-color: ${({theme}: any) => theme.mainBgColor} !important;
+ background-color: ${({theme}: any) => theme.background} !important;
&::-webkit-scrollbar-corner {
background: transparent;
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
- background: ${({theme}: any) => theme.scrollbarThumb} !important;
+ background: ${({theme}: any) => theme.alphaPlusNeutral} !important;
}
`;
@@ -32,7 +33,7 @@ export const SettingCont = styled.div`
flex-direction: column;
- background: ${({ theme }: any) => theme.widgetContainer};
+ background: ${({ theme }: any) => theme.shadow};
`;
export const SettingsInputContainer = styled.div`
@@ -46,7 +47,7 @@ export const SettingsInputContainer = styled.div`
export const SettingLabel = styled.label`
font-size: 11px;
white-space: nowrap;
- color: ${({ theme }: any) => theme.textColor};
+ color: ${({ theme }:any) => theme.hardContrast};
margin-left: 10px;
`;
diff --git a/packages/main/src/index.css b/packages/main/src/index.css
new file mode 100644
index 00000000..2c3fac68
--- /dev/null
+++ b/packages/main/src/index.css
@@ -0,0 +1,69 @@
+:root {
+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+ line-height: 1.5;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #242424;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-text-size-adjust: 100%;
+}
+
+a {
+ font-weight: 500;
+ color: #646cff;
+ text-decoration: inherit;
+}
+a:hover {
+ color: #535bf2;
+}
+
+body {
+ margin: 0;
+ display: flex;
+ place-items: center;
+ min-width: 320px;
+ min-height: 100vh;
+}
+
+h1 {
+ font-size: 3.2em;
+ line-height: 1.1;
+}
+
+button {
+ border-radius: 8px;
+ border: 1px solid transparent;
+ padding: 0.6em 1.2em;
+ font-size: 1em;
+ font-weight: 500;
+ font-family: inherit;
+ background-color: #1a1a1a;
+ cursor: pointer;
+ transition: border-color 0.25s;
+}
+button:hover {
+ border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+ outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #213547;
+ background-color: #ffffff;
+ }
+ a:hover {
+ color: #747bff;
+ }
+ button {
+ background-color: #f9f9f9;
+ }
+}
diff --git a/packages/main/src/main.tsx b/packages/main/src/main.tsx
new file mode 100644
index 00000000..c7b3e270
--- /dev/null
+++ b/packages/main/src/main.tsx
@@ -0,0 +1,74 @@
+
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+
+import axios from 'axios'
+import "./scss/app.scss";
+import errorInterceptor from '@ui/helpers/error.interceptor'
+
+import { Notification } from '@ui/qrynui/notifications'
+
+import {CookiesProvider } from 'react-cookie'
+
+import { BrowserRouter, Routes, Route } from 'react-router-dom'
+import { lazy, Suspense } from 'react'
+import ScreenLoader from '@ui/views/ScreenLoader'
+
+
+import store from '@ui/store/store'
+import { Provider } from 'react-redux'
+import ProtectedRoute from './providers/ProtectedRoute'
+
+const AppRoute = lazy(()=> import('./App'))
+
+const DataSourcesRoute = lazy(()=> import ('@ui/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.createRoot(document.getElementById('root') as HTMLElement).render(
+
+
+
+
+
+
+ {" "}
+
+
+
+
+
+
+
+);
diff --git a/src/providers/ProtectedRoute.tsx b/packages/main/src/providers/ProtectedRoute.tsx
similarity index 100%
rename from src/providers/ProtectedRoute.tsx
rename to packages/main/src/providers/ProtectedRoute.tsx
diff --git a/src/scss/app.scss b/packages/main/src/scss/app.scss
similarity index 100%
rename from src/scss/app.scss
rename to packages/main/src/scss/app.scss
diff --git a/src/scss/base/body.scss b/packages/main/src/scss/base/body.scss
similarity index 100%
rename from src/scss/base/body.scss
rename to packages/main/src/scss/base/body.scss
diff --git a/src/scss/base/forms.scss b/packages/main/src/scss/base/forms.scss
similarity index 100%
rename from src/scss/base/forms.scss
rename to packages/main/src/scss/base/forms.scss
diff --git a/src/scss/base/links.scss b/packages/main/src/scss/base/links.scss
similarity index 100%
rename from src/scss/base/links.scss
rename to packages/main/src/scss/base/links.scss
diff --git a/src/scss/modules/date-range-picker.scss b/packages/main/src/scss/modules/date-range-picker.scss
similarity index 100%
rename from src/scss/modules/date-range-picker.scss
rename to packages/main/src/scss/modules/date-range-picker.scss
diff --git a/src/scss/modules/filter.scss b/packages/main/src/scss/modules/filter.scss
similarity index 100%
rename from src/scss/modules/filter.scss
rename to packages/main/src/scss/modules/filter.scss
diff --git a/src/scss/modules/log-search.scss b/packages/main/src/scss/modules/log-search.scss
similarity index 100%
rename from src/scss/modules/log-search.scss
rename to packages/main/src/scss/modules/log-search.scss
diff --git a/src/scss/modules/log-view.scss b/packages/main/src/scss/modules/log-view.scss
similarity index 100%
rename from src/scss/modules/log-view.scss
rename to packages/main/src/scss/modules/log-view.scss
diff --git a/src/scss/modules/notifications.scss b/packages/main/src/scss/modules/notifications.scss
similarity index 100%
rename from src/scss/modules/notifications.scss
rename to packages/main/src/scss/modules/notifications.scss
diff --git a/src/scss/modules/query-bar.scss b/packages/main/src/scss/modules/query-bar.scss
similarity index 100%
rename from src/scss/modules/query-bar.scss
rename to packages/main/src/scss/modules/query-bar.scss
diff --git a/src/scss/modules/status-bar.scss b/packages/main/src/scss/modules/status-bar.scss
similarity index 100%
rename from src/scss/modules/status-bar.scss
rename to packages/main/src/scss/modules/status-bar.scss
diff --git a/src/scss/tools/mixins.scss b/packages/main/src/scss/tools/mixins.scss
similarity index 100%
rename from src/scss/tools/mixins.scss
rename to packages/main/src/scss/tools/mixins.scss
diff --git a/src/scss/variables/colors.scss b/packages/main/src/scss/variables/colors.scss
similarity index 100%
rename from src/scss/variables/colors.scss
rename to packages/main/src/scss/variables/colors.scss
diff --git a/src/scss/vendor/reset.scss b/packages/main/src/scss/vendor/reset.scss
similarity index 100%
rename from src/scss/vendor/reset.scss
rename to packages/main/src/scss/vendor/reset.scss
diff --git a/packages/main/src/vite-env.d.ts b/packages/main/src/vite-env.d.ts
new file mode 100644
index 00000000..11f02fe2
--- /dev/null
+++ b/packages/main/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// [] = [
- {
- header: "Time",
- accessorKey: "time",
- cell: (props: any) => timeFormatter(props),
- },
- { header: "Metric", accessorKey: "metric" },
- {
- header: "Value",
- accessorKey: "value",
- },
- ];
-
- const rows = getMatrixTableRows(data);
-
- let dataRows = [];
-
- for (let row of rows) {
- dataRows.push(row.rows);
- }
-
- const dr = sortBy(dataRows.flat(), (row) => row.time);
- return {
- columnsData: headers,
- dataRows: dr,
- total: dr.length,
- };
-}
-
-function setDataView(panel: string) {
- if (panel === "left") {
- return {
- state: "leftDataView",
- action: setLeftDataView,
- };
- } else {
- return {
- state: "rightDataView",
- action: setRightDataView,
- };
- }
-}
-
-export function parseMatrixResponse(responseProps: QueryResult) {
- const {
- result,
- debugMode,
- dispatch,
- panel,
- id,
- raw,
- dsType,
- isLogsVolume,
- } = responseProps;
- // here should set the table response
- const tableResult = getMatrixTableResult(result);
- // get current dataview and update action
- const dataView = setDataView(panel);
- try {
- const idResult = addNanoId(result);
- // get table total as chart total is less that table total rows
- const panelResult = {
- id,
- type: "matrix",
- tableData: tableResult,
- data: idResult,
- dsType,
- raw,
- total: idResult?.length || 0,
- };
-
- // add this data to previous
- const { action, state } = dataView;
-
- const prevDV = store.getState()?.[state];
-
- if (prevDV.some((dv: any) => dv.id === panelResult.id)) {
- let newPanel = [];
- // if not previous stream type and no logsVolume active
- if (isLogsVolume) {
- newPanel = [...prevDV];
- let mapped = newPanel.map((m) => {
- if (m.id === id) {
- return {
- ...m,
- logsVolumeData: idResult,
- total: idResult.length,
- };
- } else {
- return m;
- }
- });
- dispatch(action([]));
- dispatch(action(mapped));
- } else {
- dispatch(action([]));
- const filtered = prevDV.filter(
- (dv: any) => dv.id !== panelResult.id
- );
- newPanel = [...filtered, { ...panelResult }];
- dispatch(action(newPanel));
- }
- } else {
- let newPanel = [...prevDV, panelResult];
- dispatch(action(newPanel));
- }
- } catch (e) {
- if (debugMode)
- console.log(
- "🚧 getData / getting an error from rendering matrix type streams"
- );
- console.log(e);
- }
-}
+import { QueryResult } from "../types";
+import { addNanoId } from "./addNanoId";
+import moment from "moment";
+import { sortBy } from "lodash";
+import { setLeftDataView } from "../setLeftDataView";
+import { setRightDataView } from "../setRightDataView";
+import { ColumnDef } from "@tanstack/react-table";
+import store from "@ui/store/store";
+/**
+ *
+ * @param responseProps : QueryResult
+ * process restult type: matrix
+ *
+ */
+
+// add here a table parser for matrix type responses/
+// add labels selector for matrix type responses
+
+// headers for matrix :
+// time / value
+
+function timeFormatter(props: any) {
+ return moment(props.getValue()*1000).format(
+ "YYYY-MM-DDTHH:mm:ss.SSZ"
+ );
+}
+
+export function getMatrixTableRows(data: any[]) {
+ return data.map(({ metric, values }: { metric: object; values: [] }) => ({
+ metric: JSON.stringify(metric),
+ rows: values.map(([time, value]: [string, string]) => ({
+ time,
+ metric: JSON.stringify(metric),
+ value,
+ })),
+ get rowsLength() {
+ return this.rows?.length;
+ },
+ get title() {
+ return `'${this.metric}' (${this.rowsLength})`;
+ },
+ }));
+}
+
+export function getMatrixTableResult(data: any[]) {
+ const headers: ColumnDef[] = [
+ {
+ header: "Time",
+ accessorKey: "time",
+ cell: (data: any) => timeFormatter(data),
+ },
+ { header: "Metric", accessorKey: "metric" },
+ {
+ header: "Value",
+ accessorKey: "value",
+ },
+ ];
+
+ const rows = getMatrixTableRows(data);
+
+ let dataRows = [];
+
+ for (let row of rows) {
+ dataRows.push(row.rows);
+ }
+
+ const dr = sortBy(dataRows.flat(), (row) => row.time);
+ return {
+ columnsData: headers,
+ dataRows: dr,
+ total: dr.length,
+ };
+}
+
+function setDataView(panel: string) {
+ if (panel === "left") {
+ return {
+ state: "leftDataView",
+ action: setLeftDataView,
+ };
+ } else {
+ return {
+ state: "rightDataView",
+ action: setRightDataView,
+ };
+ }
+}
+
+export function parseMatrixResponse(responseProps: QueryResult) {
+ const {
+ result,
+ debugMode,
+ dispatch,
+ panel,
+ id,
+ raw,
+ dsType,
+ isLogsVolume,
+ } = responseProps;
+ // here should set the table response
+ const tableResult = getMatrixTableResult(result);
+ // get current dataview and update action
+ const dataView = setDataView(panel);
+ try {
+ const idResult = addNanoId(result);
+ // get table total as chart total is less that table total rows
+ const panelResult = {
+ id,
+ type: "matrix",
+ tableData: tableResult,
+ data: idResult,
+ dsType,
+ raw,
+ total: idResult?.length || 0,
+ };
+
+ // add this data to previous
+ const { action, state } = dataView;
+
+ const prevDV = store.getState()?.[state];
+
+ if (prevDV.some((dv: any) => dv.id === panelResult.id)) {
+ let newPanel = [];
+ // if not previous stream type and no logsVolume active
+ if (isLogsVolume) {
+ newPanel = [...prevDV];
+ let mapped = newPanel.map((m) => {
+ if (m.id === id) {
+ return {
+ ...m,
+ logsVolumeData: idResult,
+ total: idResult.length,
+ };
+ } else {
+ return m;
+ }
+ });
+ dispatch(action([]));
+ dispatch(action(mapped));
+ } else {
+ dispatch(action([]));
+ const filtered = prevDV.filter(
+ (dv: any) => dv.id !== panelResult.id
+ );
+ newPanel = [...filtered, { ...panelResult }];
+ dispatch(action(newPanel));
+ }
+ } else {
+ let newPanel = [...prevDV, panelResult];
+ dispatch(action(newPanel));
+ }
+ } catch (e) {
+ if (debugMode)
+ console.log(
+ "🚧 getData / getting an error from rendering matrix type streams"
+ );
+ console.log(e);
+ }
+}
diff --git a/src/actions/helpers/parseResponse.ts b/packages/main/store/actions/helpers/parseResponse.ts
similarity index 95%
rename from src/actions/helpers/parseResponse.ts
rename to packages/main/store/actions/helpers/parseResponse.ts
index 9b3b2b6c..6d2830f2 100644
--- a/src/actions/helpers/parseResponse.ts
+++ b/packages/main/store/actions/helpers/parseResponse.ts
@@ -1,124 +1,124 @@
-import { Stream, Message, QueryResultType, QueryDirection } from "../types";
-import store from "../../store/store";
-
-import { nanoid } from "nanoid";
-import { parseVectorResponse } from "./parseVectorResponse";
-import { parseMatrixResponse } from "./parseMatrixResponse";
-import { parseStreamResponse } from "./parseStreamResponse";
-import { fromNanoSec } from "./timeParser";
-import { parseTracesResponse } from "./parseTracesResponse";
-import { parseFluxResponse } from "./parseFluxResponse";
-const { debugMode } = store.getState();
-
-/**
- *
- * @param cb
- * @returns async cb
- */
-
-export async function getAsyncResponse(
- cb: Function //: callback dispatch function
-) {
- return await cb;
-}
-
-/**
- *
- * @param messages
- * @returns messages sorted by timestamp
- */
-
-export function sortMessagesByTimestamp(
- messages: Message[],
- direction: QueryDirection
-) {
- if (direction === "forward") {
- return sortMessagesByTimestampAsc(messages);
- }
- return sortMessagesByTimestampDesc(messages);
-}
-
-export function sortMessagesByTimestampAsc(messages: Message[]) {
- const startTime = performance.now();
- const mess = messages?.sort((a, b) => a.timestamp - b.timestamp);
- const duration = performance.now() - startTime;
- if (debugMode)
- console.log("🚧 getData / sorting logs took: ", duration, " ms");
- return mess;
-}
-
-export function sortMessagesByTimestampDesc(messages: Message[]) {
- const startTime = performance.now();
- const mess = messages?.sort((a, b) => b.timestamp - a.timestamp);
- const duration = performance.now() - startTime;
- if (debugMode)
- console.log("🚧 getData / sorting logs took: ", duration, " ms");
- return mess;
-}
-
-/**
- *
- * @param streams
- * @returns streams parsed as message tyoe objects
- */
-
-export function mapStreams(
- streams: any[],
- direction: QueryDirection = "backwards"
-) {
- const startTime = performance.now();
- let messages: Message[] = [];
-
- streams?.forEach((stream: Stream) => {
- stream.values.forEach(([ts, text], i) => {
- messages.push({
- type: "stream",
- timestamp: fromNanoSec(ts),
- text,
- tags: stream.stream || {},
- isShowTs: true,
- isBuilder: false,
- showLabels: false,
- id: nanoid(),
- });
- });
- });
-
- const duration = performance.now() - startTime;
-
- if (debugMode)
- console.log("🚧 getData / mapping logs took: ", duration, " ms");
- return sortMessagesByTimestamp(messages, direction);
-}
-
-/**
- *
- * @param responseProps : QueryResult props to be parsed
- */
-
-export async function parseResponse(responseProps: any) {
- const { type }: { type: QueryResultType } = responseProps;
-
- switch (type) {
- case "streams":
- await parseStreamResponse(responseProps);
- break;
- case "vector":
- await parseVectorResponse(responseProps);
- break;
- case "matrix":
- await parseMatrixResponse(responseProps);
- break;
- case "scalar":
- await parseMatrixResponse(responseProps);
- break;
- case "flux":
- await parseFluxResponse(responseProps);
- break;
- case "traces":
- await parseTracesResponse(responseProps);
- break;
- default:
- await parseStreamResponse(responseProps);
- }
-}
+import { Stream, Message, QueryResultType, QueryDirection } from "../types";
+import store from "@ui/store/store";
+
+import { nanoid } from "nanoid";
+import { parseVectorResponse } from "./parseVectorResponse";
+import { parseMatrixResponse } from "./parseMatrixResponse";
+import { parseStreamResponse } from "./parseStreamResponse";
+import { fromNanoSec } from "./timeParser";
+import { parseTracesResponse } from "./parseTracesResponse";
+import { parseFluxResponse } from "./parseFluxResponse";
+const { debugMode } = store.getState();
+
+/**
+ *
+ * @param cb
+ * @returns async cb
+ */
+
+export async function getAsyncResponse(
+ cb: Function //: callback dispatch function
+) {
+ return await cb;
+}
+
+/**
+ *
+ * @param messages
+ * @returns messages sorted by timestamp
+ */
+
+export function sortMessagesByTimestamp(
+ messages: Message[],
+ direction: QueryDirection
+) {
+ if (direction === "forward") {
+ return sortMessagesByTimestampAsc(messages);
+ }
+ return sortMessagesByTimestampDesc(messages);
+}
+
+export function sortMessagesByTimestampAsc(messages: Message[]) {
+ const startTime = performance.now();
+ const mess = messages?.sort((a, b) => a.timestamp - b.timestamp);
+ const duration = performance.now() - startTime;
+ if (debugMode)
+ console.log("🚧 getData / sorting logs took: ", duration, " ms");
+ return mess;
+}
+
+export function sortMessagesByTimestampDesc(messages: Message[]) {
+ const startTime = performance.now();
+ const mess = messages?.sort((a, b) => b.timestamp - a.timestamp);
+ const duration = performance.now() - startTime;
+ if (debugMode)
+ console.log("🚧 getData / sorting logs took: ", duration, " ms");
+ return mess;
+}
+
+/**
+ *
+ * @param streams
+ * @returns streams parsed as message tyoe objects
+ */
+
+export function mapStreams(
+ streams: any[],
+ direction: QueryDirection = "backwards"
+) {
+ const startTime = performance.now();
+ let messages: Message[] = [];
+
+ streams?.forEach((stream: Stream) => {
+ stream.values.forEach(([ts, text], i) => {
+ messages.push({
+ type: "stream",
+ timestamp: fromNanoSec(ts),
+ text,
+ tags: stream.stream || {},
+ isShowTs: true,
+ isBuilder: false,
+ showLabels: false,
+ id: nanoid(),
+ });
+ });
+ });
+
+ const duration = performance.now() - startTime;
+
+ if (debugMode)
+ console.log("🚧 getData / mapping logs took: ", duration, " ms");
+ return sortMessagesByTimestamp(messages, direction);
+}
+
+/**
+ *
+ * @param responseProps : QueryResult props to be parsed
+ */
+
+export async function parseResponse(responseProps: any) {
+ const { type }: { type: QueryResultType } = responseProps;
+
+ switch (type) {
+ case "streams":
+ await parseStreamResponse(responseProps);
+ break;
+ case "vector":
+ await parseVectorResponse(responseProps);
+ break;
+ case "matrix":
+ await parseMatrixResponse(responseProps);
+ break;
+ case "scalar":
+ await parseMatrixResponse(responseProps);
+ break;
+ case "flux":
+ await parseFluxResponse(responseProps);
+ break;
+ case "traces":
+ await parseTracesResponse(responseProps);
+ break;
+ default:
+ await parseStreamResponse(responseProps);
+ }
+}
diff --git a/src/actions/helpers/parseStreamResponse.tsx b/packages/main/store/actions/helpers/parseStreamResponse.tsx
similarity index 94%
rename from src/actions/helpers/parseStreamResponse.tsx
rename to packages/main/store/actions/helpers/parseStreamResponse.tsx
index b599b2b1..88fe975d 100644
--- a/src/actions/helpers/parseStreamResponse.tsx
+++ b/packages/main/store/actions/helpers/parseStreamResponse.tsx
@@ -1,229 +1,229 @@
-import { sortBy } from "lodash";
-import setIsEmptyView from "../setIsEmptyView";
-import setLogs from "../setLogs";
-import { setQueryTime } from "../setQueryTime";
-import { QueryResult } from "../types";
-import {
- getAsyncResponse,
- mapStreams,
- sortMessagesByTimestamp,
-} from "./parseResponse";
-
-import moment from "moment";
-import { setLeftDataView } from "../setLeftDataView";
-import { setRightDataView } from "../setRightDataView";
-import store from "../../store/store";
-import { ColumnDef } from "@tanstack/react-table";
-function timeFormatter(props: any) {
- return moment(parseInt(props.getValue()) / 1000000).format(
- "YYYY-MM-DDTHH:mm:ss.SSZ"
- );
-}
-
-export function getStreamTableRows(data: any[]) {
- return data?.map(({ stream, values }: { stream: object; values: [] }) => ({
- stream: `${JSON.stringify(stream)}`,
- rows: values?.map(([time, log]: [string, string]) => ({
- time,
- stream: JSON.stringify(stream),
- log,
- })),
- get rowsLength(): number {
- return this?.rows?.length || 0;
- },
- }));
-}
-
-export function formattedWhiteSpaceCell(info: any) {
- return {info.getValue()} ;
-}
-
-export function getStreamTableResult(data: any[]) {
- const headers: ColumnDef[] = [
- {
- id: "time",
- header: "Time",
- accessorKey: "time",
- cell: (info: any) => timeFormatter(info),
- },
- {
- id: "stream",
- header: "Stream",
- accessorKey: "stream",
- cell: (info: any) => formattedWhiteSpaceCell(info),
- },
- {
- id: "log",
- accessorKey: "log",
- header: "Log",
- cell: (info: any) => formattedWhiteSpaceCell(info),
- },
- ];
-
- const rows = getStreamTableRows(data);
-
- const length = rows?.length || 0;
- let dataRows = [];
-
- if (length > 0) {
- for (let row of rows) {
- dataRows.push(row.rows);
- }
- }
-
- return {
- columnsData: headers,
- dataRows: sortBy(dataRows.flat(), (row) => row.time),
-
- length,
- };
-}
-
-// set current state and action to target dataview
-
-function setDataView(panel: string) {
- if (panel === "left") {
- return {
- state: "leftDataView",
- action: setLeftDataView,
- };
- } else {
- return {
- state: "rightDataView",
- action: setRightDataView,
- };
- }
-}
-
-export function parseStreamResponse(responseProps: QueryResult) {
- const {
- result,
- raw,
- time,
- debugMode,
- queryType,
- panel,
- id,
- dispatch,
- dsType,
- direction,
- isLogsVolume,
- } = responseProps;
- // get sorted messages
- const messages = mapStreams(result, direction);
- // get current dataView and update action
- const dataView = setDataView(panel);
- const tableResult = getStreamTableResult(result);
-
- const messSorted = sortMessagesByTimestamp(messages, direction);
- function unite(args: any) {
- return [].concat.apply([], args).filter(function (elem, index, self) {
- return self.indexOf(elem) === index;
- });
- }
-
- let panelResult = {
- id,
- type: "stream",
- tableData: {},
- data: [{}],
- raw: "[]",
- labels: [],
- total: 0,
- isLogsVolume,
- dsType,
- };
-
- if (messSorted) {
- try {
- getAsyncResponse(dispatch(setLogs(messSorted || []))).then(() => {
- if (messSorted.length === 0) {
- if (debugMode)
- console.log("🚧 getData / getting no messages sorted");
- dispatch(setIsEmptyView(true));
- }
-
- dispatch(setIsEmptyView(false));
- });
- const labelsList = Array.from(
- new Set(messSorted?.map((m) => Object.keys(m.tags)))
- );
- const labels = unite(labelsList);
- panelResult = {
- id,
- type: "stream",
- dsType,
- tableData: tableResult,
- data: messSorted,
- isLogsVolume,
- raw,
- labels: [...labels],
- total: messSorted?.length || 0,
- };
-
- // new action
- const { action, state } = dataView;
- const prevDV = store.getState()?.[state];
- if (prevDV.some((dv: any) => dv.id === panelResult.id)) {
- let newPanel = [];
- if (isLogsVolume) {
- newPanel = [...prevDV];
-
- let mapped: any = newPanel.map((m: any) => {
- if (m.id === id) {
- let logsVolumeData: any = [];
-
- if (
- m?.logsVolumeData &&
- m.logsVolumeData?.length > 0
- ) {
- logsVolumeData = [...m.logsVolumeData];
- }
-
- let prevStream = { ...panelResult };
-
- return { ...prevStream, logsVolumeData };
- } else {
- return m;
- }
- });
- dispatch(action([]));
- dispatch(action(mapped));
- } else {
- let newPanel = [];
- dispatch(action([]));
- const filtered = prevDV.filter(
- (dv: any) => dv.id !== panelResult.id
- );
- newPanel = [...filtered, { ...panelResult }];
- dispatch(action(newPanel));
- }
- } else {
- let newPanel = [...prevDV, panelResult];
- dispatch(action(newPanel));
- }
-
- //
-
- if (queryType === "instant") {
- dispatch(setQueryTime(time));
- }
- } catch (e) {
- console.log(e);
- }
- } else {
- const { action, state } = dataView;
- const prevDV = store.getState()?.[state];
- if (prevDV.some((dv: any) => dv.id === panelResult.id)) {
- let newPanel = [];
- dispatch(action([]));
- const filtered =
- prevDV?.filter((dv: any) => dv.id !== panelResult.id) || [];
- newPanel = [...filtered, { ...panelResult }];
- dispatch(action(newPanel));
- } else {
- let newPanel = [...prevDV, panelResult];
- dispatch(action(newPanel));
- }
- }
-}
+import { sortBy } from "lodash";
+import setIsEmptyView from "../setIsEmptyView";
+import setLogs from "../setLogs";
+import { setQueryTime } from "../setQueryTime";
+import { QueryResult } from "../types";
+import {
+ getAsyncResponse,
+ mapStreams,
+ sortMessagesByTimestamp,
+} from "./parseResponse";
+
+import moment from "moment";
+import { setLeftDataView } from "../setLeftDataView";
+import { setRightDataView } from "../setRightDataView";
+import store from "@ui/store/store";
+import { ColumnDef } from "@tanstack/react-table";
+function timeFormatter(props: any) {
+ return moment(parseInt(props.getValue()) / 1000000).format(
+ "YYYY-MM-DDTHH:mm:ss.SSZ"
+ );
+}
+
+export function getStreamTableRows(data: any[]) {
+ return data?.map(({ stream, values }: { stream: object; values: [] }) => ({
+ stream: `${JSON.stringify(stream)}`,
+ rows: values?.map(([time, log]: [string, string]) => ({
+ time,
+ stream: JSON.stringify(stream),
+ log,
+ })),
+ get rowsLength(): number {
+ return this?.rows?.length || 0;
+ },
+ }));
+}
+
+export function formattedWhiteSpaceCell(info: any) {
+ return {info.getValue()} ;
+}
+
+export function getStreamTableResult(data: any[]) {
+ const headers: ColumnDef[] = [
+ {
+ id: "time",
+ header: "Time",
+ accessorKey: "time",
+ cell: (info: any) => timeFormatter(info),
+ },
+ {
+ id: "stream",
+ header: "Stream",
+ accessorKey: "stream",
+ cell: (info: any) => formattedWhiteSpaceCell(info),
+ },
+ {
+ id: "log",
+ accessorKey: "log",
+ header: "Log",
+ cell: (info: any) => formattedWhiteSpaceCell(info),
+ },
+ ];
+
+ const rows = getStreamTableRows(data);
+
+ const length = rows?.length || 0;
+ let dataRows = [];
+
+ if (length > 0) {
+ for (let row of rows) {
+ dataRows.push(row.rows);
+ }
+ }
+
+ return {
+ columnsData: headers,
+ dataRows: sortBy(dataRows.flat(), (row) => row.time),
+
+ length,
+ };
+}
+
+// set current state and action to target dataview
+
+function setDataView(panel: string) {
+ if (panel === "left") {
+ return {
+ state: "leftDataView",
+ action: setLeftDataView,
+ };
+ } else {
+ return {
+ state: "rightDataView",
+ action: setRightDataView,
+ };
+ }
+}
+
+export function parseStreamResponse(responseProps: QueryResult) {
+ const {
+ result,
+ raw,
+ time,
+ debugMode,
+ queryType,
+ panel,
+ id,
+ dispatch,
+ dsType,
+ direction,
+ isLogsVolume,
+ } = responseProps;
+ // get sorted messages
+ const messages = mapStreams(result, direction);
+ // get current dataView and update action
+ const dataView = setDataView(panel);
+ const tableResult = getStreamTableResult(result);
+
+ const messSorted = sortMessagesByTimestamp(messages, direction);
+ function unite(args: any) {
+ return [].concat.apply([], args).filter(function (elem:any, index:any, self:any) {
+ return self.indexOf(elem) === index;
+ });
+ }
+
+ let panelResult:any = {
+ id,
+ type: "stream",
+ tableData: {},
+ data: [{}],
+ raw: "[]",
+ labels: [],
+ total: 0,
+ isLogsVolume,
+ dsType,
+ };
+
+ if (messSorted) {
+ try {
+ getAsyncResponse(dispatch(setLogs(messSorted || []))).then(() => {
+ if (messSorted.length === 0) {
+ if (debugMode)
+ console.log("🚧 getData / getting no messages sorted");
+ dispatch(setIsEmptyView(true));
+ }
+
+ dispatch(setIsEmptyView(false));
+ });
+ const labelsList = Array.from(
+ new Set(messSorted?.map((m) => Object.keys(m.tags)))
+ );
+ const labels:any = unite(labelsList);
+ panelResult = {
+ id,
+ type: "stream",
+ dsType,
+ tableData: tableResult,
+ data: messSorted,
+ isLogsVolume,
+ raw,
+ labels: [...labels],
+ total: messSorted?.length || 0,
+ };
+
+ // new action
+ const { action, state } = dataView;
+ const prevDV = store.getState()?.[state];
+ if (prevDV.some((dv: any) => dv.id === panelResult.id)) {
+ let newPanel = [];
+ if (isLogsVolume) {
+ newPanel = [...prevDV];
+
+ let mapped: any = newPanel.map((m: any) => {
+ if (m.id === id) {
+ let logsVolumeData: any = [];
+
+ if (
+ m?.logsVolumeData &&
+ m.logsVolumeData?.length > 0
+ ) {
+ logsVolumeData = [...m.logsVolumeData];
+ }
+
+ let prevStream = { ...panelResult };
+
+ return { ...prevStream, logsVolumeData };
+ } else {
+ return m;
+ }
+ });
+ dispatch(action([]));
+ dispatch(action(mapped));
+ } else {
+ let newPanel = [];
+ dispatch(action([]));
+ const filtered = prevDV.filter(
+ (dv: any) => dv.id !== panelResult.id
+ );
+ newPanel = [...filtered, { ...panelResult }];
+ dispatch(action(newPanel));
+ }
+ } else {
+ let newPanel = [...prevDV, panelResult];
+ dispatch(action(newPanel));
+ }
+
+ //
+
+ if (queryType === "instant") {
+ dispatch(setQueryTime(time));
+ }
+ } catch (e) {
+ console.log(e);
+ }
+ } else {
+ const { action, state } = dataView;
+ const prevDV = store.getState()?.[state];
+ if (prevDV.some((dv: any) => dv.id === panelResult.id)) {
+ let newPanel = [];
+ dispatch(action([]));
+ const filtered =
+ prevDV?.filter((dv: any) => dv.id !== panelResult.id) || [];
+ newPanel = [...filtered, { ...panelResult }];
+ dispatch(action(newPanel));
+ } else {
+ let newPanel = [...prevDV, panelResult];
+ dispatch(action(newPanel));
+ }
+ }
+}
diff --git a/src/actions/helpers/parseTracesResponse.ts b/packages/main/store/actions/helpers/parseTracesResponse.ts
similarity index 98%
rename from src/actions/helpers/parseTracesResponse.ts
rename to packages/main/store/actions/helpers/parseTracesResponse.ts
index 60b5c02b..536786e8 100644
--- a/src/actions/helpers/parseTracesResponse.ts
+++ b/packages/main/store/actions/helpers/parseTracesResponse.ts
@@ -1,4 +1,4 @@
-import store from "../../store/store";
+import store from "@ui/store/store";
import { setLeftDataView } from "../setLeftDataView";
import { setRightDataView } from "../setRightDataView";
import { TracesResult } from "../types";
diff --git a/src/actions/helpers/parseVectorResponse.ts b/packages/main/store/actions/helpers/parseVectorResponse.ts
similarity index 95%
rename from src/actions/helpers/parseVectorResponse.ts
rename to packages/main/store/actions/helpers/parseVectorResponse.ts
index fa7537a9..1f0b1495 100644
--- a/src/actions/helpers/parseVectorResponse.ts
+++ b/packages/main/store/actions/helpers/parseVectorResponse.ts
@@ -1,225 +1,225 @@
-import moment from "moment";
-import { setColumnsData } from ".";
-import store from "../../store/store";
-import { setLeftDataView } from "../setLeftDataView";
-import { setRightDataView } from "../setRightDataView";
-import { QueryResult, TracesResult } from "../types";
-import { prepareCols, prepareFluxCols } from "./prepareCols";
-import { prepareVectorRows } from "./prepareVectorRows";
-
-/**
- *
- * @param responseProps : QueryResult
- * process restult type: vector
- *
- */
-
-function setDataView(panel: string) {
- if (panel === "left") {
- return {
- state: "leftDataView",
- action: setLeftDataView,
- };
- } else {
- return {
- state: "rightDataView",
- action: setRightDataView,
- };
- }
-}
-
-export function parseVectorResponse(responseProps: QueryResult | TracesResult) {
- const { result, debugMode, dispatch, panel, id, type, dsType, raw } =
- responseProps;
- let data = {
- panel,
- id,
- type,
- };
- if (type === "traces") {
- try {
- const colsData = prepareFluxCols(result);
-
- const timeAccessor = (result: any) => {
- const firstRow = result[0];
-
- const rowEntries = Object.entries(firstRow);
-
- if (rowEntries) {
- const timeRow = rowEntries.find(([_, val]) => {
- return moment.isDate(val);
- });
-
- return timeRow?.[0] || null;
- }
- };
-
- if (colsData.length > 0) {
- const tA = timeAccessor(result);
- const tracesData = {
- panel,
- id,
- type,
- };
-
- const columnsData = setColumnsData(
- colsData,
- type,
- tA,
- tracesData
- );
-
- const dataRows: any = prepareVectorRows(result, type);
-
- const vectorTableData = {
- columnsData,
- dataRows,
- panel,
- id,
- };
-
- if (columnsData?.length > 0 && dataRows?.length > 0) {
- const panelResult = {
- id,
- type: "vector",
- raw,
- dsType,
- data: { tableData: vectorTableData },
- tableData: vectorTableData,
- total: vectorTableData?.dataRows?.length || 0,
- };
- const dataView = setDataView(panel);
- const { action, state } = dataView;
- const prevDV = store.getState()?.[state];
-
- if (prevDV.some((dv: any) => dv.id === panelResult.id)) {
- let newPanel = [];
- dispatch(action([]));
- const filtered = prevDV.filter(
- (dv: any) => dv.id !== panelResult.id
- );
- newPanel = [...filtered, { ...panelResult }];
-
- dispatch(action(newPanel));
- } else {
- let newPanel = [...prevDV, panelResult];
- dispatch(action(newPanel));
- }
- }
- }
- } catch (e) {
- console.log(e);
- }
- } else if (type === "flux") {
- try {
- const colsData = prepareFluxCols(result);
-
- const timeAccessor = (result: any) => {
- const firstRow = result[0];
-
- const rowEntries = Object.entries(firstRow);
-
- if (rowEntries) {
- const timeRow = rowEntries.find(([_, val]) => {
- return moment.isDate(val);
- });
-
- return timeRow?.[0] || null;
- }
- };
-
- if (colsData.length > 0) {
- const tA = timeAccessor(result);
-
- const columnsData = setColumnsData(colsData, type, tA, data);
- const dataRows: any = prepareVectorRows(result, type);
-
- const vectorTableData = {
- columnsData,
- dataRows,
- panel,
- id,
- };
-
- if (columnsData?.length > 0 && dataRows?.length > 0) {
- const panelResult = {
- id,
- type: "vector",
- data: { tableData: vectorTableData },
- raw,
- dsType,
- tableData: vectorTableData,
- total: vectorTableData?.dataRows?.length || 0,
- };
- const dataView = setDataView(panel);
- const { action, state } = dataView;
- const prevDV = store.getState()?.[state];
-
- if (prevDV.some((dv: any) => dv.id === panelResult.id)) {
- let newPanel = [];
- dispatch(action([]));
- const filtered = prevDV.filter(
- (dv: any) => dv.id !== panelResult.id
- );
- newPanel = [...filtered, { ...panelResult }];
-
- dispatch(action(newPanel));
- } else {
- let newPanel = [...prevDV, panelResult];
- dispatch(action(newPanel));
- }
- }
- }
- } catch (e) {
- console.log(e);
- }
- } else {
- try {
- const colsData = prepareCols(result);
-
- if (colsData.length > 0) {
- const columnsData = setColumnsData(colsData, type, null, data);
- const dataRows: any = prepareVectorRows(result);
- const vectorTableData = {
- columnsData,
- dataRows,
- panel,
- id,
- };
-
- if (columnsData.length > 0 && dataRows.length > 0) {
- const panelResult = {
- id,
- type: "vector",
- data: { tableData: vectorTableData } || {},
- raw,
- dsType,
- tableData: vectorTableData || {},
- total: vectorTableData?.dataRows?.length || 0,
- };
- const dataView = setDataView(panel);
- const { action, state } = dataView;
- const prevDV = store.getState()?.[state];
- if (prevDV.some((dv: any) => dv.id === panelResult.id)) {
- let newPanel = [];
- dispatch(action([]));
- const filtered = prevDV.filter(
- (dv: any) => dv.id !== panelResult.id
- );
- newPanel = [...filtered, { ...panelResult }];
- dispatch(action(newPanel));
- } else {
- let newPanel = [...prevDV, panelResult];
- dispatch(action(newPanel));
- }
- }
- }
- } catch (e) {
- if (debugMode)
- console.log(
- "🚧 getData / getting an error from rendering vector type streams"
- );
- console.log(e);
- }
- }
-}
+import { isDate } from 'date-fns'
+import { setColumnsData } from ".";
+import store from "@ui/store/store";
+import { setLeftDataView } from "../setLeftDataView";
+import { setRightDataView } from "../setRightDataView";
+import { QueryResult, TracesResult } from "../types";
+import { prepareCols, prepareFluxCols } from "./prepareCols";
+import { prepareVectorRows } from "./prepareVectorRows";
+
+/**
+ *
+ * @param responseProps : QueryResult
+ * process restult type: vector
+ *
+ */
+
+function setDataView(panel: string) {
+ if (panel === "left") {
+ return {
+ state: "leftDataView",
+ action: setLeftDataView,
+ };
+ } else {
+ return {
+ state: "rightDataView",
+ action: setRightDataView,
+ };
+ }
+}
+
+export function parseVectorResponse(responseProps: QueryResult | TracesResult) {
+ const { result, debugMode, dispatch, panel, id, type, dsType, raw } =
+ responseProps;
+ let data = {
+ panel,
+ id,
+ type,
+ };
+ if (type === "traces") {
+ try {
+ const colsData = prepareFluxCols(result);
+
+ const timeAccessor = (result: any) => {
+ const firstRow = result[0];
+
+ const rowEntries = Object.entries(firstRow);
+
+ if (rowEntries) {
+ const timeRow = rowEntries.find(([_, val]) => {
+ return isDate(val);
+ });
+
+ return timeRow?.[0] || null;
+ }
+ };
+
+ if (colsData.length > 0) {
+ const tA = timeAccessor(result);
+ const tracesData = {
+ panel,
+ id,
+ type,
+ };
+
+ const columnsData = setColumnsData(
+ colsData,
+ type,
+ tA,
+ tracesData
+ );
+
+ const dataRows: any = prepareVectorRows(result, type);
+
+ const vectorTableData = {
+ columnsData,
+ dataRows,
+ panel,
+ id,
+ };
+
+ if (columnsData?.length > 0 && dataRows?.length > 0) {
+ const panelResult = {
+ id,
+ type: "vector",
+ raw,
+ dsType,
+ data: { tableData: vectorTableData },
+ tableData: vectorTableData,
+ total: vectorTableData?.dataRows?.length || 0,
+ };
+ const dataView = setDataView(panel);
+ const { action, state } = dataView;
+ const prevDV = store.getState()?.[state];
+
+ if (prevDV.some((dv: any) => dv.id === panelResult.id)) {
+ let newPanel = [];
+ dispatch(action([]));
+ const filtered = prevDV.filter(
+ (dv: any) => dv.id !== panelResult.id
+ );
+ newPanel = [...filtered, { ...panelResult }];
+
+ dispatch(action(newPanel));
+ } else {
+ let newPanel = [...prevDV, panelResult];
+ dispatch(action(newPanel));
+ }
+ }
+ }
+ } catch (e) {
+ console.log(e);
+ }
+ } else if (type === "flux") {
+ try {
+ const colsData = prepareFluxCols(result);
+
+ const timeAccessor = (result: any) => {
+ const firstRow = result[0];
+
+ const rowEntries = Object.entries(firstRow);
+
+ if (rowEntries) {
+ const timeRow = rowEntries.find(([_, val]) => {
+ return isDate(val);
+ });
+
+ return timeRow?.[0] || null;
+ }
+ };
+
+ if (colsData.length > 0) {
+ const tA = timeAccessor(result);
+
+ const columnsData = setColumnsData(colsData, type, tA, data);
+ const dataRows: any = prepareVectorRows(result, type);
+
+ const vectorTableData = {
+ columnsData,
+ dataRows,
+ panel,
+ id,
+ };
+
+ if (columnsData?.length > 0 && dataRows?.length > 0) {
+ const panelResult = {
+ id,
+ type: "vector",
+ data: { tableData: vectorTableData },
+ raw,
+ dsType,
+ tableData: vectorTableData,
+ total: vectorTableData?.dataRows?.length || 0,
+ };
+ const dataView = setDataView(panel);
+ const { action, state } = dataView;
+ const prevDV = store.getState()?.[state];
+
+ if (prevDV.some((dv: any) => dv.id === panelResult.id)) {
+ let newPanel = [];
+ dispatch(action([]));
+ const filtered = prevDV.filter(
+ (dv: any) => dv.id !== panelResult.id
+ );
+ newPanel = [...filtered, { ...panelResult }];
+
+ dispatch(action(newPanel));
+ } else {
+ let newPanel = [...prevDV, panelResult];
+ dispatch(action(newPanel));
+ }
+ }
+ }
+ } catch (e) {
+ console.log(e);
+ }
+ } else {
+ try {
+ const colsData = prepareCols(result);
+
+ if (colsData.length > 0) {
+ const columnsData = setColumnsData(colsData, type, null, data);
+ const dataRows: any = prepareVectorRows(result);
+ const vectorTableData = {
+ columnsData,
+ dataRows,
+ panel,
+ id,
+ };
+
+ if (columnsData.length > 0 && dataRows.length > 0) {
+ const panelResult = {
+ id,
+ type: "vector",
+ data: { tableData: vectorTableData } || {},
+ raw,
+ dsType,
+ tableData: vectorTableData || {},
+ total: vectorTableData?.dataRows?.length || 0,
+ };
+ const dataView = setDataView(panel);
+ const { action, state } = dataView;
+ const prevDV = store.getState()?.[state];
+ if (prevDV.some((dv: any) => dv.id === panelResult.id)) {
+ let newPanel = [];
+ dispatch(action([]));
+ const filtered = prevDV.filter(
+ (dv: any) => dv.id !== panelResult.id
+ );
+ newPanel = [...filtered, { ...panelResult }];
+ dispatch(action(newPanel));
+ } else {
+ let newPanel = [...prevDV, panelResult];
+ dispatch(action(newPanel));
+ }
+ }
+ }
+ } catch (e) {
+ if (debugMode)
+ console.log(
+ "🚧 getData / getting an error from rendering vector type streams"
+ );
+ console.log(e);
+ }
+ }
+}
diff --git a/src/actions/helpers/prepareCols.ts b/packages/main/store/actions/helpers/prepareCols.ts
similarity index 100%
rename from src/actions/helpers/prepareCols.ts
rename to packages/main/store/actions/helpers/prepareCols.ts
diff --git a/src/actions/helpers/prepareTableView.ts b/packages/main/store/actions/helpers/prepareTableView.ts
similarity index 94%
rename from src/actions/helpers/prepareTableView.ts
rename to packages/main/store/actions/helpers/prepareTableView.ts
index c520d9a4..1b8bfa6d 100644
--- a/src/actions/helpers/prepareTableView.ts
+++ b/packages/main/store/actions/helpers/prepareTableView.ts
@@ -1,15 +1,15 @@
-//prepare table view for response types:
-// stream
-// vector
-// matrix
-
-type StreamLogLine = [string,string]
-
-type StreamResult = {
- stream: Object;
- values:StreamLogLine[] // ts / log line
-}
-
-export default function prepareTableView(data:any){
- return data
-}
+//prepare table view for response types:
+// stream
+// vector
+// matrix
+
+type StreamLogLine = [string,string]
+
+type StreamResult = {
+ stream: Object;
+ values:StreamLogLine[] // ts / log line
+}
+
+export default function prepareTableView(data:any){
+ return data
+}
diff --git a/src/actions/helpers/prepareVectorRows.ts b/packages/main/store/actions/helpers/prepareVectorRows.ts
similarity index 100%
rename from src/actions/helpers/prepareVectorRows.ts
rename to packages/main/store/actions/helpers/prepareVectorRows.ts
diff --git a/src/actions/helpers/processResponse.ts b/packages/main/store/actions/helpers/processResponse.ts
similarity index 95%
rename from src/actions/helpers/processResponse.ts
rename to packages/main/store/actions/helpers/processResponse.ts
index f37368fe..b94dc951 100644
--- a/src/actions/helpers/processResponse.ts
+++ b/packages/main/store/actions/helpers/processResponse.ts
@@ -1,197 +1,197 @@
-import getTimeParams from "./getTimeParams";
-import { QueryDirection, QueryResult, QueryType, TracesResult } from "../types";
-import store from "../../store/store";
-import setIsEmptyView from "../setIsEmptyView";
-import { parseResponse } from "./parseResponse";
-import { resetNoData } from "./resetNoData";
-import setResponseType from "../setResponseType";
-import { convertFlux } from "./convertFlux";
-import { setLeftPanel } from "../setLeftPanel";
-import { setRightPanel } from "../setRightPanel";
-
-export function setPanelData(panel: string, data: any) {
- if (panel === "left") {
- return setLeftPanel(data);
- } else {
- return setRightPanel(data);
- }
-}
-
-export const resetTraceData = (
- type: string,
- dispatch: Function,
- panel: string,
- id: string,
- direction: QueryDirection,
- queryType: QueryType
-) => {
- const { time } = getTimeParams(type, id, panel);
- const { debugMode } = store.getState();
-
- const resultQuery: TracesResult = {
- result: { resourceSpans: [], result: [], length: 0 },
- raw: [],
- time,
- debugMode,
- dispatch,
- type: "traces",
- dsType: type,
- panel,
- id,
- ts: Date.now(),
- queryType,
- open:true
- };
- parseResponse(resultQuery);
-};
-export async function processResponse(
- type: string,
- response: any,
- dispatch: Function,
- panel: string,
- id: string,
- direction: QueryDirection,
- queryType: QueryType,
- isLogsVolume?: boolean
-) {
- const { time } = getTimeParams(type, id, panel);
- const { debugMode } = store.getState();
- if (type === "traces") {
- if (
- queryType === "trace-search" &&
- response?.data?.traces?.length > 0
- ) {
- const resultQuery: TracesResult = {
- result: response.data.traces || [],
- raw: response.data,
- time,
- debugMode,
- dispatch,
- dsType: type,
- type,
- panel,
- open:true,
- id,
- ts: Date.now(),
- queryType,
- };
- parseResponse(resultQuery);
- }
-
- if (response?.data?.resourceSpans?.length > 0) {
- const resultQuery: TracesResult = {
- result: response?.data || [],
- raw: response?.data,
- time,
- debugMode,
- dispatch,
- type,
- dsType: type,
- panel,
- open:true,
- id,
- ts: Date.now(),
- queryType,
- };
- parseResponse(resultQuery);
- }
- }
- if (type === "flux") {
- await convertFlux(response?.data).then((data) => {
- if (data?.data?.length > 0) {
- const resultQuery: QueryResult = {
- result: data.data || [],
- raw: data?.data,
- time,
- debugMode,
- queryType,
- dispatch,
- dsType: type,
- type,
- panel,
- open:true,
- id,
- ts: Date.now(),
- direction,
- };
-
- parseResponse(resultQuery);
- }
- });
- }
-
- if (response?.data?.streams?.length === 0) {
- const resultQuery: QueryResult = {
- result: [],
- raw: "[]",
- time,
- debugMode,
- queryType,
- dispatch,
- open:true,
- type: "streams",
- dsType: type,
- panel,
- id,
- ts: Date.now(),
- direction,
- isLogsVolume,
- };
-
- parseResponse(resultQuery);
- dispatch(setIsEmptyView(true));
- }
-
- // empty response would respond as data.data = {streams:[]}
- if (response?.data?.data) {
- const result = response?.data?.data?.result;
- const rtype = response?.data?.data?.resultType;
- let statsInfo = { hasStats: false, statsData: {} };
- if (
- response?.data?.data?.stats &&
- Object.keys(response?.data?.data?.stats)?.length > 0
- ) {
- statsInfo = {
- hasStats: true,
- statsData: { ...response?.data?.data?.stats },
- };
- }
-
- const actPanel = store.getState()[panel];
-
- const newPanel = actPanel?.map((m: any) => {
- if (m.id === id) {
- return {
- ...m,
- hasStats: statsInfo?.hasStats || false,
- statsData: statsInfo?.statsData || {},
- open:true,
- };
- }
- return m;
- });
- dispatch(setPanelData(panel, newPanel));
-
- dispatch(setResponseType(type));
-
- const resultQuery: QueryResult = {
- result,
- raw: response?.data?.data,
- time,
- debugMode,
- queryType,
- dispatch,
- type: rtype,
- dsType: type,
- open:true,
- panel,
- id,
- ts: Date.now(),
- direction,
- isLogsVolume,
- };
- parseResponse(resultQuery);
- } else {
- resetNoData(dispatch);
- }
-}
+import getTimeParams from "./getTimeParams";
+import { QueryDirection, QueryResult, QueryType, TracesResult } from "../types";
+import store from "@ui/store/store";
+import setIsEmptyView from "../setIsEmptyView";
+import { parseResponse } from "./parseResponse";
+import { resetNoData } from "./resetNoData";
+import setResponseType from "../setResponseType";
+import { convertFlux } from "./convertFlux";
+import { setLeftPanel } from "../setLeftPanel";
+import { setRightPanel } from "../setRightPanel";
+
+export function setPanelData(panel: string, data: any) {
+ if (panel === "left") {
+ return setLeftPanel(data);
+ } else {
+ return setRightPanel(data);
+ }
+}
+
+export const resetTraceData = (
+ type: string,
+ dispatch: Function,
+ panel: string,
+ id: string,
+ direction: QueryDirection,
+ queryType: QueryType
+) => {
+ const { time } = getTimeParams(type, id, panel);
+ const { debugMode } = store.getState();
+
+ const resultQuery: TracesResult = {
+ result: { resourceSpans: [], result: [], length: 0 },
+ raw: [],
+ time,
+ debugMode,
+ dispatch,
+ type: "traces",
+ dsType: type,
+ panel,
+ id,
+ ts: Date.now(),
+ queryType,
+ open:true
+ };
+ parseResponse(resultQuery);
+};
+export async function processResponse(
+ type: string,
+ response: any,
+ dispatch: Function,
+ panel: string,
+ id: string,
+ direction: QueryDirection,
+ queryType: QueryType,
+ isLogsVolume?: boolean
+) {
+ const { time } = getTimeParams(type, id, panel);
+ const { debugMode } = store.getState();
+ if (type === "traces") {
+ if (
+ queryType === "trace-search" &&
+ response?.data?.traces?.length > 0
+ ) {
+ const resultQuery: TracesResult = {
+ result: response.data.traces || [],
+ raw: response.data,
+ time,
+ debugMode,
+ dispatch,
+ dsType: type,
+ type,
+ panel,
+ open:true,
+ id,
+ ts: Date.now(),
+ queryType,
+ };
+ parseResponse(resultQuery);
+ }
+
+ if (response?.data?.resourceSpans?.length > 0) {
+ const resultQuery: TracesResult = {
+ result: response?.data || [],
+ raw: response?.data,
+ time,
+ debugMode,
+ dispatch,
+ type,
+ dsType: type,
+ panel,
+ open:true,
+ id,
+ ts: Date.now(),
+ queryType,
+ };
+ parseResponse(resultQuery);
+ }
+ }
+ if (type === "flux") {
+ await convertFlux(response?.data).then((data) => {
+ if (data?.data?.length > 0) {
+ const resultQuery: QueryResult = {
+ result: data.data || [],
+ raw: data?.data,
+ time,
+ debugMode,
+ queryType,
+ dispatch,
+ dsType: type,
+ type,
+ panel,
+ open:true,
+ id,
+ ts: Date.now(),
+ direction,
+ };
+
+ parseResponse(resultQuery);
+ }
+ });
+ }
+
+ if (response?.data?.streams?.length === 0) {
+ const resultQuery: QueryResult = {
+ result: [],
+ raw: "[]",
+ time,
+ debugMode,
+ queryType,
+ dispatch,
+ open:true,
+ type: "streams",
+ dsType: type,
+ panel,
+ id,
+ ts: Date.now(),
+ direction,
+ isLogsVolume,
+ };
+
+ parseResponse(resultQuery);
+ dispatch(setIsEmptyView(true));
+ }
+
+ // empty response would respond as data.data = {streams:[]}
+ if (response?.data?.data) {
+ const result = response?.data?.data?.result;
+ const rtype = response?.data?.data?.resultType;
+ let statsInfo = { hasStats: false, statsData: {} };
+ if (
+ response?.data?.data?.stats &&
+ Object.keys(response?.data?.data?.stats)?.length > 0
+ ) {
+ statsInfo = {
+ hasStats: true,
+ statsData: { ...response?.data?.data?.stats },
+ };
+ }
+
+ const actPanel = store.getState()[panel];
+
+ const newPanel = actPanel?.map((m: any) => {
+ if (m.id === id) {
+ return {
+ ...m,
+ hasStats: statsInfo?.hasStats || false,
+ statsData: statsInfo?.statsData || {},
+ open:true,
+ };
+ }
+ return m;
+ });
+ dispatch(setPanelData(panel, newPanel));
+
+ dispatch(setResponseType(type));
+
+ const resultQuery: QueryResult = {
+ result,
+ raw: response?.data?.data,
+ time,
+ debugMode,
+ queryType,
+ dispatch,
+ type: rtype,
+ dsType: type,
+ open:true,
+ panel,
+ id,
+ ts: Date.now(),
+ direction,
+ isLogsVolume,
+ };
+ parseResponse(resultQuery);
+ } else {
+ resetNoData(dispatch);
+ }
+}
diff --git a/src/actions/helpers/resetNoData.ts b/packages/main/store/actions/helpers/resetNoData.ts
similarity index 97%
rename from src/actions/helpers/resetNoData.ts
rename to packages/main/store/actions/helpers/resetNoData.ts
index c438bfdf..5f6ac970 100644
--- a/src/actions/helpers/resetNoData.ts
+++ b/packages/main/store/actions/helpers/resetNoData.ts
@@ -1,4 +1,4 @@
-import setIsEmptyView from "../setIsEmptyView";
-export async function resetNoData(dispatch:Function) {
- dispatch(setIsEmptyView(true))
-}
+import setIsEmptyView from "../setIsEmptyView";
+export async function resetNoData(dispatch:Function) {
+ dispatch(setIsEmptyView(true))
+}
diff --git a/src/actions/helpers/resetParams.ts b/packages/main/store/actions/helpers/resetParams.ts
similarity index 91%
rename from src/actions/helpers/resetParams.ts
rename to packages/main/store/actions/helpers/resetParams.ts
index 7bf10c81..b2e95006 100644
--- a/src/actions/helpers/resetParams.ts
+++ b/packages/main/store/actions/helpers/resetParams.ts
@@ -1,24 +1,24 @@
-import store from "../../store/store";
-import { setLeftDataView } from "../setLeftDataView";
-import { setRightDataView } from "../setRightDataView";
-
-const setDv = (name: string, dispatch: Function, data: any) => {
- if (name === "left") {
- dispatch(setLeftDataView(data));
- } else {
- dispatch(setRightDataView(data));
- }
-};
-// this should reset query data
-export function resetParams(dispatch: Function, panel: string, id: string) {
- // let
- let actDv = store.getState()[`${panel}DataView`];
- let filtered = [...actDv];
-
- filtered.forEach((dv: any) => {
- if (dv.id === id) {
- dv = [];
- }
- });
- setDv(panel, dispatch, filtered);
-}
+import store from "@ui/store/store";
+import { setLeftDataView } from "../setLeftDataView";
+import { setRightDataView } from "../setRightDataView";
+
+const setDv = (name: string, dispatch: Function, data: any) => {
+ if (name === "left") {
+ dispatch(setLeftDataView(data));
+ } else {
+ dispatch(setRightDataView(data));
+ }
+};
+// this should reset query data
+export function resetParams(dispatch: Function, panel: string, id: string) {
+ // let
+ let actDv = store.getState()[`${panel}DataView`];
+ let filtered = [...actDv];
+
+ filtered.forEach((dv: any) => {
+ if (dv.id === id) {
+ dv = [];
+ }
+ });
+ setDv(panel, dispatch, filtered);
+}
diff --git a/src/actions/helpers/scrollbarWidth.ts b/packages/main/store/actions/helpers/scrollbarWidth.ts
similarity index 100%
rename from src/actions/helpers/scrollbarWidth.ts
rename to packages/main/store/actions/helpers/scrollbarWidth.ts
diff --git a/src/actions/helpers/setColumnsData.ts b/packages/main/store/actions/helpers/setColumnsData.ts
similarity index 100%
rename from src/actions/helpers/setColumnsData.ts
rename to packages/main/store/actions/helpers/setColumnsData.ts
diff --git a/src/actions/helpers/setColumnsValue.tsx b/packages/main/store/actions/helpers/setColumnsValue.tsx
similarity index 92%
rename from src/actions/helpers/setColumnsValue.tsx
rename to packages/main/store/actions/helpers/setColumnsValue.tsx
index 754b872e..9471a791 100644
--- a/src/actions/helpers/setColumnsValue.tsx
+++ b/packages/main/store/actions/helpers/setColumnsValue.tsx
@@ -4,18 +4,24 @@
* @returns Default Time and Value column headers with time formatter
*/
-import React from "react";
-import * as _moment from "moment";
+import moment from "moment";
import TimeAgo from "javascript-time-ago";
import en from "javascript-time-ago/locale/en";
-import { themes } from "../../theme/themes";
-import store from "../../store/store";
+import store from "@ui/store/store";
import getData from "../getData";
import { cx, css } from "@emotion/css";
-import { setSplitView } from "../../components/StatusBar/components/SplitViewButton/setSplitView";
+import { setSplitView } from "@ui/main/components/StatusBar/components/SplitViewButton/setSplitView";
import { setRightPanel } from "../setRightPanel";
import { ColumnDef } from "@tanstack/react-table";
-const moment: any = _moment;
+import { lightTheme } from "@ui/theme/light";
+import { darkTheme } from "@ui/theme/dark";
+
+
+const themeSet = () => {
+ const themeStore = store.getState()["theme"]
+ if(themeStore === 'light') return lightTheme
+ return darkTheme
+}
const TraceLink = (theme: any) => css`
border: none;
@@ -47,10 +53,10 @@ function traceStartTimeFormatter(props: any) {
}
function traceRequest(data: any, value: any) {
- const dispatch = store.dispatch;
+ const dispatch: any = store.dispatch;
const actPanel = store.getState()[data.panel];
const rightPanel = store.getState()["right"];
-
+
const isTabletOrMobile = window.innerWidth <= 1013
const actQuery = actPanel.find((f: any) => f.id === data.id);
@@ -124,10 +130,7 @@ export function setColumnsTsValue(
data.url = query.dataSourceURL;
}
- const storeTheme = store.getState()?.["theme"];
-
- const _themes: any = themes;
- const theme = _themes[storeTheme];
+ const theme = themeSet()
if (columns.length > 0 && type === "traces") {
return columns?.map((m: any) => {
diff --git a/src/actions/helpers/timeParser.ts b/packages/main/store/actions/helpers/timeParser.ts
similarity index 94%
rename from src/actions/helpers/timeParser.ts
rename to packages/main/store/actions/helpers/timeParser.ts
index caee8a0c..badf253f 100644
--- a/src/actions/helpers/timeParser.ts
+++ b/packages/main/store/actions/helpers/timeParser.ts
@@ -1,29 +1,29 @@
-/**
- *
- * @param ts timestamp Ns
- * @returns timestamp Sec
- */
-
-function fromNanoSec(
- ts: number // :timestamp
-) {
- return ts / 1000000;
-}
-
-/**
- *
- * @param time timestamp sec
- * @returns timestamp Ns
- */
-
-function getTimeParsed(time: Date) {
- let t = new Date(time);
- return t.getTime() + "000000";
-}
-
-function getTimeSec(time: Date) {
- let t = new Date(time);
- return Math.round(t.getTime() / 1000);
-}
-
-export { fromNanoSec, getTimeParsed, getTimeSec };
+/**
+ *
+ * @param ts timestamp Ns
+ * @returns timestamp Sec
+ */
+
+function fromNanoSec(
+ ts: number // :timestamp
+) {
+ return ts / 1000000;
+}
+
+/**
+ *
+ * @param time timestamp sec
+ * @returns timestamp Ns
+ */
+
+function getTimeParsed(time: Date) {
+ let t = new Date(time);
+ return t.getTime() + "000000";
+}
+
+function getTimeSec(time: Date) {
+ let t = new Date(time);
+ return Math.round(t.getTime() / 1000);
+}
+
+export { fromNanoSec, getTimeParsed, getTimeSec };
diff --git a/src/actions/index.ts b/packages/main/store/actions/index.ts
similarity index 77%
rename from src/actions/index.ts
rename to packages/main/store/actions/index.ts
index c502023d..8fdf2041 100644
--- a/src/actions/index.ts
+++ b/packages/main/store/actions/index.ts
@@ -20,4 +20,9 @@ export * from "./setTheme";
export * from "./setAutoTheme";
export * from "./setIsEmptyView";
export * from "./setResponseType";
-export * from "./setIsTableView";
\ No newline at end of file
+export * from "./setIsTableView";
+export * from "./setRightPanel";
+export * from "./setLeftPanel";
+export * from "./setRightDataView";
+export * from "./setLeftDataView";
+export * from "./setSplitView";
\ No newline at end of file
diff --git a/src/actions/loadLabelValues.ts b/packages/main/store/actions/loadLabelValues.ts
similarity index 95%
rename from src/actions/loadLabelValues.ts
rename to packages/main/store/actions/loadLabelValues.ts
index ad1ef2cb..2f65f63b 100644
--- a/src/actions/loadLabelValues.ts
+++ b/packages/main/store/actions/loadLabelValues.ts
@@ -1,6 +1,6 @@
import axios from "axios";
-import { getDsHeaders } from "../components/QueryBuilder/Operations/helpers";
-import store from "../store/store";
+import { getDsHeaders } from "@ui/main/components/QueryBuilder/Operations/helpers";
+import store from "@ui/store/store";
import { errorHandler } from "./errorHandler";
import { setApiError } from "./setApiError";
diff --git a/src/actions/removeAlert.ts b/packages/main/store/actions/removeAlert.ts
similarity index 64%
rename from src/actions/removeAlert.ts
rename to packages/main/store/actions/removeAlert.ts
index 9a924be8..4fb095fb 100644
--- a/src/actions/removeAlert.ts
+++ b/packages/main/store/actions/removeAlert.ts
@@ -1,6 +1,6 @@
-import store from '../store/store';
+import store from "@ui/store/store";
-export const removeAlert = ( index: any) => (dispatch: Function) => {
+export const removeAlert = ( index: any) => (dispatch: any) => {
let notifications = store.getState().notifications
notifications[index].visible = false;
dispatch({
diff --git a/src/actions/setApiError.ts b/packages/main/store/actions/setApiError.ts
similarity index 100%
rename from src/actions/setApiError.ts
rename to packages/main/store/actions/setApiError.ts
diff --git a/src/actions/setApiWarning.ts b/packages/main/store/actions/setApiWarning.ts
similarity index 100%
rename from src/actions/setApiWarning.ts
rename to packages/main/store/actions/setApiWarning.ts
diff --git a/src/actions/setAutoTheme.ts b/packages/main/store/actions/setAutoTheme.ts
similarity index 100%
rename from src/actions/setAutoTheme.ts
rename to packages/main/store/actions/setAutoTheme.ts
diff --git a/src/actions/setDataViews.ts b/packages/main/store/actions/setDataViews.ts
similarity index 100%
rename from src/actions/setDataViews.ts
rename to packages/main/store/actions/setDataViews.ts
diff --git a/src/actions/setDebugMode.ts b/packages/main/store/actions/setDebugMode.ts
similarity index 100%
rename from src/actions/setDebugMode.ts
rename to packages/main/store/actions/setDebugMode.ts
diff --git a/src/actions/setDirection.ts b/packages/main/store/actions/setDirection.ts
similarity index 100%
rename from src/actions/setDirection.ts
rename to packages/main/store/actions/setDirection.ts
diff --git a/src/actions/setFromTime.ts b/packages/main/store/actions/setFromTime.ts
similarity index 100%
rename from src/actions/setFromTime.ts
rename to packages/main/store/actions/setFromTime.ts
diff --git a/src/actions/setHistoryOpen.ts b/packages/main/store/actions/setHistoryOpen.ts
similarity index 100%
rename from src/actions/setHistoryOpen.ts
rename to packages/main/store/actions/setHistoryOpen.ts
diff --git a/src/actions/setIsEmbed.ts b/packages/main/store/actions/setIsEmbed.ts
similarity index 100%
rename from src/actions/setIsEmbed.ts
rename to packages/main/store/actions/setIsEmbed.ts
diff --git a/src/actions/setIsEmptyView.ts b/packages/main/store/actions/setIsEmptyView.ts
similarity index 100%
rename from src/actions/setIsEmptyView.ts
rename to packages/main/store/actions/setIsEmptyView.ts
diff --git a/src/actions/setIsSubmit.ts b/packages/main/store/actions/setIsSubmit.ts
similarity index 100%
rename from src/actions/setIsSubmit.ts
rename to packages/main/store/actions/setIsSubmit.ts
diff --git a/src/actions/setIsTableView.ts b/packages/main/store/actions/setIsTableView.ts
similarity index 100%
rename from src/actions/setIsTableView.ts
rename to packages/main/store/actions/setIsTableView.ts
diff --git a/src/actions/setLabelValues.ts b/packages/main/store/actions/setLabelValues.ts
similarity index 100%
rename from src/actions/setLabelValues.ts
rename to packages/main/store/actions/setLabelValues.ts
diff --git a/src/actions/setLabels.ts b/packages/main/store/actions/setLabels.ts
similarity index 100%
rename from src/actions/setLabels.ts
rename to packages/main/store/actions/setLabels.ts
diff --git a/src/actions/setLeftDataView.ts b/packages/main/store/actions/setLeftDataView.ts
similarity index 100%
rename from src/actions/setLeftDataView.ts
rename to packages/main/store/actions/setLeftDataView.ts
diff --git a/src/actions/setLeftPanel.ts b/packages/main/store/actions/setLeftPanel.ts
similarity index 100%
rename from src/actions/setLeftPanel.ts
rename to packages/main/store/actions/setLeftPanel.ts
diff --git a/src/actions/setLinksHistory.ts b/packages/main/store/actions/setLinksHistory.ts
similarity index 100%
rename from src/actions/setLinksHistory.ts
rename to packages/main/store/actions/setLinksHistory.ts
diff --git a/src/actions/setLoading.ts b/packages/main/store/actions/setLoading.ts
similarity index 100%
rename from src/actions/setLoading.ts
rename to packages/main/store/actions/setLoading.ts
diff --git a/src/actions/setLogs.ts b/packages/main/store/actions/setLogs.ts
similarity index 100%
rename from src/actions/setLogs.ts
rename to packages/main/store/actions/setLogs.ts
diff --git a/src/actions/setPanelResponse.ts b/packages/main/store/actions/setPanelResponse.ts
similarity index 100%
rename from src/actions/setPanelResponse.ts
rename to packages/main/store/actions/setPanelResponse.ts
diff --git a/src/actions/setPanelsData.ts b/packages/main/store/actions/setPanelsData.ts
similarity index 100%
rename from src/actions/setPanelsData.ts
rename to packages/main/store/actions/setPanelsData.ts
diff --git a/src/actions/setQueryHistory.ts b/packages/main/store/actions/setQueryHistory.ts
similarity index 100%
rename from src/actions/setQueryHistory.ts
rename to packages/main/store/actions/setQueryHistory.ts
diff --git a/src/actions/setQueryLimit.ts b/packages/main/store/actions/setQueryLimit.ts
similarity index 100%
rename from src/actions/setQueryLimit.ts
rename to packages/main/store/actions/setQueryLimit.ts
diff --git a/src/actions/setQueryStep.ts b/packages/main/store/actions/setQueryStep.ts
similarity index 100%
rename from src/actions/setQueryStep.ts
rename to packages/main/store/actions/setQueryStep.ts
diff --git a/src/actions/setQueryTime.ts b/packages/main/store/actions/setQueryTime.ts
similarity index 100%
rename from src/actions/setQueryTime.ts
rename to packages/main/store/actions/setQueryTime.ts
diff --git a/src/actions/setQueryType.ts b/packages/main/store/actions/setQueryType.ts
similarity index 100%
rename from src/actions/setQueryType.ts
rename to packages/main/store/actions/setQueryType.ts
diff --git a/src/actions/setRangeOpen.ts b/packages/main/store/actions/setRangeOpen.ts
similarity index 100%
rename from src/actions/setRangeOpen.ts
rename to packages/main/store/actions/setRangeOpen.ts
diff --git a/src/actions/setResponseType.ts b/packages/main/store/actions/setResponseType.ts
similarity index 100%
rename from src/actions/setResponseType.ts
rename to packages/main/store/actions/setResponseType.ts
diff --git a/src/actions/setRightDataView.ts b/packages/main/store/actions/setRightDataView.ts
similarity index 100%
rename from src/actions/setRightDataView.ts
rename to packages/main/store/actions/setRightDataView.ts
diff --git a/src/actions/setRightPanel.ts b/packages/main/store/actions/setRightPanel.ts
similarity index 100%
rename from src/actions/setRightPanel.ts
rename to packages/main/store/actions/setRightPanel.ts
diff --git a/src/actions/setSettingsDialogOpen.ts b/packages/main/store/actions/setSettingsDialogOpen.ts
similarity index 100%
rename from src/actions/setSettingsDialogOpen.ts
rename to packages/main/store/actions/setSettingsDialogOpen.ts
diff --git a/packages/main/store/actions/setSplitView.ts b/packages/main/store/actions/setSplitView.ts
new file mode 100644
index 00000000..176d2210
--- /dev/null
+++ b/packages/main/store/actions/setSplitView.ts
@@ -0,0 +1,6 @@
+export const setSplitView = ( isSplit : any) => (dispatch: Function) => {
+ dispatch({
+ type: 'SET_SPLIT_VIEW',
+ isSplit
+ })
+}
\ No newline at end of file
diff --git a/src/actions/setStartTime.ts b/packages/main/store/actions/setStartTime.ts
similarity index 100%
rename from src/actions/setStartTime.ts
rename to packages/main/store/actions/setStartTime.ts
diff --git a/src/actions/setStopTime.ts b/packages/main/store/actions/setStopTime.ts
similarity index 100%
rename from src/actions/setStopTime.ts
rename to packages/main/store/actions/setStopTime.ts
diff --git a/src/actions/setTheme.ts b/packages/main/store/actions/setTheme.ts
similarity index 100%
rename from src/actions/setTheme.ts
rename to packages/main/store/actions/setTheme.ts
diff --git a/src/actions/setTimeRangeLabel.ts b/packages/main/store/actions/setTimeRangeLabel.ts
similarity index 100%
rename from src/actions/setTimeRangeLabel.ts
rename to packages/main/store/actions/setTimeRangeLabel.ts
diff --git a/src/actions/setToTime.ts b/packages/main/store/actions/setToTime.ts
similarity index 100%
rename from src/actions/setToTime.ts
rename to packages/main/store/actions/setToTime.ts
diff --git a/src/actions/setUrlLocation.ts b/packages/main/store/actions/setUrlLocation.ts
similarity index 100%
rename from src/actions/setUrlLocation.ts
rename to packages/main/store/actions/setUrlLocation.ts
diff --git a/src/actions/setUrlQueryParams.ts b/packages/main/store/actions/setUrlQueryParams.ts
similarity index 100%
rename from src/actions/setUrlQueryParams.ts
rename to packages/main/store/actions/setUrlQueryParams.ts
diff --git a/src/actions/types/index.ts b/packages/main/store/actions/types/index.ts
similarity index 95%
rename from src/actions/types/index.ts
rename to packages/main/store/actions/types/index.ts
index 1c49816b..d76ae20f 100644
--- a/src/actions/types/index.ts
+++ b/packages/main/store/actions/types/index.ts
@@ -1,88 +1,88 @@
-import { AxiosRequestHeaders, Method } from "axios";
-
-export type QueryResultType = "streams" | "vector" | "matrix" | "scalar" | "flux" | "traces";
-
-export type Endpoint = {
- instant: string;
- range: string;
-};
-
-export type QueryResult = {
- browserOpen?:boolean;
- result: Array;
- time?: number;
- debugMode?: boolean;
- queryType?: string;
- dispatch: Function;
- type: QueryResultType;
- dsType: string;
- panel: string;
- id: string;
- ts: number;
- direction: QueryDirection;
- hasStats?: boolean;
- statsData?:any;
- raw?:any;
- open?:boolean;
- isLogsVolume?:boolean
-
-};
-
-export type TracesResultType = {
- resourceSpans: Array;
- result:Array;
- length:any;
-}
-
-export type TracesResult = {
- browserOpen?:boolean;
- result: TracesResultType;
- time?: number;
- debugMode?: boolean;
- dispatch: Function;
- type: QueryResultType;
- dsType:string;
- panel: string;
- id: string;
- ts: number;
- queryType?:QueryType;
- raw?:any;
- open?:boolean;
-};
-
-export type Message = {
- type: string;
- timestamp: number;
- text: string;
- tags: object;
- isShowTs: boolean;
- isBuilder:boolean;
- showLabels: boolean;
- id: string;
-};
-
-export type Stream = {
- values: [[number, string]];
- stream: object;
-};
-
-export type QueryOptions = {
- method: Method;
- mode?:string;
- headers: AxiosRequestHeaders;
- cancelToken?: any;
-};
-
-export type QueryType = "range" | "instant" | "trace-search";
-export type QueryDirection = "forward" | 'backwards'
-export type QueryParams = {
- queryUrl?: string;
- encodedQuery?: string;
- limit?: number | string;
- time?: number | string;
- parsedTime?: number | string;
- queryStep: number | string;
- direction: QueryDirection;
- queryType: QueryType;
- customStep?:number;
-};
+import { AxiosRequestHeaders, Method } from "axios";
+
+export type QueryResultType = "streams" | "vector" | "matrix" | "scalar" | "flux" | "traces";
+
+export type Endpoint = {
+ instant: string;
+ range: string;
+};
+
+export type QueryResult = {
+ browserOpen?:boolean;
+ result: Array;
+ time?: number;
+ debugMode?: boolean;
+ queryType?: string;
+ dispatch: Function;
+ type: QueryResultType;
+ dsType: string;
+ panel: string;
+ id: string;
+ ts: number;
+ direction: QueryDirection;
+ hasStats?: boolean;
+ statsData?:any;
+ raw?:any;
+ open?:boolean;
+ isLogsVolume?:boolean
+
+};
+
+export type TracesResultType = {
+ resourceSpans: Array;
+ result:Array;
+ length:any;
+}
+
+export type TracesResult = {
+ browserOpen?:boolean;
+ result: TracesResultType;
+ time?: number;
+ debugMode?: boolean;
+ dispatch: Function;
+ type: QueryResultType;
+ dsType:string;
+ panel: string;
+ id: string;
+ ts: number;
+ queryType?:QueryType;
+ raw?:any;
+ open?:boolean;
+};
+
+export type Message = {
+ type: string;
+ timestamp: number;
+ text: string;
+ tags: object;
+ isShowTs: boolean;
+ isBuilder:boolean;
+ showLabels: boolean;
+ id: string;
+};
+
+export type Stream = {
+ values: [[number, string]];
+ stream: object;
+};
+
+export type QueryOptions = {
+ method: Method;
+ mode?:string;
+ headers: AxiosRequestHeaders;
+ cancelToken?: any;
+};
+
+export type QueryType = "range" | "instant" | "trace-search";
+export type QueryDirection = "forward" | 'backwards'
+export type QueryParams = {
+ queryUrl?: string;
+ encodedQuery?: string;
+ limit?: number | string;
+ time?: number | string;
+ parsedTime?: number | string;
+ queryStep: number | string;
+ direction: QueryDirection;
+ queryType: QueryType;
+ customStep?:number;
+};
diff --git a/src/store/createInitialState.ts b/packages/main/store/createInitialState.ts
similarity index 95%
rename from src/store/createInitialState.ts
rename to packages/main/store/createInitialState.ts
index 71567a3e..6aef050a 100644
--- a/src/store/createInitialState.ts
+++ b/packages/main/store/createInitialState.ts
@@ -1,250 +1,251 @@
-import moment, { Moment, MomentInput } from "moment";
-import { environment } from "../environment/env.dev";
-import stateFromQueryParams from "../helpers/stateFromQueryParams";
-import localService from "../services/localService";
-import localUrl from "../services/localUrl";
-import {
- defaultDataSources,
- defaultDatasourcesFieldTypes,
- defaultLinkedFieldTypes,
-} from "../views/DataSources/store/defaults";
-
-export interface IsDebug {
- isActive: boolean;
-}
-
-const debugLocal = (): boolean => {
- const debugFromLocal: IsDebug = (JSON.parse(
- localStorage.getItem("isDebug") || JSON.stringify(false)
- ) as IsDebug) || { isActive: false };
-
- const isDebugItem: boolean = debugFromLocal.isActive === true;
-
- if (!isDebugItem) {
- localStorage.setItem("isDebug", JSON.stringify({ isActive: false }));
- return false;
- }
-
- return true;
-};
-
-export interface URLState {
- queryType: string;
- start: string | Date;
- time: string;
- to: string | null;
- stop: string | Date;
- from: string | Date;
- left: any[];
- right: any[];
- label: string;
- limit: string | number;
- step: string | number;
- apiUrl: string;
- isSubmit: boolean;
- isEmbed: boolean;
- theme: string;
- autoTheme: boolean;
- isSplit: boolean;
-}
-
-export const initialUrlState: URLState = {
- queryType: "range",
- start: "",
- time: "",
- to: "",
- stop: "",
- from: "",
- left: [],
- right: [],
- label: "",
- limit: 100,
- step: 100,
- apiUrl: "",
- isSubmit: false,
- isEmbed: false,
- autoTheme: true,
- theme: "",
- isSplit: false,
-};
-
-export function date_fm(input: MomentInput): Moment {
- return moment(input);
-}
-
-export default function initialState() {
- const settingsState = () => {
- const dsSettings = localStorage.getItem("dataSources") || undefined;
- const lfSettings = localStorage.getItem("linkedFields") || undefined;
- let hasDsSettings = false;
- let hasLfSettings = false;
- let dataSourceSettings = [];
- let linkedFieldsSettings = [];
- if (dsSettings !== undefined) {
- hasDsSettings = true;
- try {
- dataSourceSettings = JSON.parse(dsSettings);
- } catch (e) {
- hasDsSettings = false;
- dataSourceSettings = [];
- }
- }
-
- if (lfSettings !== undefined) {
- hasLfSettings = true;
- try {
- linkedFieldsSettings = JSON.parse(lfSettings);
- } catch (e) {
- hasLfSettings = false;
- linkedFieldsSettings = [];
- }
- }
-
- return {
- hasDsSettings,
- hasLfSettings,
- dataSourceSettings,
- linkedFieldsSettings,
- };
- };
- const getDatasourceURL = (id: string) => {
- const localDatasources = JSON.parse(
- localStorage.getItem("dataSources") || ""
- );
- return localDatasources?.find((f: any) => f.id === "id");
- };
-
- const urlState: URLState = stateFromQueryParams() || initialUrlState;
- const historyService = localService().historyStore();
- const linkService = localUrl();
- const state = {
- debugMode: debugLocal() || false,
- labels: [],
- labelValues: [],
- queryHistory: historyService.getAll() || [],
- linksHistory: linkService.getAll() || [],
- timeRange: [],
- queryType: urlState.queryType || "range",
- logs: [],
- matrixData: [],
- vectorData: {},
- loading: false,
- queryResolution: 1,
- start: new Date(Date.now() - 5 * 60000),
- time: urlState.time || "", // for instant queries
- stop: new Date(Date.now()),
- from: urlState.from || null,
- to: urlState.to || null,
- label: urlState.label,
- messages: [],
- limitLoad: false,
- limit: urlState.limit || 100,
- step: urlState.step || 100,
- rangeOpen: false,
- labelsBrowserOpen: true,
- settingsMenuOpen: false,
- timePickerOpen: false,
- settingsDialogOpen: false,
- historyOpen: false,
- apiErrors: "",
- urlQueryParams: urlState || {},
- urlLocation: "",
- apiUrl: urlState.apiUrl || environment.apiUrl || "",
- isSubmit: urlState.isSubmit || false,
- isEmbed: urlState.isEmbed || false,
- userType:'admin',
- currentUser: {name:'Qryn Admin', role:'admin', id:"OoH8zZt71U70W01LcgAQs", selected:true},
- // dont mention queries // its obvious
-
- left: urlState["left"] || [
- {
- id: "widYlu_fXweET5D4",
- idRef: "L-A",
- lastIdx: 1,
- panel: "left",
- queryType: "range",
- dataSourceType: "logs",
- dataSourceId: "cHI2SqPzH_kxYRXj",
- dataSourceURL: getDatasourceURL("cHI2SqPzH_kxYRXj"),
- limit: 100,
- step: 100,
- tableView: false,
- chartView: false,
- isShowTs: true,
- isBuilder: false,
- hasStats: false,
- statsData: {},
- browserOpen: false,
- isLogsVolume: false,
- expr: "",
- labels: [], // name: selected:
- values: [], // label name selected
- direction: "backwards",
- loading: false,
- open: true,
- start: new Date(Date.now() - 5 * 60000),
- time: "", // for instant queries
- stop: new Date(Date.now()),
- label: "", // range label
- pickerOpen: false, // range picker
- },
- ],
-
- right: urlState["right"] || [
- {
- id: "ndFM1zV-aow5hJ0P",
- idRef: "R-A",
- lastIdx: 1,
- panel: "right",
- queryType: "range",
- dataSourceType: "traces",
- dataSourceId: "32D16h5uYBqUUzhD",
- dataSourceURL: getDatasourceURL("32D16h5uYBqUUzhD"),
- limit: 100,
- step: 100,
- tableView: false,
- chartView: false,
- isShowTs: true,
- isBuilder: false,
- browserOpen: false,
- isLogsVolume: false,
- expr: "",
- labels: [], // name: selected:
- values: [], // label name selected
- direction: "backwards",
- loading: false,
- open: false,
- start: new Date(Date.now() - 5 * 60000),
- time: "", // for instant queries
- stop: new Date(Date.now()),
- label: "", // range label
- pickerOpen: false, // range picker
- },
- ],
- plugins:{},
- leftDataView: [],
- rightDataView: [],
- dataSources: settingsState()["hasDsSettings"]
- ? settingsState()["dataSourceSettings"]
- : defaultDataSources,
- linkedFieldTypes: defaultLinkedFieldTypes,
- dataSourcesFieldTypes: defaultDatasourcesFieldTypes,
- linkTypes: ["logs", "traces", "metrics", "flux"],
- visTypes: ["chart", "logs", "table", "trace", "graph"],
- chartType: "line",
- resposeType: "",
- notifications: [],
- tableData: {},
- isTableView: false,
- autoTheme: urlState.autoTheme || true,
- theme: urlState.theme || "light",
- isEmptyView: false,
- isSplit: false,
- showDataSourceSetting: true,
- };
-
- const debug = state.debugMode;
- if (debug) console.log("🚧 LOGIC/ INITIAL STATE ::: ", state);
-
- return state;
-}
+import moment, { Moment, MomentInput } from "moment";
+import { environment } from "@ui/environment/env.dev";
+import stateFromQueryParams from "../helpers/stateFromQueryParams";
+import localService from "../services/localService";
+import localUrl from "../services/localUrl";
+import {
+ defaultDataSources,
+ defaultDatasourcesFieldTypes,
+ defaultLinkedFieldTypes,
+} from "../views/DataSources/store/defaults";
+
+export interface IsDebug {
+ isActive: boolean;
+}
+
+const debugLocal = (): boolean => {
+ const debugFromLocal: IsDebug = (JSON.parse(
+ localStorage.getItem("isDebug") || JSON.stringify(false)
+ ) as IsDebug) || { isActive: false };
+
+ const isDebugItem: boolean = debugFromLocal.isActive === true;
+
+ if (!isDebugItem) {
+ localStorage.setItem("isDebug", JSON.stringify({ isActive: false }));
+ return false;
+ }
+
+ return true;
+};
+
+export interface URLState {
+ queryType: string;
+ start: string | Date;
+ time: string;
+ to: string | null;
+ stop: string | Date;
+ from: string | Date;
+ left: any[];
+ right: any[];
+ label: string;
+ limit: string | number;
+ step: string | number;
+ apiUrl: string;
+ isSubmit: boolean;
+ isEmbed: boolean;
+ theme: string;
+ autoTheme: boolean;
+ isSplit: boolean;
+}
+
+export const initialUrlState: URLState = {
+ queryType: "range",
+ start: "",
+ time: "",
+ to: "",
+ stop: "",
+ from: "",
+ left: [],
+ right: [],
+ label: "",
+ limit: 100,
+ step: 100,
+ apiUrl: "",
+ isSubmit: false,
+ isEmbed: false,
+ autoTheme: true,
+ theme: "",
+ isSplit: false,
+};
+
+export function date_fm(input: MomentInput): Moment {
+ return moment(input);
+}
+
+export default function initialState() {
+ const settingsState = () => {
+ const dsSettings = localStorage.getItem("dataSources") || undefined;
+ const lfSettings = localStorage.getItem("linkedFields") || undefined;
+ let hasDsSettings = false;
+ let hasLfSettings = false;
+ let dataSourceSettings = [];
+ let linkedFieldsSettings = [];
+ if (dsSettings !== undefined) {
+ hasDsSettings = true;
+ try {
+ dataSourceSettings = JSON.parse(dsSettings);
+ } catch (e) {
+ hasDsSettings = false;
+ dataSourceSettings = [];
+ }
+ }
+
+ if (lfSettings !== undefined) {
+ hasLfSettings = true;
+ try {
+ linkedFieldsSettings = JSON.parse(lfSettings);
+ } catch (e) {
+ hasLfSettings = false;
+ linkedFieldsSettings = [];
+ }
+ }
+
+ return {
+ hasDsSettings,
+ hasLfSettings,
+ dataSourceSettings,
+ linkedFieldsSettings,
+ };
+ };
+ const getDatasourceURL = (id: string) => {
+ const localDatasources = JSON.parse(
+ localStorage.getItem("dataSources") || ""
+ );
+ return localDatasources?.find((f: any) => f.id === "id");
+ };
+
+ const urlState: URLState = stateFromQueryParams() || initialUrlState;
+ const historyService = localService().historyStore();
+ const linkService = localUrl();
+ const state:any = {
+ debugMode: debugLocal() || false,
+ labels: [],
+ labelValues: [],
+ queryHistory: historyService.getAll() || [],
+ linksHistory: linkService.getAll() || [],
+ timeRange: [],
+ queryType: urlState.queryType || "range",
+ logs: [],
+ matrixData: [],
+ vectorData: {},
+ loading: false,
+ queryResolution: 1,
+ start: new Date(Date.now() - 5 * 60000),
+ time: urlState.time || "", // for instant queries
+ stop: new Date(Date.now()),
+ from: urlState.from || null,
+ to: urlState.to || null,
+ label: urlState.label,
+ messages: [],
+ limitLoad: false,
+ limit: urlState.limit || 100,
+ step: urlState.step || 100,
+ rangeOpen: false,
+ labelsBrowserOpen: true,
+ settingsMenuOpen: false,
+ timePickerOpen: false,
+ settingsDialogOpen: false,
+ historyOpen: false,
+ apiErrors: "",
+ urlQueryParams: urlState || {},
+ urlLocation: "",
+ apiUrl: urlState.apiUrl || environment.apiUrl || "",
+ isSubmit: urlState.isSubmit || false,
+ isEmbed: urlState.isEmbed || false,
+ isCardinality: false,
+ userType:'admin',
+ currentUser: {name:'Qryn Admin', role:'admin', id:"OoH8zZt71U70W01LcgAQs", selected:true},
+ // dont mention queries // its obvious
+
+ left: urlState["left"] || [
+ {
+ id: "widYlu_fXweET5D4",
+ idRef: "L-A",
+ lastIdx: 1,
+ panel: "left",
+ queryType: "range",
+ dataSourceType: "logs",
+ dataSourceId: "cHI2SqPzH_kxYRXj",
+ dataSourceURL: getDatasourceURL("cHI2SqPzH_kxYRXj"),
+ limit: 100,
+ step: 100,
+ tableView: false,
+ chartView: false,
+ isShowTs: true,
+ isBuilder: false,
+ hasStats: false,
+ statsData: {},
+ browserOpen: false,
+ isLogsVolume: false,
+ expr: "",
+ labels: [], // name: selected:
+ values: [], // label name selected
+ direction: "backwards",
+ loading: false,
+ open: true,
+ start: new Date(Date.now() - 5 * 60000),
+ time: "", // for instant queries
+ stop: new Date(Date.now()),
+ label: "", // range label
+ pickerOpen: false, // range picker
+ },
+ ],
+
+ right: urlState["right"] || [
+ {
+ id: "ndFM1zV-aow5hJ0P",
+ idRef: "R-A",
+ lastIdx: 1,
+ panel: "right",
+ queryType: "range",
+ dataSourceType: "traces",
+ dataSourceId: "32D16h5uYBqUUzhD",
+ dataSourceURL: getDatasourceURL("32D16h5uYBqUUzhD"),
+ limit: 100,
+ step: 100,
+ tableView: false,
+ chartView: false,
+ isShowTs: true,
+ isBuilder: false,
+ browserOpen: false,
+ isLogsVolume: false,
+ expr: "",
+ labels: [], // name: selected:
+ values: [], // label name selected
+ direction: "backwards",
+ loading: false,
+ open: false,
+ start: new Date(Date.now() - 5 * 60000),
+ time: "", // for instant queries
+ stop: new Date(Date.now()),
+ label: "", // range label
+ pickerOpen: false, // range picker
+ },
+ ],
+ plugins:{},
+ leftDataView: [],
+ rightDataView: [],
+ dataSources: settingsState()["hasDsSettings"]
+ ? settingsState()["dataSourceSettings"]
+ : defaultDataSources,
+ linkedFieldTypes: defaultLinkedFieldTypes,
+ dataSourcesFieldTypes: defaultDatasourcesFieldTypes,
+ linkTypes: ["logs", "traces", "metrics", "flux"],
+ visTypes: ["chart", "logs", "table", "trace", "graph"],
+ chartType: "line",
+ resposeType: "",
+ notifications: [],
+ tableData: {},
+ isTableView: false,
+ autoTheme: urlState.autoTheme || true,
+ theme: urlState.theme || "light",
+ isEmptyView: false,
+ isSplit: false,
+ showDataSourceSetting: true,
+ };
+
+ const debug = state.debugMode;
+ if (debug) console.log("🚧 LOGIC/ INITIAL STATE ::: ", state);
+
+ return state;
+}
diff --git a/src/store/defaultFields.json b/packages/main/store/defaultFields.json
similarity index 100%
rename from src/store/defaultFields.json
rename to packages/main/store/defaultFields.json
diff --git a/packages/main/store/hooks.tsx b/packages/main/store/hooks.tsx
new file mode 100644
index 00000000..4017c778
--- /dev/null
+++ b/packages/main/store/hooks.tsx
@@ -0,0 +1,7 @@
+import { useDispatch, useSelector } from 'react-redux'
+import type { TypedUseSelectorHook } from 'react-redux'
+import type { RootState, AppDispatch } from './'
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch: () => AppDispatch = useDispatch
+export const useAppSelector: TypedUseSelectorHook = useSelector
\ No newline at end of file
diff --git a/src/store/reducer.ts b/packages/main/store/reducer.ts
similarity index 98%
rename from src/store/reducer.ts
rename to packages/main/store/reducer.ts
index e8df1ab0..b64e5178 100644
--- a/src/store/reducer.ts
+++ b/packages/main/store/reducer.ts
@@ -48,6 +48,8 @@ const reducer = (state: any, action: any) => {
return { ...state, isSubmit: action.isSubmit };
case "SET_IS_EMBED":
return { ...state, isEmbed: action.isEmbed };
+ case "SET_IS_CARDINALITY":
+ return {...state, isCardinality: action.isCardinality};
case "SET_MATRIX_DATA":
return { ...state, matrixData: action.matrixData };
case "SET_CHART_TYPE":
diff --git a/packages/main/store/splitSlice.tsx b/packages/main/store/splitSlice.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/store/store.model.ts b/packages/main/store/store.model.ts
similarity index 100%
rename from src/store/store.model.ts
rename to packages/main/store/store.model.ts
diff --git a/src/store/store.ts b/packages/main/store/store.ts
similarity index 66%
rename from src/store/store.ts
rename to packages/main/store/store.ts
index ff43f02d..e2d8817a 100644
--- a/src/store/store.ts
+++ b/packages/main/store/store.ts
@@ -1,16 +1,11 @@
import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
-import { composeWithDevTools } from "redux-devtools-extension";
import reducer from "./reducer";
import createInitialState from "./createInitialState";
const store = createStore(
reducer,
createInitialState(),
- composeWithDevTools(
- applyMiddleware(thunk)
- )
-
-
+ applyMiddleware(thunk)
);
export default store;
diff --git a/packages/main/theme/colors.tsx b/packages/main/theme/colors.tsx
new file mode 100644
index 00000000..84485c70
--- /dev/null
+++ b/packages/main/theme/colors.tsx
@@ -0,0 +1,87 @@
+const black = {
+ b1: "#111",
+ b10: "hsla(0, 0%, 7%, 0.404)",
+ b15: "hsl(0, 0%, 7%)",
+ b100: "hsl(0, 0%, 4%)",
+ b200: "hsl(0, 0%, 8%)",
+ b300: "hsl(0, 0%, 10%)",
+ b400: "hsl(0, 0%, 16%)",
+ b500: "hsl(0, 0%, 20%)",
+};
+
+const white = {
+ w100: "hsl(0, 0%, 100%)",
+ w200: "hsl(0, 0%, 96%)",
+ w300: "hsl(0, 0%, 92%)",
+ w400: "hsl(0, 0%, 88%)",
+ w500: "hsl(0, 0%, 84%)",
+ w700: "hsl(0,0%,98%)", // lightgray bg
+};
+
+const lightgrey = {
+ lg10: "hsla(0, 0%, 90%, 0.231)",
+ lg15: "hsla(0, 0%, 90%, 0.333)",
+ lg100: "hsl(0, 0%, 80%)",
+ lg200: "hsl(0, 0%, 76%)",
+ lg300: "hsl(0, 0%, 72%)",
+ lg400: "hsl(0, 0%, 68%)",
+ lg500: "hsl(0, 0%, 64%)",
+ lg600: "hsl(0, 0%, 60%)",
+ lg700: "hsl(0, 0%, 56%)",
+};
+
+const darkgrey = {
+ dg10: "hsla(0, 0%, 48%, 0.231)",
+ dg15: "hsla(0, 0%, 48%, 0.333)",
+ dg30:"#4a525c",
+ dg40:"#6c6b6b38",
+ dg50: "hsl(0, 0%, 18%)",
+ dg60:"hsla(0, 0%, 48%, 0.5)",
+ dg90: "hsl(0, 0%, 25%)",
+ dg100: "hsl(0, 0%, 28%)",
+ dg200: "hsl(0, 0%, 32%)",
+ dg300: "hsl(0, 0%, 36%)",
+ dg400: "hsl(0, 0%, 40%)",
+ dg500: "hsl(0, 0%, 44%)",
+};
+
+const turquoise = {
+ tq1: "hsl(181, 98%, 21%);",
+ tq100: "hsl(180, 62%, 28%)",
+ tq200: "hsl(180, 62%, 33%)", // button
+ tq300: "hsl(180, 62%, 44%)", // button hover
+ tq400: "hsl(180, 62%, 52%)",
+ tq500: "hsl(180, 62%, 60%)",
+};
+const orange = {
+ or100: "hsl(39, 100%, 50%)",
+};
+
+type LevelColors = {
+ critical: string;
+ error: string;
+ warning: string;
+ info: string;
+ debug: string;
+ trace: string;
+ unknown: string;
+};
+export const LEVEL_COLORS: LevelColors = {
+ critical: "hsl(300, 100%, 25%)",
+ error: "hsl(0, 100%, 50%)",
+ warning: "hsl(60, 100%, 50%)",
+ info: "hsl(120, 100%, 25%)",
+ debug: "hsl(240, 100%, 50%)",
+ trace: "hsl(195, 53%, 79%)",
+ unknown: "hsl(0, 0%, 50%)",
+};
+
+export const colors = {
+ level:LEVEL_COLORS,
+ black,
+ white,
+ lightgrey,
+ darkgrey,
+ turquoise,
+ orange,
+};
diff --git a/packages/main/theme/dark.tsx b/packages/main/theme/dark.tsx
new file mode 100644
index 00000000..34b81438
--- /dev/null
+++ b/packages/main/theme/dark.tsx
@@ -0,0 +1,40 @@
+import { colors } from "./colors";
+import {type QrynTheme, type QrynColors } from "./types";
+import { createTheme } from "@mui/material";
+const defaultTheme = createTheme();
+
+export const dark: QrynColors = {
+ background: colors.black.b300, // hsl(0, 0%, 10%)
+ shadow: colors.black.b400, // hsl(0, 0%, 16%)
+ // items background
+ activeBg: colors.black.b100, // hsl(0, 0%, 4%)
+ lightActiveBg: colors.black.b200, // hsl(0, 0%, 8%)
+ // text
+ contrast: colors.lightgrey.lg200, // hsl(0, 0%, 76%)
+ lightContrast: colors.darkgrey.dg500, //hsl(0, 0%, 44%)
+ hardContrast: colors.white.w300, // hsl(0, 0%, 92%)
+ maxContrast: colors.white.w200, // hsl(0, 0%, 96%)
+ // text
+ accent: colors.orange.or100, // hsl(39, 100%, 50%)
+ // input bg, negative space
+ deep: colors.black.b15, // hsl(0, 0%, 7%)
+ ultraDeep: colors.black.b1, // #111111
+ // primary (colored)
+ primary: colors.turquoise.tq200, // hsl(180, 62%, 28%)
+ primaryLight: colors.turquoise.tq300, //hsl(180, 62%, 44%)
+ primaryAccent: colors.turquoise.tq1, // hsl(181, 98%, 21%)
+ // neutral colors (button default colors)
+ neutral: colors.darkgrey.dg100, // hsl(0, 0%, 28%)
+ lightNeutral: colors.darkgrey.dg15, // hsla(0, 0%, 48%, 0.333)
+ accentNeutral: colors.darkgrey.dg300, //hsl(0, 0%, 36%)
+ contrastNeutral: colors.lightgrey.lg400, //hsl(0, 0%, 68%) alphaNeutral,
+ alphaNeutral: colors.black.b10, // hsla(0, 0%, 7%, 0.404) alphaNeutral
+ alphaPlusNeutral: colors.darkgrey.dg60,//hsla(0, 0%, 48%, 0.5) alphaPlusNeutral
+ secondaryNeutral: colors.darkgrey.dg30,//#4a525c buttonSecondaryBg
+ bgNeutral: colors.darkgrey.dg40, // #6c6b6b38 bgNeutral
+};
+
+export const darkTheme : QrynTheme = {
+ ...defaultTheme,
+ ...dark
+}
\ No newline at end of file
diff --git a/packages/main/theme/defaults.tsx b/packages/main/theme/defaults.tsx
new file mode 100644
index 00000000..139597f9
--- /dev/null
+++ b/packages/main/theme/defaults.tsx
@@ -0,0 +1,2 @@
+
+
diff --git a/packages/main/theme/light.tsx b/packages/main/theme/light.tsx
new file mode 100644
index 00000000..8fb44f2e
--- /dev/null
+++ b/packages/main/theme/light.tsx
@@ -0,0 +1,41 @@
+import { colors } from "./colors";
+import {type QrynTheme, type QrynColors } from "./types";
+import { createTheme } from "@mui/material";
+const defaultTheme = createTheme();
+
+export const light: QrynColors = {
+ background: colors.white.w100, // hsl(0, 0%, 10%) background background background
+ shadow: colors.white.w200, // hsl(0, 0%, 16%) shadow shadow shadow shadow inputlabelbg
+ // items background
+ activeBg: colors.white.w100, // hsl(0, 0%, 4%) activeBg activeBg
+
+ lightActiveBg: colors.white.w200, // hsl(0, 0%, 8%) lightActiveBg
+ // text
+ contrast: colors.darkgrey.dg100, // hsl(0, 0%, 76%) contrast
+ lightContrast: colors.lightgrey.lg700, //hsl(0, 0%, 44%) lightContrast
+ hardContrast: colors.black.b300, // hsl(0, 0%, 92%) hardContrast
+ maxContrast: colors.white.w200, // hsl(0, 0%, 96%) maxContrast
+ // text
+ accent: colors.orange.or100, // hsl(39, 100%, 50%) accent
+ // input bg, negative space
+ deep: colors.white.w100, // hsl(0, 0%, 7%) deep
+ ultraDeep: "#fff", // #111111 ultraDeep
+ // primary (colored)
+ primary: colors.turquoise.tq200, // hsl(180, 62%, 28%) primary primary
+ primaryLight: colors.turquoise.tq300, //hsl(180, 62%, 44%) primaryLight
+ primaryAccent: colors.turquoise.tq1, // hsl(181, 98%, 21%) primaryAccent
+ // neutral colors (button default colors)
+ neutral: colors.white.w100, // hsl(0, 0%, 28%) neutral
+ lightNeutral: colors.white.w700, // hsla(0, 0%, 48%, 0.333) lightNeutral
+ accentNeutral: colors.lightgrey.lg100, //hsl(0, 0%, 36%) accentNeutral
+ contrastNeutral: colors.lightgrey.lg400, //hsl(0, 0%, 68%) alphaNeutral,
+ alphaNeutral: colors.lightgrey.lg400, // hsla(0, 0%, 7%, 0.404) alphaNeutral
+ alphaPlusNeutral: colors.darkgrey.dg60, //hsla(0, 0%, 48%, 0.5) alphaPlusNeutral
+ secondaryNeutral: "hsl(158, 64%, 85%, 86%)", //'hsl(158, 64%, 85%, 86%)' buttonSecondaryBg
+ bgNeutral: colors.darkgrey.dg40, // #6c6b6b38 bgNeutral
+};
+
+export const lightTheme: QrynTheme = {
+ ...defaultTheme,
+ ...light,
+};
diff --git a/src/components/DataViews/components/Traces/Jaeger-ui/src/theme/styles/Button.ts b/packages/main/theme/styles/Button.ts
similarity index 100%
rename from src/components/DataViews/components/Traces/Jaeger-ui/src/theme/styles/Button.ts
rename to packages/main/theme/styles/Button.ts
diff --git a/src/theme/styles/Input.ts b/packages/main/theme/styles/Input.ts
similarity index 95%
rename from src/theme/styles/Input.ts
rename to packages/main/theme/styles/Input.ts
index a8eee843..f46b2f2e 100644
--- a/src/theme/styles/Input.ts
+++ b/packages/main/theme/styles/Input.ts
@@ -1,11 +1,11 @@
-import styled from "@emotion/styled";
-
-export const InputSmall = styled.input`
- padding: 3px 12px;
- line-height: 20px;
- border: 1px solid;
- outline: none;
- border: none;
- font-size: 12px;
- border-radius: 3px;
-`;
+import styled from "@emotion/styled";
+
+export const InputSmall = styled.input`
+ padding: 3px 12px;
+ line-height: 20px;
+ border: 1px solid;
+ outline: none;
+ border: none;
+ font-size: 12px;
+ border-radius: 3px;
+`;
diff --git a/packages/main/theme/types.ts b/packages/main/theme/types.ts
new file mode 100644
index 00000000..c5b744d0
--- /dev/null
+++ b/packages/main/theme/types.ts
@@ -0,0 +1,28 @@
+import {type Theme } from '@mui/material'
+
+export type QrynColors = {
+ background: string;
+ shadow: string;
+ activeBg: string;
+ lightActiveBg: string;
+ contrast: string;
+ lightContrast: string;
+ hardContrast: string;
+ maxContrast: string;
+ accent: string;
+ deep: string;
+ ultraDeep: string;
+ primary: string;
+ primaryLight: string;
+ primaryAccent: string;
+ neutral: string;
+ lightNeutral: string;
+ accentNeutral: string;
+ contrastNeutral: string;
+ alphaNeutral: string;
+ alphaPlusNeutral: string;
+ secondaryNeutral: string;
+ bgNeutral: string;
+};
+
+export type QrynTheme = Theme & QrynColors
\ No newline at end of file
diff --git a/packages/main/theme/useTheme.tsx b/packages/main/theme/useTheme.tsx
new file mode 100644
index 00000000..ab255dc7
--- /dev/null
+++ b/packages/main/theme/useTheme.tsx
@@ -0,0 +1,14 @@
+import { useSelector } from "react-redux";
+import { lightTheme } from "./light";
+import { darkTheme } from "./dark";
+import { useMemo } from "react";
+
+const useTheme = () => {
+ const themeSet = useSelector((store: any) => store.theme);
+ return useMemo(() => {
+ if (themeSet === "dark") return darkTheme;
+ return lightTheme;
+ }, [themeSet]);
+};
+
+export default useTheme;
diff --git a/packages/main/tsconfig.json b/packages/main/tsconfig.json
new file mode 100644
index 00000000..e359d37b
--- /dev/null
+++ b/packages/main/tsconfig.json
@@ -0,0 +1,43 @@
+{
+ "compilerOptions": {
+ "target": "esnext",
+ "useDefineForClassFields": true,
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "module": "esnext",
+ "skipLibCheck": true,
+ "baseUrl": ".",
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "strict": false,
+ "noUnusedLocals": false,
+ "noUnusedParameters": false,
+ "noFallthroughCasesInSwitch": false,
+ "noImplicitAny": false,
+ "allowSyntheticDefaultImports": true,
+ "paths": {
+ "@ui/main/*":["src/*"],
+ "@ui/store/*": ["store/*"],
+ "@ui/helpers/*": ["helpers/*"],
+ "@ui/views/*": ["views/*"],
+ "@ui/plugins/*": ["plugins/*"],
+ "@ui/sections/*": ["sections/*"],
+ "@ui/services/*": ["services/*"],
+ "@ui/theme/*": ["theme/*"],
+ "@ui/qrynui/*": ["qrynui/*"],
+ "@ui/environment/*":["environment/*"]
+ }
+ },
+ "include": ["src","views"],
+ "paths": {
+ "react": ["./node_modules/@types/react"],
+ },
+ "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/packages/main/tsconfig.node.json b/packages/main/tsconfig.node.json
new file mode 100644
index 00000000..b2261a0f
--- /dev/null
+++ b/packages/main/tsconfig.node.json
@@ -0,0 +1,13 @@
+{
+ "compilerOptions": {
+ "composite": true,
+ "skipLibCheck": true,
+ "module": "ESNext",
+ "moduleResolution": "bundler",
+ "jsxImportSource": "@emotion/react",
+ "allowSyntheticDefaultImports": true,
+ "noImplicitAny": false,
+ "types": ["vite/client", "@emotion/react/types/css-prop"]
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/src/views/DataSources/AddDataSource.tsx b/packages/main/views/DataSources/AddDataSource.tsx
similarity index 100%
rename from src/views/DataSources/AddDataSource.tsx
rename to packages/main/views/DataSources/AddDataSource.tsx
diff --git a/src/views/DataSources/DataSource.tsx b/packages/main/views/DataSources/DataSource.tsx
similarity index 66%
rename from src/views/DataSources/DataSource.tsx
rename to packages/main/views/DataSources/DataSource.tsx
index 3a819c99..0a25dee6 100644
--- a/src/views/DataSources/DataSource.tsx
+++ b/packages/main/views/DataSources/DataSource.tsx
@@ -4,14 +4,15 @@ import { useMemo } from "react";
import { useCookies } from "react-cookie";
import { useDispatch, useSelector } from "react-redux";
import { useParams } from "react-router-dom";
-import { createAlert } from "../../actions";
-import { themes } from "../../theme/themes";
+import { createAlert } from "@ui/store/actions";
+
import { Header } from "./components";
import setDataSources from "./store/setDataSources";
import { Container } from "./styles/Container";
import { Button, Icon } from "./ui";
import { Settings } from "./views";
-import DOMPurify from 'isomorphic-dompurify';
+import DOMPurify from "isomorphic-dompurify";
+import useTheme from "@ui/theme/useTheme";
const HeaderRow = css`
display: flex;
align-items: center;
@@ -19,6 +20,26 @@ const HeaderRow = css`
margin-right: 20px;
`;
+interface CookieProps {
+ auth?: string;
+ url?: string;
+}
+
+function setCookieFromParams(parsedDs: string, user: string, password: string) {
+ let cookie: CookieProps = {};
+ let hasAuth = password && password !== "" && user && user !== "";
+ let auth = hasAuth ? `${btoa(user)}:${btoa(password)}` : "";
+ let url = JSON.parse(JSON.stringify(parsedDs));
+
+ if (hasAuth && auth) {
+ cookie.auth = auth;
+ }
+
+ cookie.url = url;
+
+ return JSON.stringify(cookie);
+}
+
export function DataSourceSetting(props: any) {
const {
url,
@@ -30,9 +51,12 @@ export function DataSourceSetting(props: any) {
},
} = props;
- // eslint-disable-next-line
- const [cookie, setCookie] = useCookies(["qryn-dev-cookie", "qryn-settings"]); // for testing cookies feature
- const dispatch = useDispatch();
+ // eslint-disable-next-line
+ const [cookie, setCookie] = useCookies([
+ "qryn-dev-cookie",
+ "qryn-settings",
+ ]); // for testing cookies feature
+ const dispatch: any = useDispatch();
const dataSources = useSelector((store: any) => store.dataSources);
const useForAll = () => {
const dsCP = [...dataSources];
@@ -48,10 +72,16 @@ export function DataSourceSetting(props: any) {
...m.auth.fields,
basicAuth: [...m.auth.fields.basicAuth]?.map((ba) => {
if (ba.name === "user") {
- return { ...ba, value: DOMPurify.sanitize(user.value) };
+ return {
+ ...ba,
+ value: DOMPurify.sanitize(user.value),
+ };
}
if (ba.name === "password") {
- return { ...ba, value: DOMPurify.sanitize(password.value) };
+ return {
+ ...ba,
+ value: DOMPurify.sanitize(password.value),
+ };
}
return ba;
}),
@@ -62,7 +92,7 @@ export function DataSourceSetting(props: any) {
// uncomment for testing cookies feature
localStorage.setItem("dataSources", JSON.stringify(newDs));
-
+
dispatch(setDataSources(newDs));
dispatch(
createAlert({
@@ -73,14 +103,15 @@ export function DataSourceSetting(props: any) {
};
function addCookie() {
- var today = new Date();
- var tomorrow = new Date();
+ const today = new Date();
+ const tomorrow = new Date();
+
tomorrow.setDate(today.getDate() + 1);
- const parsedDs = JSON.stringify({ url });
+
try {
setCookie(
"qryn-settings",
- `${btoa(user.value)}:${btoa(password.value)}@${btoa(parsedDs)}&&${btoa('admin')}`,
+ setCookieFromParams(url, user.value, password.value),
{ path: "/" }
);
} catch (e) {
@@ -88,11 +119,37 @@ export function DataSourceSetting(props: any) {
}
}
+ function downLoadJson() {
+ const { headers, id, name, linkedFields } = props;
+
+ const headersMapped = headers?.map(({ header, value }) => ({
+ [header]: value,
+ }));
+
+ const datasources = { id, name, headers: headersMapped, linkedFields };
+
+ const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(
+ JSON.stringify(datasources)
+ )}`;
+
+ const link = document.createElement("a");
+ link.href = jsonString;
+ link.download = `${name}_${id}.json`;
+
+ link.click();
+ }
+
return (
+
{
export function DataSource() {
let { id } = useParams();
- const { theme }: any = useSelector((store) => store);
+ const theme = useTheme();
const dataSources = useSelector((store: any) => store.dataSources);
const datasource = useMemo(() => {
if (!dataSources || dataSources.length === 0) {
@@ -144,9 +201,9 @@ export function DataSource() {
return dataSources.find((f: any) => f.id === id) || {};
}, [id, dataSources]);
- const _themes: any = themes;
+
return (
-
+
diff --git a/src/views/DataSources/components/LinkedField.tsx b/packages/main/views/DataSources/components/LinkedField.tsx
similarity index 99%
rename from src/views/DataSources/components/LinkedField.tsx
rename to packages/main/views/DataSources/components/LinkedField.tsx
index d2cae2a5..8759a965 100644
--- a/src/views/DataSources/components/LinkedField.tsx
+++ b/packages/main/views/DataSources/components/LinkedField.tsx
@@ -18,7 +18,7 @@ export const LinkedField = (props:any) => {
fieldEditing
} = props;
- const dispatch = useDispatch();
+ const dispatch: any = useDispatch();
const dataSources = useSelector((store:any) => store.dataSources);
diff --git a/src/views/DataSources/components/LinkedFields.tsx b/packages/main/views/DataSources/components/LinkedFields.tsx
similarity index 98%
rename from src/views/DataSources/components/LinkedFields.tsx
rename to packages/main/views/DataSources/components/LinkedFields.tsx
index 23b46f1b..8a85f880 100644
--- a/src/views/DataSources/components/LinkedFields.tsx
+++ b/packages/main/views/DataSources/components/LinkedFields.tsx
@@ -11,7 +11,7 @@ export const LinkedFields = (props: any) => {
const dataSources = useSelector((store: any) => store.dataSources);
- const dispatch = useDispatch();
+ const dispatch: any = useDispatch();
const [isEditing, setIsEditing] = useState(false);
const onAddLinkedField = () => {
diff --git a/src/views/DataSources/components/SectionHeader.tsx b/packages/main/views/DataSources/components/SectionHeader.tsx
similarity index 96%
rename from src/views/DataSources/components/SectionHeader.tsx
rename to packages/main/views/DataSources/components/SectionHeader.tsx
index 15793b7e..d53a1d1a 100644
--- a/src/views/DataSources/components/SectionHeader.tsx
+++ b/packages/main/views/DataSources/components/SectionHeader.tsx
@@ -6,7 +6,7 @@ import { cx, css } from "@emotion/css";
import { useEffect, useState } from "react";
import { useDispatch } from "react-redux";
import setIsDatasourceSaved from "../store/setIsDataSourceSaved";
-import { useTheme } from "../../../components/DataViews/components/QueryBuilder/hooks";
+import useTheme from "@ui/theme/useTheme"
import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
const confirmSaveLoaderIcon = css`
@@ -19,7 +19,7 @@ const confirmSaveLoaderIcon = css`
const confirmSaveLoaderCont = (theme: any) => css`
display: flex;
align-items: center;
- background: ${theme.primaryDark};
+ background: ${theme.primary};
color: white;
font-size: 11px;
padding: 4px;
@@ -82,7 +82,7 @@ const InputErrorWarning = ({ errorText }: { errorText: string }) => {
export function SectionHeader(props: any) {
const { onClickAdd, isAdd, title, isEditing, fieldErrors } = props;
- const dispatch = useDispatch();
+ const dispatch: any = useDispatch();
const [isSaved, setIsSaved] = useState(false);
useEffect(() => {
diff --git a/src/views/DataSources/components/index.ts b/packages/main/views/DataSources/components/index.ts
similarity index 100%
rename from src/views/DataSources/components/index.ts
rename to packages/main/views/DataSources/components/index.ts
diff --git a/src/views/DataSources/hooks/useLinkedField.tsx b/packages/main/views/DataSources/hooks/useLinkedField.tsx
similarity index 100%
rename from src/views/DataSources/hooks/useLinkedField.tsx
rename to packages/main/views/DataSources/hooks/useLinkedField.tsx
diff --git a/src/views/DataSources/store/defaults.ts b/packages/main/views/DataSources/store/defaults.ts
similarity index 97%
rename from src/views/DataSources/store/defaults.ts
rename to packages/main/views/DataSources/store/defaults.ts
index bfb207c2..05ff7591 100644
--- a/src/views/DataSources/store/defaults.ts
+++ b/packages/main/views/DataSources/store/defaults.ts
@@ -69,7 +69,7 @@ export const defaultLogsLinkedFields = [
},
];
-export const defaultTracesLinkedFields = [
+export const defaultTracesLinkedFields:any = [
// {
// id: "1xiaRf2padIcGDEr",
// dataSourceId: "32D16h5uYBqUUzhD",
@@ -98,7 +98,7 @@ export const defaultTracesLinkedFields = [
// },
];
-export const defaultMetricsLinkedFields = [
+export const defaultMetricsLinkedFields:any[] = [
// {
// id: "nqhCxOBA5TJ8BINh",
// dataSource: "Logs",
@@ -125,7 +125,7 @@ export const defaultMetricsLinkedFields = [
// },
];
-export const defaultCertFields = {
+export const defaultCertFields:any = {
// WithCACert: [
// {
// name: "CACert",
@@ -269,7 +269,7 @@ export const defaultMetricsDataSource = {
auth: defaultAuth,
};
-export const defaultFluxDataSource = {
+export const defaultFluxDataSource:any = {
id: "Swjy1SzgWuDmJpUo",
type: "flux",
value: "flux",
diff --git a/src/views/DataSources/store/setDataSources.ts b/packages/main/views/DataSources/store/setDataSources.ts
similarity index 100%
rename from src/views/DataSources/store/setDataSources.ts
rename to packages/main/views/DataSources/store/setDataSources.ts
diff --git a/src/views/DataSources/store/setIsDataSourceSaved.ts b/packages/main/views/DataSources/store/setIsDataSourceSaved.ts
similarity index 100%
rename from src/views/DataSources/store/setIsDataSourceSaved.ts
rename to packages/main/views/DataSources/store/setIsDataSourceSaved.ts
diff --git a/src/views/DataSources/store/setLinkedFields.ts b/packages/main/views/DataSources/store/setLinkedFields.ts
similarity index 100%
rename from src/views/DataSources/store/setLinkedFields.ts
rename to packages/main/views/DataSources/store/setLinkedFields.ts
diff --git a/src/views/DataSources/styles.ts b/packages/main/views/DataSources/styles.ts
similarity index 71%
rename from src/views/DataSources/styles.ts
rename to packages/main/views/DataSources/styles.ts
index 0c8600d6..3fdb6d9f 100644
--- a/src/views/DataSources/styles.ts
+++ b/packages/main/views/DataSources/styles.ts
@@ -1,11 +1,11 @@
import styled from "@emotion/styled";
-import { BtnSmall } from "../../theme/styles/Button";
+import { BtnSmall } from "@ui/theme/styles/Button";
export const PageContainer: any = styled.div`
overflow-x: hidden;
border-radius: 3px;
- background: ${({ theme }: any) => theme.viewBg};
- color: ${({ theme }: any) => theme.textColor};
+ background: ${({ theme }: any) => theme.background};
+ color: ${({ theme }: any) => theme.contrast};
width: 100%;
height: 100%;
overflow-y: auto;
@@ -20,7 +20,7 @@ export const PageContainer: any = styled.div`
padding: 10px;
margin: 10px;
width: 100%;
- background: ${({ theme }: any) => theme.widgetContainer};
+ background: ${({ theme }: any) => theme.shadow};
display: flex;
flex-direction: column;
flex: 1;
@@ -42,9 +42,9 @@ export const PageContainer: any = styled.div`
}
.ds-cont {
margin-bottom: 10px;
- border: 1px solid ${({ theme }: any) => theme.buttonBorder};
+ border: 1px solid ${({ theme }: any) => theme.accentNeutral};
border-radius: 3px;
- color: ${({ theme }: any) => theme.textColor};
+ color: ${({ theme }: any) => theme.contrast};
}
.ds-item {
@@ -53,7 +53,7 @@ export const PageContainer: any = styled.div`
border-radius: 3px 3px 0px 0px;
padding-bottom: 14px;
display: flex;
- color: ${({ theme }: any) => theme.textColor};
+ color: ${({ theme }: any) => theme.contrast};
.logo {
padding: 10px;
padding-right: 20px;
@@ -68,7 +68,7 @@ export const PageContainer: any = styled.div`
font-size: 18px;
padding: 10px;
padding-left: 0px;
- color: ${({ theme }: any) => theme.textColor};
+ color: ${({ theme }: any) => theme.contrast};
}
small {
font-size: 12px;
@@ -78,7 +78,7 @@ export const PageContainer: any = styled.div`
cursor: pointer;
}
.ds-settings {
- background: ${({ theme }: any) => theme.viewBg};
+ background: ${({ theme }: any) => theme.background};
}
}
.plugins-cont {
@@ -87,7 +87,7 @@ export const PageContainer: any = styled.div`
margin: 0px 10px;
flex-direction: column;
padding: 10px 20px;
- border: 1px solid ${({ theme }: any) => theme.buttonBorder};
+ border: 1px solid ${({ theme }: any) => theme.accentNeutral};
border-radius: 3px;
height:fit-content;
.title {
@@ -98,7 +98,7 @@ export const PageContainer: any = styled.div`
`;
export const Label: any = styled.div`
- color: ${({ theme }: any) => theme.textColor};
+ color: ${({ theme }: any) => theme.contrast};
display: flex;
align-items: center;
font-size: 12px;
@@ -115,10 +115,10 @@ export const Label: any = styled.div`
export const Input: any = styled.input`
display: flex;
flex: 1;
- background: ${({ theme }: any) => theme.inputBg};
- color: ${({ theme }: any) => theme.textColor};
+ background: ${({ theme }: any) => theme.deep};
+ color: ${({ theme }: any) => theme.contrast};
border: 1px solid
- ${(props: any) => (props.error ? "#b62c14" : props.theme.buttonBorder)};
+ ${(props: any) => (props.error ? "#b62c14" : props.theme.accentNeutral)};
border-radius: 3px;
justify-self: flex-end;
height: 26px;
@@ -128,9 +128,9 @@ export const Input: any = styled.input`
export const TextArea: any = styled.textarea`
display: flex;
flex: 1;
- background: ${({ theme }: any) => theme.inputBg};
- color: ${({ theme }: any) => theme.textColor};
- border: 1px solid ${({ theme }: any) => theme.buttonBorder};
+ background: ${({ theme }: any) => theme.deep};
+ color: ${({ theme }: any) => theme.contrast};
+ border: 1px solid ${({ theme }: any) => theme.accentNeutral};
border-radius: 3px;
justify-self: flex-end;
padding-left: 8px;
@@ -145,9 +145,9 @@ export const InputGroup: any = styled.div`
props?.width && props?.width === "normal" ? "" : "flex:1;"}
//flex: 1;
select {
- background: ${({ theme }: any) => theme.inputBg};
- color: ${({ theme }: any) => theme.textColor};
- border: 1px solid ${({ theme }: any) => theme.buttonBorder};
+ background: ${({ theme }: any) => theme.deep};
+ color: ${({ theme }: any) => theme.contrast};
+ border: 1px solid ${({ theme }: any) => theme.accentNeutral};
border-radius: 3px;
font-size: 12px;
height: 30px;
@@ -189,12 +189,12 @@ export const InputCont: any = styled.div`
export const LinkFieldsGroup: any = styled.div`
margin: 10px 0px;
padding-bottom: 10px;
- border-bottom: 1px solid ${({ theme }: any) => theme.mainBgColor};
+ border-bottom: 1px solid ${({ theme }: any) => theme.background};
`;
export const SettingsTitle: any = styled.div`
padding: 10px;
- border-bottom: 1px solid ${({ theme }: any) => theme.widgetContainer};
+ border-bottom: 1px solid ${({ theme }: any) => theme.shadow};
border-radius: 3px;
display: flex;
flex: 1;
@@ -210,18 +210,18 @@ export const SettingsTitle: any = styled.div`
`;
export const DataSourceSettingsCont: any = styled.div`
- background: ${({ theme }: any) => theme.inputBg};
+ background: ${({ theme }: any) => theme.deep};
padding: 10px;
border-radius: 0px 0px 3px 3px;
- border-top: 1px solid ${({ theme }: any) => theme.buttonBorder};
+ border-top: 1px solid ${({ theme }: any) => theme.accentNeutral};
`;
export const DsButtonStyled: any = styled(BtnSmall)`
background: ${(props: any) =>
- props.primary ? props.theme.primaryDark : props.theme.buttonDefault};
- border: 1px solid ${({ theme }: any) => theme.buttonBorder};
+ props.primary ? props.theme.primary : props.theme.neutral};
+ border: 1px solid ${({ theme }: any) => theme.accentNeutral};
color: ${(props: any) =>
- props.primary ? props.theme.buttonText : props.theme.textColor};
+ props.primary ? props.theme.maxContrast : props.theme.contrast};
margin-left: 5px;
transition: 0.25s all;
justify-content: center;
@@ -231,13 +231,13 @@ export const DsButtonStyled: any = styled(BtnSmall)`
&:hover {
background: ${({ theme }: any) => theme.primaryLight};
color: ${(props: any) =>
- props.primary ? props.theme.textColor : props.theme.buttonText};
+ props.primary ? props.theme.contrast : props.theme.maxContrast};
}
&:disabled {
- background: ${({ theme }: any) => theme.buttonDefault};
- border: 1px solid ${({ theme }: any) => theme.buttonBorder};
+ background: ${({ theme }: any) => theme.neutral};
+ border: 1px solid ${({ theme }: any) => theme.accentNeutral};
cursor: not-allowed;
- color: ${({ theme }: any) => theme.textColor};
+ color: ${({ theme }: any) => theme.contrast};
}
@media screen and (max-width: 1070px) {
display: flex;
diff --git a/src/views/DataSources/styles/Container.tsx b/packages/main/views/DataSources/styles/Container.tsx
similarity index 82%
rename from src/views/DataSources/styles/Container.tsx
rename to packages/main/views/DataSources/styles/Container.tsx
index 0838838a..b3b8e57b 100644
--- a/src/views/DataSources/styles/Container.tsx
+++ b/packages/main/views/DataSources/styles/Container.tsx
@@ -4,11 +4,11 @@ export const Container: any = styled.div<{theme:any}>`
position: absolute;
left: 0;
top: 0;
- background: ${({ theme }) => theme.viewBg};
+ background: ${({ theme }) => theme.background};
display: flex;
flex-direction: culumn;
justify-content: center;
- color: ${({ theme }) => theme.textColor};
+ color: ${({ theme }) => theme.contrast};
flex: 1;
height: 100%;
width: 100%;
@@ -19,7 +19,7 @@ export const Container: any = styled.div<{theme:any}>`
margin: 10px;
border-radius: 3px;
flex: 1;
- background: ${({ theme }) => theme.widgetContainer};
+ background: ${({ theme }) => theme.shadow};
overflow-y: auto;
overflow-x: hidden;
}
@@ -39,7 +39,7 @@ export const Container: any = styled.div<{theme:any}>`
}
.ds-cont {
margin-bottom: 10px;
- border: 1px solid ${({ theme }) => theme.buttonBorder};
+ border: 1px solid ${({ theme }) => theme.accentNeutral};
border-radius: 3px;
overflow-y: auto;
}
@@ -63,7 +63,7 @@ export const Container: any = styled.div<{theme:any}>`
font-size: 18px;
padding: 10px;
padding-left: 0px;
- color: ${({ theme }) => theme.textColor};
+ color: ${({ theme }) => theme.contrast};
}
small {
font-size: 12px;
@@ -73,7 +73,7 @@ export const Container: any = styled.div<{theme:any}>`
cursor: pointer;
}
.ds-settings {
- background: ${({ theme }) => theme.viewBg};
+ background: ${({ theme }) => theme.background};
}
}
`;
\ No newline at end of file
diff --git a/src/views/DataSources/ui/Button.tsx b/packages/main/views/DataSources/ui/Button.tsx
similarity index 100%
rename from src/views/DataSources/ui/Button.tsx
rename to packages/main/views/DataSources/ui/Button.tsx
diff --git a/src/views/DataSources/ui/Field.tsx b/packages/main/views/DataSources/ui/Field.tsx
similarity index 100%
rename from src/views/DataSources/ui/Field.tsx
rename to packages/main/views/DataSources/ui/Field.tsx
diff --git a/src/views/DataSources/ui/Icon.tsx b/packages/main/views/DataSources/ui/Icon.tsx
similarity index 100%
rename from src/views/DataSources/ui/Icon.tsx
rename to packages/main/views/DataSources/ui/Icon.tsx
diff --git a/src/views/DataSources/ui/QrynLogo.tsx b/packages/main/views/DataSources/ui/QrynLogo.tsx
similarity index 100%
rename from src/views/DataSources/ui/QrynLogo.tsx
rename to packages/main/views/DataSources/ui/QrynLogo.tsx
diff --git a/src/views/DataSources/ui/Select.tsx b/packages/main/views/DataSources/ui/Select.tsx
similarity index 100%
rename from src/views/DataSources/ui/Select.tsx
rename to packages/main/views/DataSources/ui/Select.tsx
diff --git a/src/views/DataSources/ui/Switch.tsx b/packages/main/views/DataSources/ui/Switch.tsx
similarity index 100%
rename from src/views/DataSources/ui/Switch.tsx
rename to packages/main/views/DataSources/ui/Switch.tsx
diff --git a/src/views/DataSources/ui/TextArea.tsx b/packages/main/views/DataSources/ui/TextArea.tsx
similarity index 100%
rename from src/views/DataSources/ui/TextArea.tsx
rename to packages/main/views/DataSources/ui/TextArea.tsx
diff --git a/src/views/DataSources/ui/index.ts b/packages/main/views/DataSources/ui/index.ts
similarity index 100%
rename from src/views/DataSources/ui/index.ts
rename to packages/main/views/DataSources/ui/index.ts
diff --git a/src/views/DataSources/ui/styled.ts b/packages/main/views/DataSources/ui/styled.ts
similarity index 57%
rename from src/views/DataSources/ui/styled.ts
rename to packages/main/views/DataSources/ui/styled.ts
index 6e467b82..28a75ebc 100644
--- a/src/views/DataSources/ui/styled.ts
+++ b/packages/main/views/DataSources/ui/styled.ts
@@ -1,13 +1,13 @@
import styled from "@emotion/styled";
-import { BtnSmall } from "../../../theme/styles/Button";
+import { BtnSmall } from "@ui/theme/styles/Button";
export const DsButtonStyled = styled(BtnSmall)`
background: ${(props: any) =>
- props.primary ? props.theme.primaryDark : props.theme.buttonDefault};
- border: 1px solid ${({theme}: any) => theme.buttonBorder};
- color: ${({theme}: any) => theme.buttonText};
+ props.primary ? props.theme.primary : props.theme.neutral};
+ border: 1px solid ${({theme}: any) => theme.accentNeutral};
+ color: ${({theme}: any) => theme.maxContrast};
margin-left: 5px;
transition: 0.25s all;
justify-content: center;
@@ -18,10 +18,10 @@ export const DsButtonStyled = styled(BtnSmall)`
background: ${({theme}: any) => theme.primaryLight};
}
&:disabled {
- background: ${({theme}: any) => theme.buttonDefault};
- border: 1px solid ${({theme}: any) => theme.buttonBorder};
+ background: ${({theme}: any) => theme.neutral};
+ border: 1px solid ${({theme}: any) => theme.accentNeutral};
cursor: not-allowed;
- color: ${({theme}: any) => theme.textColor};
+ color: ${({theme}: any) => theme.contrast};
}
@media screen and (max-width: 1070px) {
display: ${(props: any) => props.isMobile ? "flex" : "none"};
diff --git a/src/views/DataSources/views/List.tsx b/packages/main/views/DataSources/views/List.tsx
similarity index 100%
rename from src/views/DataSources/views/List.tsx
rename to packages/main/views/DataSources/views/List.tsx
diff --git a/src/views/DataSources/views/Settings.tsx b/packages/main/views/DataSources/views/Settings.tsx
similarity index 98%
rename from src/views/DataSources/views/Settings.tsx
rename to packages/main/views/DataSources/views/Settings.tsx
index 22f0337e..f13cb4ce 100644
--- a/src/views/DataSources/views/Settings.tsx
+++ b/packages/main/views/DataSources/views/Settings.tsx
@@ -15,7 +15,7 @@ import { Field } from "../ui";
export const Settings = (props: any) => {
const { headers, id, linkedFields, name, url, cors }: any = props;
- const dispatch = useDispatch();
+ const dispatch: any = useDispatch();
const state = useSelector(({ dataSources }: any) => dataSources);
const [fieldErrors, setFieldErrors] = useState({
diff --git a/src/views/DataSources/views/index.tsx b/packages/main/views/DataSources/views/index.tsx
similarity index 100%
rename from src/views/DataSources/views/index.tsx
rename to packages/main/views/DataSources/views/index.tsx
diff --git a/src/views/Main.tsx b/packages/main/views/Main.tsx
similarity index 93%
rename from src/views/Main.tsx
rename to packages/main/views/Main.tsx
index a8327a1d..c08a2960 100644
--- a/src/views/Main.tsx
+++ b/packages/main/views/Main.tsx
@@ -2,7 +2,7 @@ import { useDispatch, useSelector } from "react-redux";
import DOMPurify from "isomorphic-dompurify";
import { UpdateStateFromQueryParams } from "../helpers/UpdateStateFromQueryParams";
import { useMediaQuery } from "react-responsive";
-import { setTheme } from "../actions";
+import { setTheme } from "@ui/store/actions";
import { useMemo, useEffect } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import { MobileView } from "./Main/MobileView";
@@ -14,11 +14,11 @@ import {
} from "./Main/helpers";
import { css, cx } from "@emotion/css";
-import { useTheme } from "../theme";
+import useTheme from "@ui/theme/useTheme";
import { setCurrentUser } from "./User/actions";
const MainStyles = (theme: any) => css`
- background: ${theme.widgetContainer};
+ background: ${theme.shadow};
`;
export default function Main() {
@@ -32,7 +32,7 @@ export default function Main() {
}, [hash]);
UpdateStateFromQueryParams();
-
+ // cookieAuth will be the cookie object
const { cookiesAvailable, cookieAuth, cookieUser } = useCookiesAvailable(paramsMemo);
const { urlAvailable, url } = useUrlAvailable(paramsMemo);
@@ -42,7 +42,7 @@ export default function Main() {
const onlyUrl = !cookiesAvailable && urlAvailable;
const urlAndCookie =
cookiesAvailable &&
- cookieAuth !== "" &&
+ cookieAuth &&
urlAvailable &&
urlAvailable !== "";
// else, take url from location
@@ -60,7 +60,7 @@ export default function Main() {
} else {
updateDataSourcesFromLocalUrl(dataSources, dispatch, navigate);
}
- // eslint-disable-next-line react-hooks/exhaustive-deps
+
}, []);
useEffect(()=>{
@@ -73,7 +73,7 @@ export default function Main() {
console.log(e)
}
}
- // eslint-disable-next-line react-hooks/exhaustive-deps
+
},[cookieUser])
useEffect(() => {
@@ -90,7 +90,7 @@ export default function Main() {
const isTabletOrMobile = useMediaQuery({ query: "(max-width: 1013px)" });
const isAutoDark = useMediaQuery({ query: "(prefers-color-scheme: dark)" });
- const dispatch = useDispatch();
+ const dispatch: any = useDispatch();
const isSplit = useSelector((store: any) => store.isSplit);
const isEmbed = useSelector((store: any) => store.isEmbed);
const theme = useTheme();
diff --git a/packages/main/views/Main/Breadcrumbs.tsx b/packages/main/views/Main/Breadcrumbs.tsx
new file mode 100644
index 00000000..58a0cfcb
--- /dev/null
+++ b/packages/main/views/Main/Breadcrumbs.tsx
@@ -0,0 +1,32 @@
+import { useLocation } from "react-router-dom";
+
+const Breadcrumbs = () => {
+ const location = useLocation();
+
+ const pathElements = location.pathname.split("/");
+
+ const mappedLinks = pathElements.map((el: string, id: number) => {
+ if (el === "" && id === 0) {
+ return {
+ name: "home",
+ link: "/",
+ };
+ }
+ return {
+ name: `/${el}`,
+ link: el,
+ };
+ });
+
+ return (
+ <>
+ {mappedLinks.map(({ name, link }, id) => (
+
+ {name}
+
+ ))}
+
+ );
+};
+
+export default Breadcrumbs
\ No newline at end of file
diff --git a/src/views/Main/DesktopView.tsx b/packages/main/views/Main/DesktopView.tsx
similarity index 96%
rename from src/views/Main/DesktopView.tsx
rename to packages/main/views/Main/DesktopView.tsx
index a3f50d64..6bedc17f 100644
--- a/src/views/Main/DesktopView.tsx
+++ b/packages/main/views/Main/DesktopView.tsx
@@ -2,8 +2,8 @@ import { ThemeProvider } from "@emotion/react";
import { useEffect, useRef, useState } from "react";
import { useSelector } from "react-redux";
import Panel from "../../sections/Panel";
-import QueryHistory from "../../plugins/queryhistory";
-import SettingsDialog from "../../plugins/settingsdialog/SettingsDialog";
+import QueryHistory from "@ui/plugins/queryhistory";
+import SettingsDialog from "@ui/plugins/settingsdialog/SettingsDialog";
import { MainContainer } from "./styled";
/**
diff --git a/packages/main/views/Main/MainStatusBar.tsx b/packages/main/views/Main/MainStatusBar.tsx
new file mode 100644
index 00000000..7b3a7652
--- /dev/null
+++ b/packages/main/views/Main/MainStatusBar.tsx
@@ -0,0 +1,68 @@
+import { css, cx } from "@emotion/css";
+
+
+import PluginRenderer from "@ui/plugins/PluginsRenderer";
+import MainMenu from "@ui/plugins/settingsmenu/MainMenu";
+import useTheme from "@ui/theme/useTheme";
+import Logo from "./assets/qryn-logo.png";
+import { QrynTheme } from "@ui/theme/types";
+import Breadcrumbs from "./Breadcrumbs";
+
+const StatusBarStyles = (theme: QrynTheme) => css`
+ background: ${theme.shadow};
+ height: 30px;
+ padding: 4px;
+ display: flex;
+ align-items: center;
+ border-bottom: 1px solid ${theme.accentNeutral};
+ .logo-section {
+ margin: 0;
+ .version {
+ color: ${theme.contrast};
+ font-size: 10px;
+ margin-left: 5px;
+ }
+ .path {
+ color: ${theme.contrast};
+ margin-left: 20px;
+ flex: 1;
+ font-weight: bold;
+ text-transform: uppercase;
+ font-size: 11px;
+ letter-spacing: 1px;
+ .bread-link {
+ cursor: pointer;
+ &:hover {
+ color: ${theme.primary}
+ }
+ }
+ }
+ }
+`;
+
+
+const MainStatusBar = () => {
+ const theme = useTheme();
+
+ return (
+
+
+
+
{import.meta.env.VITE_APP_VERSION}
+
+
+
+
+
+
+
+ );
+};
+
+export default MainStatusBar;
diff --git a/src/views/Main/MobileView.tsx b/packages/main/views/Main/MobileView.tsx
similarity index 91%
rename from src/views/Main/MobileView.tsx
rename to packages/main/views/Main/MobileView.tsx
index 4272f01e..6b2f1d68 100644
--- a/src/views/Main/MobileView.tsx
+++ b/packages/main/views/Main/MobileView.tsx
@@ -1,5 +1,5 @@
import { ThemeProvider } from "@emotion/react";
-import QueryHistory from "../../plugins/queryhistory";
+import QueryHistory from "@ui/plugins/queryhistory";
import MainTabs from "../MainTabs";
import { MainContainer } from "./styled";
diff --git a/src/views/Main/actions.tsx b/packages/main/views/Main/actions.tsx
similarity index 50%
rename from src/views/Main/actions.tsx
rename to packages/main/views/Main/actions.tsx
index af0c41f6..1b8a4f78 100644
--- a/src/views/Main/actions.tsx
+++ b/packages/main/views/Main/actions.tsx
@@ -1,4 +1,4 @@
-export const setUserType = (userType:any) => (dispatch: Function) => {
+export const setUserType = (userType:any) => (dispatch: any) => {
dispatch({
type: 'SET_USER_TYPE',
userType,
diff --git a/src/views/Main/assets/qryn-logo.png b/packages/main/views/Main/assets/qryn-logo.png
similarity index 100%
rename from src/views/Main/assets/qryn-logo.png
rename to packages/main/views/Main/assets/qryn-logo.png
diff --git a/src/views/Main/helpers.ts b/packages/main/views/Main/helpers.ts
similarity index 66%
rename from src/views/Main/helpers.ts
rename to packages/main/views/Main/helpers.ts
index 516d38c3..c27bccb1 100644
--- a/src/views/Main/helpers.ts
+++ b/packages/main/views/Main/helpers.ts
@@ -1,14 +1,16 @@
import axios, { AxiosError, AxiosResponse } from "axios";
-import { getDsHeaders } from "../../components/QueryBuilder/Operations/helpers";
+import { getDsHeaders } from "@ui/main/components/QueryBuilder/Operations/helpers";
import setDataSources from "../DataSources/store/setDataSources";
import { setShowDataSourceSetting } from "./setShowDataSourceSetting";
-
-// updateDataSources:
+import useCardinalityStore, {
+ ResponseEnum,
+} from "@ui/plugins/Cardinality/store/CardinalityStore";
+import { LocalPluginsManagement } from "@ui/plugins/PluginManagerFactory";
export function updateDataSourcesWithUrl(
dispatch: any,
url: any,
- cookies: any,
+ cookies: any, // is the cookie object
haveUrl: any,
haveCookies: any,
dataSources: any
@@ -23,15 +25,19 @@ export function updateDataSourcesWithUrl(
}
if (haveCookies) {
- let [auth, dsData] = cookies.split("@");
- let cookieDsData = "";
- if (dsData && dsData !== "") {
+ let auth = "";
+
+ const { url: cookieURL } = cookies;
+
+ if (cookies?.auth) {
+ auth = cookies.auth;
+ }
+
+ if (cookieURL && cookieURL !== "") {
try {
- if (typeof cookieDsData === "object" && cookieDsData["url"]) {
- apiUrl = cookieDsData["url"];
- haveUrl = true;
- urlApi = true;
- }
+ haveUrl = true;
+ urlApi = true;
+ apiUrl = cookieURL;
} catch (e) {
console.log(e);
}
@@ -89,6 +95,7 @@ export function updateDataSourcesWithUrl(
dispatch(setDataSources(newDs));
}
+// inject headers into get requests.
export const getAxiosConf = (datasource: any) => {
let conf: any = {};
let cors = datasource?.cors || false;
@@ -116,6 +123,7 @@ export const getAxiosConf = (datasource: any) => {
return conf;
};
+// get the /ready response
export const getReadyResponse = async (url: string, conf: any, response: any) =>
await axios
.get(`${url}/ready`, conf)
@@ -141,6 +149,7 @@ type AuthParams = {
password: string;
};
+// returns the API status by /ready GET request
export async function checkLocalAPI(
url: string,
datasource: any,
@@ -149,54 +158,42 @@ export async function checkLocalAPI(
): Promise
{
let response: any = {};
let conf = getAxiosConf(datasource);
+ let isReady = false;
+ const { setResponseType } = useCardinalityStore.getState();
let opts: any = { ...conf };
if (auth?.username !== "" && isAuth) {
opts.auth = auth;
}
- return new Promise(async (resolve) => {
- try {
- let res = await getReadyResponse(url, opts, response);
-
- response = res;
- } catch (e: any) {
- resolve(false);
- } finally {
- if (response && response?.status === 200) {
- resolve(true);
+ try {
+ let res = await getReadyResponse(url, opts, response);
+ response = res;
+ } catch (e: any) {
+ isReady = false;
+ } finally {
+ if (response && response?.status === 200) {
+ if (response?.contentLength === "0") {
+ setResponseType(ResponseEnum.GO);
+ LocalPluginsManagement().togglePluginVisibility(
+ "Query Item",
+ "Cardinal View",
+ true
+ );
+ isReady = true;
} else {
- resolve(false);
- }
- }
- });
-}
-
-// provision the basic auth fields data
-export function basicAuthChecker(auth: any) {
- let authParams = { username: "", password: "" };
-
- const isBasicAuth = auth?.basicAuth?.value;
-
- const basicAuthFields = auth?.fields?.basicAuth;
-
- const isBasicAuthFields = basicAuthFields?.length > 0;
-
- if (isBasicAuth && isBasicAuthFields) {
- for (let field of basicAuthFields) {
- if (field?.name === "user") {
- authParams.username = field?.value || "";
- }
- if (field?.name === "password") {
- authParams.password = field?.value || "";
+ setResponseType(ResponseEnum.NODE);
+ LocalPluginsManagement().togglePluginVisibility(
+ "Query Item",
+ "Cardinal View",
+ false
+ );
+ isReady = true;
}
}
}
- return {
- isBasicAuth,
- auth: authParams,
- };
+ return isReady;
}
export function setLocalDataSources(datasources: any) {
@@ -204,7 +201,7 @@ export function setLocalDataSources(datasources: any) {
localStorage.setItem("dataSources", JSON.stringify(datasources));
}
-export function updateDataSourcesUrl(cb: Function, prevData: any, url: any) {
+export function updateDataSourcesUrl(cb: any, prevData: any, url: any) {
// 1- take datasources
const dsCP = [...prevData];
@@ -225,40 +222,50 @@ export function updateDataSourcesUrl(cb: Function, prevData: any, url: any) {
export async function updateDataSourcesFromLocalUrl(
dataSources: any,
- dispatch: Function,
- navigate: Function
+ dispatch: any,
+ navigate: any
) {
// current location
const location = window.location.origin;
+ const logsDs = dataSources.find((f: any) => f.type === "logs");
+ const isBasicAuth = logsDs?.auth?.basicAuth?.value;
+ let auth = { username: "", password: "" };
+ let basicAuthFields = logsDs?.auth?.fields?.basicAuth;
+ const isBasicAuthFields = basicAuthFields?.length > 0;
+
+ if (isBasicAuth && isBasicAuthFields) {
+ for (let field of basicAuthFields) {
+ if (field?.name === "user") {
+ auth.username = field?.value || "";
+ }
+ if (field?.name === "password") {
+ auth.password = field?.value || "";
+ }
+ }
+ }
let dsReady = false;
+ let isLocalReady = false;
- const logsDs = dataSources.find((f: any) => f.type === "logs");
+ if (logsDs?.url !== "") {
+ dsReady = await checkLocalAPI(logsDs.url, logsDs, auth, isBasicAuth);
+ }
- const {
- isBasicAuth, // check if it has a basic auth
- auth, // provisions auth params
- } = basicAuthChecker(logsDs?.auth);
+ if (!dsReady) {
+ isLocalReady = await checkLocalAPI(location, logsDs);
- if (logsDs?.url === "") {
- dsReady = await checkLocalAPI(logsDs.url, logsDs, auth, isBasicAuth); // add the auth in here
+ if (isLocalReady && !dsReady) {
+ const dsCP = [...dataSources];
+ const prevDs = JSON.parse(JSON.stringify(dsCP));
-
+ const newDs = prevDs?.map((m: any) => ({
+ ...m,
+ url: location,
+ }));
- if (dsReady) {
- updateDataSourcesUrl(dispatch, dataSources, location);
- } else {
- navigate("datasources");
- }
- } else {
- let dsReady = await checkLocalAPI(
- logsDs.url,
- logsDs,
- auth,
- isBasicAuth
- ); // add the auth in here
-
- if (!dsReady) {
+ localStorage.setItem("dataSources", JSON.stringify(newDs));
+ dispatch(setDataSources(newDs));
+ } else if (!dsReady && !isLocalReady) {
navigate("datasources");
}
}
diff --git a/src/views/Main/hooks.tsx b/packages/main/views/Main/hooks.tsx
similarity index 92%
rename from src/views/Main/hooks.tsx
rename to packages/main/views/Main/hooks.tsx
index dc7a2c9a..d37c62e7 100644
--- a/src/views/Main/hooks.tsx
+++ b/packages/main/views/Main/hooks.tsx
@@ -3,7 +3,7 @@ import { useCookies } from "react-cookie";
import DOMPurify from "isomorphic-dompurify";
import { useSelector } from "react-redux";
-// useCookiesAvailable:
+
export function useCookiesAvailable(urlParams: any) {
let cookieAuth = "";
@@ -36,8 +36,8 @@ export function useCookiesAvailable(urlParams: any) {
}
}
- if (cookie[cookieParam] && cookie[cookieParam] !== "") {
- cookieAuth = cookie[cookieParam];
+ if (cookie[cookieParam]) {
+ cookieAuth = cookie[cookieParam]; // ==> this will be the object output
cookiesAvailable = true;
}
return { cookieAuth, cookiesAvailable, cookieUser: userCookieParsed };
diff --git a/src/views/Main/setShowDataSourceSetting.ts b/packages/main/views/Main/setShowDataSourceSetting.ts
similarity index 100%
rename from src/views/Main/setShowDataSourceSetting.ts
rename to packages/main/views/Main/setShowDataSourceSetting.ts
diff --git a/src/views/Main/styled.tsx b/packages/main/views/Main/styled.tsx
similarity index 67%
rename from src/views/Main/styled.tsx
rename to packages/main/views/Main/styled.tsx
index dadeb062..947407c5 100644
--- a/src/views/Main/styled.tsx
+++ b/packages/main/views/Main/styled.tsx
@@ -9,17 +9,17 @@ export const MainContainer = styled.div`
width: 100%;
flex: 1;
- background-color: ${({ theme }: any) => theme.mainBgColor} !important;
+ background-color: ${({ theme }: any) => theme.background} !important;
&::-webkit-scrollbar-corner {
background: transparent;
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
- background: ${({ theme }: any) => theme.scrollbarThumb} !important;
+ background: ${({ theme }: any) => theme.alphaPlusNeutral} !important;
}
.panels-container {
display: flex;
- background: ${({ theme }: any) => theme.shBgColor};
+ background: ${({ theme }: any) => theme.shadow};
height: calc(100vh - 45px);
}
`;
diff --git a/src/views/MainTabs.tsx b/packages/main/views/MainTabs.tsx
similarity index 51%
rename from src/views/MainTabs.tsx
rename to packages/main/views/MainTabs.tsx
index e4355328..10015b22 100644
--- a/src/views/MainTabs.tsx
+++ b/packages/main/views/MainTabs.tsx
@@ -1,19 +1,22 @@
-import TabUnstyled, { tabUnstyledClasses } from "@mui/base/TabUnstyled";
-import TabsListUnstyled from "@mui/base/TabsListUnstyled";
-import TabPanelUnstyled from "@mui/base/TabPanelUnstyled";
-import { buttonUnstyledClasses } from "@mui/base/ButtonUnstyled";
+import Tab, { tabClasses } from "@mui/base/Tab";
+import TabsList from "@mui/base/TabsList";
+import TabPanel from "@mui/base/TabPanel";
+import { buttonClasses } from "@mui/base/Button";
import styled from "@emotion/styled";
-import TabsUnstyled from "@mui/base/TabsUnstyled";
+import Tabs from "@mui/base/Tabs";
import Panel from "../sections/Panel";
-export const TabsContainer = styled(TabsUnstyled)`
- background: ${({theme}: any) => theme.inputBg};
+export const TabsContainer = styled(Tabs)`
+ background: ${({theme}: any) => theme.deep};
+
`;
-export const Tab = styled(TabUnstyled)`
- color: ${({theme}: any) => theme.textColor};
- background: ${({theme}: any) => theme.buttonDefault};
- border: 1px solid ${({theme}: any) => theme.buttonBorder};
+
+
+export const Tabq = styled(Tab)`
+ color: ${({theme}: any) => theme.contrast};
+ background: ${({theme}: any) => theme.neutral};
+ border: 1px solid ${({theme}: any) => theme.accentNeutral};
cursor: pointer;
font-size: 13px;
background-color: transparent;
@@ -27,22 +30,22 @@ export const Tab = styled(TabUnstyled)`
transition: 0.2s all;
&:hover {
- background-color: ${({ theme }: any) => theme.buttonHover};
+ background-color: ${({ theme }: any) => theme.lightNeutral};
}
&:focus {
- color: ${({ theme }: any) => theme.textColor};
- background: ${({ theme }: any) => theme.buttonDefault};
+ color: ${({ theme }: any) => theme.contrast};
+ background: ${({ theme }: any) => theme.neutral};
border-radius: 3px 3px 0px 0px;
outline-offset: 2px;
}
- &.${tabUnstyledClasses.selected} {
- border-bottom: 1px solid ${({ theme }: any) => theme.primaryDark};
+ &.${tabClasses.selected} {
+ border-bottom: 1px solid ${({ theme }: any) => theme.primary};
}
- &.${buttonUnstyledClasses.disabled} {
+ &.${buttonClasses.disabled} {
opacity: 0.5;
cursor: not-allowed;
}
@@ -59,21 +62,21 @@ export const TabHeaderContainer = styled.div`
font-size: 13px;
display: flex;
align-items: center;
- color: ${({theme}: any) => theme.textColor};
+ color: ${({theme}: any) => theme.contrast};
justify-content: space-between;
- background: ${({theme}: any) => theme.tabHeader};
+ background: ${({theme}: any) => theme.shadow};
height: 37px;
`;
-export const TabPanel = styled(TabPanelUnstyled)`
+export const TabPanelq = styled(TabPanel)`
width: 100%;
- background: ${({ theme }: any) => theme.widgetContainer};
+ background: ${({ theme }: any) => theme.shadow};
height: inherit;
`;
-export const TabsList = styled(TabsListUnstyled)`
+export const TabsListq = styled(TabsList)`
min-width: 320px;
- background: ${({ theme }: any) => theme.tabHeader};
- border-bottom: 4px solid ${({ theme }: any) => theme.historyRow};
+ background: ${({ theme }: any) => theme.shadow};
+ border-bottom: 4px solid ${({ theme }: any) => theme.bgNeutral};
display: flex;
align-items: center;
align-content: space-between;
@@ -83,15 +86,15 @@ export const TabsList = styled(TabsListUnstyled)`
export default function MainTabs() {
return (
-
-
+
+
{"Left"}
-
+
-
+
{"Right"}
-
-
+
+
diff --git a/src/views/ScreenLoader.tsx b/packages/main/views/ScreenLoader.tsx
similarity index 85%
rename from src/views/ScreenLoader.tsx
rename to packages/main/views/ScreenLoader.tsx
index 3da7d4f9..a020d646 100644
--- a/src/views/ScreenLoader.tsx
+++ b/packages/main/views/ScreenLoader.tsx
@@ -1,5 +1,4 @@
-import React from "react";
-import { useTheme } from "../components/DataViews/components/QueryBuilder/hooks";
+import useTheme from "@ui/theme/useTheme"
import { cx } from "@emotion/css";
import { QrynLogo } from "./DataSources/ui";
import {
diff --git a/src/views/User/UserRoles.tsx b/packages/main/views/User/UserRoles.tsx
similarity index 87%
rename from src/views/User/UserRoles.tsx
rename to packages/main/views/User/UserRoles.tsx
index bfb0e2d8..476b1249 100644
--- a/src/views/User/UserRoles.tsx
+++ b/packages/main/views/User/UserRoles.tsx
@@ -1,15 +1,15 @@
import { useMemo, useState } from "react";
import { cx, css } from "@emotion/css";
-import { useTheme } from "../../theme";
+import useTheme from "@ui/theme/useTheme";
import { nanoid } from "nanoid";
-import Avatar from "react-avatar";
+import Avatar from '@mui/material/Avatar';
import CookieIcon from "@mui/icons-material/Cookie";
import { useCookies } from "react-cookie";
import { Switch } from "@mui/material";
import { useDispatch, useSelector } from "react-redux";
import { setCurrentUser } from "./actions";
import DOMPurify from "isomorphic-dompurify";
-
+import sliceAvatar from "@ui/helpers/sliceAvatar";
export interface User {
id: string;
name: string;
@@ -68,7 +68,7 @@ export const setLocalUsers: LocalFN["set"] = (data) => {
type userType = ADMIN_ROLE | USER_ROLE | GUEST_ROLE | SUPER_ADMIN_ROLE;
const UserRolesStyles = (theme: any) => css`
- background: ${theme.viewBg};
+ background: ${theme.background};
padding: 10px;
display: flex;
flex: 1;
@@ -79,8 +79,8 @@ const UserRolesStyles = (theme: any) => css`
width: 100%;
border-radius: 3px;
max-width: 1280px;
- background: ${theme.widgetContainer};
- border: 1px solid ${theme.buttonBorder};
+ background: ${theme.shadow};
+ border: 1px solid ${theme.accentNeutral};
flex: 1;
flex-direction: column;
}
@@ -89,13 +89,13 @@ const UserRolesStyles = (theme: any) => css`
align-items: center;
margin: 5px;
justify-content: space-between;
- border: 1px solid ${theme.buttonBorder};
+ border: 1px solid ${theme.accentNeutral};
padding: 10px;
border-radius: 3px;
height: 30px;
p {
- color: ${theme.textColor};
+ color: ${theme.contrast};
font-size: 10px;
letter-spacing: 1px;
text-transform: uppercase;
@@ -103,7 +103,7 @@ const UserRolesStyles = (theme: any) => css`
align-items: center;
}
.avatar {
- color: ${theme.textColor};
+ color: ${theme.contrast};
font-size: 10px;
letter-spacing: 1px;
display: flex;
@@ -115,10 +115,10 @@ const UserRolesStyles = (theme: any) => css`
select {
margin-left: 4px;
font-size: 12px;
- color: ${theme.textColor};
+ color: ${theme.contrast};
padding: 4px;
border-radius: 3px;
- background: ${theme.inputBg};
+ background: ${theme.deep};
}
.user-role {
@@ -126,7 +126,7 @@ const UserRolesStyles = (theme: any) => css`
align-items: center;
font-size: 10px;
text-transform: uppercase;
- color: ${theme.textColor};
+ color: ${theme.contrast};
p {
margin-left: 4px;
}
@@ -136,10 +136,10 @@ const UserRolesStyles = (theme: any) => css`
display: flex;
align-items: center;
padding: 4px;
- border: 1px solid ${theme.buttonBorder};
+ border: 1px solid ${theme.accentNeutral};
border-radius: 3px;
- background: ${theme.inputBg};
- color: ${theme.textColor};
+ background: ${theme.deep};
+ color: ${theme.contrast};
height: 28px;
font-size: 12px;
}
@@ -153,18 +153,18 @@ const UserRolesStyles = (theme: any) => css`
display: flex;
align-items: center;
flex: 1;
- background: ${theme.widgetContainer};
- border: 1px solid ${theme.buttonBorder};
+ background: ${theme.shadow};
+ border: 1px solid ${theme.accentNeutral};
border-radius: 3px;
cursor: pointer;
- color: ${theme.textColor};
+ color: ${theme.contrast};
max-width: 25px;
&:hover {
- background: ${theme.mainBgColor};
+ background: ${theme.background};
}
.cookie-icon {
font-size: 15px;
- color: ${theme.textColor};
+ color: ${theme.contrast};
}
}
}
@@ -176,14 +176,14 @@ const UserSelected = (theme: any, selected: boolean) => css`
border-radius: 3px;
font-size: 10px;
text-transform: uppercase;
- color: ${selected ? theme.primaryDark : theme.textColor} !important;
- color: ${theme.inputBg};
+ color: ${selected ? theme.primary : theme.contrast} !important;
+ color: ${theme.deep};
cursor: pointer;
display: flex;
align-items: center;
border: 1px solid transparent;
&:hover {
- border: 1px solid ${theme.buttonBorder};
+ border: 1px solid ${theme.accentNeutral};
}
&:after {
content: "";
@@ -192,11 +192,15 @@ const UserSelected = (theme: any, selected: boolean) => css`
width: 10px;
height: 10px;
border-radius: 3px;
- background: ${selected ? theme.primaryDark : theme.widgetContainer};
- border: 1px solid ${theme.primaryDark};
+ background: ${selected ? theme.primary : theme.shadow};
+ border: 1px solid ${theme.primary};
}
`;
+const QrynAvatar = ({name}:{name:string}) => (
+ {sliceAvatar(name)}
+)
+
type UserRowProps = {
user: User;
onUserAdd(e: any): void;
@@ -250,12 +254,12 @@ const UserRow: React.FC = (props) => {
const onUserConfirm = (e: any) => {
if (e.key === "Enter") {
- console.log("do validate");
+
setUserEdit(() => false);
}
};
- const onUserEdit = (e: any) => {
+ const onUserEdit = () => {
if (!isSuperAdmin) {
setUserEdit((prev: boolean) => !prev);
}
@@ -265,7 +269,9 @@ const UserRow: React.FC = (props) => {
{!userEdit ? (
) : (
@@ -335,7 +341,7 @@ const UserRow: React.FC
= (props) => {
};
const UserRows: React.FC = () => {
- const dispatch = useDispatch();
+ const dispatch: any = useDispatch();
const currentUser = useSelector((store: any) => store.currentUser);
const usersFromLocal = useMemo(() => {
return getUsersFromLocal();
@@ -354,12 +360,12 @@ const UserRows: React.FC = () => {
},
]
);
-
+// eslint-disable-next-line
const [cookie, setCookie] = useCookies(["user-cookie"]);
- console.log(cookie);
+
- const onUserAdd = (e: any) => {
+ const onUserAdd = () => {
setUsers((prev: User[]) => {
let usersUpdated: User[] = [
...prev,
@@ -378,7 +384,8 @@ const UserRows: React.FC = () => {
});
};
- const onUserSelect = (e: any, data: User) => {
+ const onUserSelect = (e:any, data: User) => {
+ e.preventDefault()
setUsers((prev: User[]) => {
let newUs = [...prev];
@@ -399,6 +406,7 @@ const UserRows: React.FC = () => {
};
const onUserRemove = (e: any, id: string) => {
+ e.preventDefault()
const prev = [...users]?.filter((f: User) => f.id !== id);
// if user removed is currentuser, go back to admin
@@ -412,6 +420,7 @@ const UserRows: React.FC = () => {
};
const onUserChange = (e: any, data: User) => {
+ e.preventDefault()
let prev = [...users];
let newUsers = prev?.map((user: User) => {
@@ -430,6 +439,7 @@ const UserRows: React.FC = () => {
};
const onUserCookie = (e: any, data: User) => {
+ e.preventDefault()
try {
setCookie("user-cookie", btoa(JSON.stringify(data)));
} catch (e) {
diff --git a/src/views/User/actions.tsx b/packages/main/views/User/actions.tsx
similarity index 100%
rename from src/views/User/actions.tsx
rename to packages/main/views/User/actions.tsx
diff --git a/src/views/screenLoaderStyles.tsx b/packages/main/views/screenLoaderStyles.tsx
similarity index 95%
rename from src/views/screenLoaderStyles.tsx
rename to packages/main/views/screenLoaderStyles.tsx
index f89f1f75..bda88d3e 100644
--- a/src/views/screenLoaderStyles.tsx
+++ b/packages/main/views/screenLoaderStyles.tsx
@@ -5,7 +5,7 @@ export const LoaderCont = (theme: any) => css`
position: absolute;
left: 0;
top: 0;
- background: ${theme.viewBg};
+ background: ${theme.background};
width: 100%;
height: 100%;
display: flex;
@@ -55,7 +55,7 @@ export const CenterCircle = css`
`;
export const LogoBottom = (theme: any) => css`
- color: ${theme.textColor};
+ color: ${theme.contrast};
font-size: 1em;
display: flex;
align-items: center;
diff --git a/packages/main/vite.config.ts b/packages/main/vite.config.ts
new file mode 100644
index 00000000..3b1ef3b9
--- /dev/null
+++ b/packages/main/vite.config.ts
@@ -0,0 +1,112 @@
+/// qryn-view
-
-
- You need to enable JavaScript to run this app.
-
-
-
diff --git a/public/manifest.json b/public/manifest.json
deleted file mode 100644
index f64018ce..00000000
--- a/public/manifest.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
- "short_name": "qryn-view",
- "name": "qryn View",
- "icons": [
- {
- "src": "favicon.ico",
- "sizes": "64x64 32x32 24x24 16x16",
- "type": "image/x-icon"
- }
- ],
- "start_url": "/",
- "display": "standalone",
- "theme_color": "#000000",
- "background_color": "#ffffff"
-}
diff --git a/public/qryn-logo.png b/public/qryn-logo.png
deleted file mode 100644
index 416deea0..00000000
Binary files a/public/qryn-logo.png and /dev/null differ
diff --git a/public/robots.txt b/public/robots.txt
deleted file mode 100644
index e9e57dc4..00000000
--- a/public/robots.txt
+++ /dev/null
@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:
diff --git a/src/VERSION.ts b/src/VERSION.ts
deleted file mode 100644
index dfd8be35..00000000
--- a/src/VERSION.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const VERSION = '0.0.1'
\ No newline at end of file
diff --git a/src/components/DataViews/components/Logs/LogRows.tsx b/src/components/DataViews/components/Logs/LogRows.tsx
deleted file mode 100644
index ac0d95b7..00000000
--- a/src/components/DataViews/components/Logs/LogRows.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { PureComponent} from "react";
-import { LogsWrapper } from "./LogsWrapper";
-import { RowsCont } from "./styled";
-
-/**
- * Returns the logs rows
- * @props {messages, actualQuery}
- *
- */
-export class LogRows extends PureComponent {
- constructor(props: any) {
- super(props);
- const { messages } = props || [];
-
- this.state = {
- messages,
- };
- }
-
- toggleItemActive = (index: any) =>
- this.setState((prevState: any) => {
- const message = prevState.messages[index];
- const messages = prevState.messages.concat();
- messages[index] = {
- ...message,
- showLabels: !message.showLabels,
- };
- return { messages };
- });
-
- render() {
- const { actualQuery }: any = this.props;
- const { dataSourceId }: any = actualQuery;
- const { messages }: any = this.state;
- return (
-
-
- );
- }
-}
diff --git a/src/components/DataViews/components/Table/VectorTable/index.tsx b/src/components/DataViews/components/Table/VectorTable/index.tsx
deleted file mode 100644
index 4baf699d..00000000
--- a/src/components/DataViews/components/Table/VectorTable/index.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { PureComponent } from "react";
-import { VectorTable } from "./VectorTable";
-export class TableContainer extends PureComponent {
- constructor(props: any) {
- super(props);
- const { tableData } = props || [];
- this.state = {
- tableData: tableData || [],
- };
- }
-
- render() {
- return
-
-
-
-
-
- {" "}
-
-
-
-
-
-
- ,
- document.getElementById("root")
-);
diff --git a/src/plugins/Plugins.tsx b/src/plugins/Plugins.tsx
deleted file mode 100644
index d63f2c6f..00000000
--- a/src/plugins/Plugins.tsx
+++ /dev/null
@@ -1,222 +0,0 @@
-import { css, cx } from "@emotion/css";
-import React, { useMemo, useState, useEffect } from "react"; // this page should have the 'plugins' list with title, image and description
-import { useTheme } from "../theme";
-import ExtensionOutlinedIcon from "@mui/icons-material/ExtensionOutlined";
-import { LocalPluginsManagement } from "./PluginManagerFactory";
-import { Switch } from "@mui/material";
-import { useSelector } from "react-redux";
-
-interface PluginCardProps {
- image?: string;
- name: string;
- description: string;
- active: boolean;
- section: string;
- theme: any;
-}
-
-const PluginPageStyles = (theme: any) => css`
- max-width: 1440px;
- padding: 10px;
- margin: 10px;
- width: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex: 1;
- -ms-flex: 1;
- flex: 1;
- overflow-x: hidden;
- display: flex;
- flex: 1;
- height: 100%;
- overflow: hidden;
- max-width: 1440px;
- align-self: center;
- .plugin-section {
- padding: 4px;
- font-size: 14px;
- color: ${theme.textColor};
- }
-`;
-
-const PluginCardStyles = (theme: any) => css`
- padding: 10px;
- margin: 4px;
- background: ${theme.widgetContainer};
- border: 1px solid ${theme.buttonBorder};
- color: ${theme.textColor};
- display: flex;
- align-items: flex-start;
- flex-direction: column;
- width: 350px;
- border-radius: 3px;
- height: fit-content;
-
- .image {
- display: flex;
- align-items: center;
- }
-
- .title {
- font-size: 16px;
- padding: 4px;
- align-self: flex-start;
- display: flex;
- align-items: center;
- width: 100%;
- .plugin-name {
- flex: 1;
- margin-left: 10px;
- }
- .switch {
- display: flex;
- align-items: center;
- justify-self: end;
- }
- }
- .text {
- font-size: 12px;
- padding: 4px;
- line-height: 1.5;
- }
- .icon {
- font-size: 60px;
- opacity: 0.25;
- }
-`;
-
-export const PluginCard: React.FC = (props) => {
- const { theme, name, description, section, active } = props;
- return (
- <>
-
-
- );
-};
-
-export const InlineSwitch = css`
- display: flex;
- align-items: center;
- justify-content: space-between;
-`;
-
-type PluginSwitchProps = {
- name: string;
- active: boolean;
- section: string;
-};
-
-export const PluginSwitch: React.FC = (props) => {
- const { name, active, section } = props;
-
- const pl = LocalPluginsManagement();
-
- const [isActive, setIsActive] = useState(active);
-
- const handlePluginSwitch = (
- section: string,
- name: string,
- active: boolean
- ) => {
- setIsActive(() => !active);
- pl.togglePlugin(section, name, !active);
- };
-
- return (
- <>
- handlePluginSwitch(section, name, isActive)}
- inputProps={{
- "aria-label": "controlled",
- }}
- />
-
- );
-};
-
-export const PluginCards: React.FC<{
- components: any[];
- section: string;
-}> = ({ components, section }) => {
- const userType = useSelector((store: any) => store.currentUser.role);
-
- const compList = useMemo(() => {
- return components?.filter((f: any) => f.roles.includes(userType));
- }, [userType, components]);
-
- const [filteredComponentList, setFilteredComponentList] =
- useState(compList);
-
- useEffect(() => {
- if (userType && components) {
- let newComp = components?.filter((f: any) =>
- f.roles.includes(userType)
- );
- setFilteredComponentList(newComp);
- }
- }, [userType, components]);
-
- const theme = useTheme();
- return (
-
- {filteredComponentList?.length > 0 &&
- filteredComponentList?.map((component: any, k: number) => (
-
- ))}
-
- {plugins?.length > 0 &&
- plugins?.map(([section, components]: any, index: number) => (
-
- ))}
-
= ({
- columnFilterValue,
- getFacetedMinMaxValues,
- setFilterValue,
-}) => {
- const theme = useTheme();
- const minOpt = getFacetedMinMaxValues()?.[0]
- const min = Number(minOpt ?? '')
-
- const maxOpt = getFacetedMinMaxValues()?.[1]
- const max = Number(maxOpt)
-
- return (
-
-
-
- setFilterValue((old: [number, number]) => [value, old?.[1]])
- }
- placeholder={`Min ${minOpt ? `(${min})` : ''}`}
- className="w-24 border shadow rounded"
- />
-
- setFilterValue((old: [number, number]) => [old?.[0], value])
- }
- placeholder={`Max ${maxOpt ? `(${max})` : ''}`}
- className="w-24 border shadow rounded"
- />
-
-
-
= ({
- columnId,
- columnFilterValue,
- columnSize,
- setFilterValue,
- sortedUniqueValues,
-}) => {
- const dataListId = columnId + 'list'
- const theme = useTheme();
- return (
-
-
- {sortedUniqueValues.slice(0, 5000).map((value: any) => (
-
- setFilterValue(value)}
- placeholder={`Search... (${columnSize})`}
- className="w-36 border shadow rounded"
- list={dataListId}
- />
-
-
- )
-}
-
-type Props = {
- column: Column
- table: Table
-}
-
-export function Filter({ column, table }: Props) {
- const firstValue = table
- .getPreFilteredRowModel()
- .flatRows[0]?.getValue(column.id)
-
- const columnFilterValue = column.getFilterValue()
- const uniqueValues = column.getFacetedUniqueValues()
-
- const sortedUniqueValues = useMemo(
- () =>
- typeof firstValue === 'number'
- ? []
- : Array.from(uniqueValues.keys()).sort(),
- // eslint-disable-next-line react-hooks/exhaustive-deps
- [uniqueValues]
- )
-
- return typeof firstValue === 'number' ? (
-
-
-
-
{process.env.REACT_APP_VERSION}
-
{"/"} {renderPath(location.pathname)}
-
-
-
-
-
-