Add function

1. Add i18n language pattern
2. Add new page for verison control
3. Git tracked files fix

Issue-ID: DCAEGEN2-1188

Change-Id: I93ead79b9ae7f6291b4f2d04718c7a14f4213cb2
Signed-off-by: Ekko Chang <ekko.chang@qct.io>

8 files changed, 0 insertions, 707 deletions

diff --git a/components/datalake-handler/admin/src/app/topics/topic-list/topic-list.component.css b/components/datalake-handler/admin/src/app/topics/topic-list/topic-list.component.css
deleted file mode 100644
index bb3e0e80..00000000
--- a/components/datalake-handler/admin/src/app/topics/topic-list/topic-list.component.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.topic-list-panel {
-  background: #FFFFFF;
-  box-shadow: 3px 3px 11px 0 #D2D3D5;
-  border-radius: 20px;
-}
diff --git a/components/datalake-handler/admin/src/app/topics/topic-list/topic-list.component.html b/components/datalake-handler/admin/src/app/topics/topic-list/topic-list.component.html
deleted file mode 100644
index 969a80e8..00000000
--- a/components/datalake-handler/admin/src/app/topics/topic-list/topic-list.component.html
+++ /dev/null
@@ -1,421 +0,0 @@
-<div class="topic-list-panel">
-  <div class="row">
-    <div class="col-md-12">
-      <div class="d-flex justify-content-end p-2">
-
-        <!-- Search bar -->
-        <div class="p-1">
-          <div class="input-group">
-            <input type="text" class="form-control input-dl-field-search" placeholder="Search..."
-              (keyup)='this.updateFilter($event)'>
-            <div class="input-group-append">
-              <button type="button" class="btn btn-dl-dark">
-                <i class="fa fa-search"></i>
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <!-- button -->
-        <div class="p-1">
-          <button class="btn btn-dl-dark" data-toggle="modal" data-target="#topicDefaultModal"
-            (click)="updateDetail()">Default
-            configuration</button>
-        </div>
-
-      </div>
-    </div>
-  </div>
-
-  <!-- datatable -->
-  <div class="row">
-    <div class="col-md-12">
-      <ngx-datatable #mydatatable class="bootstrap" [rows]="topics" [columnMode]="'force'" [headerHeight]="40"
-        [footerHeight]="40" [rowHeight]="50" [scrollbarV]="true" [scrollbarH]="true"
-        [loadingIndicator]="loadingIndicator">
-
-        <ngx-datatable-column [width]="50" name="Status" prop="enable">
-          <ng-template let-row="row" ngx-datatable-cell-template>
-            <span *ngIf="row.enable == true">
-              <i class="fas fa-circle icon-enable" aria-hidden="true"></i>
-            </span>
-            <span *ngIf="row.enable == false">
-              <i class="fas fa-circle icon-disable" aria-hidden="true"></i>
-            </span>
-          </ng-template>
-        </ngx-datatable-column>
-
-        <ngx-datatable-column [width]="300" name="Name" prop="name">
-          <ng-template let-row="row" ngx-datatable-cell-template>
-            <span>{{ row.name }}</span>
-          </ng-template>
-        </ngx-datatable-column>
-
-        <ngx-datatable-column [width]="150" name="Sink">
-          <ng-template let-row="row" ngx-datatable-cell-template>
-            <!-- couchbasedb -->
-            <span class="pr-1">
-              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
-                y="0px" width="20" height="20" viewBox="-408 285.3 25 25"
-                style="enable-background:new -408 285.3 25 25;" xml:space="preserve">
-                <path [ngStyle]="{'fill': row.dbs.includes('couchbasedb') ? '#5DBEBB':'D2D3D5'}"
-                  d="M-395.5,285.3c-6.9,0-12.5,5.6-12.5,12.5s5.6,12.5,12.5,12.5s12.5-5.6,12.5-12.5S-388.6,285.3-395.5,285.3z
-                          M-387.1,300c0,0.8-0.4,1.4-1.3,1.6c-1.5,0.3-4.6,0.4-7.2,0.4s-5.7-0.2-7.2-0.4c-0.8-0.2-1.3-0.8-1.3-1.6v-4.9
-                        c0-0.8,0.6-1.5,1.3-1.6c0.4-0.1,1.5-0.2,2.2-0.2c0.3,0,0.5,0.2,0.5,0.6v3.4l4.4-0.1l4.4,0.1v-3.4c0-0.4,0.2-0.6,0.5-0.6
-                        c0.8,0,1.8,0.1,2.2,0.2c0.7,0.1,1.3,0.8,1.3,1.6C-387.1,296.7-387.1,298.3-387.1,300L-387.1,300z" />
-              </svg>
-            </span>
-
-            <!-- druid -->
-            <span class="pr-1">
-              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
-                y="0px" width="20" height="20" viewBox="-403 285.3 34 25"
-                style="enable-background:new -403 285.3 34 25;" xml:space="preserve">
-                <g>
-                  <path [ngStyle]="{'fill': row.dbs.includes('druid') ? '#5DBEBB':'D2D3D5'}"
-                    d="M-385.5,285.3c2.2,0,4.3,0,6.5,0c4.2,0,8,2.7,9.4,6.6c0.6,1.7,0.8,3.4,0.6,5.2c-0.3,2.6-1,5-2.5,7.2
-                   c-2.3,3.4-5.5,5.2-9.5,5.8c-1.4,0.2-2.7,0.2-4.1,0.2c-0.6,0-0.9-0.3-0.9-0.7c0-0.5,0.3-0.9,0.8-0.9c0.6,0,1.2,0,1.9,0
-                   c3.7-0.1,7-1.4,9.6-4.2c1.8-1.9,2.7-4.3,3-6.9c0.2-1.8,0.2-3.6-0.5-5.3c-1.1-2.6-3.1-4.2-5.8-5c-1.1-0.3-2.1-0.3-3.2-0.4
-                   c-4,0-8.1,0-12.1,0c-0.2,0-0.3,0-0.5,0c-0.4,0-0.7-0.4-0.7-0.8s0.3-0.7,0.6-0.8c0.2,0,0.4,0,0.6,0L-385.5,285.3L-385.5,285.3z" />
-                  <path [ngStyle]="{'fill': row.dbs.includes('druid') ? '#5DBEBB':'D2D3D5'}" d="M-389.7,304.6h-7.2c-0.2,0-0.3,0-0.5,0c-0.4-0.1-0.7-0.3-0.7-0.7c0-0.4,0.2-0.7,0.6-0.9
-                   c0.2-0.1,0.5-0.1,0.8-0.1c4.7,0,9.5,0,14.2,0c1.7,0,3.1-0.6,4.2-1.8c1-1,1.5-2.3,1.6-3.7c0.1-1.1,0-2.1-0.7-3.1
-                   c-0.8-1-1.8-1.5-3.1-1.5c-4.5,0-9,0-13.5,0c-0.5,0-1,0-1.4-0.1c-0.4,0-0.6-0.3-0.7-0.7c0-0.5,0.2-0.8,0.6-0.9c0.1,0,0.3,0,0.4,0
-                   h14.4c2.4,0,4.5,1.5,5.3,3.8c0.5,1.6,0.4,3.3-0.3,4.8c-1.2,3-3.9,4.9-7.2,4.9C-385,304.6-387.3,304.6-389.7,304.6L-389.7,304.6z
-                    M-400.4,292.6c-0.6,0-1.1,0-1.7,0c-0.5,0-0.8-0.3-0.9-0.7s0.2-0.8,0.7-0.9c0.3,0,0.5-0.1,0.8-0.1c0.8,0,1.5,0,2.3,0
-                   c0.2,0,0.5,0,0.7,0.1c0.4,0.1,0.6,0.5,0.6,0.9s-0.3,0.7-0.7,0.7C-399.2,292.7-399.8,292.6-400.4,292.6L-400.4,292.6z M-390.3,310.3
-                   c-0.5,0-1,0-1.6,0c-0.5,0-0.8-0.3-0.9-0.7c0-0.5,0.3-0.9,0.7-0.9c1.1-0.1,2.2-0.1,3.4,0c0.4,0,0.8,0.4,0.7,0.8l0,0
-                   c0,0.5-0.4,0.7-0.9,0.8L-390.3,310.3L-390.3,310.3z" />
-                </g>
-              </svg>
-            </span>
-
-            <!-- elasticsearch -->
-            <span class="pr-1">
-              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
-                y="0px" width="20" height="20" viewBox="2066.4 284.8 25.1 25"
-                style="enable-background:new 2066.4 284.8 25.1 25;" xml:space="preserve">
-                <g>
-                  <path style="fill: #FFFFFF" d="M2091.6,297.9c0-2.1-1.3-3.9-3.3-4.7c0.1-0.4,0.1-0.9,0.1-1.4c0-3.9-3.2-7.1-7.1-7.1c-2.3,0-4.4,1.1-5.7,3
-                 c-0.7-0.5-1.5-0.8-2.3-0.8c-2.1,0-3.8,1.7-3.8,3.8c0,0.5,0.1,0.9,0.2,1.3c-2,0.7-3.3,2.6-3.3,4.7c0,2.1,1.3,4,3.3,4.7
-                 c-0.1,0.4-0.1,0.9-0.1,1.4c0,3.9,3.2,7.1,7.1,7.1c2.3,0,4.4-1.1,5.7-3c0.7,0.5,1.5,0.8,2.3,0.8c2.1,0,3.8-1.7,3.8-3.8
-                 c0-0.5-0.1-0.9-0.2-1.3C2090.2,301.8,2091.6,300,2091.6,297.9L2091.6,297.9z" />
-                  <path [ngStyle]="{'fill': row.dbs.includes('elasticsearch') ? '#5DBEBB':'#D2D3D5'}" d="M2076.3,295.5l5.6,2.6l5.7-5c0.1-0.4,0.1-0.8,0.1-1.3c0-3.5-2.8-6.3-6.3-6.3c-2.1,0-4,1-5.2,2.7l-0.9,4.9
-                 L2076.3,295.5L2076.3,295.5z" />
-                  <path [ngStyle]="{'fill': row.dbs.includes('elasticsearch') ? '#5DBEBB':'#D2D3D5'}" d="M2070.5,301.4c-0.1,0.4-0.1,0.8-0.1,1.3c0,3.5,2.8,6.3,6.3,6.3c2.1,0,4.1-1,5.2-2.8l0.9-4.9l-1.3-2.4l-5.6-2.6
-                 L2070.5,301.4L2070.5,301.4z" />
-                  <path [ngStyle]="{'fill': row.dbs.includes('elasticsearch') ? '#5DBEBB':'#D2D3D5'}" d="M2070.4,291.7l3.8,0.9l0.9-4.4c-0.5-0.4-1.2-0.6-1.8-0.6c-1.7,0-3,1.4-3,3
-                 C2070.2,291.1,2070.3,291.4,2070.4,291.7L2070.4,291.7z" />
-                  <path [ngStyle]="{'fill': row.dbs.includes('elasticsearch') ? '#5DBEBB':'#D2D3D5'}"
-                    d="M2070.1,292.7c-1.7,0.6-2.9,2.2-2.9,4c0,1.8,1.1,3.3,2.7,4l5.4-4.9l-1-2.1L2070.1,292.7L2070.1,292.7z" />
-                  <path [ngStyle]="{'fill': row.dbs.includes('elasticsearch') ? '#5DBEBB':'D2D3D5'}" d="M2082.9,306.3c0.5,0.4,1.2,0.6,1.8,0.6c1.7,0,3-1.4,3-3c0-0.4-0.1-0.7-0.2-1l-3.8-0.9L2082.9,306.3
-                 L2082.9,306.3z" />
-                  <path [ngStyle]="{'fill': row.dbs.includes('elasticsearch') ? '#5DBEBB':'#D2D3D5'}"
-                    d="M2083.7,300.9l4.2,1c1.7-0.6,2.9-2.2,2.9-4c0-1.8-1.1-3.3-2.7-4l-5.5,4.8L2083.7,300.9L2083.7,300.9z" />
-                </g>
-              </svg>
-            </span>
-
-            <!-- mongodb -->
-            <span class="pr-1">
-              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
-                y="0px" width="20" height="20" viewBox="-397.2 285.8 11.2 25"
-                style="enable-background:new -397.2 285.8 11.2 25;" xml:space="preserve">
-                <g transform="matrix(1.2754196 0 0 1.2754196 -16.030009 -21.83192)">
-                  <path [ngStyle]="{'fill': row.dbs.includes('mongodb') ? '#19A2A2':'#C4C6C8'}"
-                    d="M-294.5,241.2c0.2,0.3,0.4,0.7,0.5,1c0.1,0.2,0.2,0.4,0.4,0.5c0.4,0.4,0.9,0.9,1.2,1.4
-                 c0.9,1.2,1.5,2.5,1.9,3.9c0.3,0.9,0.4,1.7,0.4,2.6c0,2.7-0.9,4.9-2.7,6.8c-0.3,0.3-0.6,0.6-1,0.8c-0.2,0-0.3-0.2-0.4-0.3
-                 c-0.2-0.2-0.2-0.5-0.3-0.8c-0.1-0.3-0.1-0.6-0.1-1c0,0,0-0.1,0-0.2C-294.4,256.1-294.6,241.3-294.5,241.2z" />
-                  <path [ngStyle]="{'fill': row.dbs.includes('mongodb') ? '#5DBEBB':'#D2D3D5'}"
-                    d="M-294.5,241.2C-294.5,241.2-294.5,241.2-294.5,241.2c-0.1,0.2-0.2,0.4-0.3,0.6c-0.1,0.2-0.3,0.3-0.5,0.5
-                 c-0.9,0.8-1.7,1.8-2.3,2.9c-0.8,1.5-1.2,3.1-1.3,4.8c0,0.6,0.2,2.8,0.4,3.4c0.5,1.6,1.4,3,2.7,4.2c0.3,0.3,0.6,0.5,0.9,0.8
-                 c0.1,0,0.1-0.1,0.1-0.2c0-0.2,0.1-0.3,0.1-0.4c0.1-0.5,0.2-1.1,0.2-1.6C-294.4,256.2-294.4,241.3-294.5,241.2L-294.5,241.2z" />
-                  <path [ngStyle]="{'fill': row.dbs.includes('mongodb') ? '#CEEBEA':'#C2BFBF'}" d="M-294,258.9c0-0.2,0.2-0.4,0.3-0.7c-0.1,0-0.2-0.2-0.3-0.3c-0.1-0.1-0.1-0.2-0.2-0.4c-0.2-0.4-0.2-0.9-0.2-1.4
-                 c0,0,0-0.1,0-0.2s0-0.1,0-0.2c0,0-0.1,0.4-0.1,0.5c0,0.5-0.1,1-0.2,1.4c0,0.2,0,0.4-0.2,0.5c0,0,0,0,0,0.1c0.2,0.5,0.2,1.1,0.3,1.7
-                 v0.2c0,0.3,0,0.2,0.2,0.3c0.1,0,0.2,0,0.3,0.1c0.1,0,0.1,0,0.1-0.1c0-0.1,0-0.2,0-0.4c0-0.3,0-0.7,0-1
-                 C-294,259.3-294,259.1-294,258.9z" />
-                </g>
-              </svg>
-            </span>
-
-          </ng-template>
-        </ngx-datatable-column>
-
-        <ngx-datatable-column [width]="100" name="TTL" prop="ttl">
-          <ng-template let-row="row" ngx-datatable-cell-template>
-            <span>{{ row.ttl }}</span>
-          </ng-template>
-        </ngx-datatable-column>
-
-        <ngx-datatable-column [width]="100" name="Authentication">
-          <ng-template let-row="row" ngx-datatable-cell-template>
-            <span *ngIf="row.login != '' && row.pass != ''">
-              <i class="fas fa-unlock-alt icon-enable" aria-hidden="true"></i> ​
-            </span>
-            <span *ngIf="row.login === '' && row.pass === ''">
-              <i class="fa fa-unlock-alt icon-disable" aria-hidden="true"></i> ​
-            </span>
-          </ng-template>
-        </ngx-datatable-column>
-
-        <ngx-datatable-column [width]="100" name="Save raw data" prop="save_raw">
-          <ng-template let-row="row" ngx-datatable-cell-template>
-            <span *ngIf="row.save_raw == true">
-              <i class="fas fa-check icon-enable" aria-hidden="true"></i>
-            </span>
-            <span *ngIf="row.save_raw == false">
-              <i class="fas fa-check icon-disable" aria-hidden="true"></i>
-            </span>
-          </ng-template>
-        </ngx-datatable-column>
-
-        <ngx-datatable-column [width]="150" name="Setting">
-          <ng-template let-row="row" ngx-datatable-cell-template>
-            <span class="icon-unconfig"
-              *ngIf="row.dbs.includes('_DL_DEFAULT_')">&nbsp;&nbsp;Unconfigured&nbsp;&nbsp;</span>
-            <span class="icon-config"
-              *ngIf="!row.dbs.includes('_DL_DEFAULT_')">&nbsp;&nbsp;Configured&nbsp;&nbsp;</span>
-          </ng-template>
-        </ngx-datatable-column>
-
-        <ngx-datatable-column [width]="100" name="" sortable="false">
-          <ng-template let-row="row" ngx-datatable-cell-template>
-            <span>
-              <button md-icon-button class="btn action-icon-setting" data-toggle="modal" data-target="#topicDetailModal"
-                (click)="this.updateDetail(row.name)">
-                <i class="fas fa-cog fa-xs"></i>
-              </button>
-            </span>
-          </ng-template>
-        </ngx-datatable-column>
-
-      </ngx-datatable>
-    </div>
-  </div>
-</div>
-
-<!-- Detail Modal -->
-<div class="modal fade" id="topicDetailModal" tabindex="-1" role="dialog" aria-hidden="true">
-  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
-    <div class="modal-content">
-      <div class="modal-title">
-        <div class="container-fluid pt-3">
-          <h4>{{ topicDetail.name }}</h4>
-          <hr>
-        </div>
-      </div>
-
-      <div class="modal-body">
-        <div class="container-fluid">
-
-          <div class="form-group">
-            <div class="row">
-              <div class="col-md-4"><label>Status</label></div>
-              <div class="col-md-8"><input type="checkbox" [(ngModel)]="topicDetail.enable"
-                  [checked]="topicDetail.enable"></div>
-            </div>
-          </div>
-
-          <div class="form-group">
-            <div class="row">
-              <div class="col-md-4"><label for="inputUserName">Authentication</label></div>
-              <div class="col-md-8">
-                <div class="row">
-                  <div class="col-md-6">
-                    <input class="form-control" id="inputUserName" type="text" placeholder="Username"
-                      value="{{ topicDetail.login }}" [(ngModel)]="topicDetail.login">
-                  </div>
-                  <div class="col-md-6">
-                    <input class="form-control" id="inputPass" type="text" placeholder="Password"
-                      value="{{ topicDetail.pass }}" [(ngModel)]="topicDetail.pass">
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div class="form-group">
-            <div class="row">
-              <div class="col-md-4"><label>Database</label></div>
-              <div class="col-md-8">
-                {{ topicDetail.dbs }}
-              </div>
-            </div>
-          </div>
-
-          <div class="form-group">
-            <div class="row">
-              <div class="col-md-4"><label>Data format</label></div>
-              <div class="col-md-4">
-                <select class="custom-select" id="selDataFormat" [(ngModel)]="topicDetail.data_format">
-                  <option *ngFor="let dataFormat of dataFormats" [value]="dataFormat"
-                    [selected]="dataFormat == topicDetail.data_format">
-                    {{ dataFormat }}</option>
-                </select>
-              </div>
-            </div>
-          </div>
-
-          <div class="form-group">
-            <div class="row">
-              <div class="col-md-4"><label>TTL (days)</label></div>
-              <div class="col-md-4">
-                <input class="form-control" id="inputTtl" type="text" placeholder="3650" [(ngModel)]="topicDetail.ttl"
-                  value="{{ topicDetail.ttl }}">
-              </div>
-            </div>
-          </div>
-
-          <div class="form-group">
-            <div class="row">
-              <div class="col-md-4">
-                <label>Save raw data</label>
-              </div>
-              <div class="col-md-4">
-                <input type="checkbox" [checked]="topicDetail.save_raw" [(ngModel)]="topicDetail.save_raw">
-              </div>
-            </div>
-          </div>
-
-          <div class="form-group">
-            <div class="row">
-              <div class="col-md-4">
-                <label>Correlate cleard message</label>
-              </div>
-              <div class="col-md-4">
-                <input type="checkbox" [checked]="topicDetail.correlate_cleared_message"
-                  [(ngModel)]="topicDetail.correlate_cleared_message">
-              </div>
-            </div>
-          </div>
-
-          <div class="form-group">
-            <div class="row">
-              <div class="col-md-4"><label>ID extraction</label></div>
-              <div class="col-md-8">
-                <div class="d-flex" *ngFor="let field of idExFields; let i = index">
-                  <div class="order-1">
-                    <input class="form-control" placeholder="/event-header/id" type="text" [(ngModel)]="field.item"
-                      [value]="field.item">
-                  </div>
-                  <div class="order-2">
-                    <button type="button" class="btn" (click)="addIdField(i)"><i class="fa fa-plus fa-xs"
-                        aria-hidden="true"></i>
-                    </button>
-                  </div>
-                  <div class="order-3">
-                    <button type="button" class="btn" (click)="deleteIdField(i)"><i class="fa fa-trash fa-xs"
-                        aria-hidden="true"></i>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-        </div>
-      </div>
-
-      <div class="modal-footer">
-        <button type="submit" class="btn btn-primary" (click)="saveTopic()">OK</button>
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
-      </div>
-    </div>
-
-  </div>
-</div>
-
-<!-- config Modal -->
-<div class="modal fade" id="topicDefaultModal" tabindex="-1" role="dialog" aria-hidden="true">
-  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
-    <div class="modal-content">
-      <div class="modal-title">
-        <div class="container-fluid pt-3">
-          <h4>Topics Default Configurations</h4>
-          <hr>
-        </div>
-      </div>
-
-      <div class="modal-body">
-        <div class="container-fluid">
-
-          <div class="form-group">
-            <div class="row">
-              <div class="col-md-4"><label>Status</label></div>
-              <div class="col-md-8"><input type="checkbox" [(ngModel)]="topicDetail.enable"
-                  [checked]="topicDetail.enable"></div>
-            </div>
-          </div>
-
-          <div class="form-group">
-            <div class="row">
-              <div class="col-md-4"><label for="inputUserName">Authentication</label></div>
-              <div class="col-md-8">
-                <div class="row">
-                  <div class="col-md-6">
-                    <input class="form-control" id="inputUserName" type="text" placeholder="Username"
-                      value="{{ topicDetail.login }}" [(ngModel)]="topicDetail.login">
-                  </div>
-                  <div class="col-md-6">
-                    <input class="form-control" id="inputPass" type="text" placeholder="Password"
-                      value="{{ topicDetail.pass }}" [(ngModel)]="topicDetail.pass">
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div class="form-group">
-            <div class="row">
-              <div class="col-md-4"><label>Data format</label></div>
-              <div class="col-md-4">
-                <select class="custom-select" id="selDataFormat" [(ngModel)]="topicDetail.data_format">
-                  <option *ngFor="let dataFormat of dataFormats" [value]="dataFormat"
-                    [selected]="dataFormat == topicDetail.data_format">
-                    {{ dataFormat }}</option>
-                </select>
-              </div>
-            </div>
-          </div>
-
-          <div class="form-group">
-            <div class="row">
-              <div class="col-md-4"><label>TTL (days)</label></div>
-              <div class="col-md-4">
-                <input class="form-control" id="inputTtl" type="text" placeholder="3650" [(ngModel)]="topicDetail.ttl"
-                  value="{{ topicDetail.ttl }}">
-              </div>
-            </div>
-          </div>
-
-
-          <div class="form-group">
-            <div class="row">
-              <div class="col-md-4"><label>Database</label></div>
-              <div class="col-md-8">
-                Database list
-              </div>
-            </div>
-          </div>
-
-          <div class="form-group">
-            <div class="row">
-              <div class="col-md-4">
-                <label>Save raw data</label>
-              </div>
-              <div class="col-md-4">
-                <input type="checkbox" [checked]="topicDetail.save_raw" [(ngModel)]="topicDetail.save_raw">
-              </div>
-            </div>
-          </div>
-
-        </div>
-      </div>
-
-      <div class="modal-footer">
-        <button type="submit" class="btn btn-primary" (click)="saveTopic()">OK</button>
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
-      </div>
-    </div>
-
-  </div>
-</div>
diff --git a/components/datalake-handler/admin/src/app/topics/topic-list/topic-list.component.spec.ts b/components/datalake-handler/admin/src/app/topics/topic-list/topic-list.component.spec.ts
deleted file mode 100644
index 531afbb7..00000000
--- a/components/datalake-handler/admin/src/app/topics/topic-list/topic-list.component.spec.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { async, ComponentFixture, TestBed } from "@angular/core/testing";
-
-import { TopicListComponent } from "./topic-list.component";
-
-describe("TopicListComponent", () => {
-  let component: TopicListComponent;
-  let fixture: ComponentFixture<TopicListComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [TopicListComponent]
-    }).compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(TopicListComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it("should create", () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/components/datalake-handler/admin/src/app/topics/topic-list/topic-list.component.ts b/components/datalake-handler/admin/src/app/topics/topic-list/topic-list.component.ts
deleted file mode 100644
index 1cdd7634..00000000
--- a/components/datalake-handler/admin/src/app/topics/topic-list/topic-list.component.ts
+++ /dev/null
@@ -1,189 +0,0 @@
-import { Component, ViewChild } from "@angular/core";
-import { RestApiService } from "../../core/services/rest-api.service";
-import { Topic } from "../../core/models/Topic/topic.model";
-import { NgbModal, ModalDismissReasons } from "@ng-bootstrap/ng-bootstrap";
-
-@Component({
-  selector: "app-topic-list",
-  templateUrl: "./topic-list.component.html",
-  styleUrls: ["./topic-list.component.css"]
-})
-export class TopicListComponent {
-  // fake data
-  topicList: Array<string> = [
-    "AAI-EVENT1",
-    "AAI-EVENT2",
-    "AAI-EVENT3",
-    "AAI-EVENT4",
-    "AAI-EVENT5",
-    "AAI-EVENT6",
-    "AAI-EVENT7",
-    "AAI-EVENT8",
-    "AAI-EVENT9",
-    "AAI-EVENT10",
-    "AAI-EVENT11",
-    "AAI-EVENT12",
-    "AAI-EVENT13",
-    "AAI-EVENT14",
-    "AAI-EVENT15",
-    "AAI-EVENT16",
-    "AAI-EVENT17",
-    "AAI-EVENT18",
-    "AAI-EVENT19",
-    "AAI-EVENT21",
-    "AAI-EVENT22",
-    "AAI-EVENT23",
-    "AAI-EVENT24",
-    "AAI-EVENT25",
-    "AAI-EVENT26",
-    "AAI-EVENT27",
-    "AAI-EVENT28",
-    "AAI-EVENT29",
-    "__consumer_offsets",
-    "msgrtr.apinode.metrics.dmaap",
-    "unauthenticated.DCAE_CL_OUTPUT",
-    "unauthenticated.SEC_FAULT_OUTPUT"
-  ];
-  topics: Topic[] = [];
-  temp: Topic[] = []; // cache for topics
-  topicDetail: Topic = new Topic();
-  closeResult: string;
-  dataFormats: Array<string> = ["JSON", "XML"];
-  idExFields: Array<any> = [];
-  idExNewField: any = {};
-
-  loadingIndicator: boolean = true;
-
-  constructor(
-    private restApiService: RestApiService,
-    private modalService: NgbModal
-  ) {
-    setTimeout(() => {
-      this.loadingIndicator = false;
-    }, 5000);
-  }
-
-  ngOnInit() {
-    // fake data
-    var topicCount: number = this.topicList.length;
-    console.log("topic length:" + topicCount);
-    for (var i = 0; i < topicCount; i++) {
-      if (i % 2 == 0) {
-        var feed = {
-          name: this.topicList[i],
-          login: "logintest" + i,
-          pass: "passtest" + i,
-          dbs: ["_DL_DEFAULT_", "couchbasedb", "druid", "mongodb"],
-          enable: true,
-          save_raw: true,
-          data_format: "XML",
-          ttl: 100 + i,
-          correlate_cleared_message: true,
-          message_id_path: "/event_id/id,/event_id/name",
-          type: ""
-        };
-      } else {
-        var feed = {
-          name: this.topicList[i],
-          login: "",
-          pass: "",
-          dbs: ["druid", "elasticsearch"],
-          enable: false,
-          save_raw: false,
-          data_format: "XML",
-          ttl: 100 + i,
-          correlate_cleared_message: false,
-          message_id_path: "/event_id/id,/event_id/name/event_id/ekko_name",
-          type: ""
-        };
-      }
-
-      if (feed.dbs.toString().search("_DL_DEFAULT")) {
-        feed.type = "Unconfigured";
-      } else {
-        feed.type = "Configured";
-      }
-      this.topics.push(feed);
-    }
-
-    // for cache of datatable
-    this.temp = this.topics;
-  }
-
-  updateDetail(name: string) {
-    // clean
-    this.topicDetail = null;
-    this.idExFields = [];
-
-    const index = this.topics.findIndex(topic => topic.name === name);
-
-    this.topicDetail = {
-      name: this.topics[index].name,
-      login: this.topics[index].login,
-      pass: this.topics[index].pass,
-      dbs: this.topics[index].dbs,
-      enable: this.topics[index].enable,
-      save_raw: this.topics[index].save_raw,
-      data_format: this.topics[index].data_format,
-      ttl: this.topics[index].ttl,
-      correlate_cleared_message: this.topics[index].correlate_cleared_message,
-      message_id_path: this.topics[index].message_id_path,
-      type: this.topics[index].type
-    };
-
-    var feed = this.topicDetail.message_id_path.split(",");
-    for (var i = 0; i < feed.length; i++) {
-      var data = { item: feed[i] };
-      this.idExFields.push(data);
-    }
-  }
-
-  addIdField() {
-    this.idExFields.push(this.idExNewField);
-    this.idExNewField = {};
-  }
-
-  deleteIdField(index: number) {
-    if (this.idExFields.length > 1) {
-      this.idExFields.splice(index, 1);
-    }
-  }
-
-  saveTopic() {
-    console.log("save topic");
-    console.log("name: " + this.topicDetail.name);
-    console.log("login: " + this.topicDetail.login);
-    console.log("pass: " + this.topicDetail.pass);
-    console.log("dbs: ");
-    console.log("enable: " + this.topicDetail.enable);
-    console.log("save_raw: " + this.topicDetail.save_raw);
-    console.log("data_format: " + this.topicDetail.data_format);
-    console.log("ttl: " + this.topicDetail.ttl);
-    console.log(
-      "correlate_cleared_message: " + this.topicDetail.correlate_cleared_message
-    );
-
-    this.topicDetail.message_id_path = "";
-    for (var i = 0; i < this.idExFields.length; i++) {
-      if (i == 0) {
-        this.topicDetail.message_id_path = this.idExFields[i].item;
-      } else {
-        this.topicDetail.message_id_path =
-          this.topicDetail.message_id_path + "," + this.idExFields[i].item;
-      }
-    }
-    console.log("message_id_path: ", this.topicDetail.message_id_path);
-  }
-
-  updateFilter(event) {
-    const val = event.target.value.toLowerCase();
-    console.log("filter val: " + val);
-    // filter data
-    const temp = this.temp.filter(function(d) {
-      return d.name.toLowerCase().indexOf(val) !== -1 || !val;
-    });
-
-    // update the rows
-    this.topics = temp;
-  }
-}
diff --git a/components/datalake-handler/admin/src/app/topics/topics.component.css b/components/datalake-handler/admin/src/app/topics/topics.component.css
deleted file mode 100644
index e69de29b..00000000
--- a/components/datalake-handler/admin/src/app/topics/topics.component.css
+++ /dev/null
diff --git a/components/datalake-handler/admin/src/app/topics/topics.component.html b/components/datalake-handler/admin/src/app/topics/topics.component.html
deleted file mode 100644
index ced38d3d..00000000
--- a/components/datalake-handler/admin/src/app/topics/topics.component.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<div class="row">
-  <div class="col-md-12 path">
-    Home > Topics
-  </div>
-
-  <!--
-  <div class="col-md-2">
-
-    <div class="row">
-      <div class="col-md-12 text-center">
-        Topics Category
-      </div>
-    </div>
-
-    <div class="row">
-      <div class="col-md-12">
-        <app-topic-cate></app-topic-cate>
-      </div>
-    </div>
-
-  </div>
-  -->
-
-  <div class="col-md-12">
-    <app-topic-list></app-topic-list>
-  </div>
-</div>
diff --git a/components/datalake-handler/admin/src/app/topics/topics.component.spec.ts b/components/datalake-handler/admin/src/app/topics/topics.component.spec.ts
deleted file mode 100644
index f38f85e6..00000000
--- a/components/datalake-handler/admin/src/app/topics/topics.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { TopicsComponent } from './topics.component';
-
-describe('TopicsComponent', () => {
-  let component: TopicsComponent;
-  let fixture: ComponentFixture<TopicsComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ TopicsComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(TopicsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/components/datalake-handler/admin/src/app/topics/topics.component.ts b/components/datalake-handler/admin/src/app/topics/topics.component.ts
deleted file mode 100644
index ef171437..00000000
--- a/components/datalake-handler/admin/src/app/topics/topics.component.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Component, OnInit } from "@angular/core";
-import { HeaderService } from "../core/services/header.service";
-
-@Component({
-  selector: "app-topics",
-  templateUrl: "./topics.component.html",
-  styleUrls: ["./topics.component.css"]
-})
-export class TopicsComponent implements OnInit {
-  constructor(private headerService: HeaderService) {}
-
-  ngOnInit() {
-    // Set page title
-    this.headerService.setTitle("SIDEBAR.TOPICS");
-  }
-}