overflow-webapp/src/packages/discovery/component/setting/setting.component.ts

import { Component, OnInit, AfterContentInit } from '@angular/core';
import { MatCheckboxChange } from '@angular/material';
import { Store, select } from '@ngrx/store';
import { RPCError } from 'packages/core/rpc/error';
import * as DiscoverySettingStore from '../../store/setting';
import { DiscoveryStartInfo } from '../../model';
import * as CIDR from 'ip-cidr';
import * as DiscoveryStore from '../../store/setting';
import { SettingSelector } from '../../store';

@Component({
  selector: 'of-setting',
  templateUrl: './setting.component.html',
  styleUrls: ['./setting.component.scss']
})
export class SettingComponent implements OnInit, AfterContentInit {

  settingSucceed$ = this.store.pipe(select(SettingSelector.select('isStart')));
  started = false;

  cidr;
  startIP;
  endIP;
  startPort;
  endPort;
  // private settingForm: FormGroup;
  hostChecked = true;
  portChecked = true;
  serviceChecked = true;

  serviceItems = [
    { name: 'MySQL' },
    { name: 'Redis' },
    { name: 'Tomcat' },
    { name: 'Nginx' },
  ];

  hosts = nodes;

  constructor(
    private store: Store<DiscoverySettingStore.State>,
  ) {
  }

  ngOnInit() {
    this.settingSucceed$.subscribe(
      (succeed: boolean) => {
        if (succeed) {
          this.started = true;
        }
      },
      (error: RPCError) => {
        console.log(error.response.message);
      }
    );
  }

  ngAfterContentInit() {
    this.cidr = '192.168.1.0/24';
    this.hostRange();
    this.portRange();
  }

  hostRange() {
    const cidr = new CIDR(this.cidr);
    if (!cidr.isValid()) {
      alert('Invalid cidr : ' + this.cidr);
      return;
    }
    this.startIP = cidr.addressStart.address;
    this.endIP = cidr.addressEnd.address;
  }

  portRange() {
    this.startPort = '1';
    this.endPort = '1024';
  }

  handleHostCheckChange(e: MatCheckboxChange) {
    this.hostChecked = true;
    e.source.checked = true;
  }

  handlePortCheckChange(e: MatCheckboxChange) {
    this.serviceChecked = false;
  }

  handleServiceCheckChange(e: MatCheckboxChange) {
  }

  discovery() {
    if (!this.portChecked) {
      this.startPort = '0';
      this.endPort = '0';
    }
    if (!this.serviceChecked) {

    }
    const startInfo: DiscoveryStartInfo = {
      startIp: this.startIP,
      endIP: this.endIP,
      startPort: this.startPort,
      endPort: this.endPort
    };
    this.store.dispatch(new DiscoverySettingStore.Setting(startInfo));
    this.started = true;
  }

}



const nodes = [
  {
    title: 'host - 3232235781',
    className: 'className3232235781',
    children: [
      {
        title: 'Port - 22',
        className: 'className22',
        children: [
          {
            title: 'SSH',
            className: 'classNameSSH'
          }
        ]
      },
      {
        title: 'Port - 80',
        className: 'className80',
        children: [
          {
            title: 'HTTP',
            className: 'classNameHTTP'
          }
        ]
      },
      {
        title: 'Port - 1936',
        className: 'className1936',
        children: [
          {
            title: 'HTTP',
            className: 'classNameHTTP'
          }
        ]
      }
    ]
  },
  {
    title: 'host - 3232235781',
    className: 'className3232235781',
    children: [
      {
        title: 'Port - 22',
        className: 'className22',
        children: [
          {
            title: 'SSH',
            className: 'classNameSSH'
          }
        ]
      },
      {
        title: 'Port - 80',
        className: 'className80',
        children: [
          {
            title: 'HTTP',
            className: 'classNameHTTP'
          }
        ]
      },
      {
        title: 'Port - 1936',
        className: 'className1936',
        children: [
          {
            title: 'HTTP',
            className: 'classNameHTTP'
          }
        ]
      }
    ]
  },
  {
    title: 'host - 3232235781',
    className: 'className3232235781',
    children: [
      {
        title: 'Port - 22',
        className: 'className22',
        children: [
          {
            title: 'SSH',
            className: 'classNameSSH'
          }
        ]
      },
      {
        title: 'Port - 80',
        className: 'className80',
        children: [
          {
            title: 'HTTP',
            className: 'classNameHTTP'
          }
        ]
      },
      {
        title: 'Port - 1936',
        className: 'className1936',
        children: [
          {
            title: 'HTTP',
            className: 'classNameHTTP'
          }
        ]
      }
    ]
  }
];