Upload ui

Issue-ID: PORTAL-1084

Signed-off-by: Fiete Ostkamp <Fiete.Ostkamp@telekom.de>
Change-Id: Id0c94859a775094e67b0bb9c91ca5e776a08c068

20 files changed, 669 insertions, 0 deletions

diff --git a/src/app/components/shared/breadcrumb-item/breadcrumb-item.component.html b/src/app/components/shared/breadcrumb-item/breadcrumb-item.component.html
new file mode 100644
index 0000000..72d5c79
--- /dev/null
+++ b/src/app/components/shared/breadcrumb-item/breadcrumb-item.component.html
@@ -0,0 +1,22 @@
+<!--
+  ~ Copyright (c) 2022. Deutsche Telekom AG
+  ~
+  ~ 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.
+  ~
+  ~ SPDX-License-Identifier: Apache-2.0
+  -->
+
+
+<ng-template>
+  <ng-content></ng-content>
+</ng-template>
diff --git a/src/app/components/shared/breadcrumb-item/breadcrumb-item.component.ts b/src/app/components/shared/breadcrumb-item/breadcrumb-item.component.ts
new file mode 100644
index 0000000..5f74fff
--- /dev/null
+++ b/src/app/components/shared/breadcrumb-item/breadcrumb-item.component.ts
@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2022. Deutsche Telekom AG
+ *
+ * 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.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+
+import { Component, TemplateRef, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'app-breadcrumb-item',
+  templateUrl: './breadcrumb-item.component.html',
+})
+export class BreadcrumbItemComponent {
+  @ViewChild(TemplateRef, { static: true })
+  readonly template!: TemplateRef<any>;
+}
diff --git a/src/app/components/shared/breadcrumb/breadcrumb.component.html b/src/app/components/shared/breadcrumb/breadcrumb.component.html
new file mode 100644
index 0000000..e6cdba5
--- /dev/null
+++ b/src/app/components/shared/breadcrumb/breadcrumb.component.html
@@ -0,0 +1,26 @@
+<!--
+  ~ Copyright (c) 2022. Deutsche Telekom AG
+  ~
+  ~ 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.
+  ~
+  ~ SPDX-License-Identifier: Apache-2.0
+  -->
+
+
+<nav [attr.aria-label]="'layout.main.breadcrumb' | translate">
+  <ol class="breadcrumb">
+    <li *ngFor="let item of items; index as i" class="breadcrumb-item">
+      <ng-container *ngTemplateOutlet="item.template" accessKey='3'></ng-container>
+    </li>
+  </ol>
+</nav>
diff --git a/src/app/components/shared/breadcrumb/breadcrumb.component.ts b/src/app/components/shared/breadcrumb/breadcrumb.component.ts
new file mode 100644
index 0000000..864a9ff
--- /dev/null
+++ b/src/app/components/shared/breadcrumb/breadcrumb.component.ts
@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) 2022. Deutsche Telekom AG
+ *
+ * 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.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+
+import { Component, ContentChildren, QueryList } from '@angular/core';
+import { BreadcrumbItemComponent } from '../breadcrumb-item/breadcrumb-item.component';
+
+@Component({
+  selector: 'app-breadcrumb',
+  templateUrl: './breadcrumb.component.html',
+})
+export class BreadcrumbComponent {
+  @ContentChildren(BreadcrumbItemComponent)
+  readonly items!: QueryList<BreadcrumbItemComponent>;
+}
diff --git a/src/app/components/shared/confirmation-modal/confirmation-modal.component.html b/src/app/components/shared/confirmation-modal/confirmation-modal.component.html
new file mode 100644
index 0000000..4f26c5d
--- /dev/null
+++ b/src/app/components/shared/confirmation-modal/confirmation-modal.component.html
@@ -0,0 +1,35 @@
+<!--
+  ~ Copyright (c) 2022. Deutsche Telekom AG
+  ~
+  ~ 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.
+  ~
+  ~ SPDX-License-Identifier: Apache-2.0
+  -->
+
+
+<div class="modal-header qa_modal_header">
+  <h4 class="modal-title qa_modal_title" id="modal-title">
+    <strong>{{ title }}</strong>
+  </h4>
+</div>
+<div class="modal-body qa_modal_body">
+  <p>
+    {{ text }}
+  </p>
+</div>
+<div *ngIf='showOkBtn || showCancelBtn' class="modal-footer qa_modal_footer">
+  <button *ngIf='showCancelBtn' type="button" class="btn btn-default qa_cancel_button" (click)="activeModal.close(false)">
+    {{ cancelText }}
+  </button>
+  <button *ngIf='showOkBtn' type="button" class="btn btn-danger qa_apply_button" (click)="activeModal.close(true)">{{ okText }}</button>
+</div>
diff --git a/src/app/components/shared/confirmation-modal/confirmation-modal.component.spec.ts b/src/app/components/shared/confirmation-modal/confirmation-modal.component.spec.ts
new file mode 100644
index 0000000..b7b5110
--- /dev/null
+++ b/src/app/components/shared/confirmation-modal/confirmation-modal.component.spec.ts
@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) 2022. Deutsche Telekom AG
+ *
+ * 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.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+
diff --git a/src/app/components/shared/confirmation-modal/confirmation-modal.component.ts b/src/app/components/shared/confirmation-modal/confirmation-modal.component.ts
new file mode 100644
index 0000000..023ba5e
--- /dev/null
+++ b/src/app/components/shared/confirmation-modal/confirmation-modal.component.ts
@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) 2022. Deutsche Telekom AG
+ *
+ * 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.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+
+import { Component, Input } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'app-confirmation-modal',
+  templateUrl: './confirmation-modal.component.html'
+})
+export class ConfirmationModalComponent {
+  constructor(public activeModal: NgbActiveModal, private readonly translateService: TranslateService) {}
+
+  @Input() showOkBtn = true;
+  @Input() showCancelBtn = true;
+
+  @Input()
+  okText = this.translateService.instant('common.buttons.save');
+  cancelText = this.translateService.instant('common.buttons.cancel');
+  title = '';
+  text = '';
+}
diff --git a/src/app/components/shared/loading-spinner/loading-spinner.component.html b/src/app/components/shared/loading-spinner/loading-spinner.component.html
new file mode 100644
index 0000000..f9dd6ab
--- /dev/null
+++ b/src/app/components/shared/loading-spinner/loading-spinner.component.html
@@ -0,0 +1,21 @@
+<!--
+  ~ Copyright (c) 2022. Deutsche Telekom AG
+  ~
+  ~ 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.
+  ~
+  ~ SPDX-License-Identifier: Apache-2.0
+  -->
+
+<div class="spinner-border spinner-border-sm text-light qa_alarm_spinner" role="status">
+  <span class="sr-only">{{'common.loading' | translate}}</span>
+</div>
diff --git a/src/app/components/shared/loading-spinner/loading-spinner.component.ts b/src/app/components/shared/loading-spinner/loading-spinner.component.ts
new file mode 100644
index 0000000..c99a085
--- /dev/null
+++ b/src/app/components/shared/loading-spinner/loading-spinner.component.ts
@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2022. Deutsche Telekom AG
+ *
+ * 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.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-loading-spinner',
+  templateUrl: './loading-spinner.component.html',
+})
+export class LoadingSpinnerComponent  {
+}
diff --git a/src/app/components/shared/pagination/pagination.component.css b/src/app/components/shared/pagination/pagination.component.css
new file mode 100644
index 0000000..b864207
--- /dev/null
+++ b/src/app/components/shared/pagination/pagination.component.css
@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2022. Deutsche Telekom AG
+ *
+ * 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.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+
+ngb-pagination::ng-deep li .page-link:focus {
+  box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
+  border-color: #00a0de;
+}
diff --git a/src/app/components/shared/pagination/pagination.component.html b/src/app/components/shared/pagination/pagination.component.html
new file mode 100644
index 0000000..ad198fc
--- /dev/null
+++ b/src/app/components/shared/pagination/pagination.component.html
@@ -0,0 +1,48 @@
+<!--
+  ~ Copyright (c) 2022. Deutsche Telekom AG
+  ~
+  ~ 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.
+  ~
+  ~ SPDX-License-Identifier: Apache-2.0
+  -->
+
+
+<div class="d-flex flex-wrap justify-content-between mt-3">
+  <div>
+    <ngb-pagination
+      [collectionSize]="collectionSize"
+      [pageSize]="pageSize"
+      [page]="page"
+      (pageChange)="emitPageChange($event)"
+    ></ngb-pagination>
+    <span class="ml-2 small">
+      {{ 'common.pagination.totalCount' | translate: { value: collectionSize } }}
+    </span>
+  </div>
+  <div>
+    <label for="item-select" class="sr-only">
+      {{ 'common.select.description' | translate }}
+    </label>
+    <select
+      id="item-select"
+      class="custom-select"
+      style="width: auto"
+      [ngModel]="pageSize"
+      (ngModelChange)="emitModelChange($event)"
+    >
+      <option *ngFor="let n of itemsPerPage" [ngValue]="n">
+        {{ 'common.select.itemsPerPage' | translate: { value: n } }}
+      </option>
+    </select>
+  </div>
+</div>
diff --git a/src/app/components/shared/pagination/pagination.component.spec.ts b/src/app/components/shared/pagination/pagination.component.spec.ts
new file mode 100644
index 0000000..7ffe9fc
--- /dev/null
+++ b/src/app/components/shared/pagination/pagination.component.spec.ts
@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) 2022. Deutsche Telekom AG
+ *
+ * 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.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PaginationComponent } from './pagination.component';
+
+describe('PaginationComponent', () => {
+  let component: PaginationComponent;
+  let fixture: ComponentFixture<PaginationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [PaginationComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PaginationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/shared/pagination/pagination.component.ts b/src/app/components/shared/pagination/pagination.component.ts
new file mode 100644
index 0000000..fee827d
--- /dev/null
+++ b/src/app/components/shared/pagination/pagination.component.ts
@@ -0,0 +1,88 @@
+/*
+ * Copyright (c) 2022. Deutsche Telekom AG
+ *
+ * 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.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { NgbPaginationConfig } from '@ng-bootstrap/ng-bootstrap';
+
+/**
+ * This is a wrapper component for the `ngbPagination` component of ngBootstrap ([official wiki page](https://ng-bootstrap.github.io/#/components/pagination/overview)).
+ * This contains the pagination element, as well as the selection element for the page size.
+ *
+ *
+ * Deal with both using the `pageChange` and `pageSizeChange` events, i.e in your template:
+ * ``` html
+ * <app-pagination
+ *    [collectionSize]="..."
+      [pageSize]="..."
+      [page]="..."
+ *    (pageChange)="changePage($event)"
+ *    (pageSizeChange)="changePageSize($event)"
+ * >
+ * </app-pagination>
+ * ```
+ */
+@Component({
+  selector: 'app-pagination',
+  templateUrl: './pagination.component.html',
+  styleUrls: ['./pagination.component.css'],
+  providers: [NgbPaginationConfig],
+})
+export class PaginationComponent {
+  /**
+   * This event is fired when an item in the `select`-element is changed
+   */
+  @Output() pageSizeChange: EventEmitter<number> = new EventEmitter<number>();
+
+  /**
+   * Specify what page sizes should be selectable by the user.
+   */
+  @Input() itemsPerPage = [10, 20, 50];
+
+  @Output() pageChange: EventEmitter<number> = new EventEmitter<number>();
+  @Input() collectionSize = 10;
+  @Input() pageSize = 10;
+  @Input() page = 1;
+
+  constructor(config: NgbPaginationConfig) {
+    config.boundaryLinks = true;
+    config.directionLinks = true;
+    config.disabled = false;
+    config.ellipses = false;
+    config.maxSize = 3;
+    config.pageSize = 10;
+    config.rotate = true;
+    config.size = 'sm';
+  }
+
+  /**
+   * Emit the currently selected page from the `ngb-Pagination`
+   * @param page the page that is selected
+   */
+  emitPageChange(page: number) {
+    this.pageChange.emit(page);
+  }
+
+  /**
+   * Emit the currently selected page size from the `select`
+   * @param size the number of items per page that is selected
+   */
+  emitModelChange(size: number) {
+    this.pageSizeChange.emit(size);
+  }
+}
diff --git a/src/app/components/shared/status-page/status-page.component.css b/src/app/components/shared/status-page/status-page.component.css
new file mode 100644
index 0000000..b7b5110
--- /dev/null
+++ b/src/app/components/shared/status-page/status-page.component.css
@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) 2022. Deutsche Telekom AG
+ *
+ * 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.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+
diff --git a/src/app/components/shared/status-page/status-page.component.html b/src/app/components/shared/status-page/status-page.component.html
new file mode 100644
index 0000000..28e65c6
--- /dev/null
+++ b/src/app/components/shared/status-page/status-page.component.html
@@ -0,0 +1,23 @@
+<!--
+  ~ Copyright (c) 2022. Deutsche Telekom AG
+  ~
+  ~ 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.
+  ~
+  ~ SPDX-License-Identifier: Apache-2.0
+  -->
+
+
+<div class="d-flex justify-content-center align-items-center flex-column h-100">
+  <h2 class="text-center">{{header}}</h2>
+  <h3>{{message}}</h3>
+</div>
diff --git a/src/app/components/shared/status-page/status-page.component.spec.ts b/src/app/components/shared/status-page/status-page.component.spec.ts
new file mode 100644
index 0000000..f8c547e
--- /dev/null
+++ b/src/app/components/shared/status-page/status-page.component.spec.ts
@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2022. Deutsche Telekom AG
+ *
+ * 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.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StatusPageComponent } from './status-page.component';
+
+describe('StatusPageComponent', () => {
+  let component: StatusPageComponent;
+  let fixture: ComponentFixture<StatusPageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ StatusPageComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StatusPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/shared/status-page/status-page.component.ts b/src/app/components/shared/status-page/status-page.component.ts
new file mode 100644
index 0000000..3cbbf46
--- /dev/null
+++ b/src/app/components/shared/status-page/status-page.component.ts
@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2022. Deutsche Telekom AG
+ *
+ * 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.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-status-page',
+  templateUrl: './status-page.component.html',
+  styleUrls: ['./status-page.component.css'],
+})
+export class StatusPageComponent {
+  header: string;
+  message: string;
+
+  constructor(private router: Router) {
+    const data = this.router.getCurrentNavigation();
+    this.header = data?.extras?.state?.header;
+    this.message = data?.extras?.state?.message;
+  }
+}
diff --git a/src/app/components/shared/table-skeleton/table-skeleton.component.css b/src/app/components/shared/table-skeleton/table-skeleton.component.css
new file mode 100644
index 0000000..0870694
--- /dev/null
+++ b/src/app/components/shared/table-skeleton/table-skeleton.component.css
@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2022. Deutsche Telekom AG
+ *
+ * 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.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+
+@keyframes ghost {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: 100vw 0;
+  }
+}
+
+.line {
+  width: 100%;
+  height: 50px;
+  margin-top: 10px;
+  border-radius: 3px;
+  background: linear-gradient(90deg, #f0f0f0, #d8d6d6, #f0f0f0) 0 0/ 80vh 100% fixed;
+  background-color: var(--secondary);
+  animation: ghost 4000ms infinite linear;
+}
diff --git a/src/app/components/shared/table-skeleton/table-skeleton.component.html b/src/app/components/shared/table-skeleton/table-skeleton.component.html
new file mode 100644
index 0000000..717da1f
--- /dev/null
+++ b/src/app/components/shared/table-skeleton/table-skeleton.component.html
@@ -0,0 +1,31 @@
+<!--
+  ~ Copyright (c) 2022. Deutsche Telekom AG
+  ~
+  ~ 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.
+  ~
+  ~ SPDX-License-Identifier: Apache-2.0
+  -->
+
+
+<div id="table-skeleton">
+  <div class="line"></div>
+  <div class="line"></div>
+  <div class="line"></div>
+  <div class="line"></div>
+  <div class="line"></div>
+  <div class="line"></div>
+  <div class="line"></div>
+  <div class="line"></div>
+  <div class="line"></div>
+  <div class="line"></div>
+</div>
diff --git a/src/app/components/shared/table-skeleton/table-skeleton.component.ts b/src/app/components/shared/table-skeleton/table-skeleton.component.ts
new file mode 100644
index 0000000..41638fe
--- /dev/null
+++ b/src/app/components/shared/table-skeleton/table-skeleton.component.ts
@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2022. Deutsche Telekom AG
+ *
+ * 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.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-table-skeleton',
+  templateUrl: './table-skeleton.component.html',
+  styleUrls: ['./table-skeleton.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TableSkeletonComponent {
+}