Skip to content

W
witiumCloud2
Commit d328bbf0 authored by yating.lin's avatar yating.lin
Browse files
Options

修改InfluxDB管理页面；新增存储策略管理页面

parent 6285b158
Hide whitespace changes
Inline Side-by-side
Showing with 391 additions and 29 deletions
src/app/app.module.ts
View file @ d328bbf0
......@@ -39,6 +39,7 @@ import {AuthService} from './service/auth';
import {PermissionService} from './service/permission';
import {MenuService} from './service/menu';
import {CheckService} from './service/check';
import {StringUtil} from './service/StringUtil';
@NgModule({
declarations: [
......@@ -75,7 +76,8 @@ import {CheckService} from './service/check';
AuthService,
PermissionService,
MenuService,
CheckService
CheckService,
StringUtil
],
bootstrap: [
AppComponent,
......
src/app/component/search-item/search-item.component.html
View file @ d328bbf0
<div class="searchItem" [ngClass]="{'inModal': inModal}">
<div class="item-label"><span *ngIf="isMust" class="deleteFontColor">* </span>{{label}}</div>
<div class="item-input">
<div class="item-input" *ngIf="'number' != type">
<input *ngIf="!readonly" nz-input [type]="type" [(ngModel)]="value" [maxlength]="maxlength" (ngModelChange)="onChange()">
<span *ngIf="readonly">{{value}}</span>
</div>
<div class="item-input" *ngIf="'number' == type">
<input *ngIf="!readonly" nz-input [type]="type" [min]="min" [(ngModel)]="value" [maxlength]="maxlength" (ngModelChange)="onChange()">
<span *ngIf="readonly">{{value}}</span>
</div>
</div>
src/app/component/search-item/search-item.component.ts
View file @ d328bbf0
......@@ -13,6 +13,7 @@ export class SearchItemComponent implements OnInit {
@Input() readonly: any = false;
@Input() maxlength: any = 200;
@Input() isMust: any = false;
@Input() min = 0;
@Output() valueChange = new EventEmitter();
constructor() {}
......
src/app/layout/layout.component.ts
View file @ d328bbf0
......@@ -69,9 +69,9 @@ export class LayoutComponent implements OnInit {
});
// 获取登录用户信息
this.api.user.getSelfInfo(['', (data: any) => {
this.userName = data.userName;
}]);
// this.api.user.getSelfInfo(['', (data: any) => {
// this.userName = data.userName;
// }]);
}
loginOut() {
......
src/app/layout/layout.module.ts
View file @ d328bbf0
......@@ -40,6 +40,7 @@ import {TopicModuleWayComponent} from '../main/topic-module-way/topic-module-way
import {InfluxdbComponent} from '../main/influxdb/influxdb.component';
import {SensorTopicWayComponent} from '../main/sensor-topic-way/sensor-topic-way.component';
import {CompanyComponent} from '../main/company/company.component';
import {RetentionPolicyMgrComponent} from '../main/retention-policy-mgr/retention-policy-mgr.component';
@NgModule({
imports: [
......@@ -93,7 +94,8 @@ import {CompanyComponent} from '../main/company/company.component';
TopicModuleDetailComponent,
TopicModuleWayComponent,
InfluxdbComponent,
SensorTopicWayComponent
SensorTopicWayComponent,
RetentionPolicyMgrComponent
]
})
export class LayoutModule {
......
src/app/main/influxdb/influxdb.component.html
View file @ d328bbf0
......@@ -14,12 +14,11 @@
<thead nz-thead>
<tr>
<th nz-th><span>{{'num' | translate}}</span></th>
<th nz-th><span>{{'databaseName' | translate}}</span></th>
<th nz-th><span>{{'companyName' | translate}}</span></th>
<th nz-th><span>{{'field' | translate}}</span></th>
<th nz-th><span>{{'databaseName' | translate}}</span></th>
<th nz-th><span>{{'dbPolicy' | translate}}</span></th>
<th nz-th><span>{{'dbState' | translate}}</span></th>
<th nz-th><span>{{'description' | translate}}</span></th>
<th nz-th><span>{{'duration' | translate}}</span></th>
<th nz-th><span>{{'shardDuration' | translate}}</span></th>
<th nz-th><span>{{'remark' | translate}}</span></th>
<th nz-th><span>{{'oper' | translate}}</span></th>
</tr>
......@@ -27,34 +26,31 @@
<tbody nz-tbody>
<tr *ngFor="let one of nzTable.data,let i = index">
<td nz-td>{{i + 1}}</td>
<td nz-td>{{one.databaseName}}</td>
<td nz-td>{{one.companyName}}</td>
<td nz-td>{{one.field}}</td>
<td nz-td>{{one.policy}}</td>
<td nz-td>{{one.state}}</td>
<td nz-td>{{one.description}}</td>
<td nz-td>{{one.databaseName}}</td>
<td nz-td>{{one.retentionPolicyName}}</td>
<td nz-td>{{one.duration}}</td>
<td nz-td>{{one.shardDuration}}</td>
<td nz-td>{{one.remark}}</td>
<td nz-td>
<span class="editSpan" (click)="edit(one)">{{'edit' | translate}}</span>
<nz-divider nzType="vertical"></nz-divider>
<span class="deleteFontColor" (click)="deleteConfirm(one)">{{'delete' | translate}}</span>
<span class="editSpan" (click)="onPolicyMgr(one)">{{'retentionPolicyMgr' | translate}}</span>
<nz-divider nzType="vertical" *ngIf="0 == one.defaultDatabase"></nz-divider>
<span class="editSpan" *ngIf="0 == one.defaultDatabase" (click)="edit(one)" >{{'edit' | translate}}</span>
<nz-divider nzType="vertical" *ngIf="0 == one.defaultDatabase"></nz-divider>
<span class="deleteFontColor" *ngIf="0 == one.defaultDatabase"
(click)="deleteConfirm(one)">{{'delete' | translate}}</span>
</td>
</tr>
</tbody>
</nz-table>
</div>
<nz-modal [(nzVisible)]="isVisible" [nzTitle]="(isUpdate ? 'editUser' : 'addUser') | translate" [nzContent]="modalContent" nzWidth="500"
<nz-modal [(nzVisible)]="isVisible" [nzTitle]="(isUpdate ? 'editInfluxDB' : 'addInfluxDB') | translate" [nzContent]="modalContent" nzWidth="500"
[nzFooter]="modalFooter" (nzOnCancel)="cancel()" nzMaskClosable="false">
<ng-template #modalContent>
<app-search-item isMust="true" [(value)]="req.databaseName" [label]="'databaseName' | translate" inModal="true"></app-search-item>
<app-search-item isMust="true" [(value)]="req.field" [label]="'field' | translate" inModal="true"></app-search-item>
<app-search-item isMust="true" [(value)]="req.description" [label]="'description' | translate" inModal="true"></app-search-item>
<app-search-select isMust="true" [(value)]="req.companyNo" [label]="'selectCompany' | translate" optL="companyName"
[data]="companys" inModal="true" optV="companyNo"></app-search-select>
<app-search-select isMust="true" [(value)]="req.state" [label]="'dbState' | translate" optL="a" optV="b"
[data]="[{a: '好', b: 1}, {a: '坏', b: 0}]" inModal="true"></app-search-select>
<app-search-item isMust="true" [(value)]="req.policy" [label]="'dbPolicy' | translate" inModal="true"></app-search-item>
<!--<app-search-select isMust="true" [(value)]="req.companyNo" [label]="'selectCompany' | translate" optL="companyName"-->
<!--[data]="companys" inModal="true" optV="companyNo"></app-search-select>-->
<app-search-item [(value)]="req.remark" [label]="'remark' | translate" inModal="true"></app-search-item>
</ng-template>
<ng-template #modalFooter>
......
src/app/main/influxdb/influxdb.component.ts
View file @ d328bbf0
......@@ -4,6 +4,7 @@ import {NzMessageService, NzModalService} from 'ng-zorro-antd';
import {TranslateService} from '@ngx-translate/core';
import {CheckService} from '../../service/check';
import {fadeIn} from '../../animation/fade-in';
import {Router} from '@angular/router';
@Component({
selector: 'app-influxdb',
......@@ -22,7 +23,7 @@ export class InfluxdbComponent implements OnInit {
companys = [];
constructor(private api: ApiService, private message: NzMessageService, private translate: TranslateService,
private modalService: NzModalService, private ck: CheckService) {
private modalService: NzModalService, private ck: CheckService, private router: Router) {
}
ngOnInit() {
......@@ -47,6 +48,86 @@ export class InfluxdbComponent implements OnInit {
}
next = (data) => {
// TODO 测试数据
data = [
{
influxdbDatabaseNo: 'ITN78344312655581185',
databaseName: 'witcloud',
field: 'cloud',
description: '云平台2期',
policy: null,
state: 1,
companyNo: 'CN77632031189766160',
companyName: '上海辉度智能系统有限公司',
defaultDatabase: 1,
remark: null,
createTime: 1553149607703,
updateTime: 1553149607703,
retentionPolicyName: 'witium_policy',
duration: '2160h0m0s',
defaultPolicy: null,
shardDuration: '720h0m0s'
},
{
influxdbDatabaseNo: 'ITN88121886475026432',
databaseName: '111',
field: '111',
description: '111',
policy: '11',
state: 1,
companyNo: 'CN77632031189766160',
companyName: '上海辉度智能系统有限公司',
defaultDatabase: 0,
remark: '11',
createTime: 1555480762961,
updateTime: 1555480762961,
retentionPolicyName: 'witium_policy',
duration: '0s',
defaultPolicy: null,
shardDuration: '168h0m0s'
},
{
influxdbDatabaseNo: 'ITN153310897116160001',
databaseName: 'Alliance',
field: 'cloud',
description: '色谱仪',
policy: null,
state: 1,
companyNo: 'CN77632031189766160',
companyName: '上海辉度智能系统有限公司',
defaultDatabase: 0,
remark: null,
createTime: 123,
updateTime: 123,
retentionPolicyName: 'witium_policy',
duration: '0s',
defaultPolicy: null,
shardDuration: '168h0m0s'
}
];
// data = [
// {
// influxdbDatabaseNo: "ITN243244992323002368",
// databaseName: "witiumCloud",
// field: "cloud",
// description: "云平台2期",
// policy: null,
// state: 1,
// companyNo: "CN243244992373334016",
// companyName: "上海辉度减速机平台",
// defaultDatabase: 1,
// remark: null,
// createTime: 1592464993455,
// updateTime: 1592464993455,
// retentionPolicyName: "witium_policy",
// duration: "0s",
// defaultPolicy: null,
// shardDuration: "168h0m0s"
// }
// ]
if (data && data.constructor === Array) {
this.data = data;
} else if (data && data.code === 1) {
......@@ -82,6 +163,10 @@ export class InfluxdbComponent implements OnInit {
this.isVisible = true;
}
onPolicyMgr(one) {
this.router.navigate(['/app/systemMgr/influxdbMgr/retentionPolicyMgr'],
{queryParams: {influxdbDatabaseNo: one.influxdbDatabaseNo}});
}
edit(one) {
this.isUpdate = true;
this.req = {...one};
......
src/app/main/retention-policy-mgr/retention-policy-mgr.component.html 0 → 100644
View file @ d328bbf0
<div class="searchBar" @fade>
<div class="btnLine">
<button nz-button class="searchBtn" [nzLoading]="isLoading" (click)="add()"><span>{{'add' | translate}}</span></button>
</div>
</div>
<div class="tableBar" @fade>
<nz-table #nzTable
[nzData]="data"
[nzLoading]="isLoading">
<thead nz-thead>
<tr>
<th nz-th><span>{{'num' | translate}}</span></th>
<th nz-th><span>{{'retentionPolicyName' | translate}}</span></th>
<th nz-th><span>{{'duration' | translate}}</span></th>
<th nz-th><span>{{'isDefault' | translate}}</span></th>
<th nz-th><span>{{'shardDuration' | translate}}</span></th>
<th nz-th><span>{{'remark' | translate}}</span></th>
<th nz-th><span>{{'oper' | translate}}</span></th>
</tr>
</thead>
<tbody nz-tbody>
<tr *ngFor="let one of nzTable.data,let i = index">
<td nz-td>{{i + 1}}</td>
<td nz-td>{{one.retentionPolicyName}}</td>
<td nz-td>{{one.duration}}</td>
<td nz-td><div *ngIf="1 === one.defaultPolicy">是</div><div *ngIf="0 === one.defaultPolicy">否</div></td>
<td nz-td>{{one.shardDuration}}</td>
<td nz-td>{{one.remark}}</td>
<td nz-td>
<span class="editSpan" (click)="onSetDefalut(one)">{{'setAsDefault' | translate}}</span>
<nz-divider nzType="vertical"></nz-divider>
<span class="editSpan" (click)="edit(one)">{{'edit' | translate}}</span>
<nz-divider nzType="vertical"></nz-divider>
<span class="deleteFontColor" (click)="deleteConfirm(one)">{{'delete' | translate}}</span>
</td>
</tr>
</tbody>
</nz-table>
</div>
<nz-modal [(nzVisible)]="isVisible" [nzTitle]="(isUpdate ? 'editPolicy' : 'addPolicy') | translate" [nzContent]="modalContent" nzWidth="500"
[nzFooter]="modalFooter" (nzOnCancel)="cancel()" nzMaskClosable="false">
<ng-template #modalContent>
<app-search-item isMust="true" *ngIf="!isUpdate" [(value)]="req.retentionPolicyName" [label]="'retentionPolicyName' | translate" inModal="true"></app-search-item>
<app-search-item isMust="true" *ngIf="isUpdate" [(value)]="req.retentionPolicyName" [label]="'retentionPolicyName' | translate" readonly="true" inModal="true"></app-search-item>
<app-search-item isMust="true" [label]="'popDuration' | translate" inModal="true"
[(value)]="req.duration" [type]="'number'"></app-search-item>
<app-search-select isMust="true" [(value)]="req.defaultPolicy" [label]="'isDefault' | translate" inModal="true"
[data]="[{opLabel: '是', opValue: 1}, {opLabel: '否', opValue: 0}]" optL="opLabel" optV="opValue"></app-search-select>
<app-search-item isMust="true" [label]="'popShardDuration' | translate" inModal="true"
[(value)]="req.shardDuration" [type]="'number'" ></app-search-item>
<app-search-item [(value)]="req.remark" [label]="'remark' | translate" inModal="true"></app-search-item>
</ng-template>
<ng-template #modalFooter>
<button nz-button nzType="default" [nzLoading]="isLoading" (click)="cancel()"><span>{{'cancel' | translate}}</span></button>
<button nz-button class="searchBtn" nzType="primary" [nzLoading]="isLoading" (click)="save()"><span>{{'confirm' | translate}}</span></button>
</ng-template>
</nz-modal>
src/app/main/retention-policy-mgr/retention-policy-mgr.component.ts 0 → 100644
View file @ d328bbf0
import { Component, OnInit } from '@angular/core';
import {ApiService} from '../../service/api';
import {NzMessageService, NzModalService} from 'ng-zorro-antd';
import {TranslateService} from '@ngx-translate/core';
import {CheckService} from '../../service/check';
import {fadeIn} from '../../animation/fade-in';
import {ActivatedRoute, Router} from '@angular/router';
import {StringUtil} from "../../service/StringUtil";
@Component({
selector: 'app-retention-policy-mgr',
templateUrl: './retention-policy-mgr.component.html',
styles: [],
animations: [fadeIn]
})
export class RetentionPolicyMgrComponent implements OnInit {
influxdbDatabaseNo = '';
req: any = {};
data: any = [];
isLoading = false;
isVisible = false;
isUpdate = false;
companyNo = '';
companys = [];
constructor(private api: ApiService, private message: NzMessageService, private translate: TranslateService,
private modalService: NzModalService, private ck: CheckService, private ac: ActivatedRoute,
private stringUtil: StringUtil) {
}
ngOnInit() {
this.ac.queryParams.subscribe((e) => {
this.influxdbDatabaseNo = e.influxdbDatabaseNo;
});
this.init();
}
init() {
this.getData();
}
next = (data) => {
if (data && data.constructor === Array) {
this.data = data;
} else if (data && data.code === 1) {
this.message.success(data.message ? data.message : '操作成功');
this.init();
this.isVisible = false;
} else if (data && data.code === 0) {
this.message.error(data.message ? data.message : '操作失败');
} else {
this.message.error(data && data.message ? data.message : '获取数据失败');
}
this.isLoading = false;
}
getData() {
// this.isLoading = true;
// this.api.influxdbTables.getPolicyByInfluxdb([{companyNo: this.companyNo}, this.next]);
this.data = [
{retentionPolicyName: 'witium_policy', duration: '1000h0m0s', shardDuration: '168h0m0s', defaultPolicy: 1, remark: ''},
{retentionPolicyName: 'autogen', duration: '1000h0m0s', shardDuration: '168h0m0s', defaultPolicy: 0, remark: ''},
{retentionPolicyName: 'autogen1', duration: '1000h0m0s', shardDuration: '168h0m0s', defaultPolicy: 0, remark: ''},
{retentionPolicyName: 'autogen2', duration: '1000h0m0s', shardDuration: '168h0m0s', defaultPolicy: 0, remark: ''},
{retentionPolicyName: 'autogen3', duration: '1000h0m0s', shardDuration: '168h0m0s', defaultPolicy: 0, remark: ''},
{retentionPolicyName: 'autogen4', duration: '1000h0m0s', shardDuration: '168h0m0s', defaultPolicy: 0, remark: ''},
{retentionPolicyName: 'autogen5', duration: '1000h0m0s', shardDuration: '168h0m0s', defaultPolicy: 0, remark: ''},
{retentionPolicyName: 'autogen6', duration: '1000h0m0s', shardDuration: '168h0m0s', defaultPolicy: 0, remark: ''},
{retentionPolicyName: 'autogen7', duration: '1000h0m0s', shardDuration: '168h0m0s', defaultPolicy: 0, remark: ''},
{retentionPolicyName: 'autogen8', duration: '1000h0m0s', shardDuration: '168h0m0s', defaultPolicy: 0, remark: ''},
{retentionPolicyName: 'autogen9', duration: '1000h0m0s', shardDuration: '168h0m0s', defaultPolicy: 0, remark: ''},
{retentionPolicyName: 'autogen10', duration: '1000h0m0s', shardDuration: '168h0m0s', defaultPolicy: 0, remark: ''},
{retentionPolicyName: 'autogen11', duration: '1000h0m0s', shardDuration: '168h0m0s', defaultPolicy: 0, remark: ''},
{retentionPolicyName: 'autogen12', duration: '1000h0m0s', shardDuration: '168h0m0s', defaultPolicy: 0, remark: ''},
];
}
add() {
this.isUpdate = false;
this.req = {};
this.isVisible = true;
}
onSetDefalut(one) {
}
edit(one) {
const durationIndex = one.duration.search(/[A-Za-z]/);
const shardDurationIndex = one.shardDuration.search(/[A-Za-z]/);
this.isUpdate = true;
this.req = {...one};
this.req.duration = one.duration.substring(0, durationIndex);
this.req.shardDuration = one.shardDuration.substring(0, shardDurationIndex);
this.isVisible = true;
}
save() {
const param = {
retentionPolicyNo: this.req.retentionPolicyNo,
influxdbDatabaseNo: this.req.influxdbDatabaseNo,
retentionPolicyName: this.req.retentionPolicyName,
duration: this.req.duration,
defaultPolicy: this.req.defaultPolicy,
shardDuration: this.req.shardDuration,
remark: this.req.remark,
};
this.isLoading = true;
if (this.stringUtil.isNotEmpty(param.duration)) {
param.duration = this.req.duration + 'h0m0s';
}
if (this.stringUtil.isNotEmpty(param.shardDuration)) {
param.shardDuration = param.shardDuration + 'h0m0s';
}
this.isLoading = false;
if (this.isUpdate) {
this.api.influxdbTables.updateInfluxdbPolicy([param, this.next]);
} else {
this.api.influxdbTables.addInfluxdbPolicy([param, this.next]);
}
}
cancel() {
this.req = {};
this.isVisible = false;
}
deleteConfirm(one) {
this.modalService.confirm({
nzTitle : '<i></i>',
nzContent: '<b>' + this.translate.instant('confirmDeleteThisRecord') + '</b>',
nzOnOk : () => this.delete(one)
});
}
delete(one) {
this.api.influxdbTables.delInfluxdbPolicy([{influxdbDatabaseNo: one.influxdbDatabaseNo}, this.next]);
}
}
src/app/router.module.ts
View file @ d328bbf0
......@@ -24,6 +24,7 @@ import {TopicModuleWayComponent} from './main/topic-module-way/topic-module-way.
import {InfluxdbComponent} from './main/influxdb/influxdb.component';
import {SensorTopicWayComponent} from './main/sensor-topic-way/sensor-topic-way.component';
import {CompanyComponent} from './main/company/company.component';
import {RetentionPolicyMgrComponent} from "./main/retention-policy-mgr/retention-policy-mgr.component";
const AppRoutes: Routes = [
{path: '', redirectTo: '/extra/login', pathMatch: 'full'},
......@@ -55,6 +56,7 @@ const routes: Routes = [
{path: 'deviceCenter/mqttSetMgr', component: MqttSetMgrComponent},
{path: 'systemMgr/userCenter', component: UserComponent},
{path: 'systemMgr/influxdbMgr', component: InfluxdbComponent},
{path: 'systemMgr/influxdbMgr/retentionPolicyMgr', component: RetentionPolicyMgrComponent},
{path: 'systemMgr/customCenter', component: CompanyComponent},
{path: 'systemMgr/roleMgr', component: RoleComponent},
{path: 'systemMgr/partMgr', component: PartMgrComponent},
......
src/app/service/StringUtil.ts 0 → 100644
View file @ d328bbf0
import {Injectable} from '@angular/core';
import {isInteger, toNumber} from 'ng-zorro-antd';
@Injectable()
export class StringUtil {
constructor() {}
/**
* 字符串是否不为空
*/
public isNotEmpty(str): boolean {
if (str === undefined || str === null || str === '') {
return false;
} else {
return true;
}
}
/**
* 字符串是否为空
*/
public isEmpty(str): boolean {
if (str === undefined || str === null || str === '') {
return true;
} else {
return false;
}
}
/**
* 字符转数字
* 例: "1" → 1
*/
public strToNum(str): number {
if (str === undefined || str === null || str === '') {
return null;
} else if (isInteger(+str)) {
return toNumber(str);
} else {
return str;
}
}
}
src/app/service/api.ts
View file @ d328bbf0
......@@ -146,6 +146,10 @@ export class ApiService {
getAll: (data) => this.trans('get', '/device/influxdbTables/getAll', data),
getByCompanyNo: (data) => this.trans('post', '/device/influxdbTables/getByCompanyNo', data),
updateInfluxdbTables: (data) => this.trans('post', '/device/influxdbTables/updateInfluxdbTables', data),
addInfluxdbPolicy: (data) => this.trans('post', '/device/influxdbTables/addInfluxdbPolicy', data),
updateInfluxdbPolicy: (data) => this.trans('post', '/device/influxdbTables/addInfluxdbPolicy', data),
getPolicyByInfluxdb: (data) => this.trans('post', '/device/influxdbTables/getPolicyByInfluxdb', data),
delInfluxdbPolicy: (data) => this.trans('post', '/device/influxdbTables/delInfluxdbPolicy', data),
};
public probes = {
......
src/assets/i18n/zh.json
View file @ d328bbf0
......@@ -137,7 +137,7 @@
"databaseName": "数据库名称",
"field": "域名",
"dbState": "数据库状态",
"dbPolicy": "存储策略",
"dbPolicy": "存储策略名称",
"simcard": "sim卡号",
"selectScene": "选择场景",
"configJson": "配置Json",
......@@ -182,5 +182,18 @@
"addCompany": "新增公司",
"updateCompany": "编辑公司",
"maxRole": "公司最高权限",
"sceneName": "场景名称"
"sceneName": "场景名称",
"retentionPolicyMgr": "存储策略管理",
"duration": "存储策略时长",
"shardDuration": "shard保存时长",
"retentionPolicyName": "存储策略名称",
"isDefault": "是否 default",
"setAsDefault": "设为 default",
"editInfluxDB": "编辑InfluxDB",
"addInfluxDB": "新增InfluxDB",
"editPolicy": "编辑存储策略",
"addPolicy": "新增存储策略",
"isDefaultDB": "是否 default",
"popDuration": "存储策略时长（h）",
"popShardDuration": "shard保存时长（h）"
}
src/styles.scss
View file @ d328bbf0
......@@ -271,6 +271,14 @@ ol, ul {
width: 55%;
}
.item-input-left {
width: 30%;
}
.item-input-right {
width: 20%;
}
.btnLine {
text-align: right;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment