ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.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 class="h-100">
    <div
        class="box"
        [ngStyle]="{
            background: configuredWidget.baseAppearanceConfig.backgroundColor,
            color: configuredWidget.baseAppearanceConfig.textColor,
            height: gridsterItemComponent.height - 13 + 'px',
            border:
                '2px solid ' +
                configuredWidget.baseAppearanceConfig.backgroundColor
        }"
        [attr.data-cy]="
            'widget-' + configuredWidget.baseAppearanceConfig.widgetTitle
        "
    >
        <div class="widget-header h-40" *ngIf="!previewMode">
            <div
                fxFlex="100"
                fxLayout="row"
                fxLayoutAlign="start center"
                class="widget-header-text"
            >
                {{ configuredWidget.baseAppearanceConfig.widgetTitle }}
            </div>
            <div fxFlex="100" fxLayout="row" fxLayoutAlign="end center">
                <mat-spinner
                    [diameter]="20"
                    color="primary"
                    class="mr-10"
                    *ngIf="timerActive"
                >
                </mat-spinner>
                <div
                    class="time-counter"
                    *ngIf="editMode"
                    [ngStyle]="{
                        background:
                            configuredWidget.baseAppearanceConfig.textColor,
                        color: configuredWidget.baseAppearanceConfig
                            .backgroundColor
                    }"
                >
                    {{ loadingTime }}s
                </div>
                <button
                    mat-icon-button
                    [matMenuTriggerFor]="menu"
                    aria-label="More options"
                    matTooltip="More options"
                    *ngIf="!editMode && !dataViewMode"
                    [attr.data-cy]="
                        'more-options-' +
                        configuredWidget.baseAppearanceConfig.widgetTitle.replaceAll(
                            ' ',
                            ''
                        )
                    "
                >
                    <mat-icon>more_vert</mat-icon>
                </button>
                <mat-menu #menu="matMenu">
                    <button mat-menu-item (click)="downloadDataAsFile()">
                        <mat-icon>get_app</mat-icon>
                        <span>Download data</span>
                    </button>
                    <button
                        mat-menu-item
                        (click)="startEditMode()"
                        *ngIf="hasDataExplorerWritePrivileges"
                        [attr.data-cy]="
                            'start-edit-' +
                            configuredWidget.baseAppearanceConfig.widgetTitle.replaceAll(
                                ' ',
                                ''
                            )
                        "
                    >
                        <mat-icon>edit</mat-icon>
                        <span>Edit Widget</span>
                    </button>
                </mat-menu>
                <button
                    mat-icon-button
                    *ngIf="editMode"
                    (click)="downloadDataAsFile()"
                    [attr.data-cy]="
                        'download-' +
                        configuredWidget.baseAppearanceConfig.widgetTitle.replaceAll(
                            ' ',
                            ''
                        )
                    "
                >
                    <mat-icon>get_app</mat-icon>
                </button>
                <button
                    mat-icon-button
                    (click)="removeWidget()"
                    matTooltip="Delete widget"
                    *ngIf="editMode && hasDataExplorerWritePrivileges"
                    [attr.data-cy]="
                        'remove-' +
                        configuredWidget.baseAppearanceConfig.widgetTitle
                    "
                >
                    <mat-icon>clear</mat-icon>
                </button>
            </div>
        </div>
        <div
            fxLayout="column"
            class="widget-content p-0 gridster-item-content ml-0 mr-0 h-100 mw-100"
        >
            <ng-template spWidgetHost class="h-100 p-0"></ng-template>
            <div
                fxFlex="100"
                fxLayout="column"
                fxLayoutAlign="center center"
                *ngIf="errorMessage"
            >
                <sp-exception-message
                    [message]="errorMessage"
                    [showDetails]="true"
                ></sp-exception-message>
            </div>
        </div>
    </div>
</div>