[#noissue] improve main UI

BillionaireDY · Mar 28, 2022 · 3d54abe · 3d54abe
1 parent f4a0ccc
commit 3d54abe
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 23 deletions.
diff --git a/web/src/main/angular/src/app/core/components/app-widget/app-widget.component.html b/web/src/main/angular/src/app/core/components/app-widget/app-widget.component.html
@@ -1,8 +1,8 @@
 <div class="l-widget-group-container">
     <pp-application-list-for-header-container></pp-application-list-for-header-container>
+    <pp-server-map-options-container *ngIf="showServermapOption"></pp-server-map-options-container>
+    <pp-period-selector-container *ngIf="isAppSelected$ | async"></pp-period-selector-container>
     <div class="l-widget-group-right">
-        <pp-server-map-options-container *ngIf="showServermapOption"></pp-server-map-options-container>
-        <pp-period-selector-container *ngIf="isAppSelected$ | async"></pp-period-selector-container>
         <ng-container *ngIf="showTransactionIdSearch && isAppSelected$ | async">
             <ng-container *ngIf="isScreenWideEnough$ | async; else searchIcon">
                 <pp-transaction-id-search-container></pp-transaction-id-search-container>

diff --git a/web/src/main/angular/src/app/core/components/main-contents/index.ts b/web/src/main/angular/src/app/core/components/main-contents/index.ts
@@ -7,6 +7,7 @@ import { ServerMapModule } from 'app/core/components/server-map';
 import { MainContentsContainerComponent } from './main-contents-container.component';
 import { HelpViewerPopupModule } from 'app/core/components/help-viewer-popup';
 import { RealTimeModule } from 'app/core/components/real-time';
+import { SideBarModule } from '../side-bar';
 
 @NgModule({
     declarations: [
@@ -19,6 +20,7 @@ import { RealTimeModule } from 'app/core/components/real-time';
         ServerMapModule,
         HelpViewerPopupModule,
         RealTimeModule,
+        SideBarModule,
     ],
     exports: [
         MainContentsContainerComponent

diff --git a/.../main/angular/src/app/core/components/main-contents/main-contents-container.component.css b/.../main/angular/src/app/core/components/main-contents/main-contents-container.component.css
@@ -1,8 +1,13 @@
 :host {
-    display: block;
+    display: flex;
     width: 100%;
-    height: 100%;
 }
+
+section {
+    position: relative;
+    width: calc(100% - 477px);
+}
+
 .l-main-contents-top {
     display: flex;
     flex-flow: row wrap;
@@ -16,9 +21,7 @@
     justify-content: flex-end;
     position:absolute;
 }
-.l-main-contents-top.sideNavigationUI {
-    top: 50px;
-}
+
 .fas {
     color:var(--icon-default);
     font-size:18px;

diff --git a/...main/angular/src/app/core/components/main-contents/main-contents-container.component.html b/...main/angular/src/app/core/components/main-contents/main-contents-container.component.html
@@ -1,15 +1,18 @@
-<div class="l-main-contents-top font-opensans" [class.sideNavigationUI]="sideNavigationUI">
-    <ng-container *ngIf="showElements$ | async">
-        <div class="l-fixed-period-mover-wrapper">
-            <pp-fixed-period-mover-container></pp-fixed-period-mover-container>
+<section>
+    <div class="l-main-contents-top font-opensans" [class.sideNavigationUI]="sideNavigationUI">
+        <ng-container *ngIf="showElements$ | async">
+            <div class="l-fixed-period-mover-wrapper">
+                <pp-fixed-period-mover-container></pp-fixed-period-mover-container>
+            </div>
+        </ng-container>
+        <div class="l-search-result-viewer-wrapper">
+            <pp-server-map-search-result-viewer-container></pp-server-map-search-result-viewer-container>
         </div>
-    </ng-container>
-    <div class="l-search-result-viewer-wrapper">
-        <pp-server-map-search-result-viewer-container></pp-server-map-search-result-viewer-container>
+        <button class="fas fa-question-circle" (click)="onShowHelp($event)"></button>
     </div>
-    <button class="fas fa-question-circle" (click)="onShowHelp($event)"></button>
-</div>
-<pp-server-map-container></pp-server-map-container>
-<ng-container *ngIf="enableRealTime$ | async">
-    <pp-real-time-container></pp-real-time-container>
-</ng-container>
+    <pp-server-map-container></pp-server-map-container>
+    <ng-container *ngIf="enableRealTime$ | async">
+        <pp-real-time-container></pp-real-time-container>
+    </ng-container>
+</section>
+<pp-side-bar-container *ngIf="isAppSelected$ | async"></pp-side-bar-container>
diff --git a/...c/main/angular/src/app/core/components/main-contents/main-contents-container.component.ts b/...c/main/angular/src/app/core/components/main-contents/main-contents-container.component.ts
@@ -18,6 +18,8 @@ export class MainContentsContainerComponent implements OnInit {
     showElements$: Observable<boolean>;
     enableRealTime$: Observable<boolean>;
 
+    isAppSelected$: Observable<boolean>;
+
     constructor(
         private dynamicPopupService: DynamicPopupService,
         private newUrlStateNotificationService: NewUrlStateNotificationService,
@@ -41,6 +43,12 @@ export class MainContentsContainerComponent implements OnInit {
         ).pipe(
             map(([isRealTimeMode, useActiveThreadChart]: boolean[]) => isRealTimeMode && useActiveThreadChart)
         );
+
+        this.isAppSelected$ = this.newUrlStateNotificationService.onUrlStateChange$.pipe(
+            map((urlService: NewUrlStateNotificationService) => urlService.hasValue(UrlPathId.APPLICATION))
+        );
+
+        console.log(this.isAppSelected$)
     }
 
     onShowHelp($event: MouseEvent): void {

diff --git a/web/src/main/angular/src/app/routes/main-page/index.ts b/web/src/main/angular/src/app/routes/main-page/index.ts
@@ -9,7 +9,6 @@ import { PeriodSelectorModule } from 'app/core/components/period-selector';
 import { TransactionIdSearchModule} from 'app/core/components/transaction-id-search';
 import { ConfigurationIconModule } from 'app/core/components/configuration-icon';
 import { MainContentsModule } from 'app/core/components/main-contents';
-import { SideBarModule } from 'app/core/components/side-bar';
 import { MainPageComponent } from './main-page.component';
 import { routing } from './main-page.routing';
 import { HelpViewerPopupModule } from 'app/core/components/help-viewer-popup';
@@ -31,7 +30,6 @@ import { SideNavigationBarModule } from 'app/core/components/side-navigation-bar
         TransactionIdSearchModule,
         ConfigurationIconModule,
         MainContentsModule,
-        SideBarModule,
         HelpViewerPopupModule,
         MessagePopupModule,
         AppWidgetModule,

diff --git a/web/src/main/angular/src/app/routes/main-page/main-page.component.html b/web/src/main/angular/src/app/routes/main-page/main-page.component.html
@@ -24,6 +24,5 @@
             <pp-app-widget *ngIf="sideNavigationUI"></pp-app-widget>
             <router-outlet></router-outlet>
         </section>
-        <pp-side-bar-container *ngIf="isAppSelected$ | async"></pp-side-bar-container>
     </div>
 </div>