1 files changed, 223 insertions, 0 deletions
diff --git a/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-detail-modal/topic-detail-modal.component.html b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-detail-modal/topic-detail-modal.component.html
new file mode 100644
index 00000000..fa07903b
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/views/topics/topic-list/topic-detail-modal/topic-detail-modal.component.html
@@ -0,0 +1,223 @@
+<!--
+============LICENSE_START=======================================================
+ONAP : DataLake
+================================================================================
+Copyright 2019 QCT
+=================================================================================
+Licensed 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.
+============LICENSE_END=========================================================
+-->
+
+<div class="p-1">
+  <div class="modal-header pb-0 border-0 border-bottom">
+
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-md-12">
+          <label class="dl-h3">{{ topic.name }}</label>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col-md-12">
+          <hr>
+        </div>
+
+        <div *ngIf="!topic.type" class="col-md-12">
+          <div class="dl-notice">
+            {{ "TOPIC_DEFAULT_CONF_NOTICE" | translate}}
+          </div>
+        </div>
+
+      </div>
+    </div>
+
+
+  </div>
+  <div class="modal-body border-0">
+    <div class="container-fluid">
+      <div class="form-group">
+        <div class="row">
+          <div class="col-md-4"><label class="dl-emphasis1">{{ 'STATUS' | translate }}</label></div>
+
+          <div class="col-md-8">
+            <label class="dl-switch">
+              <input #t_enable id="switch" type="checkbox" [(ngModel)]="tempEnabled" />
+              <span class="dl-slider round"></span>
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <div class="row">
+          <div class="col-md-4">
+            <label class="dl-emphasis1" for="inputUserName">{{ 'AUTHENTICATION' | translate }}</label>
+          </div>
+          <div class="col-md-4">
+            <input #t_login [value]="topic.login" class="form-control dl-input-text" id="inputUserName" type="text"
+              placeholder="Username" />
+          </div>
+          <div class="col-md-4">
+            <input #t_password [value]="topic.password" class="form-control dl-input-text" id="inputPass"
+              type="password" placeholder="Password" />
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <div class="row">
+          <div class="col-md-4">
+            <label class="dl-emphasis1">{{ 'SINK' | translate }}</label>
+          </div>
+          <div class="col-md-8">
+            <div class="row d-flex flex-wrap">
+              <div *ngFor="let db of dbs" class="col-md-6 pb-1">
+                <div class="input-group">
+                  <div class="input-group-prepend">
+                    <label class="input-group-text dl-input-chk-label">
+                      <input id="chk_{{ db }}" type="checkbox" [checked]="this.topic.sinkdbs.includes(db)"
+                        (change)="this.updateSelectedDB($event, db)" />
+                      <span class="dl-input-checkmark"></span>
+                    </label>
+                  </div>
+                  <label class="form-control dl-input-chk" for="chk_{{ db }}">
+                    {{ db }}
+                  </label>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <div class="row">
+          <div class="col-md-4">
+            <label class="dl-emphasis1">{{ 'DATA_FORMAT' | translate }}</label>
+          </div>
+          <div class="col-md-4">
+            <select #t_dataFormat class="custom-select dl-input-text" id="selDataFormat">
+              <option *ngFor="let item of dataFormats" [selected]="item == topic.dataFormat">
+                {{ item }}</option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <div class="row">
+          <div class="col-md-4">
+            <label class="dl-emphasis1">{{ 'TTL' | translate }} (days)</label>
+          </div>
+          <div class="col-md-4">
+            <input #t_ttl [value]="topic.ttl" class="form-control dl-input-text" id="inputTtl" type="text"
+              placeholder="3650" (input)="this.adminService.onKeyPressNumber($event)" />
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <div class="row">
+          <div class="col-md-4">
+            <label class="dl-emphasis1">{{ 'SAVE_RAW_DATA' | translate }}</label>
+          </div>
+          <div class="col-md-4">
+            <div class="input-group">
+              <div class="input-group-prepend">
+                <label class="input-group-text dl-input-chk-label">
+                  <input #t_saveRaw id="chkSaveRaw" [(ngModel)]="tempSaveRaw" type="checkbox" />
+                  <span class="dl-input-checkmark"></span>
+                </label>
+              </div>
+              <label class="form-control dl-input-chk" for="chkSaveRaw">
+                Save
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <div class="row">
+          <div class="col-md-4">
+            <label class="dl-emphasis1">{{ 'CORRELATE_CLEARED_MESSAGE' | translate }}</label>
+          </div>
+          <div class="col-md-4">
+            <div class="input-group">
+              <div class="input-group-prepend">
+                <label class="input-group-text dl-input-chk-label">
+                  <input #t_msg id="chkMsg" [(ngModel)]="tempMsg" type="checkbox" />
+                  <span class="dl-input-checkmark"></span>
+                </label>
+              </div>
+              <label class="form-control dl-input-chk" for="chkMsg">
+                Correlate
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <div class="row">
+          <div class="col-md-4">
+            <label class="dl-emphasis1">{{ 'ID_EXTRACTION' | translate }}</label>
+          </div>
+          <div class="col-md-8">
+            <div class="d-flex row align-items-center" *ngFor="let field of idExFields; let i = index">
+              <div class="col-md-8 order-1">
+                <input [(ngModel)]="field.item" class="form-control dl-input-text" placeholder="/event-header/id"
+                  type="text" [value]="field.item" />
+              </div>
+              <div class="order-2">
+                <button type="button" class="btn dl-icon-enable p-2" (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 dl-icon-enable p-2" (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 border-0 pt-0 pb-2">
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-md-6 p-0"></div>
+        <div class="col-md-3 p-1">
+          <span>
+            <button type="button" class="btn dl-btn-dark btn-block" (click)="passBack()">
+              Save
+            </button>
+          </span>
+        </div>
+        <div class="col-md-3 p-1">
+          <span>
+            <button type="button" class="btn dl-btn-light btn-block" (click)="activeModal.close('Close click')">
+              Cancel
+            </button>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</div>