[SECARSP-258] Device policies management component is implemented

diff --git a/dashboard/package-lock.json b/dashboard/package-lock.json
index d9bd6aa..53b5887 100644 (file)
--- a/dashboard/package-lock.json
+++ b/dashboard/package-lock.json
@@ -8686,6 +8686,11 @@
       "resolved": "https://registry.npmjs.org/ngx-logger/-/ngx-logger-1.1.2.tgz",
       "integrity": "sha1-//QiCP9KTHqmIf7z9nOgCHW9Yts="
     },
+    "ngx-toggle-switch": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/ngx-toggle-switch/-/ngx-toggle-switch-2.0.5.tgz",
+      "integrity": "sha1-7Z3ji09SdjYS8dAL5V33M3Dn0CA="
+    },
     "no-case": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz",

diff --git a/dashboard/package.json b/dashboard/package.json
index 1335d34..c40a91b 100644 (file)
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -49,7 +49,8 @@
     "typeface-exo": "0.0.22",
     "zone.js": "0.8.18",
     "ngx-logger": "1.1.2",
-    "angular2-toaster": "5.0.0"
+    "angular2-toaster": "5.0.0",
+    "ngx-toggle-switch": ""
   },
   "devDependencies": {
     "@angular/cli": "1.6.3",

diff --git a/dashboard/src/app/@theme/components/notifications/notifications.service.ts b/dashboard/src/app/@theme/components/notifications/notifications.service.ts
index 775cb73..2e24f89 100644 (file)
--- a/dashboard/src/app/@theme/components/notifications/notifications.service.ts
+++ b/dashboard/src/app/@theme/components/notifications/notifications.service.ts
@@ -8,23 +8,23 @@ export class NotificationsService {
 
   constructor(private toasterService: ToasterService) { }
 
-  default(title: string, content: string) {
+  default(title: string, content?: string) {
     this.showToast('default', title, content);
   }
 
-  info(title: string, content: string) {
+  info(title: string, content?: string) {
     this.showToast('info', title, content);
   }
 
-  success(title: string, content: string) {
+  success(title: string, content?: string) {
     this.showToast('success', title, content);
   }
 
-  warning(title: string, content: string) {
+  warning(title: string, content?: string) {
     this.showToast('warning', title, content);
   }
 
-  error(title: string, content: string) {
+  error(title: string, content?: string) {
     this.showToast('error', title, content);
   }
 

diff --git a/dashboard/src/app/components/device/device.component.html b/dashboard/src/app/components/device/device.component.html
new file mode 100644 (file)
index 0000000..27a9764
--- /dev/null
+++ b/dashboard/src/app/components/device/device.component.html
@@ -0,0 +1,89 @@
+<nb-flip-card>
+  <nb-card-front>
+    <nb-card size="xsmall" accent="{{(device.locked===0) ? 'success' : 'active'}}" class="device-card {{device.type.name}}">
+      <nb-card-body>
+        <div cass="row">
+          <button class="btn btn-icon btn-hero-info" type="button" (click)=toggleLock(device.id,device.locked)>
+            <div class="icon"></div>
+          </button>
+          <div class="info">
+            <div class="title font-w-bold">{{device.type.name | uppercase}}</div>
+            <div class="description font-w-light">{{device.model}}</div>
+          </div>
+          <div *ngIf="device.locked===1" class="locked"><i class="nb-locked"></i></div>
+        </div>
+      </nb-card-body>
+      <nb-card-footer>
+        <nb-actions size="small">
+          <nb-action>
+            <a class="icon-container" href="#/home/reports/{{device.id}}">
+              <i class="control-icon nb-list"></i>
+            </a>
+          </nb-action>
+          <nb-action>
+            <a class="icon-container" href="#/home/policies/{{device.id}}">
+                <i class="control-icon nb-gear"></i>
+            </a>
+          </nb-action>
+        </nb-actions>
+      </nb-card-footer>
+    </nb-card>
+  </nb-card-front>
+  <nb-card-back>
+    <nb-card size="xsmall" accent="{{(device.locked===0) ? 'success' : 'active'}}">
+      <nb-card-body>
+        <div class="row">
+          <div class="col-xxxl-12 col-md-12">
+            <h4 class="font-w-bold">COMMON</h4></div>
+        </div>
+        <div class="row">
+          <div class="col-xxxl-3 col-md-3 col-sm-3"><span class="font-w-bold">Type:</span></div>
+          <div class="col-xxxl-9 col-md-9 col-sm-9">{{device.type.name}}</div>
+        </div>
+        <div class="row">
+          <div class="col-xxxl-3 col-md-3 col-sm-3"><span class="font-w-bold">Model:</span></div>
+          <div class="col-xxxl-9 col-md-9 col-sm-9">{{device.model}}</div>
+        </div>
+        <div class="row">
+          <div class="col-xxxl-3 col-md-3 col-sm-3"><span class="font-w-bold">SN:</span></div>
+          <div class="col-xxxl-9 col-md-9 col-sm-9">{{device.sn}}</div>
+        </div>
+        <div class="row">
+          <div class="col-xxxl-3 col-md-3 col-sm-3"><span class="font-w-bold">Registered:</span></div>
+          <div class="col-xxxl-9 col-md-9 col-sm-9">{{device.ctime | date:'medium'}}</div>
+        </div>
+        <div class="row">
+          <div class="col-xxxl-12 col-md-12">
+            <h4 class="font-w-bold mt-3">OS</h4></div>
+        </div>
+        <div class="row">
+          <div class="col-xxxl-3 col-md-3 col-sm-3"><span class="font-w-bold">Name:</span></div>
+          <div class="col-xxxl-9 col-md-9 col-sm-9">{{device.os.name}}</div>
+        </div>
+        <div class="row">
+          <div class="col-xxxl-3 col-md-3 col-sm-3"><span class="font-w-bold">Version:</span></div>
+          <div class="col-xxxl-9 col-md-9 col-sm-9">{{device.os.version}}</div>
+        </div>
+        <div class="row">
+          <div class="col-xxxl-3 col-md-3 col-sm-3"><span class="font-w-bold">SW:</span></div>
+          <div class="col-xxxl-9 col-md-9 col-sm-9">{{device.os.sw}}</div>
+        </div>
+        <div class="row">
+          <div class="col-xxxl-12 col-md-12">
+            <h4 class="font-w-bold mt-3">GEO</h4></div>
+        </div>
+        <div class="row">
+          <div class="col-xxxl-3 col-md-3 col-sm-3"><span class="font-w-bold">Country:</span></div>
+          <div class="col-xxxl-9 col-md-9 col-sm-9">{{device.geo.country_name}}</div>
+        </div>
+        <div class="row mb-2">
+          <div class="col-xxxl-3 col-md-3 col-sm-3"><span class="font-w-bold">City:</span></div>
+          <div class="col-xxxl-9 col-md-9 col-sm-9">{{device.geo.city}}</div>
+        </div>
+      </nb-card-body>
+      <nb-card-footer>
+        <p></p>
+      </nb-card-footer>
+    </nb-card>
+  </nb-card-back>
+</nb-flip-card>

diff --git a/dashboard/src/app/pages/device/device.component.scss b/dashboard/src/app/components/device/device.component.scss
similarity index 97%
rename from dashboard/src/app/pages/device/device.component.scss
rename to dashboard/src/app/components/device/device.component.scss
index df91479..04c4f03 100644 (file)
--- a/dashboard/src/app/pages/device/device.component.scss
+++ b/dashboard/src/app/components/device/device.component.scss
@@ -87,9 +87,6 @@
     }
 
     nb-actions {
-        &:hover {
-            cursor: pointer;
-        }
         i {
             font-size: 2rem;
         }

diff --git a/dashboard/src/app/pages/device/device.component.ts b/dashboard/src/app/components/device/device.component.ts
similarity index 100%
rename from dashboard/src/app/pages/device/device.component.ts
rename to dashboard/src/app/components/device/device.component.ts

diff --git a/dashboard/src/app/pages/device/device.module.ts b/dashboard/src/app/components/device/device.module.ts
similarity index 100%
rename from dashboard/src/app/pages/device/device.module.ts
rename to dashboard/src/app/components/device/device.module.ts

diff --git a/dashboard/src/app/components/policy-group/policy-group.component.html b/dashboard/src/app/components/policy-group/policy-group.component.html
new file mode 100644 (file)
index 0000000..a374da1
--- /dev/null
+++ b/dashboard/src/app/components/policy-group/policy-group.component.html
@@ -0,0 +1,11 @@
+<nb-card>
+  <nb-card-header>
+    <h3>{{policyGroup.group | uppercase}} POLICIES</h3>
+  </nb-card-header>
+  <nb-card-body>
+    <sam-policy *ngFor="let policy of policyGroup.policies" [policy]="policy"></sam-policy>
+  </nb-card-body>
+  <nb-card-footer>
+    <button (click)="applyPolicies()" class="btn btn-success">Apply</button>
+  </nb-card-footer>
+</nb-card>

diff --git a/dashboard/src/app/components/policy-group/policy-group.component.scss b/dashboard/src/app/components/policy-group/policy-group.component.scss
new file mode 100644 (file)
index 0000000..47dc8bd
--- /dev/null
+++ b/dashboard/src/app/components/policy-group/policy-group.component.scss
@@ -0,0 +1,7 @@
+@import '../../@theme/styles/themes';
+@import '~@nebular/theme/styles/global/bootstrap/breakpoints';
+@import '~bootstrap/scss/mixins/breakpoints';
+
+.btn:hover {
+    cursor: pointer;
+}

diff --git a/dashboard/src/app/components/policy-group/policy-group.component.ts b/dashboard/src/app/components/policy-group/policy-group.component.ts
new file mode 100644 (file)
index 0000000..2091717
--- /dev/null
+++ b/dashboard/src/app/components/policy-group/policy-group.component.ts
@@ -0,0 +1,46 @@
+import { Component, Input } from '@angular/core';
+import { PolicyService } from '../../services/policy.service';
+import { PolicyGroup, UpdatedDevicePolicies, Device } from '../../models';
+import { NotificationsService } from '../../@theme/components/notifications/notifications.service';
+import { NGXLogger } from 'ngx-logger';
+
+@Component({
+  selector: 'sam-policy-group',
+  templateUrl: './policy-group.component.html',
+  styleUrls: ['./policy-group.component.scss'],
+})
+export class PolicyGroupComponent {
+  @Input() deviceId: number;
+  @Input() policyGroup: PolicyGroup;
+
+  constructor(private policyService: PolicyService,
+    private notifications: NotificationsService,
+    private logger: NGXLogger) { }
+
+  applyPolicies(): void {
+    let updatedPolicies: UpdatedDevicePolicies;
+
+    try {
+      updatedPolicies = new UpdatedDevicePolicies(this.policyGroup.policies);
+    } catch (e) {
+      this.logger.error(e.message);
+      this.notifications.error(e.message);
+
+      return;
+    }
+
+    this.policyService.setDevicePolicies(
+      this.deviceId,
+      updatedPolicies,
+    ).subscribe(
+      (policies) => {
+        this.policyGroup.policies = policies;
+        this.notifications.success('Policies successfully applied');
+      },
+      (error) => {
+        this.logger.error('Policies applying error');
+        this.notifications.error('Policies applying error');
+      },
+    );
+  }
+}

diff --git a/dashboard/src/app/components/policy-group/policy-group.module.ts b/dashboard/src/app/components/policy-group/policy-group.module.ts
new file mode 100644 (file)
index 0000000..c944f8d
--- /dev/null
+++ b/dashboard/src/app/components/policy-group/policy-group.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+
+import { ThemeModule } from '../../@theme/theme.module';
+import { PolicyGroupComponent } from './policy-group.component';
+import { PolicyModule } from '../policy/policy.module';
+
+
+@NgModule({
+  imports: [
+    ThemeModule,
+    PolicyModule,
+  ],
+  declarations: [
+    PolicyGroupComponent,
+  ],
+  exports: [
+    PolicyGroupComponent,
+  ],
+})
+export class PolicyGroupModule { }

diff --git a/dashboard/src/app/components/policy/policy.component.html b/dashboard/src/app/components/policy/policy.component.html
new file mode 100644 (file)
index 0000000..b1b29b7
--- /dev/null
+++ b/dashboard/src/app/components/policy/policy.component.html
@@ -0,0 +1,22 @@
+<div [ngSwitch]="policy.type" class="form-group row">
+  <label [attr.for]="policy.name" class="col-sm-3 col-form-label header">
+      <h5>{{policy.uiname}}</h5>
+  </label>
+  <div class="col-sm-9">
+    <ui-switch *ngSwitchCase="PolicyType.FLAG" [(ngModel)]="policy.value"></ui-switch>
+    <div *ngSwitchCase="PolicyType.INPUT_NUMBER" class="input-group">
+      <input [(ngModel)]="policy.value" [attr.id]="policy.name" type="number" class="form-control" />
+    </div>
+    <div *ngSwitchCase="PolicyType.MULTISELECT">
+      <nb-checkbox *ngFor="let item of policy.items" [(ngModel)]="item.value" (change)="lol()">{{item.key}}</nb-checkbox>
+    </div>
+    <div *ngSwitchCase="PolicyType.SELECT">
+      <label *ngFor="let item of policy.items" class="custom-control custom-radio" style="float:left;">
+          <input [checked]="item.value === 1" [value]="item.value" (change)="onRadioChange(item, $event)"
+                class="custom-control-input" name="select" type="radio">
+          <span class="custom-control-indicator"></span>
+          <span class="custom-control-description">{{item.key | uppercase}}</span>
+      </label>
+    </div>
+  </div>
+</div>

diff --git a/dashboard/src/app/components/policy/policy.component.scss b/dashboard/src/app/components/policy/policy.component.scss
new file mode 100644 (file)
index 0000000..b6befe7
--- /dev/null
+++ b/dashboard/src/app/components/policy/policy.component.scss
@@ -0,0 +1,3 @@
+@import '../../@theme/styles/themes';
+@import '~@nebular/theme/styles/global/bootstrap/breakpoints';
+@import '~bootstrap/scss/mixins/breakpoints';

diff --git a/dashboard/src/app/components/policy/policy.component.ts b/dashboard/src/app/components/policy/policy.component.ts
new file mode 100644 (file)
index 0000000..e642f24
--- /dev/null
+++ b/dashboard/src/app/components/policy/policy.component.ts
@@ -0,0 +1,24 @@
+import { Component, Input } from '@angular/core';
+import { ValuePolicy, SelectPolicy, PolicyType, SelectItem } from '../../models';
+
+@Component({
+  selector: 'sam-policy',
+  templateUrl: './policy.component.html',
+  styleUrls: ['./policy.component.scss'],
+})
+export class PolicyComponent {
+  @Input() policy: SelectPolicy | ValuePolicy;
+  PolicyType = PolicyType;
+
+  onRadioChange(item: SelectItem): void {
+    const newPolicy = new SelectPolicy(this.policy.name, this.policy.uiname,
+      this.policy.descr, this.policy.type, this.policy.state, (this.policy as SelectPolicy).items);
+    item.value = item.value === 0 ? 1 : 0;
+    newPolicy.setItem(item);
+    this.policy = newPolicy;
+  }
+
+  lol() {
+    console.info('azazazazaz');
+  }
+}

diff --git a/dashboard/src/app/components/policy/policy.module.ts b/dashboard/src/app/components/policy/policy.module.ts
new file mode 100644 (file)
index 0000000..26961a7
--- /dev/null
+++ b/dashboard/src/app/components/policy/policy.module.ts
@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { UiSwitchModule } from 'ngx-toggle-switch';
+import { ThemeModule } from '../../@theme/theme.module';
+import { PolicyComponent } from './policy.component';
+
+
+@NgModule({
+  imports: [
+    ThemeModule,
+    UiSwitchModule,
+  ],
+  declarations: [
+    PolicyComponent,
+  ],
+  exports: [
+    PolicyComponent,
+  ],
+})
+export class PolicyModule { }

diff --git a/dashboard/src/app/pages/device/device.component.html b/dashboard/src/app/pages/device/device.component.html
deleted file mode 100644 (file)
index c639cac..0000000
--- a/dashboard/src/app/pages/device/device.component.html
+++ /dev/null
@@ -1,80 +0,0 @@
-<nb-flip-card>
-  <nb-card-front>
-    <nb-card size="xsmall" accent="{{(device.locked===0) ? 'success' : 'active'}}" class="device-card {{device.type.name}}">
-      <nb-card-body>
-        <div cass="row">
-          <button class="btn btn-icon btn-hero-info" type="button" (click)=toggleLock(device.id,device.locked)>
-            <div class="icon"></div>
-          </button>
-          <div class="info">
-            <div class="title font-w-bold">{{device.type.name | uppercase}}</div>
-            <div class="description font-w-light">{{device.model}}</div>
-          </div>
-          <div *ngIf="device.locked===1" class="locked"><i class="nb-locked"></i></div>
-        </div>
-      </nb-card-body>
-      <nb-card-footer>
-        <nb-actions size="small">
-          <nb-action>
-            <i class="nb-list"></i><span>Reports</span>
-          </nb-action>
-          <nb-action>
-            <i class="nb-gear"></i><span>Policies</span>
-          </nb-action>
-        </nb-actions>
-      </nb-card-footer>
-    </nb-card>
-  </nb-card-front>
-  <nb-card-back>
-    <nb-card size="xsmall" accent="{{(device.locked===0) ? 'success' : 'active'}}">
-      <nb-card-body>
-          <div class="row">
-              <div class="col-xxxl-12 col-md-12"><h4 class="font-w-bold">COMMON</h4></div>
-          </div>
-          <div class="row">
-              <div class="col-xxxl-3 col-md-3 col-sm-3"><span class="font-w-bold">Type:</span></div>
-              <div class="col-xxxl-9 col-md-9 col-sm-9">{{device.type.name}}</div>
-          </div>
-          <div class="row">
-              <div class="col-xxxl-3 col-md-3 col-sm-3"><span class="font-w-bold">Model:</span></div>
-              <div class="col-xxxl-9 col-md-9 col-sm-9">{{device.model}}</div>
-          </div>
-          <div class="row">
-              <div class="col-xxxl-3 col-md-3 col-sm-3"><span class="font-w-bold">SN:</span></div>
-              <div class="col-xxxl-9 col-md-9 col-sm-9">{{device.sn}}</div>
-          </div>
-          <div class="row">
-              <div class="col-xxxl-3 col-md-3 col-sm-3"><span class="font-w-bold">Registered:</span></div>
-              <div class="col-xxxl-9 col-md-9 col-sm-9">{{device.ctime | date:'medium'}}</div>
-          </div>
-          <div class="row">
-              <div class="col-xxxl-12 col-md-12"><h4 class="font-w-bold mt-3">OS</h4></div>
-          </div>
-          <div class="row">
-              <div class="col-xxxl-3 col-md-3 col-sm-3"><span class="font-w-bold">Name:</span></div>
-              <div class="col-xxxl-9 col-md-9 col-sm-9">{{device.os.name}}</div>
-          </div>
-          <div class="row">
-              <div class="col-xxxl-3 col-md-3 col-sm-3"><span class="font-w-bold">Version:</span></div>
-              <div class="col-xxxl-9 col-md-9 col-sm-9">{{device.os.version}}</div>
-          </div>
-          <div class="row">
-              <div class="col-xxxl-3 col-md-3 col-sm-3"><span class="font-w-bold">SW:</span></div>
-              <div class="col-xxxl-9 col-md-9 col-sm-9">{{device.os.sw}}</div>
-          </div>
-          <div class="row">
-              <div class="col-xxxl-12 col-md-12"><h4 class="font-w-bold mt-3">GEO</h4></div>
-          </div>
-          <div class="row">
-              <div class="col-xxxl-3 col-md-3 col-sm-3"><span class="font-w-bold">Country:</span></div>
-              <div class="col-xxxl-9 col-md-9 col-sm-9">{{device.geo.country_name}}</div>
-          </div>
-          <div class="row mb-2">
-              <div class="col-xxxl-3 col-md-3 col-sm-3"><span class="font-w-bold">City:</span></div>
-              <div class="col-xxxl-9 col-md-9 col-sm-9">{{device.geo.city}}</div>
-          </div>
-      </nb-card-body>
-      <nb-card-footer><p></p></nb-card-footer>
-    </nb-card>
-  </nb-card-back>
-</nb-flip-card>

diff --git a/dashboard/src/app/pages/devices/devices.module.ts b/dashboard/src/app/pages/devices/devices.module.ts
index 20ce573..1d48db6 100644 (file)
--- a/dashboard/src/app/pages/devices/devices.module.ts
+++ b/dashboard/src/app/pages/devices/devices.module.ts
@@ -2,9 +2,8 @@ import { NgModule } from '@angular/core';
 
 import { ThemeModule } from '../../@theme/theme.module';
 import { DevicesComponent } from './devices.component';
-import { DeviceModule } from '../device/device.module';
-import { DeviceComponent } from '../device/device.component';
-import { DeviceService } from '../../services/device.service';
+import { DeviceModule } from '../../components/device/device.module';
+import { DeviceService } from '../../services';
 
 
 @NgModule({

diff --git a/dashboard/src/app/pages/pages-routing.module.ts b/dashboard/src/app/pages/pages-routing.module.ts
index c334ef7..5e28bf5 100644 (file)
--- a/dashboard/src/app/pages/pages-routing.module.ts
+++ b/dashboard/src/app/pages/pages-routing.module.ts
@@ -4,6 +4,7 @@ import { NgModule } from '@angular/core';
 import { PagesComponent } from './pages.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { DevicesComponent } from './devices/devices.component';
+import { PoliciesComponent } from './policies/policies.component';
 
 const routes: Routes = [{
   path: '',
@@ -18,6 +19,10 @@ const routes: Routes = [{
       component: DevicesComponent,
     },
     {
+      path: 'policies/:id',
+      component: PoliciesComponent,
+    },
+    {
       path: '',
       redirectTo: 'dashboard',
       pathMatch: 'full',

diff --git a/dashboard/src/app/pages/pages.component.ts b/dashboard/src/app/pages/pages.component.ts
index 2d1bc6d..6d181aa 100644 (file)
--- a/dashboard/src/app/pages/pages.component.ts
+++ b/dashboard/src/app/pages/pages.component.ts
@@ -13,6 +13,5 @@ import { MENU_ITEMS } from './pages-menu';
   `,
 })
 export class PagesComponent {
-
   menu = MENU_ITEMS;
 }

diff --git a/dashboard/src/app/pages/pages.module.ts b/dashboard/src/app/pages/pages.module.ts
index 80d6de7..8d30f73 100644 (file)
--- a/dashboard/src/app/pages/pages.module.ts
+++ b/dashboard/src/app/pages/pages.module.ts
@@ -3,7 +3,7 @@ import { NgModule } from '@angular/core';
 import { PagesComponent } from './pages.component';
 import { DashboardModule } from './dashboard/dashboard.module';
 import { DevicesModule } from './devices/devices.module';
-import { DeviceModule } from './device/device.module';
+import { PoliciesModule } from './policies/policies.module';
 import { PagesRoutingModule } from './pages-routing.module';
 import { ThemeModule } from '../@theme/theme.module';
 
@@ -16,8 +16,8 @@ const PAGES_COMPONENTS = [
     PagesRoutingModule,
     ThemeModule,
     DashboardModule,
-    DeviceModule,
     DevicesModule,
+    PoliciesModule,
   ],
   declarations: [
     ...PAGES_COMPONENTS,

diff --git a/dashboard/src/app/pages/policies/policies.component.html b/dashboard/src/app/pages/policies/policies.component.html
new file mode 100644 (file)
index 0000000..61c50f2
--- /dev/null
+++ b/dashboard/src/app/pages/policies/policies.component.html
@@ -0,0 +1,16 @@
+<div class="row">
+  <sam-device [device]="device" class="col-md-12 col-xxxl-3"></sam-device>
+  <div class="col-md-12 col-xxxl-9">
+    <nb-card>
+      <nb-card-body>
+        <nb-tabset>
+          <nb-tab *ngFor="let policyGroup of policies$ | async; let index = index"
+                tabTitle="{{policyGroup.group | uppercase}}"
+                active="{{(index===0) ? 'true' : 'false'}}">
+            <sam-policy-group [deviceId]="deviceId" [policyGroup]="policyGroup"></sam-policy-group>
+          </nb-tab>
+        </nb-tabset>
+      </nb-card-body>
+    </nb-card>
+  </div>
+</div>

diff --git a/dashboard/src/app/pages/policies/policies.component.ts b/dashboard/src/app/pages/policies/policies.component.ts
new file mode 100644 (file)
index 0000000..42594fb
--- /dev/null
+++ b/dashboard/src/app/pages/policies/policies.component.ts
@@ -0,0 +1,34 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import { PolicyService, DeviceService } from '../../services';
+import { ActivatedRoute } from '@angular/router';
+import { UpdatedDevicePolicies, Device, PolicyGroup } from '../../models';
+
+@Component({
+  selector: 'sam-policies',
+  templateUrl: './policies.component.html',
+})
+export class PoliciesComponent implements OnInit {
+  device: Device;
+  deviceId: number;
+  policies$: Observable<PolicyGroup[]>;
+
+  constructor(private policyService: PolicyService,
+    private route: ActivatedRoute,
+    private deviceService: DeviceService) {
+  }
+
+  ngOnInit() {
+    this.deviceId = +this.route.snapshot.paramMap.get('id');
+    this.getDevice()
+    this.getDevicePolicies();
+  }
+
+  private getDevicePolicies(): void {
+    this.policies$ = this.policyService.getDevicePolicies(this.deviceId);
+  }
+
+  private getDevice(): void {
+    this.deviceService.getDevice(this.deviceId).subscribe(device => this.device = device);
+  }
+}

diff --git a/dashboard/src/app/pages/policies/policies.module.ts b/dashboard/src/app/pages/policies/policies.module.ts
new file mode 100644 (file)
index 0000000..ec62363
--- /dev/null
+++ b/dashboard/src/app/pages/policies/policies.module.ts
@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+
+import { ThemeModule } from '../../@theme/theme.module';
+import { PoliciesComponent } from './policies.component';
+import { PolicyService, DeviceService } from '../../services';
+import { PolicyGroupModule } from '../../components/policy-group/policy-group.module';
+import { DeviceModule } from '../../components/device/device.module';
+
+
+
+@NgModule({
+  imports: [
+    ThemeModule,
+    PolicyGroupModule,
+    DeviceModule,
+  ],
+  declarations: [
+    PoliciesComponent,
+  ],
+  providers: [
+    PolicyService,
+  ],
+})
+export class PoliciesModule { }