Skip to content

Commit 4009142

Browse files
jacovinusjacovinus
authored
Merge pull request #81 from metrico/jacovinus-mutiple-label-tooltip
Feature: Embed Link
2 parents d6ae450 + 819f297 commit 4009142

26 files changed

+1250
-1115
lines changed

Diff for: ‎src/actions/index.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,6 @@ export * from "./setApiError";
1414
export * from "./errorHandler";
1515
export * from "./setLabels";
1616
export * from "./createAlert";
17-
export * from "./removeAlert";
17+
export * from "./removeAlert";
18+
export * from "./setFromTime";
19+
export * from "./setToTime";

Diff for: ‎src/actions/loadLogs.js

+120-109
Original file line numberDiff line numberDiff line change
@@ -7,118 +7,129 @@ import { nanoid } from "nanoid";
77
import { setStartTime, setStopTime } from "./";
88
import { findRangeByLabel } from "../components/StatusBar/components/daterangepicker/utils";
99

10-
1110
export default function loadLogs() {
11+
const localStore = store.getState();
12+
const {
13+
query,
14+
limit,
15+
step,
16+
apiUrl,
17+
label: rangeLabel,
18+
from,
19+
to,
20+
} = localStore;
21+
let { start: startTs, stop: stopTs } = localStore;
22+
23+
function getTimeParsed(time) {
24+
return time.getTime() + "000000";
25+
}
26+
27+
const parsedStart = getTimeParsed(startTs);
28+
const parsedStop = getTimeParsed(stopTs);
29+
30+
const parsedTime =
31+
"&start=" + (from || parsedStart) + "&end=" + (to || parsedStop);
32+
33+
if (findRangeByLabel(rangeLabel)) {
34+
({ dateStart: startTs, dateEnd: stopTs } =
35+
findRangeByLabel(rangeLabel));
36+
}
37+
38+
store.dispatch(setStartTime(startTs));
39+
store.dispatch(setStopTime(stopTs));
40+
41+
const origin = window.location.origin;
42+
const url = apiUrl;
43+
44+
const queryStep = `&step=${step || 120}`;
1245

13-
const localStore = store.getState();
14-
const { query, limit, step, apiUrl, label: rangeLabel } = localStore;
15-
let { start: startTs, stop: stopTs } = localStore;
16-
17-
if (findRangeByLabel(rangeLabel)) {
18-
({ dateStart: startTs, dateEnd: stopTs } = findRangeByLabel(rangeLabel));
19-
}
20-
21-
store.dispatch(setStartTime(startTs));
22-
store.dispatch(setStopTime(stopTs));
23-
24-
const origin = window.location.origin;
25-
const url = apiUrl;
26-
const parsedTime =
27-
"&start=" +
28-
startTs?.getTime() +
29-
"000000" +
30-
"&end=" +
31-
stopTs?.getTime() +
32-
"000000";
33-
34-
const queryStep = `&step=${step || 120}`;
35-
36-
const encodedQuery = `${encodeURIComponent(query)}`;
37-
38-
const getUrl = `${url}/loki/api/v1/query_range?query=${encodedQuery}&limit=${limit}${parsedTime}${queryStep}`;
39-
40-
const options = {
41-
method: "GET",
42-
headers: {
43-
"Content-Type": "application/javascript",
44-
"Access-Control-Allow-Origin": origin,
45-
},
46-
};
47-
48-
const fromNanoSec = (ts) => parseInt(ts / 1000000);
49-
const toMiliseC = (ts) => parseInt(ts * 1000);
50-
const getTimestamp = (type) => (ts) =>
51-
type === "streams"
52-
? fromNanoSec(ts)
53-
: type === "matrix"
54-
? toMiliseC(ts)
55-
: ts;
56-
const mapStreams = (streams, messages, type) => {
57-
streams.forEach((stream) => {
58-
stream.values.forEach((log, i) => {
59-
let [ts, text] = log;
60-
messages.push({
61-
type,
62-
timestamp: getTimestamp(type)(ts),
63-
text,
64-
tags:
65-
type === "streams"
66-
? stream.stream
67-
: type === "matrix"
68-
? stream.metric
69-
: {},
70-
showTs: true,
71-
showLabels: false,
72-
id: nanoid(),
46+
const encodedQuery = `${encodeURIComponent(query)}`;
47+
48+
const getUrl = `${url}/loki/api/v1/query_range?query=${encodedQuery}&limit=${limit}${parsedTime}${queryStep}`;
49+
50+
const options = {
51+
method: "GET",
52+
headers: {
53+
"Content-Type": "application/javascript",
54+
"Access-Control-Allow-Origin": origin,
55+
},
56+
};
57+
58+
const fromNanoSec = (ts) => parseInt(ts / 1000000);
59+
const toMiliseC = (ts) => parseInt(ts * 1000);
60+
const getTimestamp = (type) => (ts) =>
61+
type === "streams"
62+
? fromNanoSec(ts)
63+
: type === "matrix"
64+
? toMiliseC(ts)
65+
: ts;
66+
const mapStreams = (streams, messages, type) => {
67+
streams.forEach((stream) => {
68+
stream.values.forEach((log, i) => {
69+
let [ts, text] = log;
70+
messages.push({
71+
type,
72+
timestamp: getTimestamp(type)(ts),
73+
text,
74+
tags:
75+
type === "streams"
76+
? stream.stream
77+
: type === "matrix"
78+
? stream.metric
79+
: {},
80+
showTs: true,
81+
showLabels: false,
82+
id: nanoid(),
83+
});
84+
});
7385
});
74-
});
75-
});
76-
};
77-
78-
//const mapMatrix
79-
return async function (dispatch) {
80-
dispatch(setLoading(true));
81-
dispatch(setLogs([]));
82-
dispatch(setMatrixData([]));
83-
84-
await axios
85-
.get(getUrl, options)
86-
?.then((response) => {
87-
if (response?.data?.data) {
88-
let messages = [];
89-
const result = response?.data?.data?.result; // array
90-
const type = response?.data?.data?.resultType;
91-
if (type === "streams") {
92-
mapStreams(result, messages, type);
93-
dispatch(setMatrixData([]));
94-
const messSorted = messages?.sort((a, b) =>
95-
a.timestamp < b.timestamp ? 1 : -1
96-
);
97-
if (messSorted) {
98-
dispatch(setLogs(messSorted || []));
99-
100-
dispatch(setLoading(false));
101-
}
102-
}
103-
104-
if (type === "matrix") {
105-
const idResult = result?.map((m) => ({ ...m, id: nanoid() }))||[];
106-
dispatch(setMatrixData(idResult || []));
107-
dispatch(setLoading(false));
108-
}
109-
dispatch(setLoading(false));
110-
} else {
111-
dispatch(setLogs([]));
112-
dispatch(setMatrixData([]));
113-
dispatch(setLoading(false));
114-
}
115-
dispatch(setLoading(false));
116-
})
117-
.catch((error) => {
86+
};
87+
88+
//const mapMatrix
89+
return async function (dispatch) {
90+
dispatch(setLoading(true));
11891
dispatch(setLogs([]));
11992
dispatch(setMatrixData([]));
120-
dispatch(setLoading(false));
121-
console.log(error);
122-
});
123-
};
93+
94+
await axios
95+
.get(getUrl, options)
96+
?.then((response) => {
97+
if (response?.data?.data) {
98+
let messages = [];
99+
const result = response?.data?.data?.result; // array
100+
const type = response?.data?.data?.resultType;
101+
if (type === "streams") {
102+
mapStreams(result, messages, type);
103+
dispatch(setMatrixData([]));
104+
const messSorted = messages?.sort((a, b) =>
105+
a.timestamp < b.timestamp ? 1 : -1
106+
);
107+
if (messSorted) {
108+
dispatch(setLogs(messSorted || []));
109+
110+
dispatch(setLoading(false));
111+
}
112+
}
113+
114+
if (type === "matrix") {
115+
const idResult =
116+
result?.map((m) => ({ ...m, id: nanoid() })) || [];
117+
dispatch(setMatrixData(idResult || []));
118+
dispatch(setLoading(false));
119+
}
120+
dispatch(setLoading(false));
121+
} else {
122+
dispatch(setLogs([]));
123+
dispatch(setMatrixData([]));
124+
dispatch(setLoading(false));
125+
}
126+
dispatch(setLoading(false));
127+
})
128+
.catch((error) => {
129+
dispatch(setLogs([]));
130+
dispatch(setMatrixData([]));
131+
dispatch(setLoading(false));
132+
console.log(error);
133+
});
134+
};
124135
}

Diff for: ‎src/actions/setDebugMode.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export default function setDebugMode( debugMode) {
2+
return function (dispatch){
3+
dispatch({
4+
type:"SET_DEBUG_MODE",
5+
debugMode
6+
})
7+
}
8+
}

Diff for: ‎src/actions/setFromTime.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export default function setFromTime(toTime){
2+
return function (dispatch){
3+
dispatch({
4+
type:"SET_FROM_TIME"
5+
})
6+
}
7+
}

Diff for: ‎src/actions/setIsEmbed.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
const setIsEmbed = (isEmbed) => (dispatch) => {
2+
dispatch({
3+
type: 'SET_IS_EMBED',
4+
isEmbed,
5+
})
6+
}
7+
8+
export default setIsEmbed;

Diff for: ‎src/actions/setToTime.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export default function setToTime(toTime){
2+
return function (dispatch){
3+
dispatch({
4+
type:"SET_TO_TIME"
5+
})
6+
}
7+
}

Diff for: ‎src/components/DataView/ValueTags.js

+39-36
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import { setLabels } from '../../actions/setLabels';
2-
import { queryBuilderWithLabels } from '../LabelBrowser/helpers/querybuilder';
3-
import store from '../../store/store';
4-
import loadLabelValues from '../../actions/loadLabelValues';
5-
import loadLogs from '../../actions/loadLogs';
6-
import { ZoomIn, ZoomOut } from '@mui/icons-material/';
1+
import { setLabels } from "../../actions/setLabels";
2+
import { queryBuilderWithLabels } from "../LabelBrowser/helpers/querybuilder";
3+
import store from "../../store/store";
4+
import loadLabelValues from "../../actions/loadLabelValues";
5+
import loadLogs from "../../actions/loadLogs";
6+
import { ZoomIn, ZoomOut } from "@mui/icons-material/";
7+
import { useSelector } from "react-redux";
78

8-
9-
export default function ValueTags({tags}) {
10-
11-
async function addLabel(e, key, value, isInverted = false) {
9+
export default function ValueTags({ tags }) {
10+
const isEmbed = useSelector((store) => store.isEmbed);
11+
async function addLabel(e, key, value, isInverted = false) {
1212
e.preventDefault();
1313
e.stopPropagation();
1414
const { labels, apiUrl } = store.getState();
@@ -45,34 +45,37 @@ export default function ValueTags({tags}) {
4545

4646
store.dispatch(loadLogs());
4747
}
48-
};
49-
48+
}
5049

5150
return (
5251
<>
53-
{Object.entries(tags).map(([key, value], k) => (
54-
<div className={"value-tags"} key={k}>
55-
<span
56-
aria-label="Filter for value"
57-
title="Filter for value"
58-
onClick={(e) => addLabel(e, key, value)}
59-
className={"icon"}
60-
>
61-
<ZoomIn color="primary" />
62-
</span>
63-
<span
64-
aria-label="Filter out value"
65-
title="Filter out value"
66-
onClick={(e) => addLabel(e, key, value, true)}
67-
className={"icon"}
68-
>
69-
<ZoomOut color="primary" />
70-
</span>
52+
{Object.entries(tags).map(([key, value], k) => (
53+
<div className={"value-tags"} key={k}>
54+
{!isEmbed && (
55+
<>
56+
<span
57+
aria-label="Filter for value"
58+
title="Filter for value"
59+
onClick={(e) => addLabel(e, key, value)}
60+
className={"icon"}
61+
>
62+
<ZoomIn color="primary" />
63+
</span>
64+
<span
65+
aria-label="Filter out value"
66+
title="Filter out value"
67+
onClick={(e) => addLabel(e, key, value, true)}
68+
className={"icon"}
69+
>
70+
<ZoomOut color="primary" />
71+
</span>
72+
</>
73+
)}
7174

72-
<span>{key}</span>
73-
<span>{value}</span>
74-
</div>
75-
))}
75+
<span>{key}</span>
76+
<span>{value}</span>
77+
</div>
78+
))}
7679
</>
77-
)
78-
};
80+
);
81+
}

Diff for: ‎src/components/DataView/styled/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export const DataViewStyled = styled.div`
1313
position: relative;
1414
flex: 1;
1515
border-radius: 3px;
16-
padding: 0.5rem;
16+
//padding: 0.5rem;
1717
1818
&::-webkit-scrollbar {
1919
width: 10px;

0 commit comments

Comments
 (0)