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/26 13:27:53 UTC

[3/3] ambari git commit: AMBARI-21342 Log Search UI: production build doesn't work. (ababiichuk)

AMBARI-21342 Log Search UI: production build doesn't work. (ababiichuk)


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

Branch: refs/heads/branch-feature-logsearch-ui
Commit: ed660940aaa2ad3a37bb2713c515db775c3a7ed3
Parents: 4bfc6f1
Author: ababiichuk <ab...@hortonworks.com>
Authored: Mon Jun 26 15:57:20 2017 +0300
Committer: ababiichuk <ab...@hortonworks.com>
Committed: Mon Jun 26 15:57:20 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.html                  |  32 -----
 .../src/app/app.component.less                  |  47 -------
 .../src/app/app.component.spec.ts               |  59 ---------
 .../src/app/app.component.ts                    |  39 ------
 .../src/app/app.module.ts                       |  22 ++--
 .../accordion-panel.component.html              |  25 ++++
 .../accordion-panel.component.less              |  42 ++++++
 .../accordion-panel.component.spec.ts           |  42 ++++++
 .../accordion-panel.component.ts                |  38 ++++++
 .../src/app/components/app.component.html       |  32 +++++
 .../src/app/components/app.component.less       |  47 +++++++
 .../src/app/components/app.component.spec.ts    |  59 +++++++++
 .../src/app/components/app.component.ts         |  43 +++++++
 .../dropdown-list/dropdown-list.component.html  |  20 +++
 .../dropdown-list/dropdown-list.component.less  |  22 ++++
 .../dropdown-list.component.spec.ts             |  92 +++++++++++++
 .../dropdown-list/dropdown-list.component.ts    |  51 ++++++++
 .../filter-dropdown.component.html              |  23 ++++
 .../filter-dropdown.component.less              |  31 +++++
 .../filter-dropdown.component.spec.ts           |  97 ++++++++++++++
 .../filter-dropdown.component.ts                |  50 ++++++++
 .../filter-text-field.component.html            |  21 +++
 .../filter-text-field.component.less            |  33 +++++
 .../filter-text-field.component.spec.ts         |  63 +++++++++
 .../filter-text-field.component.ts              |  41 ++++++
 .../filters-panel/filters-panel.component.html  |  38 ++++++
 .../filters-panel/filters-panel.component.less  |  45 +++++++
 .../filters-panel.component.spec.ts             |  59 +++++++++
 .../filters-panel/filters-panel.component.ts    |  39 ++++++
 .../login-form/login-form.component.html        |  33 +++++
 .../login-form/login-form.component.less        |  22 ++++
 .../login-form/login-form.component.spec.ts     | 121 ++++++++++++++++++
 .../login-form/login-form.component.ts          |  60 +++++++++
 .../logs-list/logs-list.component.html          |  35 +++++
 .../logs-list/logs-list.component.less          | 128 +++++++++++++++++++
 .../logs-list/logs-list.component.spec.ts       |  72 +++++++++++
 .../components/logs-list/logs-list.component.ts |  96 ++++++++++++++
 .../main-container.component.html               |  20 +++
 .../main-container.component.spec.ts            |  49 +++++++
 .../main-container/main-container.component.ts  |  37 ++++++
 .../menu-button/menu-button.component.html      |  27 ++++
 .../menu-button/menu-button.component.less      |  33 +++++
 .../menu-button/menu-button.component.spec.ts   | 126 ++++++++++++++++++
 .../menu-button/menu-button.component.ts        | 102 +++++++++++++++
 .../components/top-menu/top-menu.component.html |  21 +++
 .../components/top-menu/top-menu.component.less |  22 ++++
 .../top-menu/top-menu.component.spec.ts         |  45 +++++++
 .../components/top-menu/top-menu.component.ts   | 122 ++++++++++++++++++
 .../src/app/components/variables.less           |  87 +++++++++++++
 .../dropdown-list/dropdown-list.component.html  |  20 ---
 .../dropdown-list/dropdown-list.component.less  |  22 ----
 .../dropdown-list.component.spec.ts             |  92 -------------
 .../dropdown-list/dropdown-list.component.ts    |  51 --------
 .../filter-dropdown.component.html              |  23 ----
 .../filter-dropdown.component.less              |  31 -----
 .../filter-dropdown.component.spec.ts           |  97 --------------
 .../filter-dropdown.component.ts                |  50 --------
 .../filter-text-field.component.html            |  21 ---
 .../filter-text-field.component.less            |  33 -----
 .../filter-text-field.component.spec.ts         |  63 ---------
 .../filter-text-field.component.ts              |  41 ------
 .../filters-panel/filters-panel.component.html  |  38 ------
 .../filters-panel/filters-panel.component.less  |  45 -------
 .../filters-panel.component.spec.ts             |  59 ---------
 .../filters-panel/filters-panel.component.ts    |  35 -----
 .../app/login-form/login-form.component.html    |  33 -----
 .../app/login-form/login-form.component.less    |  22 ----
 .../app/login-form/login-form.component.spec.ts | 121 ------------------
 .../src/app/login-form/login-form.component.ts  |  60 ---------
 .../src/app/logs-list/logs-list.component.html  |  35 -----
 .../src/app/logs-list/logs-list.component.less  | 128 -------------------
 .../app/logs-list/logs-list.component.spec.ts   |  72 -----------
 .../src/app/logs-list/logs-list.component.ts    |  96 --------------
 .../main-container.component.html               |  20 ---
 .../main-container.component.spec.ts            |  49 -------
 .../main-container/main-container.component.ts  |  33 -----
 .../app/menu-button/menu-button.component.html  |  27 ----
 .../app/menu-button/menu-button.component.less  |  33 -----
 .../menu-button/menu-button.component.spec.ts   | 126 ------------------
 .../app/menu-button/menu-button.component.ts    | 102 ---------------
 .../src/app/top-menu/top-menu.component.html    |  21 ---
 .../src/app/top-menu/top-menu.component.less    |  22 ----
 .../src/app/top-menu/top-menu.component.spec.ts |  45 -------
 .../src/app/top-menu/top-menu.component.ts      | 122 ------------------
 .../src/app/variables.less                      |  87 -------------
 89 files changed, 2322 insertions(+), 2310 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/ambari/blob/ed660940/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
deleted file mode 100644
index b2ce3a0..0000000
--- a/ambari-logsearch/ambari-logsearch-web-new/src/app/accordion-panel/accordion-panel.component.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<!--
-  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/ed660940/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
deleted file mode 100644
index 8366952..0000000
--- a/ambari-logsearch/ambari-logsearch-web-new/src/app/accordion-panel/accordion-panel.component.less
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * 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/ed660940/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
deleted file mode 100644
index 3706d51..0000000
--- a/ambari-logsearch/ambari-logsearch-web-new/src/app/accordion-panel/accordion-panel.component.spec.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * 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/ed660940/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
deleted file mode 100644
index e48349e..0000000
--- a/ambari-logsearch/ambari-logsearch-web-new/src/app/accordion-panel/accordion-panel.component.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * 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/ed660940/ambari-logsearch/ambari-logsearch-web-new/src/app/app.component.html
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/app.component.html b/ambari-logsearch/ambari-logsearch-web-new/src/app/app.component.html
deleted file mode 100644
index 267e08b..0000000
--- a/ambari-logsearch/ambari-logsearch-web-new/src/app/app.component.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!--
-  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.
--->
-
-<header>
-  <nav class="navbar navbar-fixed-top">
-    <div class="container-fluid">
-      <h1 [ngClass]="{'full-flex-width': !httpClient.isAuthorized, 'navbar-left': true}">{{'common.title' | translate}}</h1>
-      <top-menu *ngIf="httpClient.isAuthorized" class="navbar-right"></top-menu>
-    </div>
-  </nav>
-</header>
-
-<!-- hidden element for moving the main bar outside the fixed header -->
-<div class="navbar invisible">
-  <h1>&nbsp;</h1>
-</div>
-
-<main-container></main-container>

http://git-wip-us.apache.org/repos/asf/ambari/blob/ed660940/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
deleted file mode 100644
index f948b12..0000000
--- a/ambari-logsearch/ambari-logsearch-web-new/src/app/app.component.less
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * 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 {
-  line-height: @default-line-height;
-
-  .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;
-
-      &.full-flex-width {
-        flex-basis: 100%;
-      }
-    }
-
-    /deep/ top-menu {
-      flex-basis: 30%;
-    }
-  }
-}

http://git-wip-us.apache.org/repos/asf/ambari/blob/ed660940/ambari-logsearch/ambari-logsearch-web-new/src/app/app.component.spec.ts
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/app.component.spec.ts b/ambari-logsearch/ambari-logsearch-web-new/src/app/app.component.spec.ts
deleted file mode 100644
index 96cb0b4..0000000
--- a/ambari-logsearch/ambari-logsearch-web-new/src/app/app.component.spec.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * 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 {TestBed, async} from '@angular/core/testing';
-import {Http} from '@angular/http';
-import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
-import {TranslateHttpLoader} from '@ngx-translate/http-loader';
-import {HttpClientService} from './services/http-client.service';
-
-import {AppComponent} from './app.component';
-
-export function HttpLoaderFactory(http: Http) {
-  return new TranslateHttpLoader(http, 'assets/i18n/', '.json');
-}
-
-describe('AppComponent', () => {
-  beforeEach(async(() => {
-    const httpClient = {
-      get: () => {}
-    };
-    TestBed.configureTestingModule({
-      declarations: [AppComponent],
-      imports: [TranslateModule.forRoot({
-        provide: TranslateLoader,
-        useFactory: HttpLoaderFactory,
-        deps: [Http]
-      })],
-      providers: [
-        {
-          provide: HttpClientService,
-          useValue: httpClient
-        },
-      ],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA]
-    }).compileComponents();
-  }));
-
-  it('should create the app', async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app).toBeTruthy();
-  }));
-});

http://git-wip-us.apache.org/repos/asf/ambari/blob/ed660940/ambari-logsearch/ambari-logsearch-web-new/src/app/app.component.ts
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/app.component.ts b/ambari-logsearch/ambari-logsearch-web-new/src/app/app.component.ts
deleted file mode 100644
index e86a8a1..0000000
--- a/ambari-logsearch/ambari-logsearch-web-new/src/app/app.component.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 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} from '@angular/core';
-import {TranslateService} from '@ngx-translate/core';
-import {HttpClientService} from '@app/services/http-client.service';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.less']
-})
-
-export class AppComponent {
-
-  constructor(private httpClient: HttpClientService, private translate: TranslateService) {
-    translate.setDefaultLang('en');
-    translate.use('en');
-  }
-
-  ngOnInit() {
-    this.httpClient.get('status');
-  }
-}

http://git-wip-us.apache.org/repos/asf/ambari/blob/ed660940/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 6670082..a095a97 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
@@ -39,17 +39,17 @@ import {NodesService, nodes} from '@app/services/storage/nodes.service';
 import {UserConfigsService, userConfigs} from '@app/services/storage/user-configs.service';
 import {FiltersService, filters} from '@app/services/storage/filters.service';
 
-import {AppComponent} from '@app/app.component';
-import {LoginFormComponent} from '@app/login-form/login-form.component';
-import {TopMenuComponent} from '@app/top-menu/top-menu.component';
-import {MenuButtonComponent} from '@app/menu-button/menu-button.component';
-import {MainContainerComponent} from '@app/main-container/main-container.component';
-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';
+import {AppComponent} from '@app/components/app.component';
+import {LoginFormComponent} from '@app/components/login-form/login-form.component';
+import {TopMenuComponent} from '@app/components/top-menu/top-menu.component';
+import {MenuButtonComponent} from '@app/components/menu-button/menu-button.component';
+import {MainContainerComponent} from '@app/components/main-container/main-container.component';
+import {FiltersPanelComponent} from '@app/components/filters-panel/filters-panel.component';
+import {FilterDropdownComponent} from '@app/components/filter-dropdown/filter-dropdown.component';
+import {DropdownListComponent} from '@app/components/dropdown-list/dropdown-list.component';
+import {FilterTextFieldComponent} from '@app/components/filter-text-field/filter-text-field.component';
+import {AccordionPanelComponent} from '@app/components/accordion-panel/accordion-panel.component';
+import {LogsListComponent} from '@app/components/logs-list/logs-list.component';
 
 export function HttpLoaderFactory(http: Http) {
   // adding 'static' parameter to step over mock data request

http://git-wip-us.apache.org/repos/asf/ambari/blob/ed660940/ambari-logsearch/ambari-logsearch-web-new/src/app/components/accordion-panel/accordion-panel.component.html
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/components/accordion-panel/accordion-panel.component.html b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/accordion-panel/accordion-panel.component.html
new file mode 100644
index 0000000..b2ce3a0
--- /dev/null
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/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/ed660940/ambari-logsearch/ambari-logsearch-web-new/src/app/components/accordion-panel/accordion-panel.component.less
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/components/accordion-panel/accordion-panel.component.less b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/accordion-panel/accordion-panel.component.less
new file mode 100644
index 0000000..8366952
--- /dev/null
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/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/ed660940/ambari-logsearch/ambari-logsearch-web-new/src/app/components/accordion-panel/accordion-panel.component.spec.ts
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/components/accordion-panel/accordion-panel.component.spec.ts b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/accordion-panel/accordion-panel.component.spec.ts
new file mode 100644
index 0000000..3706d51
--- /dev/null
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/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/ed660940/ambari-logsearch/ambari-logsearch-web-new/src/app/components/accordion-panel/accordion-panel.component.ts
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/components/accordion-panel/accordion-panel.component.ts b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/accordion-panel/accordion-panel.component.ts
new file mode 100644
index 0000000..85031b6
--- /dev/null
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/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()
+  toggleId: string;
+
+  @ContentChild(TemplateRef)
+  template;
+
+}

http://git-wip-us.apache.org/repos/asf/ambari/blob/ed660940/ambari-logsearch/ambari-logsearch-web-new/src/app/components/app.component.html
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/components/app.component.html b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/app.component.html
new file mode 100644
index 0000000..5add5d5
--- /dev/null
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/app.component.html
@@ -0,0 +1,32 @@
+<!--
+  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.
+-->
+
+<header>
+  <nav class="navbar navbar-fixed-top">
+    <div class="container-fluid">
+      <h1 [ngClass]="{'full-flex-width': !isAuthorized, 'navbar-left': true}">{{'common.title' | translate}}</h1>
+      <top-menu *ngIf="isAuthorized" class="navbar-right"></top-menu>
+    </div>
+  </nav>
+</header>
+
+<!-- hidden element for moving the main bar outside the fixed header -->
+<div class="navbar invisible">
+  <h1>&nbsp;</h1>
+</div>
+
+<main-container></main-container>

http://git-wip-us.apache.org/repos/asf/ambari/blob/ed660940/ambari-logsearch/ambari-logsearch-web-new/src/app/components/app.component.less
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/components/app.component.less b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/app.component.less
new file mode 100644
index 0000000..f948b12
--- /dev/null
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/app.component.less
@@ -0,0 +1,47 @@
+/**
+ * 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 {
+  line-height: @default-line-height;
+
+  .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;
+
+      &.full-flex-width {
+        flex-basis: 100%;
+      }
+    }
+
+    /deep/ top-menu {
+      flex-basis: 30%;
+    }
+  }
+}

http://git-wip-us.apache.org/repos/asf/ambari/blob/ed660940/ambari-logsearch/ambari-logsearch-web-new/src/app/components/app.component.spec.ts
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/components/app.component.spec.ts b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/app.component.spec.ts
new file mode 100644
index 0000000..3442132
--- /dev/null
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/app.component.spec.ts
@@ -0,0 +1,59 @@
+/**
+ * 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 {TestBed, async} from '@angular/core/testing';
+import {Http} from '@angular/http';
+import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
+import {TranslateHttpLoader} from '@ngx-translate/http-loader';
+import {HttpClientService} from '@app/services/http-client.service';
+
+import {AppComponent} from './app.component';
+
+export function HttpLoaderFactory(http: Http) {
+  return new TranslateHttpLoader(http, 'assets/i18n/', '.json');
+}
+
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    const httpClient = {
+      get: () => {}
+    };
+    TestBed.configureTestingModule({
+      declarations: [AppComponent],
+      imports: [TranslateModule.forRoot({
+        provide: TranslateLoader,
+        useFactory: HttpLoaderFactory,
+        deps: [Http]
+      })],
+      providers: [
+        {
+          provide: HttpClientService,
+          useValue: httpClient
+        },
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    }).compileComponents();
+  }));
+
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+});

http://git-wip-us.apache.org/repos/asf/ambari/blob/ed660940/ambari-logsearch/ambari-logsearch-web-new/src/app/components/app.component.ts
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/components/app.component.ts b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/app.component.ts
new file mode 100644
index 0000000..c5a17c2
--- /dev/null
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/app.component.ts
@@ -0,0 +1,43 @@
+/**
+ * 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} from '@angular/core';
+import {TranslateService} from '@ngx-translate/core';
+import {HttpClientService} from '@app/services/http-client.service';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.less']
+})
+
+export class AppComponent {
+
+  constructor(private httpClient: HttpClientService, private translate: TranslateService) {
+    translate.setDefaultLang('en');
+    translate.use('en');
+  }
+
+  ngOnInit() {
+    this.httpClient.get('status');
+  }
+
+  get isAuthorized() {
+    return this.httpClient.isAuthorized;
+  }
+}

http://git-wip-us.apache.org/repos/asf/ambari/blob/ed660940/ambari-logsearch/ambari-logsearch-web-new/src/app/components/dropdown-list/dropdown-list.component.html
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/components/dropdown-list/dropdown-list.component.html b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/dropdown-list/dropdown-list.component.html
new file mode 100644
index 0000000..db4ee79
--- /dev/null
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/dropdown-list/dropdown-list.component.html
@@ -0,0 +1,20 @@
+<!--
+  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.
+-->
+
+<li *ngFor="let item of items">
+  <a href="#" (click)="changeSelectedItem({value: item.value, label: item.label})">{{item.label | translate}}</a>
+</li>

http://git-wip-us.apache.org/repos/asf/ambari/blob/ed660940/ambari-logsearch/ambari-logsearch-web-new/src/app/components/dropdown-list/dropdown-list.component.less
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/components/dropdown-list/dropdown-list.component.less b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/dropdown-list/dropdown-list.component.less
new file mode 100644
index 0000000..d0f079a
--- /dev/null
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/dropdown-list/dropdown-list.component.less
@@ -0,0 +1,22 @@
+/**
+ * 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.
+ */
+
+:host {
+  max-height: 500px; // TODO get rid of magic number, base on actual design
+  overflow-y: auto;
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/ed660940/ambari-logsearch/ambari-logsearch-web-new/src/app/components/dropdown-list/dropdown-list.component.spec.ts
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/components/dropdown-list/dropdown-list.component.spec.ts b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/dropdown-list/dropdown-list.component.spec.ts
new file mode 100644
index 0000000..445ee97
--- /dev/null
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/dropdown-list/dropdown-list.component.spec.ts
@@ -0,0 +1,92 @@
+/**
+ * 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 {Http} from '@angular/http';
+import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
+import {TranslateHttpLoader} from '@ngx-translate/http-loader';
+
+import {DropdownListComponent} from './dropdown-list.component';
+
+export function HttpLoaderFactory(http: Http) {
+  return new TranslateHttpLoader(http, 'assets/i18n/', '.json');
+}
+
+describe('DropdownListComponent', () => {
+  let component: DropdownListComponent;
+  let fixture: ComponentFixture<DropdownListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [DropdownListComponent],
+      imports: [TranslateModule.forRoot({
+        provide: TranslateLoader,
+        useFactory: HttpLoaderFactory,
+        deps: [Http]
+      })]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DropdownListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create component', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('#changeSelectedItem()', () => {
+
+    beforeEach(() => {
+      spyOn(component.selectedItemChange, 'emit').and.callFake(() => {});
+    });
+
+    describe('not a filter list', () => {
+      it('event should not be emitted', () => {
+        component.isFilter = false;
+        component.changeSelectedItem({});
+        expect(component.selectedItemChange.emit).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('filter list', () => {
+      const options = {
+        label: 'l',
+        value: 'v'
+      };
+
+      beforeEach(() => {
+        component.isFilter = true;
+        component.changeSelectedItem(options);
+      });
+
+      it('event should be emitted', () => {
+        expect(component.selectedItemChange.emit).toHaveBeenCalled();
+      });
+
+      it('event emitter should be called with correct arguments', () => {
+        expect(component.selectedItemChange.emit).toHaveBeenCalledWith(options);
+      });
+
+    });
+
+  });
+});

http://git-wip-us.apache.org/repos/asf/ambari/blob/ed660940/ambari-logsearch/ambari-logsearch-web-new/src/app/components/dropdown-list/dropdown-list.component.ts
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/components/dropdown-list/dropdown-list.component.ts b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/dropdown-list/dropdown-list.component.ts
new file mode 100644
index 0000000..808fcf8
--- /dev/null
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/dropdown-list/dropdown-list.component.ts
@@ -0,0 +1,51 @@
+/**
+ * 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, Output, EventEmitter} from '@angular/core';
+
+@Component({
+  selector: 'ul.dropdown-menu',
+  templateUrl: './dropdown-list.component.html',
+  styleUrls: ['./dropdown-list.component.less']
+})
+export class DropdownListComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  @Input()
+  items: any[];
+
+  @Input()
+  defaultAction: Function;
+
+  @Input()
+  isFilter: boolean;
+
+  @Output()
+  selectedItemChange: EventEmitter<any> = new EventEmitter();
+
+  changeSelectedItem(options: any): void {
+    if (this.isFilter) {
+      this.selectedItemChange.emit(options);
+    }
+  }
+
+}

http://git-wip-us.apache.org/repos/asf/ambari/blob/ed660940/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filter-dropdown/filter-dropdown.component.html
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filter-dropdown/filter-dropdown.component.html b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filter-dropdown/filter-dropdown.component.html
new file mode 100644
index 0000000..1ac663e
--- /dev/null
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filter-dropdown/filter-dropdown.component.html
@@ -0,0 +1,23 @@
+<!--
+  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="filter-label" *ngIf="filterInstance.label">{{filterInstance.label | translate}}</div>
+<button class="btn btn-link dropdown-toggle" data-toggle="dropdown">
+  {{filterInstance.selectedLabel | translate}} <span class="caret"></span>
+</button>
+<ul class="dropdown-menu" [items]="filterInstance.options" [isFilter]="true"
+    (selectedItemChange)="setSelectedValue($event)"></ul>

http://git-wip-us.apache.org/repos/asf/ambari/blob/ed660940/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filter-dropdown/filter-dropdown.component.less
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filter-dropdown/filter-dropdown.component.less b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filter-dropdown/filter-dropdown.component.less
new file mode 100644
index 0000000..ec8e84b
--- /dev/null
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filter-dropdown/filter-dropdown.component.less
@@ -0,0 +1,31 @@
+/**
+ * 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 {
+  position: relative;
+  .default-flex;
+
+  .filter-label {
+    padding: @input-group-addon-padding;
+  }
+
+  .btn {
+    text-transform: none;
+  }
+}

http://git-wip-us.apache.org/repos/asf/ambari/blob/ed660940/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filter-dropdown/filter-dropdown.component.spec.ts
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filter-dropdown/filter-dropdown.component.spec.ts b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filter-dropdown/filter-dropdown.component.spec.ts
new file mode 100644
index 0000000..e0414f3
--- /dev/null
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filter-dropdown/filter-dropdown.component.spec.ts
@@ -0,0 +1,97 @@
+/**
+ * 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 {NO_ERRORS_SCHEMA} from '@angular/core';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {Http} from '@angular/http';
+import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
+import {TranslateHttpLoader} from '@ngx-translate/http-loader';
+import {FilteringService} from '@app/services/filtering.service';
+
+import {FilterDropdownComponent} from './filter-dropdown.component';
+
+export function HttpLoaderFactory(http: Http) {
+  return new TranslateHttpLoader(http, 'assets/i18n/', '.json');
+}
+
+describe('FilterDropdownComponent', () => {
+  let component: FilterDropdownComponent;
+  let fixture: ComponentFixture<FilterDropdownComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [FilterDropdownComponent],
+      imports: [TranslateModule.forRoot({
+        provide: TranslateLoader,
+        useFactory: HttpLoaderFactory,
+        deps: [Http]
+      })],
+      providers: [FilteringService],
+      schemas: [NO_ERRORS_SCHEMA]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FilterDropdownComponent);
+    component = fixture.componentInstance;
+    component.filterInstance = {
+      options: [
+        {
+          value: 'v0',
+          label: 'l0'
+        },
+        {
+          value: 'v1',
+          label: 'l1'
+        }
+      ]
+    };
+    fixture.detectChanges();
+  });
+
+  it('should create component', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('should take initial filter values from 1st item', () => {
+    it('selectedValue', () => {
+      expect(component.filterInstance.selectedValue).toEqual('v0');
+    });
+
+    it('selectedLabel', () => {
+      expect(component.filterInstance.selectedLabel).toEqual('l0');
+    });
+  });
+
+  describe('#setSelectedValue()', () => {
+    beforeEach(() => {
+      component.setSelectedValue({
+        value: 'v2',
+        label: 'l2'
+      });
+    });
+
+    it('selectedValue', () => {
+      expect(component.filterInstance.selectedValue).toEqual('v2');
+    });
+
+    it('selectedLabel', () => {
+      expect(component.filterInstance.selectedLabel).toEqual('l2');
+    });
+  });
+});

http://git-wip-us.apache.org/repos/asf/ambari/blob/ed660940/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filter-dropdown/filter-dropdown.component.ts
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filter-dropdown/filter-dropdown.component.ts b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filter-dropdown/filter-dropdown.component.ts
new file mode 100644
index 0000000..faaafcb
--- /dev/null
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filter-dropdown/filter-dropdown.component.ts
@@ -0,0 +1,50 @@
+/**
+ * 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} from '@angular/core';
+import {FilteringService} from '@app/services/filtering.service';
+
+@Component({
+  selector: 'filter-dropdown',
+  templateUrl: './filter-dropdown.component.html',
+  styleUrls: ['./filter-dropdown.component.less']
+})
+export class FilterDropdownComponent implements OnInit {
+
+  constructor(private filtering: FilteringService) {
+  }
+
+  ngOnInit() {
+    this.filterInstance.selectedValue = this.filterInstance.options[0].value;
+    this.filterInstance.selectedLabel = this.filterInstance.options[0].label;
+  }
+
+  @Input()
+  filterInstance: any;
+
+  @Input()
+  options: any[];
+
+  setSelectedValue(options: any): void {
+    if (this.filterInstance.selectedValue !== options.value) {
+      this.filterInstance.selectedValue = options.value;
+      this.filterInstance.selectedLabel = options.label;
+      this.filtering.filteringSubject.next(null);
+    }
+  };
+
+}

http://git-wip-us.apache.org/repos/asf/ambari/blob/ed660940/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filter-text-field/filter-text-field.component.html
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filter-text-field/filter-text-field.component.html b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filter-text-field/filter-text-field.component.html
new file mode 100644
index 0000000..ed3c4ba
--- /dev/null
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filter-text-field/filter-text-field.component.html
@@ -0,0 +1,21 @@
+<!--
+  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="input-group">
+  <span class="input-group-addon">{{filterInstance.label | translate}}</span>
+  <input type="text" class="form-control" [(ngModel)]="filterInstance.selectedValue" (change)="onValueChange()"> <!-- TODO use ngModelChange with debounce -->
+</div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/ed660940/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filter-text-field/filter-text-field.component.less
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filter-text-field/filter-text-field.component.less b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filter-text-field/filter-text-field.component.less
new file mode 100644
index 0000000..1395959
--- /dev/null
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filter-text-field/filter-text-field.component.less
@@ -0,0 +1,33 @@
+/**
+ * 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';
+
+.input-group {
+  border: @input-border;
+  border-right-width: 0;
+}
+
+.input-group-addon {
+  border: none;
+  background-color: transparent;
+  text-transform: uppercase;
+
+  & + input {
+    border: none;
+  }
+}

http://git-wip-us.apache.org/repos/asf/ambari/blob/ed660940/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filter-text-field/filter-text-field.component.spec.ts
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filter-text-field/filter-text-field.component.spec.ts b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filter-text-field/filter-text-field.component.spec.ts
new file mode 100644
index 0000000..e4f026c
--- /dev/null
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filter-text-field/filter-text-field.component.spec.ts
@@ -0,0 +1,63 @@
+/**
+ * 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 {Http} from '@angular/http';
+import {FormsModule} from '@angular/forms';
+import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
+import {TranslateHttpLoader} from '@ngx-translate/http-loader';
+import {FilteringService} from '@app/services/filtering.service';
+
+import {FilterTextFieldComponent} from './filter-text-field.component';
+
+export function HttpLoaderFactory(http: Http) {
+  return new TranslateHttpLoader(http, 'assets/i18n/', '.json');
+}
+
+describe('FilterTextFieldComponent', () => {
+  let component: FilterTextFieldComponent;
+  let fixture: ComponentFixture<FilterTextFieldComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [FilterTextFieldComponent],
+      imports: [
+        FormsModule,
+        TranslateModule.forRoot({
+          provide: TranslateLoader,
+          useFactory: HttpLoaderFactory,
+          deps: [Http]
+        })
+      ],
+      providers: [FilteringService],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FilterTextFieldComponent);
+    component = fixture.componentInstance;
+    component.filterInstance = {};
+    fixture.detectChanges();
+  });
+
+  it('should create component', () => {
+    expect(component).toBeTruthy();
+  });
+});

http://git-wip-us.apache.org/repos/asf/ambari/blob/ed660940/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filter-text-field/filter-text-field.component.ts
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filter-text-field/filter-text-field.component.ts b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filter-text-field/filter-text-field.component.ts
new file mode 100644
index 0000000..3f23ffd
--- /dev/null
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filter-text-field/filter-text-field.component.ts
@@ -0,0 +1,41 @@
+/**
+ * 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} from '@angular/core';
+import {FilteringService} from '@app/services/filtering.service';
+
+@Component({
+  selector: 'filter-text-field',
+  templateUrl: './filter-text-field.component.html',
+  styleUrls: ['./filter-text-field.component.less']
+})
+export class FilterTextFieldComponent implements OnInit {
+
+  constructor(private filtering: FilteringService) {
+  }
+
+  ngOnInit() {
+  }
+
+  @Input()
+  filterInstance: any;
+
+  onValueChange() {
+    this.filtering.filteringSubject.next(null);
+  }
+
+}

http://git-wip-us.apache.org/repos/asf/ambari/blob/ed660940/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filters-panel/filters-panel.component.html
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filters-panel/filters-panel.component.html b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filters-panel/filters-panel.component.html
new file mode 100644
index 0000000..e278a09
--- /dev/null
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filters-panel/filters-panel.component.html
@@ -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.
+-->
+
+<div class="form-inline filter-input-container col-md-8">
+  <filter-dropdown [filterInstance]="filters.clusters"></filter-dropdown>
+  <filter-text-field [filterInstance]="filters.text"></filter-text-field>
+  <filter-dropdown [filterInstance]="filters.timeRange"></filter-dropdown>
+  <filter-dropdown [filterInstance]="filters.timeZone"></filter-dropdown>
+  <!--button class="btn btn-success" type="button">
+    <span class="fa fa-search"></span>
+  </button-->
+</div>
+<div class="default-flex col-md-4">
+  <a href="#">
+    <span class="fa fa-search-minus"></span> {{'filter.excluded' | translate}}
+  </a>
+  <menu-button [label]="filters.components.label" [iconClass]="filters.components.iconClass"
+               [subItems]="filters.components.options" [isFilter]="true"
+               [filterInstance]="filters.components"></menu-button>
+  <menu-button [label]="filters.levels.label" [iconClass]="filters.levels.iconClass"
+               [subItems]="filters.levels.options" [isFilter]="true"
+               [filterInstance]="filters.levels"></menu-button>
+  <menu-button label="filter.capture" iconClass="fa fa-caret-right"></menu-button>
+</div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/ed660940/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filters-panel/filters-panel.component.less
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filters-panel/filters-panel.component.less b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filters-panel/filters-panel.component.less
new file mode 100644
index 0000000..46a157c
--- /dev/null
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filters-panel/filters-panel.component.less
@@ -0,0 +1,45 @@
+/**
+ * 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';
+
+.filter-input-container {
+  .flex-vertical-align;
+  justify-content: flex-start;
+
+  .btn-success {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  filter-dropdown {
+    border: @input-border;
+
+    &:not(:last-child) {
+      border-right-width: 0;
+    }
+
+    &:first-child {
+      border-radius: @button-border-radius 0 0 @button-border-radius;
+    }
+
+    &:last-child {
+      border-radius: 0 @button-border-radius @button-border-radius 0;
+    }
+  }
+}

http://git-wip-us.apache.org/repos/asf/ambari/blob/ed660940/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filters-panel/filters-panel.component.spec.ts
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filters-panel/filters-panel.component.spec.ts b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filters-panel/filters-panel.component.spec.ts
new file mode 100644
index 0000000..934f37a
--- /dev/null
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filters-panel/filters-panel.component.spec.ts
@@ -0,0 +1,59 @@
+/**
+ * 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 {Http} from '@angular/http';
+import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
+import {TranslateHttpLoader} from '@ngx-translate/http-loader';
+import {FilteringService} from '@app/services/filtering.service';
+
+import {FiltersPanelComponent} from './filters-panel.component';
+
+export function HttpLoaderFactory(http: Http) {
+  return new TranslateHttpLoader(http, 'assets/i18n/', '.json');
+}
+
+describe('FiltersPanelComponent', () => {
+  let component: FiltersPanelComponent;
+  let fixture: ComponentFixture<FiltersPanelComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [FiltersPanelComponent],
+      imports: [TranslateModule.forRoot({
+        provide: TranslateLoader,
+        useFactory: HttpLoaderFactory,
+        deps: [Http]
+      })],
+      providers: [FilteringService],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FiltersPanelComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create component', () => {
+    expect(component).toBeTruthy();
+  });
+});

http://git-wip-us.apache.org/repos/asf/ambari/blob/ed660940/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filters-panel/filters-panel.component.ts
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filters-panel/filters-panel.component.ts b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filters-panel/filters-panel.component.ts
new file mode 100644
index 0000000..f7b8429
--- /dev/null
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/filters-panel/filters-panel.component.ts
@@ -0,0 +1,39 @@
+/**
+ * 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';
+import {FilteringService} from '@app/services/filtering.service';
+
+@Component({
+  selector: 'filters-panel',
+  templateUrl: './filters-panel.component.html',
+  styleUrls: ['./filters-panel.component.less']
+})
+export class FiltersPanelComponent implements OnInit {
+
+  constructor(private filtering: FilteringService) {
+  }
+
+  ngOnInit() {
+  }
+
+  get filters() {
+    return this.filtering.filters;
+  }
+
+}

http://git-wip-us.apache.org/repos/asf/ambari/blob/ed660940/ambari-logsearch/ambari-logsearch-web-new/src/app/components/login-form/login-form.component.html
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/components/login-form/login-form.component.html b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/login-form/login-form.component.html
new file mode 100644
index 0000000..37a96e9
--- /dev/null
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/login-form/login-form.component.html
@@ -0,0 +1,33 @@
+<!--
+  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="login-form well col-md-4 col-md-offset-4 col-sm-offset-4">
+  <div class="alert alert-danger" *ngIf="isLoginAlertDisplayed" [innerHTML]="'authorization.error' | translate"></div>
+  <form #loginForm="ngForm" (ngSubmit)="login()">
+    <div class="form-group">
+      <label for="username">{{'authorization.name' | translate}}</label>
+      <input class="form-control" type="text" id="username" name="username" required [(ngModel)]="username">
+    </div>
+    <div class="form-group">
+      <label for="password">{{'authorization.password' | translate}}</label>
+      <input class="form-control" type="password" id="password" name="password" required [(ngModel)]="password">
+    </div>
+    <button class="btn btn-success" [disabled]="!loginForm.form.valid || isRequestInProgress">
+      {{'authorization.signIn' | translate}}
+    </button>
+  </form>
+</div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/ed660940/ambari-logsearch/ambari-logsearch-web-new/src/app/components/login-form/login-form.component.less
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/components/login-form/login-form.component.less b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/login-form/login-form.component.less
new file mode 100644
index 0000000..f760ee8
--- /dev/null
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/login-form/login-form.component.less
@@ -0,0 +1,22 @@
+/**
+ * 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';
+
+.login-form {
+  margin-top: @block-margin-top;
+}

http://git-wip-us.apache.org/repos/asf/ambari/blob/ed660940/ambari-logsearch/ambari-logsearch-web-new/src/app/components/login-form/login-form.component.spec.ts
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/components/login-form/login-form.component.spec.ts b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/login-form/login-form.component.spec.ts
new file mode 100644
index 0000000..0498ee4
--- /dev/null
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/login-form/login-form.component.spec.ts
@@ -0,0 +1,121 @@
+/**
+ * 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 {FormsModule} from '@angular/forms';
+import {HttpModule, Http} from '@angular/http';
+import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
+import {TranslateHttpLoader} from '@ngx-translate/http-loader';
+import {HttpClientService} from '@app/services/http-client.service';
+
+import {LoginFormComponent} from './login-form.component';
+
+export function HttpLoaderFactory(http: Http) {
+  return new TranslateHttpLoader(http, 'assets/i18n/', '.json');
+}
+
+describe('LoginFormComponent', () => {
+  let component: LoginFormComponent;
+  let fixture: ComponentFixture<LoginFormComponent>;
+
+  let authMock = {
+    isError: false
+  };
+  const httpClient = {
+    isAuthorized: true,
+    post: () => {
+      return {
+        finally: (callback: () => void) => {
+          callback();
+          return {
+            subscribe: (success: () => void, error: () => void) => {
+              authMock.isError ? error() : success();
+            }
+          }
+        }
+      }
+    }
+  };
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [LoginFormComponent],
+      imports: [
+        HttpModule,
+        FormsModule,
+        TranslateModule.forRoot({
+          provide: TranslateLoader,
+          useFactory: HttpLoaderFactory,
+          deps: [Http]
+        })
+      ],
+      providers: [
+        {
+          provide: HttpClientService,
+          useValue: httpClient
+        }
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create component', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('#login()', () => {
+    const cases = [
+      {
+        isError: true,
+        isLoginAlertDisplayed: true,
+        isAuthorized: false,
+        title: 'login failure'
+      },
+      {
+        isError: false,
+        isLoginAlertDisplayed: false,
+        isAuthorized: true,
+        title: 'login success'
+      }
+    ];
+
+    cases.forEach(test => {
+      describe(test.title, () => {
+        beforeEach(() => {
+          authMock.isError = test.isError;
+          component.login();
+        });
+
+        it('isLoginAlertDisplayed', () => {
+          expect(component.isLoginAlertDisplayed).toEqual(test.isLoginAlertDisplayed);
+        });
+
+        it('isRequestInProgress', () => {
+          expect(component.isRequestInProgress).toEqual(false);
+        })
+      });
+    });
+
+  });
+});

http://git-wip-us.apache.org/repos/asf/ambari/blob/ed660940/ambari-logsearch/ambari-logsearch-web-new/src/app/components/login-form/login-form.component.ts
----------------------------------------------------------------------
diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/components/login-form/login-form.component.ts b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/login-form/login-form.component.ts
new file mode 100644
index 0000000..2a93775
--- /dev/null
+++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/components/login-form/login-form.component.ts
@@ -0,0 +1,60 @@
+/**
+ * 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';
+import 'rxjs/add/operator/finally';
+import {HttpClientService} from '@app/services/http-client.service';
+
+@Component({
+  selector: 'login-form',
+  templateUrl: './login-form.component.html',
+  styleUrls: ['./login-form.component.less']
+})
+export class LoginFormComponent implements OnInit {
+
+  constructor(private httpClient: HttpClientService) {
+  }
+
+  ngOnInit() {
+  }
+
+  username: string;
+
+  password: string;
+
+  isLoginAlertDisplayed: boolean;
+
+  isRequestInProgress: boolean;
+
+  login() {
+    this.isRequestInProgress = true;
+    this.httpClient.post('login', {
+      username: this.username,
+      password: this.password
+    }).finally(() => {
+      this.isRequestInProgress = false;
+    }).subscribe(() => {
+      this.isLoginAlertDisplayed = false;
+      this.httpClient.isAuthorized = true;
+    }, () => {
+      this.isLoginAlertDisplayed = true;
+      this.httpClient.isAuthorized = false;
+    });
+  }
+
+}