ui/src/app/notifications/notifications.component.html

<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You 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.
  ~
  -->

<div fxLayout="column" class="page-container page-container-max-height">
    <div fxLayout="row" style="padding: 0px" class="sp-tab-bg">
        <div fxFlex="100" class="page-container-nav">
            <div fxFlex="100" fxLayout="row">
                <div fxFlex fxLayoutAlign="start center">
                    <mat-tab-group color="accent">
                        <mat-tab label="My Notifications"></mat-tab>
                    </mat-tab-group>
                </div>
                <div fxFlex fxLayoutAlign="end center" class="mr-20"></div>
            </div>
        </div>
    </div>
    <div
        class="container-fluid marketplace-container"
        *ngIf="notificationsLoading"
        fxFlex="100"
        fxLayoutAlign="center center"
        fxLayout="column"
    >
        <mat-spinner [mode]="'indeterminate'" [diameter]="20"></mat-spinner>
        <h4>Loading notifications...</h4>
    </div>
    <div
        class="fixed-height page-container-padding-inner"
        *ngIf="!notificationsLoading && !pipelinesWithNotificationsPresent"
        fxFlex="100"
        fxLayoutAlign="center center"
        fxLayout="row"
    >
        <h4>
            No notifications available. Create a new pipeline using the
            Notification Sink to create your first notification!
        </h4>
    </div>
    <div
        class="fixed-height page-container-padding-inner"
        fxLayout="row"
        fxFlex="100"
        *ngIf="!notificationsLoading && pipelinesWithNotificationsPresent"
    >
        <div fxFlex="30" class="notifications-overview scrolling-auto">
            <mat-list>
                <mat-list-item
                    *ngFor="let existingNotification of existingNotifications"
                    (click)="selectNotification(existingNotification)"
                    class="list-item"
                    [ngClass]="{
                        'selected-notification':
                            existingNotification.notificationId ===
                            currentlySelectedNotificationId
                    }"
                >
                    <div
                        matListItemAvatar
                        class="notification-avatar sp-primary-bg"
                        style="background: var(--color-primary)"
                    >
                        {{
                            elementIconText.getElementIconText(
                                existingNotification.pipelineName
                            )
                        }}
                    </div>
                    <h4 matListItemTitle>
                        {{ existingNotification.pipelineName }}
                    </h4>
                    <p matListItemLine>
                        {{ existingNotification.notificationTitle }}
                    </p>
                    <div class="new-notification-info-panel">
                        <div
                            class="new-notification-info"
                            *ngIf="
                                currentlySelectedNotificationId !==
                                    existingNotification.notificationId &&
                                newNotificationInfo[
                                    existingNotification.notificationId
                                ]
                            "
                        ></div>
                    </div>
                </mat-list-item>
            </mat-list>
        </div>
        <div fxFlex="70" class="notifications-details">
            <div class="notification-details-wrapper">
                <div
                    class="notification-header"
                    fxLayout="column"
                    fxLayoutAlign="center start"
                >
                    <div class="notification-header-pipeline-name">
                        {{ currentlySelectedNotification.pipelineName }}
                    </div>
                    <div class="notification-header-notification-name">
                        {{ currentlySelectedNotification.notificationTitle }}
                    </div>
                    <hr class="header-divider" />
                </div>
                <div
                    #notificationPane
                    class="notification-pane"
                    (scroll)="onScroll()"
                    *ngIf="currentlySelectedNotificationId"
                >
                    <sp-notification-item
                        [notification]="notification"
                        *ngFor="
                            let notification of allNotifications.get(
                                currentlySelectedNotificationId
                            )
                        "
                    ></sp-notification-item>
                </div>
            </div>
        </div>
    </div>
</div>