ui/src/app/dashboard/components/overview/dashboard-overview.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.
  ~
  -->

<sp-asset-browser
    filteredAssetLinkType="dashboard"
    allResourcesAlias="Dashboards"
    [resourceCount]="dashboards.length"
    (filterIdsEmitter)="applyDashboardFilters($event)"
>
    <sp-basic-view [showBackLink]="false" [padding]="true">
        <div
            nav
            fxFlex="100"
            fxLayoutAlign="start center"
            fxLayout="row"
            class="pl-10"
        >
            <button
                mat-button
                mat-raised-button
                color="accent"
                data-cy="new-dashboard-btn"
                (click)="openNewDashboardDialog()"
                *ngIf="hasDashboardWritePrivileges"
            >
                <i class="material-icons">add</i>
                <span>New Dashboard</span>
            </button>
        </div>

        <div fxLayout="column">
            <div class="warning" fxLayout="row" fxLayoutAlign="start center">
                <i class="material-icons warning-icon">warning</i>
                <span
                    >Warning: The Live Dashboard will be removed in future
                    versions. The live refresh feature has been integrated into
                    the Data Explorer. Please migrate your current dashboards to
                    the Data Explorer!</span
                >
            </div>
        </div>
        <div fxFlex="100" fxLayout="column">
            <sp-basic-header-title-component
                title="Dashboards"
            ></sp-basic-header-title-component>
            <div fxFlex="100" fxLayout="row" fxLayoutAlign="center start">
                <sp-table
                    fxFlex="90"
                    [columns]="displayedColumns"
                    [dataSource]="dataSource"
                    matSort
                >
                    <ng-container matColumnDef="name">
                        <th
                            fxFlex="60"
                            fxLayoutAlign="start center"
                            mat-header-cell
                            *matHeaderCellDef
                        >
                            Dashboard
                        </th>
                        <td
                            fxFlex="60"
                            fxLayoutAlign="center start"
                            fxLayout="column"
                            mat-cell
                            *matCellDef="let element"
                        >
                            <div>
                                <b>{{ element.name }}</b>
                            </div>
                            <div>
                                <small> {{ element.description }}</small>
                            </div>
                        </td>
                    </ng-container>

                    <ng-container matColumnDef="actions">
                        <th
                            fxFlex="40"
                            fxLayoutAlign="center center"
                            mat-header-cell
                            *matHeaderCellDef
                        ></th>
                        <td
                            fxFlex="40"
                            fxLayoutAlign="start center"
                            mat-cell
                            *matCellDef="let element"
                        >
                            <div
                                fxLayout="row"
                                fxFlex="100"
                                fxLayoutAlign="end center"
                            >
                                <button
                                    mat-icon-button
                                    matTooltip="Open dashboard"
                                    color="accent"
                                    (click)="showDashboard(element)"
                                    [attr.data-cy]="
                                        'show-dashboard-' + element.name
                                    "
                                >
                                    <i class="material-icons">visibility</i>
                                </button>
                                <button
                                    mat-icon-button
                                    matTooltip="Open dashboard in new window"
                                    color="accent"
                                    (click)="openExternalDashboard(element)"
                                >
                                    <i class="material-icons">open_in_new</i>
                                </button>
                                <button
                                    mat-icon-button
                                    matTooltip="Edit dashboard settings"
                                    color="accent"
                                    *ngIf="hasDashboardWritePrivileges"
                                    (click)="openEditDashboardDialog(element)"
                                    data-cy="change-dashboard-settings-button"
                                >
                                    <i class="material-icons">settings</i>
                                </button>
                                <button
                                    mat-icon-button
                                    matTooltip="Edit dashboard"
                                    color="accent"
                                    (click)="editDashboard(element)"
                                    *ngIf="hasDashboardWritePrivileges"
                                    [attr.data-cy]="
                                        'edit-dashboard-' + element.name
                                    "
                                >
                                    <i class="material-icons">edit</i>
                                </button>
                                <button
                                    mat-icon-button
                                    matTooltip="Manage permissions"
                                    color="accent"
                                    *ngIf="isAdmin"
                                    (click)="showPermissionsDialog(element)"
                                >
                                    <i class="material-icons">share</i>
                                </button>
                                <button
                                    mat-icon-button
                                    matTooltip="Delete dashboard"
                                    color="accent"
                                    *ngIf="hasDashboardWritePrivileges"
                                    (click)="openDeleteDashboardDialog(element)"
                                >
                                    <i class="material-icons">delete</i>
                                </button>
                            </div>
                        </td>
                    </ng-container>
                </sp-table>
            </div>
        </div>
    </sp-basic-view>
</sp-asset-browser>