Kafka interface page component creation

Change-Id: I66a0a939df40b8460e2c422568a71684b30e9225
Issue-ID: DCAEGEN2-1693
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>

7 files changed, 65 insertions, 3 deletions

diff --git a/components/datalake-handler/admin/src/src/app/app-routing.module.ts b/components/datalake-handler/admin/src/src/app/app-routing.module.ts
index e96f5d17..71c11201 100644
--- a/components/datalake-handler/admin/src/src/app/app-routing.module.ts
+++ b/components/datalake-handler/admin/src/src/app/app-routing.module.ts
@@ -31,6 +31,7 @@ import { Routes, RouterModule } from "@angular/router";
 import { TestComponent } from './views/test/test.component';
 
 import { FeederComponent } from "./views/feeder/feeder.component";
+import { KafkaComponent } from "./views/kafka/kafka.component";
 import { TopicsComponent } from "./views/topics/topics.component";
 import { DatabaseComponent } from "./views/database/database.component";
 import { AboutComponent } from "./views/about/about.component";
@@ -42,6 +43,7 @@ const routes: Routes = [
   { path: "", redirectTo: "/feeder", pathMatch: "full" },
   { path: "test", component: TestComponent },
   { path: "feeder", component: FeederComponent },
+  { path: "kafka", component: KafkaComponent },
   { path: "topics", component: TopicsComponent },
   { path: "database", component: DatabaseComponent },
   { path: "about", component: AboutComponent },
diff --git a/components/datalake-handler/admin/src/src/app/app.module.ts b/components/datalake-handler/admin/src/src/app/app.module.ts
index 8cdef597..8ed9fd83 100644
--- a/components/datalake-handler/admin/src/src/app/app.module.ts
+++ b/components/datalake-handler/admin/src/src/app/app.module.ts
@@ -91,10 +91,11 @@ import { CardComponent } from "./shared/modules/card/card.component";
 import { ButtonComponent } from "./shared/components/Button/button.component";
 import { ModalDirective } from "./shared/modules/modal/modal.directive";
 import { ModalDemoComponent } from "./views/test/modal-demo/modal-demo.component";
-
+import { KafkaComponent } from './views/kafka/kafka.component';
 // Angular SVG Icon
 import { AngularSvgIconModule } from "angular-svg-icon";
 
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -131,7 +132,8 @@ import { AngularSvgIconModule } from "angular-svg-icon";
     CardComponent,
     ButtonComponent,
     ModalDirective,
-    ModalDemoComponent
+    ModalDemoComponent,
+    KafkaComponent
   ],
   imports: [
     BrowserModule,
@@ -167,7 +169,8 @@ import { AngularSvgIconModule } from "angular-svg-icon";
     NewTemplateModalComponent,
     EditTemplateModalComponent,
     ModalComponent,
-    ModalDemoComponent
+    ModalDemoComponent,
+    KafkaComponent
   ]
 })
 export class AppModule {}
diff --git a/components/datalake-handler/admin/src/src/app/shared/layout/sidebar/sidebar.component.html b/components/datalake-handler/admin/src/src/app/shared/layout/sidebar/sidebar.component.html
index cf0a24e6..42835a54 100644
--- a/components/datalake-handler/admin/src/src/app/shared/layout/sidebar/sidebar.component.html
+++ b/components/datalake-handler/admin/src/src/app/shared/layout/sidebar/sidebar.component.html
@@ -36,6 +36,13 @@ limitations under the License.
 
       <li class="nav-item ">
         <a class="nav-link" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"
+           routerLink="/kafka">
+          <i class="fas fa-cube">&nbsp;</i>
+          {{"SIDEBAR.KAFKA" | translate}}
+        </a>
+      </li>
+      <li class="nav-item ">
+        <a class="nav-link" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"
           routerLink="/topics">
           <i class="fas fa-cube">&nbsp;</i>
           {{"SIDEBAR.TOPICS" | translate}}
diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka.component.css b/components/datalake-handler/admin/src/src/app/views/kafka/kafka.component.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka.component.css
diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka.component.html b/components/datalake-handler/admin/src/src/app/views/kafka/kafka.component.html
new file mode 100644
index 00000000..6b8a6df1
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka.component.html
@@ -0,0 +1,9 @@
+<div class="row">
+  <div class="col-md-12 pb-2 path">
+    Home > Kafka
+  </div>
+
+  <div class="col-md-12">
+
+  </div>
+</div>
diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/kafka/kafka.component.spec.ts
new file mode 100644
index 00000000..e786c0cc
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { KafkaComponent } from './kafka.component';
+
+describe('KafkaComponent', () => {
+  let component: KafkaComponent;
+  let fixture: ComponentFixture<KafkaComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ KafkaComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(KafkaComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/components/datalake-handler/admin/src/src/app/views/kafka/kafka.component.ts b/components/datalake-handler/admin/src/src/app/views/kafka/kafka.component.ts
new file mode 100644
index 00000000..2ebd36e4
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/views/kafka/kafka.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+import { AdminService } from "../../core/services/admin.service";
+@Component({
+  selector: 'app-kafka',
+  templateUrl: './kafka.component.html',
+  styleUrls: ['./kafka.component.css']
+})
+export class KafkaComponent implements OnInit {
+  constructor(private adminService: AdminService) {
+    // Set page title
+    this.adminService.setTitle("SIDEBAR.KAFKA");
+  }
+
+  ngOnInit() { }
+
+}