4 files changed, 64 insertions, 0 deletions
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/tree-node-header-properties/tree-node-header-properties.component.html b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/tree-node-header-properties/tree-node-header-properties.component.html
new file mode 100644
index 000000000..dae6762e0
--- /dev/null
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/tree-node-header-properties/tree-node-header-properties.component.html
@@ -0,0 +1,5 @@
+<div class="status-properties" *ngFor="let prop of properties">
+  <span class="status-property-name" [ngClass]="{'mark': prop.key=='In-maintenance'}">{{ prop.key }}</span>
+  <span class="status-property-value" [attr.data-tests-id]="'status-property-'+prop?.testId" >{{ prop.value }}</span>
+  <span class="separator">|</span>
+</div>
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/tree-node-header-properties/tree-node-header-properties.component.scss b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/tree-node-header-properties/tree-node-header-properties.component.scss
new file mode 100644
index 000000000..305de8cd7
--- /dev/null
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/tree-node-header-properties/tree-node-header-properties.component.scss
@@ -0,0 +1,24 @@
+.status-properties{
+  display: inline-block;
+  font-family: OpenSans-Regular;
+  font-size: 12px;
+  padding-top: 3px;
+  .status-property-name{
+    color: #5A5A5A;
+    &.mark{
+      background-color: #959595;
+      color: #ffffff;
+    }
+  }
+  .status-property-value{
+    color: #191919;
+  }
+  .separator{
+    padding: 0 8px;
+  }
+  &:last-child .separator{
+    display: none;
+  }
+
+}
+
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/tree-node-header-properties/tree-node-header-properties.component.spec.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/tree-node-header-properties/tree-node-header-properties.component.spec.ts
new file mode 100644
index 000000000..047f2e89d
--- /dev/null
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/tree-node-header-properties/tree-node-header-properties.component.spec.ts
@@ -0,0 +1,25 @@
+import {ComponentFixture, TestBed } from '@angular/core/testing';
+import { TreeNodeHeaderPropertiesComponent } from './tree-node-header-properties.component';
+
+describe('TreeNodeHeaderPropertiesComponent', () => {
+  let component: TreeNodeHeaderPropertiesComponent;
+  let fixture: ComponentFixture<TreeNodeHeaderPropertiesComponent>;
+
+
+  beforeAll(done => (async () => {
+    TestBed.configureTestingModule({
+      declarations: [ TreeNodeHeaderPropertiesComponent ]
+    });
+    await TestBed.compileComponents();
+
+    fixture = TestBed.createComponent(TreeNodeHeaderPropertiesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+
+  })().then(done).catch(done.fail));
+
+
+  test('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/tree-node-header-properties/tree-node-header-properties.component.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/tree-node-header-properties/tree-node-header-properties.component.ts
new file mode 100644
index 000000000..535d7ea52
--- /dev/null
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/tree-node-header-properties/tree-node-header-properties.component.ts
@@ -0,0 +1,10 @@
+import {Component, Input} from '@angular/core';
+
+@Component({
+  selector: 'tree-node-header-properties',
+  templateUrl: './tree-node-header-properties.component.html',
+  styleUrls: ['./tree-node-header-properties.component.scss']
+})
+export class TreeNodeHeaderPropertiesComponent {
+  @Input() properties : object[] = [];
+}