Skip to content

Commit cb32cd4

Browse files
mamchurovskyymamchurovskyy
committed
feat(share button): extend "share button" functionality
1 parent 31faa7c commit cb32cd4

File tree

7 files changed

+273
-64
lines changed

7 files changed

+273
-64
lines changed

‎application/frontend/src/Views/Logs/LogsViewHeder/LogsViewHeder.svelte‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,14 @@
22
// @ts-nocheck
33
44
export let searchText = "";
5+
export let searchResetVersion = 0;
56
import Button from "../../../lib/Button/Button.svelte";
67
import DropDown from "../../../lib/DropDown/DropDown.svelte";
78
import { clickOutside } from "../../../lib/OutsideClicker/OutsideClicker.js";
9+
import { hasSearchResetRequest } from "../shareLinkViewState.js";
810
let dropDownIsVisible = false;
911
let isSearchVIsible = false;
12+
let lastSearchResetVersion = searchResetVersion;
1013
let timer;
1114
const debounce = (v) => {
1215
clearTimeout(timer);
@@ -23,6 +26,11 @@
2326
dropDownIsVisible = false;
2427
}
2528
}
29+
30+
$: if (hasSearchResetRequest(lastSearchResetVersion, searchResetVersion)) {
31+
lastSearchResetVersion = searchResetVersion;
32+
isSearchVIsible = false;
33+
}
2634
</script>
2735

2836
<div id="top-line">
@@ -77,6 +85,7 @@
7785
</div>{/if}
7886
<input
7987
type="text"
88+
bind:value={searchText}
8089
on:input={(e) => {
8190
searchText = e.target.value;
8291
}}

‎application/frontend/src/Views/Logs/NewLogsV2.svelte‎

Lines changed: 142 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,11 @@
1313
import { fade } from "svelte/transition";
1414
import { handleKeydown, copyCustomText } from "../../utils/functions.js";
1515
import { findSearchTextInLogs } from "../../Views/Logs/functions.js";
16+
import { applySharedLogUrl, buildSharedLogUrl } from "./shareLink.js";
17+
import {
18+
shouldAutoScrollLogs,
19+
shouldFlushBufferedLogs,
20+
} from "./shareLinkViewState.js";
1621
1722
import {
1823
store,
@@ -84,6 +89,10 @@
8489
let topFetchIsStarted = false;
8590
let pinedBadgeTimer = null;
8691
let pinedBadgeIsVisible = false;
92+
let skipNextSearchReload = false;
93+
let skipNextStatusReload = false;
94+
let searchResetVersion = 0;
95+
let isSharedLinkFocusMode = false;
8796
8897
function refreshStatus() {
8998
chosenStatus.set("");
@@ -209,46 +218,48 @@
209218
210219
async function fetchIfHashIsInUrl(startWith) {
211220
const initialService = $lastChosenService;
212-
const viewLogs = [
213-
...(await api.getLogsWithPrev({
214-
containerName: $lastChosenService,
215-
hostName: $lastChosenHost,
216-
limit: limit * 2,
217-
startWith,
218-
})).logs,
219-
].reverse();
221+
const getLogsArray = (response) =>
222+
Array.isArray(response?.logs) ? response.logs : [];
223+
224+
const logsWithPrevResponse = await api.getLogsWithPrev({
225+
containerName: $lastChosenService,
226+
hostName: $lastChosenHost,
227+
limit: limit * 2,
228+
startWith,
229+
});
230+
const viewLogs = [...getLogsArray(logsWithPrevResponse)].reverse();
220231
let downLogs = [];
221232
let upperLogs = [];
222233
223234
if (viewLogs.length !== limit * 2) {
224-
let limitDifference = limit * 2 - viewLogs.length;
225-
226-
downLogs = [
227-
...(await api.getPrevLogs({
228-
containerName: $lastChosenService,
229-
hostName: $lastChosenHost,
230-
status: $chosenStatus,
231-
})).logs,
232-
];
235+
const limitDifference = limit * 2 - viewLogs.length;
236+
const prevLogsResponse = await api.getPrevLogs({
237+
containerName: $lastChosenService,
238+
limit: limitDifference,
239+
startWith,
240+
hostName: $lastChosenHost,
241+
status: $chosenStatus,
242+
});
243+
downLogs = [...getLogsArray(prevLogsResponse)];
233244
} else {
234-
downLogs = [
235-
...(await api.getPrevLogs({
236-
containerName: $lastChosenService,
237-
limit,
238-
startWith: startWith,
239-
hostName: $lastChosenHost,
240-
status: $chosenStatus,
241-
})).logs,
242-
];
245+
const prevLogsResponse = await api.getPrevLogs({
246+
containerName: $lastChosenService,
247+
limit,
248+
startWith: startWith,
249+
hostName: $lastChosenHost,
250+
status: $chosenStatus,
251+
});
252+
downLogs = [...getLogsArray(prevLogsResponse)];
243253
244254
if (limit - downLogs.length) {
245-
upperLogs = await api.getLogs({
255+
const upperLogsResponse = await api.getLogs({
246256
containerName: $lastChosenService,
247257
limit: limit - downLogs.length,
248258
startWith: viewLogs?.at(0)[0],
249259
hostName: $lastChosenHost,
250260
status: $chosenStatus,
251-
}).logs;
261+
});
262+
upperLogs = getLogsArray(upperLogsResponse);
252263
}
253264
}
254265
if (initialService === $lastChosenService) {
@@ -283,6 +294,12 @@
283294
}
284295
285296
function addLogFromWS(logfromWS) {
297+
if (isSharedLinkFocusMode) {
298+
logsFromWS = [...logsFromWS, logfromWS];
299+
autoscroll = false;
300+
return;
301+
}
302+
286303
if (
287304
(!mouseDownBlockFetch && endOffLogsIntersect) ||
288305
(allLogs.length < 3 * limit && endOffLogsIntersect)
@@ -359,7 +376,7 @@
359376
},
360377
});
361378
toastIsVisible.set(true);
362-
379+
363380
}
364381
}
365382
@@ -403,6 +420,69 @@
403420
function resetSearchParams() {
404421
searchText = "";
405422
}
423+
424+
async function exitSharedLinkFocusMode(flushBufferedLogs = false) {
425+
isSharedLinkFocusMode = false;
426+
427+
if (flushBufferedLogs && logsFromWS.length) {
428+
await getFullLogsSet();
429+
logsFromWS = [];
430+
}
431+
}
432+
433+
function showCopiedUrlToast() {
434+
toast.set({
435+
tittle: "Success",
436+
message: "URL has been copied",
437+
position: "",
438+
status: "Success",
439+
});
440+
441+
if (!$toastIsVisible) {
442+
toastIsVisible.set(true);
443+
toastTimeoutId.set(
444+
setTimeout(() => {
445+
toastIsVisible.set(false);
446+
}, 1500)
447+
);
448+
} else {
449+
clearTimeout($toastTimeoutId);
450+
toastIsVisible.set(false);
451+
setTimeout(() => {
452+
toastIsVisible.set(true);
453+
}, 400);
454+
}
455+
}
456+
457+
async function applySharedLinkToCurrentView(timeStamp) {
458+
const hadSearchText = Boolean(searchText);
459+
const hadChosenStatus = Boolean($chosenStatus);
460+
const { hash } = applySharedLogUrl(location.href, timeStamp);
461+
462+
isSharedLinkFocusMode = true;
463+
chosenLogsString.set(timeStamp);
464+
urlHash.set(hash);
465+
466+
if (hadSearchText) {
467+
skipNextSearchReload = true;
468+
}
469+
if (hadChosenStatus) {
470+
skipNextStatusReload = true;
471+
}
472+
473+
resetSearchParams();
474+
searchResetVersion = searchResetVersion + 1;
475+
refreshStatus();
476+
resetAllLogs();
477+
resetParams();
478+
setInitialScroll(0);
479+
isPending.set(true);
480+
closeWS();
481+
getLogsFromWS();
482+
topFetchIsStarted = true;
483+
484+
await fetchIfHashIsInUrl(timeStamp);
485+
}
406486
function closeWS() {
407487
if (webSocket) {
408488
webSocket.close();
@@ -494,10 +574,10 @@
494574
}
495575
}, 50);
496576
}
497-
577+
498578
}
499579
isSearching.set(false);
500-
}
580+
}
501581
lastFetchActionIsFetch = true;
502582
return total_logs;
503583
} catch (e) {
@@ -527,7 +607,7 @@
527607
let total_received_logs_count = 0;
528608
let is_all_logs_processed = false;
529609
let last_key = customStartWith ? customStartWith : customStartWith === 0 ? "" : allLogs.at(0)?.at(0);
530-
610+
531611
while (limit > total_received_logs_count && !is_all_logs_processed) {
532612
isSearching.set(true);
533613
const data = await getLogs({
@@ -569,7 +649,7 @@
569649
if (scrollDirection === "down" && !scrollFromButton && !stopLogsUnfetch) {
570650
const initialService = $lastChosenService;
571651
isFeatching.set(true);
572-
652+
573653
let last_key = allLogs.at(-1) ? allLogs.at(-1)[0] : "";
574654
let total_logs = [];
575655
let total_received_logs_count = 0;
@@ -621,6 +701,7 @@
621701
$: {
622702
(async () => {
623703
if ($lastChosenHost && $lastChosenService) {
704+
await exitSharedLinkFocusMode();
624705
setInitialScroll(0);
625706
resetAllLogs();
626707
resetParams();
@@ -670,6 +751,11 @@
670751
671752
$: {
672753
(async () => {
754+
if (skipNextSearchReload) {
755+
skipNextSearchReload = false;
756+
return;
757+
}
758+
await exitSharedLinkFocusMode();
673759
if (searchText) {
674760
resetParams();
675761
resetAllLogs();
@@ -685,6 +771,11 @@
685771
686772
$: {
687773
(async () => {
774+
if (skipNextStatusReload) {
775+
skipNextStatusReload = false;
776+
return;
777+
}
778+
await exitSharedLinkFocusMode();
688779
if ($chosenStatus) {
689780
resetParams();
690781
resetAllLogs();
@@ -719,7 +810,14 @@
719810
720811
$: {
721812
(async () => {
722-
if (endOffLogsIntersect && logsFromWS.length) {
813+
if (
814+
shouldFlushBufferedLogs(
815+
logsFromWS.length,
816+
isSharedLinkFocusMode,
817+
false
818+
) &&
819+
endOffLogsIntersect
820+
) {
723821
logsFromWS.length && (await getFullLogsSet());
724822
logsFromWS = [];
725823
}
@@ -761,14 +859,14 @@
761859
});
762860
763861
afterUpdate(() => {
764-
if (autoscroll) {
862+
if (shouldAutoScrollLogs(autoscroll, isSharedLinkFocusMode)) {
765863
div && div.scrollTo(0, div.scrollHeight ? div.scrollHeight : 0);
766864
}
767865
autoscroll = false;
768866
});
769867
</script>
770868
771-
<LogsViewHeder bind:searchText />
869+
<LogsViewHeder bind:searchText {searchResetVersion} />
772870
{#if pinedDate}<div>
773871
{#if pinedBadgeIsVisible || endOffLogsIntersect}<div
774872
transition:fade={{ duration: 250 }}
@@ -864,33 +962,12 @@
864962
isHiglighted={new Date($lastLogTimestamp).getTime() <
865963
new Date(logItem?.at(0)).getTime()}
866964
sharedLinkCallBack={() => {
867-
let option = "";
868-
// if ($chosenLogsString !== logItem?.at(0)) {
869-
option = logItem?.at(0);
870-
// }
871-
chosenLogsString.set(option);
872-
const copiedUrl = `${location.href}#${$chosenLogsString}`;
873-
copyCustomText(copiedUrl, () => {
874-
toast.set({
875-
tittle: "Success",
876-
message: "URL has been copied",
877-
position: "",
878-
status: "Success",
879-
});
880-
if (!$toastIsVisible) {
881-
toastIsVisible.set(true);
882-
toastTimeoutId.set(
883-
setTimeout(() => {
884-
toastIsVisible.set(false);
885-
}, 3000)
886-
);
887-
} else {
888-
clearTimeout($toastTimeoutId);
889-
toastIsVisible.set(false);
890-
setTimeout(() => {
891-
toastIsVisible.set(true);
892-
}, 400);
893-
}
965+
const timeStamp = logItem?.at(0);
966+
const nextUrl = buildSharedLogUrl(location.href, timeStamp);
967+
968+
copyCustomText(nextUrl, async () => {
969+
showCopiedUrlToast();
970+
await applySharedLinkToCurrentView(timeStamp);
894971
});
895972
}}
896973
getLogsByTagOptions={(limit, searchText)}
@@ -921,6 +998,7 @@
921998
number={logsFromWS.length}
922999
ico={"Down"}
9231000
callBack={async () => {
1001+
await exitSharedLinkFocusMode(true);
9241002
scrollFromButton = true;
9251003
autoscroll = true;
9261004
scrollDirection === "up";
@@ -947,6 +1025,7 @@
9471025
}}
9481026
on:keydown={(e) => {
9491027
handleKeydown(e, "Escape", () => {
1028+
exitSharedLinkFocusMode();
9501029
chosenLogsString.set("");
9511030
chosenStatus.set("");
9521031
});

0 commit comments

Comments
 (0)