Improve repository details display

Signed-off-by: Trivernis <trivernis@protonmail.com>

mediarepo-ui/src/app/components/core/core.component.html

@@ -1,6 +1,7 @@
 <div id="content">
-    <mat-tab-group #tabGroup (selectedTabChange)="this.onTabSelectionChange($event)" class="main-tab-group" animationDuration="0">
-        <mat-tab label="Repositories">
+    <mat-tab-group #tabGroup (selectedTabChange)="this.onTabSelectionChange($event)" class="main-tab-group"
+                   animationDuration="0">
+        <mat-tab [label]="this.selectedRepository? 'Repository' : 'Repositories'">
             <app-repositories-tab></app-repositories-tab>
         </mat-tab>
         <mat-tab *ngFor="let tab of tabs">

mediarepo-ui/src/app/components/core/core.component.scss

@@ -57,3 +57,7 @@ mat-tab-group {
 .tab-label-div {
     display: flex;
 }
+
+app-repositories-tab {
+    height: 100%;
+}

mediarepo-ui/src/app/components/core/repositories-tab/repositories-tab.component.scss

@@ -27,3 +27,7 @@
 app-repository-card {
     position: relative;
 }
+
+app-repository-details-view, .repo-details {
+    height: 100%;
+}

mediarepo-ui/src/app/components/core/repositories-tab/repository-details-view/repository-details-view.component.html

@@ -8,7 +8,6 @@
         <app-metadata-entry *ngIf="repository.path" attributeName="Path" [value]="repository.path"></app-metadata-entry>
         <app-metadata-entry *ngIf="repository.address" attributeName="Address" [value]="repository.address"></app-metadata-entry>
         <ng-container *ngIf="metadata">
-            <app-metadata-entry attributeName="Daemon Version" [value]="metadata.version"></app-metadata-entry>
             <app-metadata-entry attributeName="File Count" [value]="metadata.file_count.toString()"></app-metadata-entry>
             <app-metadata-entry attributeName="Tag Count" [value]="metadata.tag_count.toString()"></app-metadata-entry>
             <app-metadata-entry attributeName="Namespace Count" [value]="metadata.namespace_count.toString()"></app-metadata-entry>

mediarepo-ui/src/app/components/core/repositories-tab/repository-details-view/repository-details-view.component.scss

@@ -7,3 +7,19 @@
 .button-close-repository {
     float: right
 }
+
+.repository-metadata {
+    padding: 1em 1em 1em 3em;
+    overflow-y: auto;
+    user-select: none;
+
+    app-metadata-entry {
+        margin-bottom: 0.5em;
+        display: block;
+    }
+}
+
+.details-content {
+    height: calc(100% - 64px);
+    overflow: hidden;
+}

mediarepo-ui/src/app/components/core/repositories-tab/repository-details-view/repository-details-view.component.ts

@@ -1,7 +1,7 @@
 import {
     Component,
     Input,
-    OnChanges,
+    OnChanges, OnDestroy,
     OnInit,
     SimpleChanges
 } from "@angular/core";
@@ -16,24 +16,30 @@ import {RepositoryMetadata} from "../../../../models/RepositoryMetadata";
     templateUrl: "./repository-details-view.component.html",
     styleUrls: ["./repository-details-view.component.scss"]
 })
-export class RepositoryDetailsViewComponent implements OnInit, OnChanges {
+export class RepositoryDetailsViewComponent implements OnInit, OnChanges, OnDestroy {
     @Input() repository!: Repository;
 
     public metadata?: RepositoryMetadata;
+    private refreshMetadataInterval?: number;
 
     constructor(private repoService: RepositoryService) {
     }
 
     public async ngOnInit() {
-        this.metadata = await this.repoService.getRepositoryMetadata();
+        await this.loadMetadata();
+        this.refreshMetadataInterval = setInterval(async () => this.loadMetadata(), 30000);
     }
 
     public async ngOnChanges(changes: SimpleChanges) {
         if (changes["repository"]) {
-            this.metadata = await this.repoService.getRepositoryMetadata();
+            await this.loadMetadata();
         }
     }
 
+    public ngOnDestroy(): void {
+        clearInterval(this.refreshMetadataInterval);
+    }
+
     public async closeRepository() {
         if (this.repository?.local) {
             await this.repoService.closeSelectedRepository();
@@ -60,4 +66,8 @@ export class RepositoryDetailsViewComponent implements OnInit, OnChanges {
             return size + " B"
         }
     }
+
+    public async loadMetadata() {
+        this.metadata = await this.repoService.getRepositoryMetadata();
+    }
 }