pakin/Taobin-Recipe-Manager
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add fetch all merge logs

Browse source
This commit is contained in:
pakintada@gmail.com 2023-09-21 16:12:28 +07:00
parent baa66609ee
commit 325020fd37
6 changed files with 205 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

13
client/src/app/features/changelog/changelog.component.html
View file

@ -1,7 +1,18 @@
<div class="flex">
<div class="flex-1 flex-wrap bg-stone-200 p-8" id="log-disp">
<!-- query search -->
<!-- {{fetchLoglist()}} -->
<button type="button" class="button bg-stone-400 p-2 rounded m-2 text-black font-bold" (click)="refreshLogList()">Refresh 🔃</button>
<div class="grid grid-cols-4 gap-4 m-1 auto-cols-min" id="log-dir-list">
<div *ngFor="let logfile of displayableLogs">
<div class="font-semibold text-center bg-stone-700 p-2 rounded-md text-white">
<p>{{logfile}}</p>
<button class="button bg-stone-400 p-2 rounded m-2 text-black" type="button" (click)="viewLog(logfile)">View</button>
</div>
</div>
</div>
<div id="log-dl"></div>
<p class="flex flex-wrap" id="log-disp-texts"> Display log here !</p>
<p class="flex flex-wrap" id="log-disp-texts"></p>
</div>
<!-- Temporary remove log -->
<div class="flex-3 sticky top-0 bg-slate-700 h-screen justify-centers items-center">

62
client/src/app/features/changelog/changelog.component.ts
View file

@ -1,16 +1,72 @@
import { Component } from '@angular/core';
import { MergeComponent } from '../merge/merge.component';
import { HttpClient } from '@angular/common/http';
import { environment } from 'src/environments/environment.development';
import { CommonModule } from '@angular/common';
import { FetchLogService } from 'src/app/shared/services/fetch-log.service';
@Component({
selector: 'app-changelog',
standalone: true,
templateUrl: './changelog.component.html',
styleUrls: ['./changelog.component.css'],
imports: [MergeComponent]
imports: [CommonModule,MergeComponent]
})
export class ChangelogComponent {
fetchLog(){
public displayableLogs: string[] = [];
constructor(
private httpClient: HttpClient,
){
this.fetchLoglist();
this.translateLogDirToString();
}
public fetchLoglist(): string[]{
// TODO: Fetch changelog.html
fetch("/changelog")
// fetch("/changelog")
let dirlist: any[] = []
this.httpClient.get(environment.api+"/mergelogList", {
withCredentials: true
}).subscribe({
next: (value) => {
console.log(value)
if(typeof value === "object" && value !== null){
if("dirs" in value){
console.log("dirs", value)
// dirlist.push(...(value as {dirs: unknown[]})["dirs"]);
this.displayableLogs = value.dirs as any[];
}
}
},
error: (err) => {
console.error('Error fetch json: ',err);
}
})
console.log(dirlist);
return dirlist;
}
public translateLogDirToString(){
console.log("LogDirList: ", this.displayableLogs)
let dirSelector = document.getElementById("log-dir-list")
// for(let dir of this.displayableLogs){
// console.log(dir)
// const p = document.createElement('p');
// p.innerText = dir;
// dirSelector!.appendChild(p);
// dirSelector?.replaceChild(p, dirSelector.children[])
// }
}
refreshLogList(){
this.fetchLoglist();
this.translateLogDirToString();
}
viewLog(name:string){
new FetchLogService(this.httpClient).fetchLogsToDisplay("", true, false, name);
}
}

75
client/src/app/features/merge/merge.component.ts
View file

@ -6,11 +6,13 @@ import { MergeServiceService } from './merge-service.service';
import { HttpClient, HttpParams } from '@angular/common/http';
import { environment } from 'src/environments/environment.development';
import { Observable } from 'rxjs';
import { ChangelogComponent } from '../changelog/changelog.component';
import { FetchLogService } from 'src/app/shared/services/fetch-log.service';
@Component({
selector: 'app-merge',
standalone: true,
imports: [CommonModule, ReactiveFormsModule],
imports: [CommonModule, ReactiveFormsModule, ChangelogComponent],
templateUrl: './merge.component.html',
styleUrls: ['./merge.component.css']
})
@ -25,12 +27,16 @@ export class MergeComponent<T> {
changelog_path: ""
});
default_output_path = "cofffeemachineConfig/merge/"
default_changelog_path = "cofffeemachineConfig/changelog/"
mergeLogs: Map<string, string> | void | undefined
constructor(
private targets: MergeServiceService,
private formBuilder: FormBuilder,
private httpClient: HttpClient,
private chlog: ChangelogComponent
){
// Default fetching logs
@ -52,8 +58,8 @@ export class MergeComponent<T> {
}
this.targets.master_version = this.mergeForm.value.master_version!;
this.targets.dev_version = this.mergeForm.value.dev_version!;
this.targets.output_path = this.mergeForm.value.output_path!;
this.targets.changelog_path = this.mergeForm.value.changelog_path!;
this.targets.output_path = this.default_output_path + this.mergeForm.value.output_path!;
this.targets.changelog_path = this.default_changelog_path + this.mergeForm.value.changelog_path!;
// TODO: Fetch merge. Modify this to websocket
this.httpClient.post<T>(environment.api+"/merge", {
@ -69,71 +75,18 @@ export class MergeComponent<T> {
if(typeof value === "object" && value !== null){
if("message" in value){
// fetch html
this.fetchLogsToDisplay("", true, false);
// this.fetchLogsToDisplay("", true, false);
// fetch log file
this.fetchLogsToDisplay("", false, false);
// this.fetchLogsToDisplay("", false, false);
// fetch json
this.mergeLogs = this.fetchLogsToDisplay("", false, true);
this.mergeLogs = new FetchLogService(this.httpClient).fetchLogsToDisplay("", false, true,"");
this.chlog.fetchLoglist();
this.chlog.translateLogDirToString();
}
}
},
})
}
fetchLogsToDisplay(query: string, isDisplayOnly: boolean, requestJson: boolean) : Map<string, string> | void{
let additionalParams:string = "?query=";
if(query != ""){
additionalParams += query
} else {
additionalParams = ""
}
let jsontarget;
if(requestJson){
this.httpClient.post(environment.api+"/dllog"+additionalParams, {
htmlfile: isDisplayOnly,
requestJson: requestJson
}, {
responseType: 'json',
withCredentials: true
}).subscribe({
next: (value) => {
jsontarget = value;
},
error: (err) => {
console.error('Error fetch json: ',err);
}
});
return jsontarget;
} else {
this.httpClient.post(environment.api+"/dllog"+additionalParams, {
htmlfile: isDisplayOnly,
requestJson: requestJson
},{
responseType: 'blob',
withCredentials: true,
}).subscribe(
{
next: (value) => {
const blob = new Blob([value], { type: 'application/octet-stream' });
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'logfile.log';
a.innerText = "Click here to download as `.log` file";
if(isDisplayOnly){
blob.text().then(v => document.getElementById("log-disp-texts")!.innerHTML = v);
} else {
document.getElementById("log-dl")?.appendChild(a);
document.getElementById("log-dl")!.className = "bg-yellow-500 rounded p-2 sticky top-0";
}
},
error: (err) => {
console.error('Error downloading log file: ',err);
}
}
)
}
}
}

16
client/src/app/shared/services/fetch-log.service.spec.ts Normal file
View file

@ -0,0 +1,16 @@
import { TestBed } from '@angular/core/testing';
import { FetchLogService } from './fetch-log.service';
describe('FetchLogService', () => {
let service: FetchLogService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(FetchLogService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});

78
client/src/app/shared/services/fetch-log.service.ts Normal file
View file

@ -0,0 +1,78 @@
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment.development';
@Injectable({
providedIn: 'root'
})
export class FetchLogService {
constructor(
private httpClient: HttpClient
) {}
public fetchLogsToDisplay(query: string, isDisplayOnly: boolean, requestJson: boolean, filename:string) : Map<string, string> | void{
let additionalParams:string = "?query=";
if(query != ""){
additionalParams += query
} else {
additionalParams = ""
}
let jsontarget;
if(requestJson){
this.httpClient.post(environment.api+"/dllog"+additionalParams, {
htmlfile: isDisplayOnly,
requestJson: requestJson,
filename: filename
}, {
responseType: 'json',
withCredentials: true
}).subscribe({
next: (value: any) => {
jsontarget = value;
},
error: (err: any) => {
console.error('Error fetch json: ',err);
}
});
return jsontarget;
} else {
this.httpClient.post(environment.api+"/dllog"+additionalParams, {
htmlfile: isDisplayOnly,
requestJson: requestJson,
filename: filename
},{
responseType: 'blob',
withCredentials: true,
}).subscribe(
{
next: (value: BlobPart) => {
const blob = new Blob([value], { type: 'application/octet-stream' });
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'logfile.log';
a.innerText = "Click here to download as `.log` file";
if(isDisplayOnly){
blob.text().then(v => document.getElementById("log-disp-texts")!.innerHTML = v);
} else {
while(document.getElementById("log-dl")?.firstChild){
document.getElementById("log-dl")?.removeChild(document.getElementById("log-dl")!.firstChild!);
}
document.getElementById("log-dl")?.appendChild(a);
document.getElementById("log-dl")!.className = "bg-yellow-500 rounded p-2 sticky top-0";
}
},
error: (err: any) => {
console.error('Error downloading log file: ',err);
}
}
)
}
}
}