mirror of https://github.com/Squidex/squidex.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
149 lines
6.5 KiB
149 lines
6.5 KiB
<sqx-title message="Dashboard"></sqx-title>
|
|
|
|
<ng-container *ngIf="appsState.selectedApp | async; let app">
|
|
<div class="dashboard" @fade>
|
|
<div class="dashboard-inner">
|
|
<div>
|
|
<h1 class="dashboard-title">Hi {{authState.user?.displayName}}</h1>
|
|
|
|
<div class="subtext">
|
|
Welcome to <strong>{{app.displayName}}</strong> dashboard.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="clearfix">
|
|
<a class="card card-href" [routerLink]="['schemas', { showDialog: true }]" *ngIf="app.canCreateSchema">
|
|
<div class="card-body">
|
|
<div class="card-image">
|
|
<img src="./images/dashboard-schema.png" />
|
|
</div>
|
|
|
|
<h4 class="card-title">New Schema</h4>
|
|
|
|
<div class="card-text">
|
|
A schema defines the structure of your content element.
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="card card-href" href="/api/docs" sqxExternalLink="noicon">
|
|
<div class="card-body">
|
|
<div class="card-image">
|
|
<img src="./images/dashboard-api.png" />
|
|
</div>
|
|
|
|
<h4 class="card-title">API Documentation <i class="icon-external-link"></i></h4>
|
|
|
|
<div class="card-text">
|
|
Swagger compatible documentation for app management.
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="card card-href" href="https://support.squidex.io" sqxExternalLink="noicon">
|
|
<div class="card-body">
|
|
<div class="card-image">
|
|
<img src="./images/dashboard-feedback.png" />
|
|
</div>
|
|
|
|
<h4 class="card-title">Feedback & Support <i class="icon-external-link"></i></h4>
|
|
|
|
<div class="card-text">
|
|
Provide feedback and request features to help us to improve Squidex.
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="card card-href" href="https://github.com/squidex/squidex" sqxExternalLink="noicon">
|
|
<div class="card-body">
|
|
<div class="card-image">
|
|
<img src="./images/dashboard-github.png" />
|
|
</div>
|
|
|
|
<h4 class="card-title">Github <i class="icon-external-link"></i></h4>
|
|
|
|
<div class="card-text">
|
|
Get the source code from Github and report bugs or ask for support.
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<div class="card card-lg">
|
|
<div class="card-header">
|
|
API Calls
|
|
|
|
<div class="float-right">
|
|
<a class="force" (click)="downloadLog()">
|
|
<small>Download Log</small>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<chart type="bar" [data]="chartCallsCount" [options]="stackedChartOptions"></chart>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card card-lg">
|
|
<div class="card-header">
|
|
API Performance (ms)
|
|
|
|
<div class="float-right">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="stacked" [(ngModel)]="isPerformanceStacked" />
|
|
<label class="form-check-label" for="stacked">
|
|
Stacked
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<chart type="bar" [data]="chartCallsPerformance" [options]="isPerformanceStacked ? stackedChartOptions : chartOptions"></chart>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card card">
|
|
<div class="card-header">API Calls</div>
|
|
<div class="card-body">
|
|
<div class="aggregation" *ngIf="callsCurrent >= 0">
|
|
<div class="aggregation-label">This month</div>
|
|
<div class="aggregation-value">{{callsCurrent | sqxKNumber}}</div>
|
|
<div class="aggregation-label" *ngIf="callsMax > 0">Monthly limit: {{callsMax | sqxKNumber}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card card-lg">
|
|
<div class="card-header">Assets Uploads</div>
|
|
<div class="card-body">
|
|
<chart type="line" [data]="chartStorageCount" [options]="chartOptions"></chart>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card card">
|
|
<div class="card-header">Assets Size (MB)</div>
|
|
<div class="card-body">
|
|
<div class="aggregation" *ngIf="assetsCurrent >= 0">
|
|
<div class="aggregation-label">Total Size</div>
|
|
<div class="aggregation-value">{{assetsCurrent | sqxFileSize}}</div>
|
|
<div class="aggregation-label" *ngIf="assetsMax > 0">Total limit: {{assetsMax | sqxFileSize}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card card-lg">
|
|
<div class="card-header">Assets Uploads (MB)</div>
|
|
<div class="card-body">
|
|
<chart type="line" [data]="chartStorageSize" [options]="chartOptions"></chart>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card card-lg">
|
|
<div class="card-header">History</div>
|
|
<div class="card-body card-history card-body-scroll">
|
|
<sqx-history-list [events]="history"></sqx-history-list>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ng-container>
|