Igor Kulikov
4 years ago
15 changed files with 607 additions and 49 deletions
@ -0,0 +1,66 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2023 The Thingsboard Authors |
||||
|
|
||||
|
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. |
||||
|
|
||||
|
--> |
||||
|
<div class="tb-card-content" fxLayout="column" fxLayoutGap="8px"> |
||||
|
<div class="tb-title">Configured features |
||||
|
<mat-icon |
||||
|
matTooltip="Status of features that require configuration" |
||||
|
matTooltipPosition="above" |
||||
|
class="tb-info-icon">info</mat-icon> |
||||
|
</div> |
||||
|
<div fxLayout="column" fxFlex fxLayoutGap="12px"> |
||||
|
<div fxLayout="row" fxFlex fxLayoutGap="12px"> |
||||
|
<a class="tb-feature-button" fxFlex |
||||
|
[matTooltip]="featureTooltip(featuresInfo?.emailEnabled)" |
||||
|
matTooltipPosition="above" |
||||
|
[ngClass]="{'configured': featuresInfo?.emailEnabled}" |
||||
|
routerLink="/settings/outgoing-mail"> |
||||
|
<div class="tb-feature-text">Email</div> |
||||
|
</a> |
||||
|
<a class="tb-feature-button" fxFlex |
||||
|
[matTooltip]="featureTooltip(featuresInfo?.smsEnabled)" |
||||
|
matTooltipPosition="above" |
||||
|
[ngClass]="{'configured': featuresInfo?.smsEnabled}" |
||||
|
routerLink="/settings/notifications"> |
||||
|
<div class="tb-feature-text">SMS</div> |
||||
|
</a> |
||||
|
</div> |
||||
|
<div fxLayout="row" fxFlex fxLayoutGap="12px"> |
||||
|
<a class="tb-feature-button" fxFlex |
||||
|
[matTooltip]="featureTooltip(featuresInfo?.notificationEnabled)" |
||||
|
matTooltipPosition="above" |
||||
|
[ngClass]="{'configured': featuresInfo?.notificationEnabled}" |
||||
|
routerLink="/settings/notifications"> |
||||
|
<div class="tb-feature-text">Slack</div> |
||||
|
</a> |
||||
|
<a class="tb-feature-button" fxFlex |
||||
|
[matTooltip]="featureTooltip(featuresInfo?.oauthEnabled)" |
||||
|
matTooltipPosition="above" |
||||
|
[ngClass]="{'configured': featuresInfo?.oauthEnabled}" |
||||
|
routerLink="/security-settings/oauth2"> |
||||
|
<div class="tb-feature-text">OAuth 2</div> |
||||
|
</a> |
||||
|
<a class="tb-feature-button" fxFlex |
||||
|
[matTooltip]="featureTooltip(featuresInfo?.twoFaEnabled)" |
||||
|
matTooltipPosition="above" |
||||
|
[ngClass]="{'configured': featuresInfo?.twoFaEnabled}" |
||||
|
routerLink="/security-settings/2fa"> |
||||
|
<div class="tb-feature-text">2FA</div> |
||||
|
</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,85 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2023 The Thingsboard Authors |
||||
|
* |
||||
|
* 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. |
||||
|
*/ |
||||
|
:host { |
||||
|
.tb-card-content { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.tb-title { |
||||
|
font-style: normal; |
||||
|
font-weight: 500; |
||||
|
font-size: 14px; |
||||
|
line-height: 20px; |
||||
|
letter-spacing: 0.25px; |
||||
|
color: rgba(0, 0, 0, 0.54); |
||||
|
} |
||||
|
|
||||
|
.tb-info-icon { |
||||
|
color: rgba(0, 0, 0, 0.12); |
||||
|
font-size: 16px; |
||||
|
width: 16px; |
||||
|
height: 16px; |
||||
|
line-height: 15px; |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
|
||||
|
.tb-feature-button { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
padding: 12px; |
||||
|
background: #FFFFFF; |
||||
|
border: 1px solid rgba(0, 0, 0, 0.05); |
||||
|
box-shadow: 0 5px 16px rgba(0, 0, 0, 0.04); |
||||
|
border-radius: 10px; |
||||
|
&:hover { |
||||
|
border: 1px solid rgba(0, 0, 0, 0.12); |
||||
|
box-shadow: 0 4px 10px rgba(23, 33, 90, 0.08); |
||||
|
} |
||||
|
.tb-feature-text { |
||||
|
font-weight: 400; |
||||
|
font-size: 14px; |
||||
|
line-height: 20px; |
||||
|
color: rgba(0, 0, 0, 0.87); |
||||
|
&:before { |
||||
|
content: "close"; |
||||
|
font-family: 'Material Icons Round'; |
||||
|
font-size: 20px; |
||||
|
line-height: 1; |
||||
|
color: rgba(0, 0, 0, 0.12); |
||||
|
font-weight: 600; |
||||
|
position: relative; |
||||
|
background: #F4F4F4; |
||||
|
border-radius: 4px; |
||||
|
width: 24px; |
||||
|
height: 24px; |
||||
|
margin-right: 8px; |
||||
|
vertical-align: bottom; |
||||
|
} |
||||
|
} |
||||
|
&.configured { |
||||
|
.tb-feature-text { |
||||
|
&:before { |
||||
|
content: "check"; |
||||
|
color: #198038; |
||||
|
background: #F3F6FA; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,60 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2023 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// 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.
|
||||
|
///
|
||||
|
|
||||
|
import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; |
||||
|
import { PageComponent } from '@shared/components/page.component'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { AdminService } from '@core/http/admin.service'; |
||||
|
import { FeaturesInfo } from '@shared/models/settings.models'; |
||||
|
import { getCurrentAuthUser } from '@core/auth/auth.selectors'; |
||||
|
import { Authority } from '@shared/models/authority.enum'; |
||||
|
import { of } from 'rxjs'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-configured-features', |
||||
|
templateUrl: './configured-features.component.html', |
||||
|
styleUrls: ['./configured-features.component.scss'] |
||||
|
}) |
||||
|
export class ConfiguredFeaturesComponent extends PageComponent implements OnInit { |
||||
|
|
||||
|
authUser = getCurrentAuthUser(this.store); |
||||
|
featuresInfo: FeaturesInfo; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private cd: ChangeDetectorRef, |
||||
|
private adminService: AdminService) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
ngOnInit() { |
||||
|
(this.authUser.authority === Authority.SYS_ADMIN ? |
||||
|
this.adminService.getFeaturesInfo() : of(null)).subscribe( |
||||
|
(featuresInfo) => { |
||||
|
this.featuresInfo = featuresInfo; |
||||
|
this.cd.markForCheck(); |
||||
|
} |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
featureTooltip(configured: boolean): string { |
||||
|
if (configured) { |
||||
|
return 'Feature is configured.\nClick to setup'; |
||||
|
} else { |
||||
|
return 'Feature is not configured.\nClick to setup'; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,44 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2023 The Thingsboard Authors |
||||
|
|
||||
|
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. |
||||
|
|
||||
|
--> |
||||
|
<div class="tb-card-content" fxLayout="column" fxLayoutGap="8px"> |
||||
|
<div class="tb-card-header"> |
||||
|
<div class="tb-title">Version</div> |
||||
|
<a mat-button color="primary" href="https://thingsboard.io/docs/contact-us/" target="_blank">Contact us</a> |
||||
|
</div> |
||||
|
<div fxLayout="column" fxFlex fxLayoutGap="12px"> |
||||
|
<div class="tb-version-info-container" fxFlex> |
||||
|
<div class="tb-card-header"> |
||||
|
<a class="tb-version-link" [href]="updateMessage?.currentVersionReleaseNotesUrl" target="_blank">Current version</a> |
||||
|
</div> |
||||
|
<div class="tb-version">{{ updateMessage?.currentVersion }}</div> |
||||
|
</div> |
||||
|
<div class="tb-version-info-container" fxFlex *ngIf="updateMessage?.updateAvailable; else versionUpToDate"> |
||||
|
<div class="tb-card-header"> |
||||
|
<a class="tb-version-link" [href]="updateMessage?.latestVersionReleaseNotesUrl" target="_blank">Available version</a> |
||||
|
<a mat-flat-button color="primary" [href]="updateMessage?.upgradeInstructionsUrl" target="_blank">Upgrade</a> |
||||
|
</div> |
||||
|
<div class="tb-version">{{ updateMessage?.latestVersion }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<ng-template #versionUpToDate> |
||||
|
<div class="tb-version-info-container up-to-date" fxFlex> |
||||
|
<div class="material-icons-round check-icon">check</div> |
||||
|
<div class="up-to-date-text">Version is up to date</div> |
||||
|
</div> |
||||
|
</ng-template> |
||||
@ -0,0 +1,102 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2023 The Thingsboard Authors |
||||
|
* |
||||
|
* 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. |
||||
|
*/ |
||||
|
:host { |
||||
|
.tb-card-content { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.tb-card-header { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.tb-title { |
||||
|
font-style: normal; |
||||
|
font-weight: 500; |
||||
|
font-size: 14px; |
||||
|
line-height: 20px; |
||||
|
letter-spacing: 0.25px; |
||||
|
color: rgba(0, 0, 0, 0.54); |
||||
|
} |
||||
|
|
||||
|
.tb-version-info-container { |
||||
|
border: 1px solid rgba(0, 0, 0, 0.05); |
||||
|
box-shadow: 0 5px 16px rgba(0, 0, 0, 0.04); |
||||
|
border-radius: 10px; |
||||
|
padding: 16px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-evenly; |
||||
|
&.up-to-date { |
||||
|
box-shadow: none; |
||||
|
border: none; |
||||
|
align-items: center; |
||||
|
background: #F3F6FA; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.tb-version-link { |
||||
|
font-weight: 400; |
||||
|
font-size: 14px; |
||||
|
line-height: 20px; |
||||
|
letter-spacing: 0.2px; |
||||
|
color: rgba(0, 0, 0, 0.76); |
||||
|
position: relative; |
||||
|
border-bottom: none; |
||||
|
&:hover, &:focus { |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
&::after { |
||||
|
content: 'arrow_forward'; |
||||
|
display: inline-block; |
||||
|
position: absolute; |
||||
|
top: -2px; |
||||
|
right: -28px; |
||||
|
transform: rotate(315deg); |
||||
|
font-family: 'Material Icons'; |
||||
|
font-weight: normal; |
||||
|
font-style: normal; |
||||
|
font-size: 18px; |
||||
|
color: rgba(0, 0, 0, 0.12); |
||||
|
} |
||||
|
&:hover::after { |
||||
|
color: inherit; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.tb-version { |
||||
|
font-weight: 500; |
||||
|
font-size: 18px; |
||||
|
line-height: 24px; |
||||
|
letter-spacing: 0.15px; |
||||
|
color: rgba(0, 0, 0, 0.87); |
||||
|
} |
||||
|
|
||||
|
.check-icon { |
||||
|
color: #198038; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
.up-to-date-text { |
||||
|
font-weight: 400; |
||||
|
font-size: 14px; |
||||
|
line-height: 20px; |
||||
|
letter-spacing: 0.2px; |
||||
|
color: rgba(0, 0, 0, 0.76); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,60 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2023 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// 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.
|
||||
|
///
|
||||
|
|
||||
|
import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; |
||||
|
import { PageComponent } from '@shared/components/page.component'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { AdminService } from '@core/http/admin.service'; |
||||
|
import { UpdateMessage } from '@shared/models/settings.models'; |
||||
|
import { getCurrentAuthUser } from '@core/auth/auth.selectors'; |
||||
|
import { Authority } from '@shared/models/authority.enum'; |
||||
|
import { of } from 'rxjs'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-version-info', |
||||
|
templateUrl: './version-info.component.html', |
||||
|
styleUrls: ['./version-info.component.scss'] |
||||
|
}) |
||||
|
export class VersionInfoComponent extends PageComponent implements OnInit { |
||||
|
|
||||
|
authUser = getCurrentAuthUser(this.store); |
||||
|
updateMessage: UpdateMessage; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private cd: ChangeDetectorRef, |
||||
|
private adminService: AdminService) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
ngOnInit() { |
||||
|
(this.authUser.authority === Authority.SYS_ADMIN ? |
||||
|
this.adminService.checkUpdates() : of(null)).subscribe( |
||||
|
(updateMessage) => { |
||||
|
this.updateMessage = updateMessage; |
||||
|
this.cd.markForCheck(); |
||||
|
} |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
featureTooltip(configured: boolean): string { |
||||
|
if (configured) { |
||||
|
return 'Feature is configured.\nClick to setup'; |
||||
|
} else { |
||||
|
return 'Feature is not configured.\nClick to setup'; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue