Ready to Search Logs! Fine tune your query and hit Refresh
-
[ No Result Found ]
- = [];
isFirstSearch = true;
labels: Array = [];
+ lokiLabels;
+ dataSource: Array = []
constructor(
private _srs: SearchRemoteService,
private _dtrs: DateTimeRangeService,
- private searchService: SearchService
+ private searchService: SearchService,
+ private cdr : ChangeDetectorRef
) { }
ngOnInit() {
@@ -35,21 +41,29 @@ export class TabLokiComponent implements OnInit {
}, []).join(' | ');
this.queryText = `{job="heplify-server"} ${labels}`;
+ this.cdr.detectChanges();
}
async doSerchResult () {
- this.rxText = this.queryObject.rxText
+ this.rxText = this.queryObject.rxText;
this.isFirstSearch = false;
const data = await this._srs.getData(this.queryBuilder()).toPromise();
this.resultData = data && data.data ? data.data as Array : [];
- this.resultData = this.resultData.map(i => {
- i.custom_1 = this.highlight(i.custom_1);
- return i;
+ this.lokiLabels = this.resultData.map((l) => {
+ l.custom_2 = this.labelsFormatter(l.custom_2);
+ return l;
+ })
+ this.resultData = this.resultData.map((m) => {
+ m.custom_1 = this.highlight(m.custom_1);
+ return m;
});
+
+ this.cdr.detectChanges();
}
onUpdateData (event) {
this.queryObject = event;
this.queryObject.limit = 100;
+ this.cdr.detectChanges();
}
queryBuilder() { /** depricated, need use {SearchService} */
return {
@@ -62,7 +76,16 @@ export class TabLokiComponent implements OnInit {
timestamp: this._dtrs.getDatesForQuery(true)
};
}
- private highlight(value: string = ''): void {
+
+ private labelsFormatter(rd) {
+ return JSON.parse(rd);
+ }
+
+ identify (index, item) {
+ return item.micro_ts;
+ }
+
+ private highlight(value: string = '') {
let data;
if (!!this.rxText) {
const rxText = this.rxText.replace(/\s/g, '');
diff --git a/src/app/components/search-grid-call/detail-dialog/tab-messages/tab-messages.component.css b/src/app/components/search-grid-call/detail-dialog/tab-messages/tab-messages.component.css
deleted file mode 100644
index ca1a789e..00000000
--- a/src/app/components/search-grid-call/detail-dialog/tab-messages/tab-messages.component.css
+++ /dev/null
@@ -1,19 +0,0 @@
-table {
- width: 100%;
- overflow: auto;
-}
-table tr {
- transition: background-color 0.3s;
- height: 38px;
-}
-table tr:hover {
- background-color: rgba(0, 0, 0, 0.12);
- cursor: pointer;
-}
-
-.mat-row:nth-child(2n+1){
- background-color: #e4f0ec;
-}
-.mat-row:not(:nth-child(2n+1)){
- background-color:#ffffff;
-}
\ No newline at end of file
diff --git a/src/app/components/search-grid-call/detail-dialog/tab-messages/tab-messages.component.html b/src/app/components/search-grid-call/detail-dialog/tab-messages/tab-messages.component.html
index fe79a67c..0a17a4bb 100644
--- a/src/app/components/search-grid-call/detail-dialog/tab-messages/tab-messages.component.html
+++ b/src/app/components/search-grid-call/detail-dialog/tab-messages/tab-messages.component.html
@@ -1,4 +1,4 @@
-
+
- {{i.micro_ts}}
- {{i.custom_2}}
- + +
diff --git a/src/app/components/search-grid-call/detail-dialog/tab-loki/tab-loki.component.scss b/src/app/components/search-grid-call/detail-dialog/tab-loki/tab-loki.component.scss
new file mode 100644
index 00000000..ab2ba778
--- /dev/null
+++ b/src/app/components/search-grid-call/detail-dialog/tab-loki/tab-loki.component.scss
@@ -0,0 +1,90 @@
+.loki-search {
+ padding: 5px;
+}
+.loki-container {
+ display: table;
+ height: 100%;
+ overflow-y: auto;
+}
+.loki-body {
+ padding: 1rem;
+ margin: 0.3rem;
+ display: table-row;
+ & > div {
+ display: table-cell;
+ }
+}
+mat-tab-group {
+ font-family: "Roboto", Helvetica, Arial, sans-serif;
+}
+.header-loki {
+ padding: 1rem;
+ margin: 0.3rem;
+ width: 100%;
+ display: table-row;
+ font-weight: bold;
+ color: grey;
+ & > div {
+ display: table-cell;
+ }
+}
+.item-header {
+ color: #1d1d1d;
+}
+.item-tex-loki {
+ word-break: break-word;
+ font-size: 14px;
+ color: #1d1d1d;
+}
+
+.hover {
+ opacity: 1;
+ &:hover {
+ color: #5f5f5f;
+ }
+}
+.switches {
+ display: grid;
+ grid-template-columns: 1fr 2fr 1fr;
+ width: 400px;
+ font-size: 14px;
+ padding-top: 10px;
+}
+.swithces {
+ p {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ align-items: center;
+ }
+}
+.lokitimeheader {
+ width: 180px !important;
+ padding: 5px;
+ color: grey;
+}
+
+.lokitime {
+ width: 180px;
+ padding: 5px;
+ border-left: 5px solid #dff1ff;
+ border-bottom: 5px solid transparent;
+}
+
+.lokitags {
+ width: 160px;
+ padding: 5px;
+}
+
+.lokimessage {
+ padding: 5px;
+ max-width: 60%;
+}
+
+.timeseconds {
+ margin-top: 10px;
+ color: #585858;
+ opacity: 0.75;
+ &:hover {
+ opacity: 1;
+ }
+}
diff --git a/src/app/components/search-grid-call/detail-dialog/tab-loki/tab-loki.component.ts b/src/app/components/search-grid-call/detail-dialog/tab-loki/tab-loki.component.ts
index e88ec656..57879545 100644
--- a/src/app/components/search-grid-call/detail-dialog/tab-loki/tab-loki.component.ts
+++ b/src/app/components/search-grid-call/detail-dialog/tab-loki/tab-loki.component.ts
@@ -1,28 +1,34 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, ViewEncapsulation, ChangeDetectorRef, EventEmitter, ɵConsole } from '@angular/core';
import { DateTimeRangeService } from '@app/services/data-time-range.service';
import { SearchRemoteService } from '@app/services';
-import { Functions } from '@app/helpers/functions';
import { SearchService } from '@app/services';
@Component({
selector: 'app-tab-loki',
templateUrl: './tab-loki.component.html',
- styleUrls: ['./tab-loki.component.css']
+ styleUrls: ['./tab-loki.component.scss'],
+ encapsulation: ViewEncapsulation.None,
})
export class TabLokiComponent implements OnInit {
@Input() id;
@Input() dataItem: any;
-
queryText: string;
queryObject: any;
rxText: string;
+ showTime: true;
+ showTags: false;
+ showTs: true;
+ checked: boolean;
resultData: Array- + +
+
+
+
+
+
+
+
+
+
+ Time
+
+
+
+
+ {{i.micro_ts | moment:'YYYY-MM-DD HH:mm:ss.SSS'}}
+
+
+ {{i.micro_ts}}
| Id | {{element.id}} | Date | {{element.create_date}} | Time | {{element.timeSeconds}} | Event | -+ | {{element.method}} |
|---|
| Name | {{element.name}} | diff --git a/src/app/components/search-grid-call/message-content/message-content.component.scss b/src/app/components/search-grid-call/message-content/message-content.component.scss new file mode 100644 index 00000000..d21f0d8d --- /dev/null +++ b/src/app/components/search-grid-call/message-content/message-content.component.scss @@ -0,0 +1,19 @@ +.message-container { + height: 100%; + .ngx-json-viewer { + height: initial !important; + } +} +table { + tr { + height: 38px; + } +} +.pre-content { + font-family: monospace; + font-size: 10pt; + padding: 0.5rem 2rem; + height: 100%; + box-sizing: border-box; + margin: 0; +} \ No newline at end of file diff --git a/src/app/components/search-grid-call/message-content/message-content.component.ts b/src/app/components/search-grid-call/message-content/message-content.component.ts index 0cb5dc83..5c09654b 100644 --- a/src/app/components/search-grid-call/message-content/message-content.component.ts +++ b/src/app/components/search-grid-call/message-content/message-content.component.ts @@ -4,7 +4,7 @@ import { MatTabGroup } from '@angular/material/tabs'; @Component({ selector: 'app-message-content', templateUrl: './message-content.component.html', - styleUrls: ['./message-content.component.css'] + styleUrls: ['./message-content.component.scss'] }) export class MessageContentComponent implements OnInit, OnDestroy { _data: any; diff --git a/src/app/components/search-grid-call/search-grid-call.component.css b/src/app/components/search-grid-call/search-grid-call.component.css deleted file mode 100644 index 8605751c..00000000 --- a/src/app/components/search-grid-call/search-grid-call.component.css +++ /dev/null @@ -1,53 +0,0 @@ -.resalt-top-tools { - display: flex; - justify-content: space-between; - align-items: center; - align-content: center; - margin: 0 1rem; -} -.loading { - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - background-color: rgba(255,255,255,0.6); - display: flex; - justify-content: center; - align-content: center; - align-items: center; - z-index: 9999999; -} -.regex-filter { - position: fixed; - top: 5px; - background: white; - width: 250px; - margin: auto; - right: 311px; - left: 0; - border: 0; - padding: 5px 10px; - border-radius: 6px; - outline: none; - box-shadow: inset 1px 1px 14px -6px rgba(0,0,0,0.4); -} - -.regex-filter.inContainer { - left: initial; - right: 3rem; -} - -.search-slider-footer { - position: absolute; - background: #fff; - bottom: 3rem; - left: 5rem; - right: 5rem; - margin: auto; - box-shadow: 0 -3px 12px -5px #000; - transition: all 0.6s; -} -.search-slider-footer > .content { - padding: 1rem; -} \ No newline at end of file diff --git a/src/app/components/search-grid-call/search-grid-call.component.html b/src/app/components/search-grid-call/search-grid-call.component.html index eba14f8b..b98aa5f0 100644 --- a/src/app/components/search-grid-call/search-grid-call.component.html +++ b/src/app/components/search-grid-call/search-grid-call.component.html @@ -6,6 +6,8 @@ >
|---|