Skip to content

Commit

Permalink
Merge pull request #17 from charangirijala/logviewer
Browse files Browse the repository at this point in the history 
UnitView implemented with reset button functionality 🔄
  • Loading branch information
@charangirijala
charangirijala authored Jan 14, 2025
2 parents fe16781 + 43f42fa commit 63dc6b3
Show file tree
Hide file tree
Showing 7 changed files with 210 additions and 53 deletions.
11 changes: 7 additions & 4 deletions src/modules/main/logViewer/logViewer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,12 @@
class="slds-page-header__name-title"
>
<h1>
<span>Log Viewer</span
<span
>{lvTitleHead}</span
><span
class="slds-page-header__title slds-truncate"
title={fileMetadata.fileName}
>{fileMetadata.fileName}</span
title={lvTitle}
>{lvTitle}</span
>
</h1>
</div>
Expand Down Expand Up @@ -167,6 +168,7 @@ <h1>
<button
class="slds-button slds-button_icon-border action-bar-action-refreshReport reportAction report-action-refreshReport filtersButton"
type="button"
onclick={resetViewer}
>
<svg
aria-hidden="true"
Expand Down Expand Up @@ -554,7 +556,7 @@ <h1>
>
<ui-search
onclosesearch={handleSearch}
logtobe-filtered={fileData}
logtobe-filtered={dataInUse}
onmatchchange={goToMatch}
onsearchres={processSearchRes}
onnores={processNoSearchRes}
Expand Down Expand Up @@ -842,6 +844,7 @@ <h1>
<ui-utility-panel
panel-toggle={callStackToggle}
onclosepanel={closeCallStack}
onunitview={openUnitView}
data={result}
></ui-utility-panel>
</template>
Expand Down
203 changes: 158 additions & 45 deletions src/modules/main/logViewer/logViewer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,16 @@ import filterData from 'services/filters';
import { publish, subscribe } from 'services/pubsub';

export default class logViewer extends LightningElement {
isUnitView = false;
unitViewBoundaries = {
startTime: 0,
endTime: 0
};
errorCenterX = 0;
errors = [];
errorPopoverOpen = false;
lvTitle = '';
lvTitleHead = 'Log Viewer';
filterChannelSub = null;
goToPlaceholder = 'Go to line';
filterHasLabel = true;
Expand Down Expand Up @@ -71,6 +78,10 @@ export default class logViewer extends LightningElement {
}
if (data.fileMetadata) {
this.fileMetadata = data.fileMetadata;
this.lvTitle =
this.fileMetadata.fileName !== ''
? this.fileMetadata.fileName
: 'Log';
this.errors = data.fileMetadata.errors;
}

Expand Down Expand Up @@ -146,13 +157,13 @@ export default class logViewer extends LightningElement {
if (this.LineNumMap.size > 0) {
if (this.LineNumMap.has(this.pageNumber)) {
const highEle = this.LineNumMap.get(this.pageNumber);
highEle.forEach((ele) => {
highEle.forEach(({ logLineNum, pageLineNum }) => {
const element = this.template.querySelector(
`[data-logid="${ele}"]`
`[data-logid="${logLineNum}"]`
);

if (element) {
if (this.LineNumFocus !== ele) {
if (this.LineNumFocus !== pageLineNum) {
element.style.backgroundColor =
'rgb(250, 255, 189)';
} else {
Expand Down Expand Up @@ -273,8 +284,41 @@ export default class logViewer extends LightningElement {
});
this.currentEditFilterIdx = null;
this.previousFilters = JSON.parse(JSON.stringify(this.activeFilters));
this.dataInUse = filterData(this.activeFilters, this.fileData);
this.refreshPages();
this.filterDataHelper();
}

filterDataHelper() {
if (
this.activeFilters.length > 0 &&
this.fileData.length > 0 &&
this.fileData !== undefined &&
this.fileData !== null
) {
if (this.isUnitView) {
this.dataInUse = filterData(
this.activeFilters,
this.fileData.slice(
this.unitViewBoundaries.startTime - 1,
this.unitViewBoundaries.endTime
)
);
} else {
this.dataInUse = filterData(this.activeFilters, this.fileData);
}

// console.log('filtered data: ', this.dataInUse);
this.refreshPages();
} else {
if (this.isUnitView) {
this.dataInUse = this.fileData.slice(
this.unitViewBoundaries.startTime - 1,
this.unitViewBoundaries.endTime
);
} else {
this.dataInUse = this.fileData;
}
this.refreshPages();
}
}

addFilter() {
Expand Down Expand Up @@ -315,7 +359,13 @@ export default class logViewer extends LightningElement {
this.handlePopoverClose();
this.activeFilters = [];
this.previousFilters = [];
this.dataInUse = this.fileData;

this.dataInUse = this.isUnitView
? this.fileData.slice(
this.unitViewBoundaries.startTime - 1,
this.unitViewBoundaries.endTime
)
: this.fileData;
this.refreshPages();
}

Expand Down Expand Up @@ -369,19 +419,7 @@ export default class logViewer extends LightningElement {
this.previousFilters = JSON.parse(JSON.stringify(this.activeFilters));

//call filterData from filters
if (
this.activeFilters.length > 0 &&
this.fileData.length > 0 &&
this.fileData !== undefined &&
this.fileData !== null
) {
this.dataInUse = filterData(this.activeFilters, this.fileData);
// console.log('filtered data: ', this.dataInUse);
this.refreshPages();
} else {
this.dataInUse = this.fileData;
this.refreshPages();
}
this.filterDataHelper();
}

closeFilterPopoverOnClick(event) {
Expand Down Expand Up @@ -536,13 +574,7 @@ export default class logViewer extends LightningElement {

//################# FILTERS END ############################################################

handleCallStackChange() {
this.callStackToggle = !this.callStackToggle;
}
closeCallStack() {
this.callStackToggle = false;
}

//################################# SEARCH FUNCTIONALITY ##################################
handleSearch() {
this.isSearching = !this.isSearching;
if (this.isSearching === false) {
Expand All @@ -557,40 +589,41 @@ export default class logViewer extends LightningElement {
if (Array.isArray(lineNumbers)) {
lineNumbers.forEach((l) => {
if (this.linesPerPage !== 0) {
const pNum = Math.ceil(l / this.linesPerPage);
let pageLineNum = 0;
const dataIndex = this.dataInUse.findIndex(
(data) => data.lineNumber === l
);
if (dataIndex !== -1) {
pageLineNum = dataIndex + 1;
}
const pNum = Math.ceil(pageLineNum / this.linesPerPage);
if (this.LineNumMap.has(pNum)) {
this.LineNumMap.get(pNum).push(l);
this.LineNumMap.get(pNum).push({
logLineNum: l,
pageLineNum: pageLineNum
});
} else {
this.LineNumMap.set(pNum, [l]);
this.LineNumMap.set(pNum, [
{
logLineNum: l,
pageLineNum: pageLineNum
}
]);
}
}
});
}
// console.log('Map: ', this.LineNumMap);
}

goToMatch(event) {
const lineNumber = event.detail;
// console.log('lineNumber: ', lineNumber);
this.goToPage(lineNumber);
}

goToPage(lineNumber) {
//calculate the pagenumber
if (this.linesPerPage <= 0 || lineNumber <= 0) return;
this.LineNumFocus = lineNumber;
this.pageNumber = Math.ceil(lineNumber / this.linesPerPage);
this.calculations();
}

processNoSearchRes() {
this.LineNumFocus = null;
if (this.LineNumMap.size > 0) {
if (this.LineNumMap.has(this.pageNumber)) {
const highEle = this.LineNumMap.get(this.pageNumber);
highEle.forEach((ele) => {
highEle.forEach(({ logLineNum, pageLineNum }) => {
const element = this.template.querySelector(
`[data-logid="${ele}"]`
`[data-logid="${logLineNum}"]`
);
if (element) {
element.style.backgroundColor = 'rgba(0, 0, 0, 0)';
Expand All @@ -601,6 +634,86 @@ export default class logViewer extends LightningElement {
this.LineNumMap = new Map();
}

goToMatch(event) {
const lineNumber = event.detail;
let pageLineNum = 0;
// console.log('lineNumber: ', lineNumber);
const dataIndex = this.dataInUse.findIndex(
(data) => data.lineNumber === lineNumber
);
if (dataIndex !== -1) {
pageLineNum = dataIndex + 1;
}
// console.log(
// 'this.dataInUse: ',
// this.dataInUse,
// 'linenumber: ',
// pageLineNum
// );
this.goToPage(pageLineNum);
}

goToPage(lineNumber) {
//calculate the pagenumber
if (this.linesPerPage <= 0 || lineNumber <= 0) return;
this.LineNumFocus = lineNumber;
this.pageNumber = Math.ceil(lineNumber / this.linesPerPage);
this.calculations();
}

//################################# SEARCH FUNCTIONALITY END ##############################
openUnitView(event) {
// console.log('from logviewer', event.detail);
this.isUnitView = true;
const duration = event.detail.duration;
const name = event.detail.name;
const [startTimeStr, endTimeStr] = duration
.split('-')
.map((str) => str.trim());

// Convert string timestamps to numbers
const startTime = parseInt(startTimeStr, 10);
const endTime = parseInt(endTimeStr, 10);

this.unitViewBoundaries.startTime = startTime;
this.unitViewBoundaries.endTime = endTime;

if (isNaN(startTime) || isNaN(endTime)) {
console.warn(
'Invalid unitDuration format uniqueId and duration not generated',
event.detail
);
return;
}
this.lvTitle = name;
this.lvTitleHead = 'Now Showing';
this.dataInUse = this.fileData.slice(startTime - 1, endTime);
if (this.activeFilters.length > 0) {
this.dataInUse = filterData(this.activeFilters, this.dataInUse);
}
this.refreshPages();
}

resetViewer() {
this.dataInUse = this.fileData;
this.isUnitView = false;
this.unitViewBoundaries.startTime = 0;
this.unitViewBoundaries.endTime = 0;
this.refreshPages();
this.isFilterEditing = false;
this.handlePopoverClose();
this.activeFilters = [];
this.previousFilters = [];
this.lvTitle = this.fileMetadata.fileName;
this.lvTitleHead = 'Log Viewer';
}
handleCallStackChange() {
this.callStackToggle = !this.callStackToggle;
}
closeCallStack() {
this.callStackToggle = false;
}

goToLine(event) {
// console.log('linenumber', event.detail);
const lNum = event.detail;
Expand Down
2 changes: 1 addition & 1 deletion src/modules/my/appHome/appHome.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export default class AppHome extends LightningElement {
if (!this.appChannelSub) {
this.appChannelSub = subscribe('appChannel', (data) => {
this.activeApp = data.activeApp;
console.log('activeApp: ', this.activeApp);
// console.log('activeApp: ', this.activeApp);
});
}
}
Expand Down
4 changes: 2 additions & 2 deletions src/modules/ui/search/search.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default class Search extends LightningElement {
handleSearchInput(event) {
clearTimeout(this.timeoutId);
const input = event.target.value;
console.log('entered: ', input);
// console.log('entered: ', input);
this.timeoutId = setTimeout(() => {
this.searchLog(input);
}, 500);
Expand Down Expand Up @@ -82,7 +82,7 @@ export default class Search extends LightningElement {
const results = this.logtobeFiltered.filter((log) =>
log.line.includes(searchTerm)
);

console.log('search results: ', results);
if (results.length > 0) {
// console.log('Found logs:', results);
this.matchedLines = results.map((log) => log.lineNumber);
Expand Down
19 changes: 19 additions & 0 deletions src/modules/ui/utilityPanel/utilityPanel.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,3 +41,22 @@ th {
.slds-utility-panel__body {
overflow: auto;
}

.unit-name {
padding-top: 0px;
padding-bottom: 0px;
line-height: normal;
}

.unit-name:hover {
text-decoration: underline;
}

.unit-name:focus {
box-shadow: none;
-webkit-box-shadow: none;
}

.unit-name:active {
border: none;
}
9 changes: 8 additions & 1 deletion src/modules/ui/utilityPanel/utilityPanel.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -263,7 +263,14 @@ <h2 id="panel-heading-01">Call Stack</h2>
class="slds-truncate"
title={node.name}
>
{node.name}
<button
class="slds-button unit-name"
onclick={switchToUnitView}
data-unitduration={node.unitDuration}
data-unitname={node.name}
>
{node.name}
</button>
</div>
</td>
<td
Expand Down
Loading

0 comments on commit 63dc6b3

Please sign in to comment.