Skip to content

S
smart
Commit ce8c43ad authored by wangqinghua's avatar wangqinghua
Browse files
Options

update

parent 69d2a79f
Hide whitespace changes
Inline Side-by-side
Showing with 254 additions and 119 deletions
src/main/webapp/app/analysis/resource-alarm/resource-alarm.component.ts
View file @ ce8c43ad
...@@ -87,6 +87,9 @@ export class ResourceAlarmComponent implements OnInit { ...@@ -87,6 +87,9 @@ export class ResourceAlarmComponent implements OnInit {
//设置告警总数TOP10 echarts //设置告警总数TOP10 echarts
setTopEcharts(data){ setTopEcharts(data){
this.chartTopOption = { this.chartTopOption = {
title: {
text: '告警总数TOP 10'
},
xAxis: { xAxis: {
type: 'category', type: 'category',
data: data.map(e=>{ data: data.map(e=>{
...@@ -124,6 +127,9 @@ export class ResourceAlarmComponent implements OnInit { ...@@ -124,6 +127,9 @@ export class ResourceAlarmComponent implements OnInit {
//设置告警趋势echarts图表 //设置告警趋势echarts图表
setAlarmTrend(data) { setAlarmTrend(data) {
this.charTrendOption = { this.charTrendOption = {
title: {
text: '告警总数趋势'
},
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效 axisPointer: { // 坐标轴指示器，坐标轴触发有效
......
src/main/webapp/app/analysis/resource-usabil/resource-usabil.component.html
View file @ ce8c43ad
...@@ -50,7 +50,7 @@ ...@@ -50,7 +50,7 @@
></nz-date-picker> ></nz-date-picker>
</div> </div>
</div> </div>
<div nz-row nzGutter="4"> <div style="margin-top: 30px" nz-row nzGutter="4">
<div nz-col nzSpan="12"> <div nz-col nzSpan="12">
<nz-spin [nzSpinning]="isTopLoading"> <nz-spin [nzSpinning]="isTopLoading">
<div echarts [options]="chartTopOption" style="height: 400px;width: 100%"></div> <div echarts [options]="chartTopOption" style="height: 400px;width: 100%"></div>
......
src/main/webapp/app/analysis/resource-usabil/resource-usabil.component.ts
View file @ ce8c43ad
...@@ -13,7 +13,7 @@ export class ResourceUsabilComponent implements OnInit { ...@@ -13,7 +13,7 @@ export class ResourceUsabilComponent implements OnInit {
startTime; startTime;
endTime; endTime;
timeType; timeType = '1';
chartTopOption; chartTopOption;
topList; topList;
...@@ -74,18 +74,27 @@ export class ResourceUsabilComponent implements OnInit { ...@@ -74,18 +74,27 @@ export class ResourceUsabilComponent implements OnInit {
//设置top图表 //设置top图表
setTopEcharts(){ setTopEcharts(){
this.chartTopOption = { this.chartTopOption = {
title: {
text: '可用性TOP 10'
},
xAxis: { xAxis: {
type: 'category', type: 'category',
data: this.topList.map(e=>{ data: this.topList.map(e=>{
return e.name; return e.name;
}) }),
}, },
yAxis: { yAxis: {
type: 'value' type: 'value',
axisLabel: {
show: true,
interval: 'auto',
formatter: '{value} %'
},
}, },
series: [{ series: [{
data: this.topList.map(e=>{ data: this.topList.map(e=>{
return e.value; return e.value *100;
}), }),
type: 'bar' type: 'bar'
}] }]
...@@ -108,6 +117,9 @@ export class ResourceUsabilComponent implements OnInit { ...@@ -108,6 +117,9 @@ export class ResourceUsabilComponent implements OnInit {
//设置last图表 //设置last图表
setLastEcharts(){ setLastEcharts(){
this.chartLastOption = { this.chartLastOption = {
title: {
text: '可用性LAST 10'
},
xAxis: { xAxis: {
type: 'category', type: 'category',
data: this.lastList.map(e=>{ data: this.lastList.map(e=>{
...@@ -115,11 +127,16 @@ export class ResourceUsabilComponent implements OnInit { ...@@ -115,11 +127,16 @@ export class ResourceUsabilComponent implements OnInit {
}) })
}, },
yAxis: { yAxis: {
type: 'value' type: 'value',
axisLabel: {
show: true,
interval: 'auto',
formatter: '{value} %'
},
}, },
series: [{ series: [{
data: this.lastList.map(e=>{ data: this.lastList.map(e=>{
return e.value; return e.value *100;
}), }),
type: 'bar' type: 'bar'
}] }]
......
src/main/webapp/app/home/home.component.html
View file @ ce8c43ad
...@@ -8,14 +8,21 @@ ...@@ -8,14 +8,21 @@
</nz-breadcrumb> </nz-breadcrumb>
</div> </div>
<div nz-col nzSpan="8" class="text-right"> <div nz-col nzSpan="8" class="text-right">
<button (click)="search()" nz-button nzType="primary"><i class="anticon anticon-search"></i></button> <button nz-button nzType="primary"><i class="anticon anticon-search"></i></button>
<button nz-button nzType="primary"><i class="anticon anticon-sync"></i></button> <button nz-button nzType="primary"><i class="anticon anticon-sync"></i></button>
<button nz-button nzType="primary"><i class="anticon anticon-arrows-alt"></i></button> <button nz-button nzType="primary"><i class="anticon anticon-arrows-alt"></i></button>
</div> </div>
</div> </div>
<div nz-row nzGutter="4"> <div nz-row nzGutter="4">
<div nz-col nzSpan="16"> <div nz-col nzSpan="16">
<p>运行情况统计</p> <div>
运行情况统计
<nz-select style="width: 200px;" nzPlaceHolder="选择分组" [(ngModel)]="runGroupId" (ngModelChange)="runLeft()">
<ng-container *ngFor="let item of groupList;let i = index;">
<nz-option nzLabel="{{item.name}}" nzValue="{{item.id}}"></nz-option>
</ng-container>
</nz-select>
</div>
<div nz-row> <div nz-row>
<div nz-col nzSpan="12"> <div nz-col nzSpan="12">
<div echarts [options]="leftOneChart" style="height: 250px;width: 100%"></div> <div echarts [options]="leftOneChart" style="height: 250px;width: 100%"></div>
...@@ -43,4 +50,36 @@ ...@@ -43,4 +50,36 @@
<div echarts [options]="rightTwoChart" style="height: 250px;width: 100%"></div> <div echarts [options]="rightTwoChart" style="height: 250px;width: 100%"></div>
</div> </div>
</div> </div>
<smart-warn-list #warnList (total)="getTotal($event)"></smart-warn-list> <div>
当前告警
<nz-select style="width: 200px;" nzPlaceHolder="选择分组" [(ngModel)]="groupid" (ngModelChange)="getAlarmList()">
<ng-container *ngFor="let item of groupList">
<nz-option [nzLabel]="item.name" [nzValue]="item.id"></nz-option>
</ng-container>
</nz-select>
</div>
<nz-table #nzTable [nzData]="warnList" [nzFrontPagination]="false" [nzTotal]="totalNum" [nzPageIndex]="pageNum" [nzPageSize]="pageCount" (nzPageIndexChange)="change($event)" [nzLoading]="loading">
<thead>
<tr>
<th nzShowSort>产生时间</th>
<th>级别</th>
<th>资源名称</th>
<th nzWidth="15%">告警信息</th>
<th>持续时间</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of warnList">
<td class="table-timeline">
<nz-timeline-item>{{data.clock | date:"yyyy-MM-dd HH:mm:ss"}}</nz-timeline-item>
</td>
<td class="round-tag tag-form">
<nz-tag *ngIf="data.priority == 4 || data.priority == 5" [nzColor]="'#fc0d1b'"></nz-tag>
<nz-tag *ngIf="data.priority == 2 || data.priority == 3" [nzColor]="'#fd9827'"></nz-tag>
</td>
<td>{{data.hostname}}</td>
<td>{{data.description}}</td>
<td>{{data.continuedTime}}</td>
</tr>
</tbody>
</nz-table>
src/main/webapp/app/home/home.component.ts
View file @ ce8c43ad
...@@ -4,6 +4,9 @@ import { JhiEventManager } from 'ng-jhipster'; ...@@ -4,6 +4,9 @@ import { JhiEventManager } from 'ng-jhipster';
import { Account, Principal } from '../shared'; import { Account, Principal } from '../shared';
import {OverAllService} from '../overAll/overAll.service'; import {OverAllService} from '../overAll/overAll.service';
import {WarnListComponent} from '../modal/warn-list/warn-list.component'; import {WarnListComponent} from '../modal/warn-list/warn-list.component';
import {pageSize} from '../app.constants';
import {AlarmService} from '../alarm/alarm.service';
import {NzMessageService} from 'ng-zorro-antd';
@Component({ @Component({
selector: 'jhi-home', selector: 'jhi-home',
...@@ -22,24 +25,47 @@ export class HomeComponent implements OnInit { ...@@ -22,24 +25,47 @@ export class HomeComponent implements OnInit {
rightTwoChart; rightTwoChart;
totalNum; totalNum;
groupList;
pageNum = 1;
pageCount = pageSize;
groupid = null;
loading = false;
runGroupId = null;
constructor( constructor(
private overAllSer:OverAllService, private overAllSer:OverAllService,private message:NzMessageService,
private alarmSer:AlarmService,
private principal: Principal, private principal: Principal,
private eventManager: JhiEventManager private eventManager: JhiEventManager
) { ) {
} }
ngOnInit() { ngOnInit() {
this.search(); this.getAlarmList();
this.runLeft();
this.findGroupCount(); this.findGroupCount();
this.findHostCount(); this.findHostCount();
this.getGroup();
}
runLeft(){
this.setLeftOne(); this.setLeftOne();
this.setLeftTwo(); this.setLeftTwo();
} }
//获取分组
getGroup() {
this.overAllSer.findGroup().subscribe(
(res) => {
this.groupList = res.data;
}
);
}
setLeftOne(){ setLeftOne(){
this.leftOneChart = this.leftOneChart =
{ {
...@@ -235,15 +261,31 @@ export class HomeComponent implements OnInit { ...@@ -235,15 +261,31 @@ export class HomeComponent implements OnInit {
) )
} }
search(){ //获取告警分组
const obj = { getAlarmList(){
isWaring:'yes', const data = {
hostid:null, pageNum: this.pageNum,
pageCount: this.pageCount,
obj:{
groupid: this.groupid,
}
}; };
this.warnList.getList(obj); this.alarmSer.eventFind(data).subscribe(
(res) => {
if(res.errCode == 10000){
if(res.data){
this.warnList = res.data.data;
this.totalNum = res.data.totalNum;
}
}else{
this.message.info(res.errMsg);
}
}
);
} }
getTotal(e){ change(e){
this.totalNum = e; this.pageNum = e;
this.getAlarmList();
} }
} }
src/main/webapp/app/layouts/sidebar/sidebar.component.ts
View file @ ce8c43ad
...@@ -299,7 +299,6 @@ export class SidebarComponent implements OnInit { ...@@ -299,7 +299,6 @@ export class SidebarComponent implements OnInit {
} }
goToRoute(node){ goToRoute(node){
console.log(node);
this.$localStorage.store("moduleId",node.id); this.$localStorage.store("moduleId",node.id);
this.router.navigate(["app/main/"+ node.url]); this.router.navigate(["app/main/"+ node.url]);
} }
......
src/main/webapp/app/system/modal/role/role.component.html
View file @ ce8c43ad
<nz-modal [(nzVisible)]="isVisible" nzTitle="{{title}}" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"> <nz-modal [(nzVisible)]="isVisible" [nzTitle]="title" [nzWidth]="880" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
<form nz-form [formGroup]="validateForm"> <form nz-form [formGroup]="validateForm">
<nz-form-item> <nz-form-item>
<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="name">角色名称</nz-form-label> <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="name">角色名称</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24"> <nz-form-control [nzSm]="14" [nzXs]="24">
<input nz-input id="name" formControlName="name"> <input nz-input id="name" formControlName="name">
<nz-form-explain *ngIf="validateForm.get('name').dirty && validateForm.get('name').errors">请填写角色名称!</nz-form-explain> <nz-form-explain *ngIf="validateForm.get('name').dirty && validateForm.get('name').errors">请填写角色名称!
</nz-form-control> </nz-form-explain>
</nz-form-item> </nz-form-control>
<nz-form-item> </nz-form-item>
<nz-form-label [nzSm]="6" [nzXs]="24" nzFor="status" nzRequired nzFor="status">是否有效</nz-form-label> <nz-form-item>
<nz-form-control [nzSm]="14" [nzXs]="24"> <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="status" nzRequired nzFor="status">是否有效</nz-form-label>
<nz-select id="status" nzPlaceHolder="选择状态" formControlName="status"> <nz-form-control [nzSm]="14" [nzXs]="24">
<nz-option nzValue="0" nzLabel="有效"></nz-option> <nz-select id="status" nzPlaceHolder="选择状态" formControlName="status">
<nz-option nzValue="1" nzLabel="无效"></nz-option> <nz-option nzValue="0" nzLabel="有效"></nz-option>
</nz-select> <nz-option nzValue="1" nzLabel="无效"></nz-option>
<nz-form-explain *ngIf="validateForm.get('status').dirty && validateForm.get('status').errors">请选择是否有效!</nz-form-explain> </nz-select>
</nz-form-control> <nz-form-explain *ngIf="validateForm.get('status').dirty && validateForm.get('status').errors">
</nz-form-item> 请选择是否有效!
<nz-form-item> </nz-form-explain>
<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="comment">角色说明</nz-form-label> </nz-form-control>
<nz-form-control [nzSm]="14" [nzXs]="24"> </nz-form-item>
<textarea id="comment " row="4" nz-input formControlName="comment"></textarea> <nz-form-item>
<nz-form-explain *ngIf="validateForm.get('comment').dirty && validateForm.get('comment').errors">请输入角色说明!</nz-form-explain> <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="comment">角色说明</nz-form-label>
</nz-form-control> <nz-form-control [nzSm]="14" [nzXs]="24">
</nz-form-item> <textarea id="comment " row="4" nz-input formControlName="comment"></textarea>
<nz-form-item> <nz-form-explain *ngIf="validateForm.get('comment').dirty && validateForm.get('comment').errors">
<nz-form-label [nzSm]="6" [nzXs]="24" >模块权限</nz-form-label> 请输入角色说明!
<nz-form-control [nzSm]="14" [nzXs]="24" style="max-height: 200px"> </nz-form-explain>
<div class="tree-div"> </nz-form-control>
<nz-tree #nzTree </nz-form-item>
[(ngModel)]="nodes" [ngModelOptions]="{standalone: true}" <nz-form-item>
[nzCheckable]="true" <nz-form-label [nzSm]="6" [nzXs]="24">模块权限</nz-form-label>
[nzAsyncData]="true" <nz-form-control [nzSm]="14" [nzXs]="24" style="max-height: 200px">
[nzCheckStrictly]="true" <div class="tree-div">
(nzCheckBoxChange)="selectCheckTree($event)" <nz-tree #nzTree
(nzClick)="mouseAction('expand',$event)" [(ngModel)]="nodes" [ngModelOptions]="{standalone: true}"
(nzExpandChange)="mouseAction('expand',$event)" > [nzCheckable]="true"
</nz-tree> [nzAsyncData]="true"
</div> [nzCheckStrictly]="true"
</nz-form-control> (nzCheckBoxChange)="selectCheckTree($event)"
</nz-form-item> >
<nz-form-item> </nz-tree>
<nz-form-label [nzSm]="6" [nzXs]="24" >资源权限</nz-form-label> </div>
<nz-form-control [nzSm]="14" [nzXs]="24"> </nz-form-control>
<nz-tree #nzTree </nz-form-item>
[(ngModel)]="nodes" [ngModelOptions]="{standalone: true}" <nz-form-item>
[nzCheckable]="true" <nz-form-label [nzSm]="6" [nzXs]="24">资源权限</nz-form-label>
[nzAsyncData]="true" <nz-form-control [nzSm]="14" [nzXs]="24">
[nzCheckStrictly]="true" <div class="tree-div" style="padding-left: 10px;">
(nzCheckBoxChange)="selectCheckTree($event)" <p *ngFor="let item of groupList"><label nz-checkbox [(ngModel)]="item.checked" [ngModelOptions]="{standalone: true}">{{item.name}}</label></p>
(nzClick)="mouseAction('expand',$event)" </div>
(nzExpandChange)="mouseAction('expand',$event)" > </nz-form-control>
</nz-tree> </nz-form-item>
</nz-form-control> </form>
</nz-form-item>
</form>
</nz-modal> </nz-modal>
src/main/webapp/app/system/modal/role/role.component.ts
View file @ ce8c43ad
...@@ -10,11 +10,17 @@ import {SystemService} from '../../system.service'; ...@@ -10,11 +10,17 @@ import {SystemService} from '../../system.service';
import {NzMessageService, NzTreeNode} from 'ng-zorro-antd'; import {NzMessageService, NzTreeNode} from 'ng-zorro-antd';
import {LayoutService} from '../../../layouts/layout.service'; import {LayoutService} from '../../../layouts/layout.service';
import {CommonService} from '../../../shared/common/common.service'; import {CommonService} from '../../../shared/common/common.service';
import {OverAllService} from '../../../overAll/overAll.service';
@Component({ @Component({
selector: 'smart-role', selector: 'smart-role',
templateUrl: './role.component.html', templateUrl: './role.component.html',
styles: [] styles: [
`
.tree-div p {
margin: 0;
}`
]
}) })
export class RoleComponent implements OnInit { export class RoleComponent implements OnInit {
@Output() add = new EventEmitter<any>(); @Output() add = new EventEmitter<any>();
...@@ -27,17 +33,21 @@ export class RoleComponent implements OnInit { ...@@ -27,17 +33,21 @@ export class RoleComponent implements OnInit {
nodes; nodes;
nodeList; nodeList;
roleId; roleId;
groupList = [];
moduleList = []; //菜单权限
resourceList = []; //主机分组权限
constructor(private fb: FormBuilder, private message: NzMessageService, constructor(private fb: FormBuilder, private message: NzMessageService, private overAllSer: OverAllService,
private systemSer: SystemService,private layoutSer:LayoutService,private commonSer:CommonService) { private systemSer: SystemService, private layoutSer: LayoutService, private commonSer: CommonService) {
} }
ngOnInit() { ngOnInit() {
this.ininForm(); this.ininForm();
this.getMenu(); this.getMenu();
this.getGroup();
} }
ininForm(){ ininForm() {
this.validateForm = this.fb.group({ this.validateForm = this.fb.group({
name: [null, [Validators.required]], name: [null, [Validators.required]],
status: [null, [Validators.required]], status: [null, [Validators.required]],
...@@ -46,24 +56,37 @@ export class RoleComponent implements OnInit { ...@@ -46,24 +56,37 @@ export class RoleComponent implements OnInit {
} }
//获取菜单栏 //获取菜单栏
getMenu(){ getMenu() {
this.layoutSer.getAllMenu().subscribe( this.layoutSer.getAllMenu().subscribe(
(res)=>{ (res) => {
if(res.errCode == 10000){ if (res.errCode == 10000) {
this.menuList =this.commonSer.listToTree('id','parentId',res.data); this.menuList = this.commonSer.listToTree('id', 'parentId', res.data);
this.menuList.forEach(res => { this.menuList.forEach(res => {
res.title = res.name; res.title = res.name;
res.key = res.id; res.key = res.id;
res.children.forEach((child)=>{ res.children.forEach((child) => {
child.title = child.name; child.title = child.name;
child.key = child.id; child.key = child.id;
child.isLeaf = true; child.isLeaf = true;
}) });
}); });
this.toNode(this.menuList); this.toNode(this.menuList);
} }
} }
) );
}
//获取分组
getGroup() {
this.groupList = [];
this.overAllSer.findGroup().subscribe(
(res) => {
this.groupList = res.data;
this.groupList.forEach(e => {
e.checked = false;
});
}
);
} }
toNode(data) { toNode(data) {
...@@ -79,19 +102,19 @@ export class RoleComponent implements OnInit { ...@@ -79,19 +102,19 @@ export class RoleComponent implements OnInit {
this.isVisible = true; this.isVisible = true;
} }
showEditModal(id){ showEditModal(id) {
this.title = "编辑角色"; this.title = '编辑角色';
this.isVisible = true; this.isVisible = true;
this.roleId = id; this.roleId = id;
this.systemSer.getRole(id).subscribe( this.systemSer.getRole(id).subscribe(
(res)=>{ (res) => {
if(res.errCode == 10000){ if (res.errCode == 10000) {
const data = res.data.role; const data = res.data.role;
data.status += ""; data.status += '';
this.validateForm.patchValue(data); this.validateForm.patchValue(data);
} }
} }
) );
} }
handleCancel(): void { handleCancel(): void {
...@@ -103,28 +126,36 @@ export class RoleComponent implements OnInit { ...@@ -103,28 +126,36 @@ export class RoleComponent implements OnInit {
this.validateForm.controls[i].markAsDirty(); this.validateForm.controls[i].markAsDirty();
this.validateForm.controls[i].updateValueAndValidity(); this.validateForm.controls[i].updateValueAndValidity();
} }
if (this.validateForm.invalid) { if (this.validateForm.invalid) {
return false; return false;
} }
if(this.title == "新增角色"){ let resourceArr = [];
this.create(); this.resourceList.forEach(e=>{
if(e.checked){
resourceArr.push(e.id);
}
})
if (this.title == '新增角色') {
this.create(resourceArr);
} }
if(this.title == "编辑角色"){ if (this.title == '编辑角色') {
this.update(); this.update(resourceArr);
} }
} }
//新增 //新增
create(){ create(resourceArr) {
const data = { const data = {
role:{ role: {
name:this.validateForm.value.name, name: this.validateForm.value.name,
status:this.validateForm.value.status, status: this.validateForm.value.status,
comment:this.validateForm.value.comment, comment: this.validateForm.value.comment,
}, },
modules:[], modules: this.moduleList,
resources:[] resources: resourceArr
}; };
this.systemSer.addRole(data).subscribe( this.systemSer.addRole(data).subscribe(
(res) => { (res) => {
...@@ -133,7 +164,7 @@ export class RoleComponent implements OnInit { ...@@ -133,7 +164,7 @@ export class RoleComponent implements OnInit {
this.add.emit(); this.add.emit();
this.ininForm(); this.ininForm();
this.message.success('新增成功'); this.message.success('新增成功');
}else{ } else {
this.message.error(res.errMsg); this.message.error(res.errMsg);
} }
} }
...@@ -141,16 +172,16 @@ export class RoleComponent implements OnInit { ...@@ -141,16 +172,16 @@ export class RoleComponent implements OnInit {
} }
//编辑 //编辑
update(){ update(resourceArr) {
const data = { const data = {
role:{ role: {
id:this.roleId, id: this.roleId,
name:this.validateForm.value.name, name: this.validateForm.value.name,
status:this.validateForm.value.status, status: this.validateForm.value.status,
comment:this.validateForm.value.comment, comment: this.validateForm.value.comment,
}, },
modules:[], modules: this.moduleList,
resources:[] resources: resourceArr
}; };
this.systemSer.editRole(data).subscribe( this.systemSer.editRole(data).subscribe(
(res) => { (res) => {
...@@ -159,16 +190,19 @@ export class RoleComponent implements OnInit { ...@@ -159,16 +190,19 @@ export class RoleComponent implements OnInit {
this.add.emit(); this.add.emit();
this.ininForm(); this.ininForm();
this.message.success('修改成功'); this.message.success('修改成功');
}else{ } else {
this.message.error(res.errMsg); this.message.error(res.errMsg);
} }
} }
); );
} }
selectCheckTree(e){ selectCheckTree(e) {
if (e.node.isChecked) {
this.moduleList.push(e.node.key);
} else {
const index = this.moduleList.indexOf(e.node.key);
this.moduleList.splice(index, 1);
}
} }
mouseAction(type,e){}
} }
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