You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ambari.apache.org by ab...@apache.org on 2017/06/22 13:16:44 UTC

[17/21] ambari git commit: AMBARI-21320 Log Search UI: implement log entries display. (ababiichuk)

AMBARI-21320 Log Search UI: implement log entries display. (ababiichuk)


Project: http://git-wip-us.apache.org/repos/asf/ambari/repo
Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/c3d8e311
Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/c3d8e311
Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/c3d8e311

Branch: refs/heads/branch-feature-logsearch-ui
Commit: c3d8e31112105898ee0183cb3233fa8057bd5ab8
Parents: a0e713d
Author: ababiichuk <ab...@hortonworks.com>
Authored: Wed Jun 14 14:48:40 2017 +0300
Committer: ababiichuk <ab...@hortonworks.com>
Committed: Thu Jun 22 15:43:34 2017 +0300

----------------------------------------------------------------------
 .../accordion-panel.component.html              |  25 ++++
 .../accordion-panel.component.less              |  42 +++++++
 .../accordion-panel.component.spec.ts           |  42 +++++++
 .../accordion-panel.component.ts                |  38 ++++++
 .../src/app/app.component.less                  |  40 +++---
 .../src/app/app.module.ts                       |   9 +-
 .../filter-dropdown.component.less              |   2 +-
 .../filter-text-field.component.less            |   2 +-
 .../filters-panel/filters-panel.component.less  |   2 +-
 .../app/login-form/login-form.component.less    |   4 +-
 .../src/app/login-form/login-form.component.ts  |   5 +-
 .../src/app/logs-list/logs-list.component.html  |  35 ++++++
 .../src/app/logs-list/logs-list.component.less  | 125 +++++++++++++++++++
 .../app/logs-list/logs-list.component.spec.ts   |  44 +++++++
 .../src/app/logs-list/logs-list.component.ts    |  79 ++++++++++++
 .../main-container.component.html               |   1 +
 .../src/app/services/http-client.service.ts     |   7 +-
 .../src/app/top-menu/top-menu.component.less    |   2 +-
 .../src/app/top-menu/top-menu.component.ts      |   2 +-
 .../src/app/variables.less                      |  88 +++++++++++++
 .../ambari-logsearch-web-new/src/main.ts        |   8 +-
 .../ambari-logsearch-web-new/src/styles.less    |  18 ---
 22 files changed, 565 insertions(+), 55 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/ambari/blob/c3d8e311/ambari-logsearch/ambari-logsearch-web-new/src/app/accordion-panel/accordion-panel.component.html
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/accordion-panel/accordion-panel.component.html b/ambari-logsearch/ambari-logsearch-web-new/src/app/accordion-panel/accordion-panel.component.html
new file mode 100644
index 0000000..b2ce3a0
--- /dev/null
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/accordion-panel/accordion-panel.component.html
@@ -0,0 +1,25 @@
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+-->
+
+<div class="panel panel-default">
+  <div class="panel-body">
+    <ng-template [ngTemplateOutlet]="template"></ng-template>
+    <div class="accordion-toggle">
+      <span class="fa collapsed toggle-icon" data-toggle="collapse" [attr.data-target]="'#' + toggleId" aria-expanded="false">&nbsp;</span>
+    </div>
+  </div>
+</div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/c3d8e311/ambari-logsearch/ambari-logsearch-web-new/src/app/accordion-panel/accordion-panel.component.less
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/accordion-panel/accordion-panel.component.less b/ambari-logsearch/ambari-logsearch-web-new/src/app/accordion-panel/accordion-panel.component.less
new file mode 100644
index 0000000..f3630bb
--- /dev/null
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/accordion-panel/accordion-panel.component.less
@@ -0,0 +1,42 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import '../variables';
+
+.panel-body {
+  position: relative;
+
+  .accordion-toggle {
+    position: absolute;
+
+    // TODO get rid of magic numbers, base on actual design
+    right: 10px;
+    top: 15px;
+
+    .toggle-icon {
+      .clickable-item;
+
+      &:before {
+        content: '\F077';
+      }
+
+      &.collapsed:before {
+        content: '\F078';
+      }
+    }
+  }
+}

http://git-wip-us.apache.org/repos/asf/ambari/blob/c3d8e311/ambari-logsearch/ambari-logsearch-web-new/src/app/accordion-panel/accordion-panel.component.spec.ts
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/accordion-panel/accordion-panel.component.spec.ts b/ambari-logsearch/ambari-logsearch-web-new/src/app/accordion-panel/accordion-panel.component.spec.ts
new file mode 100644
index 0000000..d1b185e
--- /dev/null
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/accordion-panel/accordion-panel.component.spec.ts
@@ -0,0 +1,42 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {AccordionPanelComponent} from './accordion-panel.component';
+
+describe('AccordionPanelComponent', () => {
+  let component: AccordionPanelComponent;
+  let fixture: ComponentFixture<AccordionPanelComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [AccordionPanelComponent]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AccordionPanelComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create component', () => {
+    expect(component).toBeTruthy();
+  });
+});

http://git-wip-us.apache.org/repos/asf/ambari/blob/c3d8e311/ambari-logsearch/ambari-logsearch-web-new/src/app/accordion-panel/accordion-panel.component.ts
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/accordion-panel/accordion-panel.component.ts b/ambari-logsearch/ambari-logsearch-web-new/src/app/accordion-panel/accordion-panel.component.ts
new file mode 100644
index 0000000..ae7fd7e
--- /dev/null
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/accordion-panel/accordion-panel.component.ts
@@ -0,0 +1,38 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {Component, OnInit, Input, ContentChild, TemplateRef} from '@angular/core';
+
+@Component({
+  selector: 'accordion-panel',
+  templateUrl: './accordion-panel.component.html',
+  styleUrls: ['./accordion-panel.component.less']
+})
+export class AccordionPanelComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  @Input()
+  private toggleId: string;
+
+  @ContentChild(TemplateRef)
+  private template;
+
+}

http://git-wip-us.apache.org/repos/asf/ambari/blob/c3d8e311/ambari-logsearch/ambari-logsearch-web-new/src/app/app.component.less
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/app.component.less b/ambari-logsearch/ambari-logsearch-web-new/src/app/app.component.less
index 3affd3f..fba0ae6 100644
--- a/ambari-logsearch/ambari-logsearch-web-new/src/app/app.component.less
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/app.component.less
@@ -15,29 +15,33 @@
  * limitations under the License.
  */
 
-@import '../styles.less';
+@import 'variables';
 
-.navbar {
-  margin-bottom: 0;
-  border-radius: 0;
-  background-color: @navbar-background-color;
-  color: #fff;
+:host {
+  line-height: @default-line-height;
 
-  .container-fluid {
-    .default-flex;
-  }
+  .navbar {
+    margin-bottom: 0;
+    border-radius: 0;
+    background-color: @navbar-background-color;
+    color: #fff;
+
+    .container-fluid {
+      .default-flex;
+    }
 
-  h1 {
-    flex-basis: 70%;
-    margin-bottom: @h1-vertical-margin;
-    text-transform: uppercase;
+    h1 {
+      flex-basis: 70%;
+      margin-bottom: @h1-vertical-margin;
+      text-transform: uppercase;
 
-    &.full-flex-width {
-      flex-basis: 100%;
+      &.full-flex-width {
+        flex-basis: 100%;
+      }
     }
-  }
 
-  /deep/ top-menu {
-    flex-basis: 30%;
+    /deep/ top-menu {
+      flex-basis: 30%;
+    }
   }
 }

http://git-wip-us.apache.org/repos/asf/ambari/blob/c3d8e311/ambari-logsearch/ambari-logsearch-web-new/src/app/app.module.ts
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/app.module.ts b/ambari-logsearch/ambari-logsearch-web-new/src/app/app.module.ts
index f7221b3..659172d 100644
--- a/ambari-logsearch/ambari-logsearch-web-new/src/app/app.module.ts
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/app.module.ts
@@ -47,6 +47,8 @@ import {FiltersPanelComponent} from '@app/filters-panel/filters-panel.component'
 import {FilterDropdownComponent} from '@app/filter-dropdown/filter-dropdown.component';
 import {DropdownListComponent} from '@app/dropdown-list/dropdown-list.component';
 import {FilterTextFieldComponent} from '@app/filter-text-field/filter-text-field.component';
+import {AccordionPanelComponent} from '@app/accordion-panel/accordion-panel.component';
+import {LogsListComponent} from '@app/logs-list/logs-list.component';
 
 export function HttpLoaderFactory(http: Http) {
   return new TranslateHttpLoader(http, 'assets/i18n/', '.json');
@@ -62,14 +64,17 @@ export function HttpLoaderFactory(http: Http) {
     FiltersPanelComponent,
     DropdownListComponent,
     FilterDropdownComponent,
-    FilterTextFieldComponent
+    FilterTextFieldComponent,
+    AccordionPanelComponent,
+    LogsListComponent
   ],
   imports: [
     BrowserModule,
     FormsModule,
     HttpModule,
     InMemoryWebApiModule.forRoot(mockApiDataService, {
-      passThruUnknownUrl: true
+      passThruUnknownUrl: true,
+      rootPath: ''
     }),
     AlertModule.forRoot(),
     TranslateModule.forRoot({

http://git-wip-us.apache.org/repos/asf/ambari/blob/c3d8e311/ambari-logsearch/ambari-logsearch-web-new/src/app/filter-dropdown/filter-dropdown.component.less
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/filter-dropdown/filter-dropdown.component.less b/ambari-logsearch/ambari-logsearch-web-new/src/app/filter-dropdown/filter-dropdown.component.less
index c3a25cb..2c97a17 100644
--- a/ambari-logsearch/ambari-logsearch-web-new/src/app/filter-dropdown/filter-dropdown.component.less
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/filter-dropdown/filter-dropdown.component.less
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-@import '../../styles.less';
+@import '../variables';
 
 :host {
   position: relative;

http://git-wip-us.apache.org/repos/asf/ambari/blob/c3d8e311/ambari-logsearch/ambari-logsearch-web-new/src/app/filter-text-field/filter-text-field.component.less
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/filter-text-field/filter-text-field.component.less b/ambari-logsearch/ambari-logsearch-web-new/src/app/filter-text-field/filter-text-field.component.less
index b5e65c9..3a9dcac 100644
--- a/ambari-logsearch/ambari-logsearch-web-new/src/app/filter-text-field/filter-text-field.component.less
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/filter-text-field/filter-text-field.component.less
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-@import '../../styles.less';
+@import '../variables';
 
 .input-group {
   border: @input-border;

http://git-wip-us.apache.org/repos/asf/ambari/blob/c3d8e311/ambari-logsearch/ambari-logsearch-web-new/src/app/filters-panel/filters-panel.component.less
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/filters-panel/filters-panel.component.less b/ambari-logsearch/ambari-logsearch-web-new/src/app/filters-panel/filters-panel.component.less
index b393196..d2400a4 100644
--- a/ambari-logsearch/ambari-logsearch-web-new/src/app/filters-panel/filters-panel.component.less
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/filters-panel/filters-panel.component.less
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '../../styles.less';
+@import '../variables';
 
 .filter-input-container {
   .flex-vertical-align;

http://git-wip-us.apache.org/repos/asf/ambari/blob/c3d8e311/ambari-logsearch/ambari-logsearch-web-new/src/app/login-form/login-form.component.less
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/login-form/login-form.component.less b/ambari-logsearch/ambari-logsearch-web-new/src/app/login-form/login-form.component.less
index 7e37ea1..b84296a 100644
--- a/ambari-logsearch/ambari-logsearch-web-new/src/app/login-form/login-form.component.less
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/login-form/login-form.component.less
@@ -15,8 +15,8 @@
  * limitations under the License.
  */
 
-@import '../../styles.less';
+@import '../variables';
 
 .login-form {
-  margin-top: @login-form-top-margin;
+  margin-top: @block-margin-top;
 }

http://git-wip-us.apache.org/repos/asf/ambari/blob/c3d8e311/ambari-logsearch/ambari-logsearch-web-new/src/app/login-form/login-form.component.ts
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/login-form/login-form.component.ts b/ambari-logsearch/ambari-logsearch-web-new/src/app/login-form/login-form.component.ts
index 61d1fa1..2a93775 100644
--- a/ambari-logsearch/ambari-logsearch-web-new/src/app/login-form/login-form.component.ts
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/login-form/login-form.component.ts
@@ -43,13 +43,10 @@ export class LoginFormComponent implements OnInit {
 
   login() {
     this.isRequestInProgress = true;
-    /*
-    TODO uncomment for using the real server
     this.httpClient.post('login', {
       username: this.username,
       password: this.password
-    })*/
-    this.httpClient.get('api/login').finally(() => {
+    }).finally(() => {
       this.isRequestInProgress = false;
     }).subscribe(() => {
       this.isLoginAlertDisplayed = false;

http://git-wip-us.apache.org/repos/asf/ambari/blob/c3d8e311/ambari-logsearch/ambari-logsearch-web-new/src/app/logs-list/logs-list.component.html
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/logs-list/logs-list.component.html b/ambari-logsearch/ambari-logsearch-web-new/src/app/logs-list/logs-list.component.html
new file mode 100644
index 0000000..cf4bb57
--- /dev/null
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/logs-list/logs-list.component.html
@@ -0,0 +1,35 @@
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+-->
+
+<accordion-panel *ngFor="let log of logs; let i = index" [toggleId]="'details-' + i" class="col-md-12">
+  <ng-template>
+    <div [ngClass]="'hexagon ' + log.level"></div>
+    <div [ngClass]="'col-md-1 log-status ' + log.level">{{log.level}}</div>
+    <div class="col-md-3">
+      <div class="log-type">{{log.type}}</div>
+      <time class="log-time">{{log.time}}</time>
+    </div>
+    <div class="col-md-6 log-content-wrapper">
+      <div class="collapse log-actions" [attr.id]="'details-' + i">
+        <span class="action-icon fa fa-search"></span>
+        <span class="action-icon fa fa-external-link"></span>
+        <span class="action-icon fa fa-bullseye"></span>
+      </div>
+      <div class="log-content" [innerHTML]="log.content"></div>
+    </div>
+  </ng-template>
+</accordion-panel>

http://git-wip-us.apache.org/repos/asf/ambari/blob/c3d8e311/ambari-logsearch/ambari-logsearch-web-new/src/app/logs-list/logs-list.component.less
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/logs-list/logs-list.component.less b/ambari-logsearch/ambari-logsearch-web-new/src/app/logs-list/logs-list.component.less
new file mode 100644
index 0000000..1179e55
--- /dev/null
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/logs-list/logs-list.component.less
@@ -0,0 +1,125 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import '../variables';
+
+:host {
+  display: block;
+  margin-top: @block-margin-top;
+
+  .hexagon {
+    // TODO get rid of magic numbers, base on actual design
+    left: -7.5px;
+
+    &.fatal {
+      .common-hexagon(15px, @fatal-color);
+    }
+
+    &.error {
+      .common-hexagon(15px, @error-color);
+    }
+
+    &.warn {
+      .common-hexagon(15px, @warning-color);
+    }
+
+    &.info {
+      .common-hexagon(15px, @info-color);
+    }
+
+    &.debug {
+      .common-hexagon(15px, @debug-color);
+    }
+
+    &.trace {
+      .common-hexagon(15px, @trace-color);
+    }
+
+    &.unknown {
+      .common-hexagon(15px, @unknown-color);
+    }
+  }
+
+  .log-status {
+    text-transform: uppercase;
+
+    &.fatal {
+      color: @fatal-color;
+    }
+
+    &.error {
+      color: @error-color;
+    }
+
+    &.warn {
+      color: @warning-color;
+    }
+
+    &.info {
+      color: @info-color;
+    }
+
+    &.debug {
+      color: @debug-color;
+    }
+
+    &.trace {
+      color: @trace-color;
+    }
+
+    &.unknown {
+      color: @unknown-color;
+    }
+  }
+
+  .log-type {
+    color: @link-color;
+  }
+
+  .log-time {
+    color: @grey-color;
+  }
+
+  .log-content-wrapper {
+    position: relative;
+
+    // TODO get rid of magic numbers, base on actual design
+    .log-content {
+      overflow: hidden;
+      max-height: @default-line-height * 2em;
+      padding-right: 65px;
+    }
+
+    .log-actions {
+      position: absolute;
+      right: 40px;
+      top: 0;
+      border: @input-border;
+
+      &.collapsing + .log-content, &.collapse.in + .log-content {
+        min-height: 6em;
+        max-height: none;
+      }
+
+      .action-icon {
+        .clickable-item;
+        display: block;
+        padding: 5px;
+      }
+    }
+  }
+}

http://git-wip-us.apache.org/repos/asf/ambari/blob/c3d8e311/ambari-logsearch/ambari-logsearch-web-new/src/app/logs-list/logs-list.component.spec.ts
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/logs-list/logs-list.component.spec.ts b/ambari-logsearch/ambari-logsearch-web-new/src/app/logs-list/logs-list.component.spec.ts
new file mode 100644
index 0000000..6442864
--- /dev/null
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/logs-list/logs-list.component.spec.ts
@@ -0,0 +1,44 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {LogsListComponent} from './logs-list.component';
+
+describe('LogsListComponent', () => {
+  let component: LogsListComponent;
+  let fixture: ComponentFixture<LogsListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [LogsListComponent],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LogsListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create component', () => {
+    expect(component).toBeTruthy();
+  });
+});

http://git-wip-us.apache.org/repos/asf/ambari/blob/c3d8e311/ambari-logsearch/ambari-logsearch-web-new/src/app/logs-list/logs-list.component.ts
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/logs-list/logs-list.component.ts b/ambari-logsearch/ambari-logsearch-web-new/src/app/logs-list/logs-list.component.ts
new file mode 100644
index 0000000..107fb0d
--- /dev/null
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/logs-list/logs-list.component.ts
@@ -0,0 +1,79 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'logs-list',
+  templateUrl: './logs-list.component.html',
+  styleUrls: ['./logs-list.component.less']
+})
+export class LogsListComponent implements OnInit {
+
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+
+  // TODO implement loading logs from API
+  private readonly logs = [
+    {
+      level: 'fatal',
+      type: 'ambari_agent',
+      time: '2017/01/31 18:00:00',
+      content: 'Something went wrong.<br>Please restart ambari-agent.<br>See log file for details.'
+    },
+    {
+      level: 'error',
+      type: 'ambari_agent',
+      time: '2017/01/31 18:00:00',
+      content: 'Something went wrong.<br>Please restart ambari-agent.<br>See log file for details.'
+    },
+    {
+      level: 'warn',
+      type: 'ambari_agent',
+      time: '2017/01/31 18:00:00',
+      content: 'Something went wrong.<br>Please restart ambari-agent.<br>See log file for details.'
+    },
+    {
+      level: 'info',
+      type: 'ambari_agent',
+      time: '2017/01/31 18:00:00',
+      content: 'Something went wrong.<br>Please restart ambari-agent.<br>See log file for details.'
+    },
+    {
+      level: 'debug',
+      type: 'ambari_agent',
+      time: '2017/01/31 18:00:00',
+      content: 'Something went wrong.<br>Please restart ambari-agent.<br>See log file for details.'
+    },
+    {
+      level: 'trace',
+      type: 'ambari_agent',
+      time: '2017/01/31 18:00:00',
+      content: 'Something went wrong.<br>Please restart ambari-agent.<br>See log file for details.'
+    },
+    {
+      level: 'unknown',
+      type: 'ambari_agent',
+      time: '2017/01/31 18:00:00',
+      content: 'Something went wrong.<br>Please restart ambari-agent.<br>See log file for details.'
+    }
+  ];
+
+}

http://git-wip-us.apache.org/repos/asf/ambari/blob/c3d8e311/ambari-logsearch/ambari-logsearch-web-new/src/app/main-container/main-container.component.html
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/main-container/main-container.component.html b/ambari-logsearch/ambari-logsearch-web-new/src/app/main-container/main-container.component.html
index bc641a6..34af2b8 100644
--- a/ambari-logsearch/ambari-logsearch-web-new/src/app/main-container/main-container.component.html
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/main-container/main-container.component.html
@@ -17,3 +17,4 @@
 
 <login-form *ngIf="!httpClient.isAuthorized"></login-form>
 <filters-panel *ngIf="httpClient.isAuthorized" class="row"></filters-panel>
+<logs-list *ngIf="httpClient.isAuthorized"></logs-list>

http://git-wip-us.apache.org/repos/asf/ambari/blob/c3d8e311/ambari-logsearch/ambari-logsearch-web-new/src/app/services/http-client.service.ts
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/services/http-client.service.ts b/ambari-logsearch/ambari-logsearch-web-new/src/app/services/http-client.service.ts
index 2aa87f9..2b69f45 100644
--- a/ambari-logsearch/ambari-logsearch-web-new/src/app/services/http-client.service.ts
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/services/http-client.service.ts
@@ -21,6 +21,7 @@ import {Observable} from 'rxjs/Observable';
 import {Http, XHRBackend, Request, RequestOptions, RequestOptionsArgs, Response} from '@angular/http';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/catch';
+import {environment} from '@app/../environments/environment';
 
 @Injectable()
 export class HttpClientService extends Http {
@@ -32,7 +33,8 @@ export class HttpClientService extends Http {
   private readonly apiPrefix = 'api/v1/';
 
   private readonly urls = {
-    status: 'status'
+    status: 'status',
+    auditLogs: 'audit/logs'
   };
 
   private readonly unauthorizedStatuses = [401, 403, 419];
@@ -73,7 +75,8 @@ export class HttpClientService extends Http {
   }
 
   post(url: string, body: any, options?: RequestOptionsArgs):Observable<Response> {
-    return super.post(this.generateUrlString(url), body, options);
+    return environment.production ?
+      super.post(this.generateUrlString(url), body, options) : super.get(this.generateUrlString(url), options);
   }
 
   put(url: string, body: any, options?: RequestOptionsArgs):Observable<Response> {

http://git-wip-us.apache.org/repos/asf/ambari/blob/c3d8e311/ambari-logsearch/ambari-logsearch-web-new/src/app/top-menu/top-menu.component.less
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/top-menu/top-menu.component.less b/ambari-logsearch/ambari-logsearch-web-new/src/app/top-menu/top-menu.component.less
index 8728ecf..2e8e77a 100644
--- a/ambari-logsearch/ambari-logsearch-web-new/src/app/top-menu/top-menu.component.less
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/top-menu/top-menu.component.less
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-@import '../../styles.less';
+@import '../variables';
 
 :host {
   .default-flex;

http://git-wip-us.apache.org/repos/asf/ambari/blob/c3d8e311/ambari-logsearch/ambari-logsearch-web-new/src/app/top-menu/top-menu.component.ts
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/top-menu/top-menu.component.ts b/ambari-logsearch/ambari-logsearch-web-new/src/app/top-menu/top-menu.component.ts
index bad588b..73b6131 100644
--- a/ambari-logsearch/ambari-logsearch-web-new/src/app/top-menu/top-menu.component.ts
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/top-menu/top-menu.component.ts
@@ -77,7 +77,7 @@ export class TopMenuComponent implements OnInit {
       action: 'refresh'
     },
     {
-      iconClass: 'fa fa-clock-o',
+      iconClass: 'fa fa-history',
       label: 'topMenu.history',
       labelClass: 'unstyled-link',
       action: 'openHistory',

http://git-wip-us.apache.org/repos/asf/ambari/blob/c3d8e311/ambari-logsearch/ambari-logsearch-web-new/src/app/variables.less
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/variables.less b/ambari-logsearch/ambari-logsearch-web-new/src/app/variables.less
new file mode 100644
index 0000000..a8c71d1
--- /dev/null
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/variables.less
@@ -0,0 +1,88 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// Variables
+@navbar-background-color: #323544;
+@h1-vertical-margin: 20px;
+@button-border-radius: 4px;
+@input-border: 1px solid #CFD3D7;
+@button-border-radius: 4px;
+@input-group-addon-padding: 6px 12px;
+@block-margin-top: 20px;
+@link-color: #1491C1;
+@link-hover-color: #23527C;
+
+// TODO implement actual colors
+@fatal-color: #830A0A;
+@error-color: #E81D1D;
+@warning-color: #FF8916;
+@info-color: #2577B5;
+@debug-color: #65E8FF;
+@trace-color: #888;
+@unknown-color: #BDBDBD;
+
+@grey-color: #666;
+@default-line-height: 1.42857143;
+
+// Mixins
+.flex-vertical-align {
+  display: flex;
+  align-items: center;
+}
+
+.default-flex {
+  .flex-vertical-align;
+  justify-content: space-between;
+}
+
+.common-hexagon(@side, @color) {
+  display: block;
+  position: absolute;
+  margin: (@side / 3.464101615) 0;
+  width: @side;
+  height: @side / 1.732050808;
+  background-color: @color;
+
+  &:before, &:after {
+    display: block;
+    position: absolute;
+    width: 0;
+    border-left: (@side / 2) solid transparent;
+    border-right: (@side / 2) solid transparent;
+    content: '';
+  }
+
+  &:before {
+    bottom: 100%;
+    border-bottom: (@side / 3.464101615) solid @color;
+  }
+
+  &:after {
+    top: 100%;
+    border-top: (@side / 3.464101615) solid @color;
+  }
+}
+
+.clickable-item {
+  cursor: pointer;
+  color: @link-color;
+
+  &:hover {
+    color: @link-hover-color;
+  }
+}

http://git-wip-us.apache.org/repos/asf/ambari/blob/c3d8e311/ambari-logsearch/ambari-logsearch-web-new/src/main.ts
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/main.ts b/ambari-logsearch/ambari-logsearch-web-new/src/main.ts
index e3aeec1..dfabf38 100644
--- a/ambari-logsearch/ambari-logsearch-web-new/src/main.ts
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/main.ts
@@ -16,11 +16,11 @@
  * limitations under the License.
  */
 
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import {enableProdMode} from '@angular/core';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
+import {AppModule} from './app/app.module';
+import {environment} from './environments/environment';
 
 if (environment.production) {
   enableProdMode();

http://git-wip-us.apache.org/repos/asf/ambari/blob/c3d8e311/ambari-logsearch/ambari-logsearch-web-new/src/styles.less
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/styles.less b/ambari-logsearch/ambari-logsearch-web-new/src/styles.less
index db6da5c..5d5f1e3 100644
--- a/ambari-logsearch/ambari-logsearch-web-new/src/styles.less
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/styles.less
@@ -15,21 +15,3 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-@navbar-background-color: #323544;
-@h1-vertical-margin: 20px;
-@button-border-radius: 4px;
-@input-border: 1px solid #CFD3D7;
-@button-border-radius: 4px;
-@input-group-addon-padding: 6px 12px;
-@login-form-top-margin: 20px;
-
-.flex-vertical-align {
-  display: flex;
-  align-items: center;
-}
-
-.default-flex {
-  .flex-vertical-align;
-  justify-content: space-between;
-}