FUsion de ramas

f2c5f4ea · huriarte · dbfd7bb0 · 2caeab90 · f2c5f4ea · f2c5f4ea
Commit f2c5f4ea authored Sep 08, 2020 by huriarte
82 changed files
--- a/.editorconfig
+++ b/.editorconfig
 # Editor configuration, see https://editorconfig.org
 root = true
 [*]
 charset = utf-8
 indent_style = space
 indent_size = 2
 insert_final_newline = true
 trim_trailing_whitespace = true
 [*.md]
 max_line_length = off
 trim_trailing_whitespace = false
--- a/.gitignore
+++ b/.gitignore
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 # compiled output
 /dist
 /tmp
 /out-tsc
 # Only exists if Bazel was run
 /bazel-out
 # dependencies
 /node_modules
 # profiling files
 chrome-profiler-events*.json
 speed-measure-plugin*.json
 # IDEs and editors
 /.idea
 .project
 .classpath
 .c9/
 *.launch
 .settings/
 *.sublime-workspace
 # IDE - VSCode
 .vscode/*
 !.vscode/settings.json
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
 .history/*
 # misc
 /.sass-cache
 /connect.lock
 /coverage
 /libpeerconnection.log
 npm-debug.log
 yarn-error.log
 testem.log
 /typings
 # System Files
 .DS_Store
 Thumbs.db
--- a/README.md
+++ b/README.md
 # ByteBot
 This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.3.24.
 ## Development server
 Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
 ## Code scaffolding
 Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
 ## Build
 Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
 ## Running unit tests
 Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
 ## Running end-to-end tests
 Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
 ## Further help
 To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
--- a/angular.json
+++ b/angular.json
--- a/package.json
+++ b/package.json
 {
  "name": "bytebot-projects",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.1.0",
    "@angular-material-components/datetime-picker": "^2.0.4",
    "@angular/animations": "^8.2.14",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/material": "^8.2.3",
    "@angular/material-moment-adapter": "^9.2.0",
    "@angular/platform-browser": "^8.2.14",
    "@angular/platform-browser-dynamic": "^8.2.14",
    "@angular/router": "~8.2.14",
    "@babel/compat-data": "^7.8.0",
    "@ng-bootstrap/ng-bootstrap": "^5.1.5",
    "@ng-select/ng-select": "^3.7.3",
    "@ngx-translate/core": "^12.1.2",
    "@ngx-translate/http-loader": "^4.0.0",
    "@swimlane/ngx-datatable": "^16.0.3",
    "@swimlane/ngx-graph": "^6.2.0",
    "@types/jquery": "^3.3.34",
    "@xdf/commons": "^1.0.0",
    "@xdf/gallery": "^1.0.4",
    "@xdf/layouts": "^1.0.0",
    "@xdf/security": "^1.0.0",
    "@xdf/settings": "^1.0.2",
    "ace-builds": "^1.4.8",
    "angular-highcharts": "^9.0.2",
    "angular-marked": "^1.2.2",
    "bootstrap": "^4.4.1",
    "chart.js": "^2.9.3",
    "dagre": "^0.8.5",
    "date-fns": "^2.11.1",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "highcharts": "^8.0.4",
    "jquery": "^3.4.1",
    "jquery-slimscroll": "^1.3.8",
    "material-design-icons": "^3.0.1",
    "material-icons": "^0.3.1",
    "metismenu": "^3.0.6",
    "moment": "^2.22.1",
    "moment-timezone": "^0.5.31",
    "net": "^1.0.2",
    "ng-circle-progress": "^1.5.1",
    "ng-json-view": "^3.0.0",
    "ng2-ace-editor": "^0.3.9",
    "ng2-charts": "^2.3.0",
    "ng2-data-table": "^1.4.0",
    "ngx-bootstrap": "^4.3.0",
    "ngx-color": "^4.1.1",
    "ngx-echarts": "^4.2.2",
    "ngx-moment": "^3.5.0",
    "ngx-scrollbar": "^7.1.0",
    "ngx-slick-carousel": "^0.5.1",
    "ngx-toastr": "^10.0.4",
    "ngx-translate-multi-http-loader": "^3.0.0",
    "ngx-tribute": "^1.5.1",
    "nomnoml": "^0.6.2",
    "pace-js": "^1.0.2",
    "peity": "^3.3.0",
    "popper": "^1.0.1",
    "popper.js": "^1.16.1",
    "rxjs": "~6.4.0",
    "stompjs": "^2.3.3",
    "tributejs": "^5.1.3",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.25",
    "@angular/cli": "~8.3.24",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  }
 }
--- a/projects/bytebot-html/browserslist
+++ b/projects/bytebot-html/browserslist
 # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
 # For additional information regarding the format and rule options, please see:
 # https://github.com/browserslist/browserslist#queries
 # You can see what browsers were selected by your queries by running:
 #   npx browserslist
 > 0.5%
 last 2 versions
 Firefox ESR
 not dead
 not IE 9-11 # For IE 9-11 support, remove 'not'.
\ No newline at end of file
--- a/projects/bytebot-html/e2e/protractor.conf.js
+++ b/projects/bytebot-html/e2e/protractor.conf.js
 // @ts-check
 // Protractor configuration file, see link for more information
 // https://github.com/angular/protractor/blob/master/lib/config.ts
 const { SpecReporter } = require('jasmine-spec-reporter');
 /**
 * @type { import("protractor").Config }
 */
 exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './src/**/*.e2e-spec.ts'
  ],
  capabilities: {
    browserName: 'chrome'
  },
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function() {}
  },
  onPrepare() {
    require('ts-node').register({
      project: require('path').join(__dirname, './tsconfig.json')
    });
    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
  }
 };
\ No newline at end of file
--- a/projects/bytebot-html/e2e/src/app.e2e-spec.ts
+++ b/projects/bytebot-html/e2e/src/app.e2e-spec.ts
 import { AppPage } from './app.po';
 import { browser, logging } from 'protractor';
 describe('workspace-project App', () => {
  let page: AppPage;
  beforeEach(() => {
    page = new AppPage();
  });
  it('should display welcome message', () => {
    page.navigateTo();
    expect(page.getTitleText()).toEqual('bytebot-html app is running!');
  });
  afterEach(async () => {
    // Assert that there are no errors emitted from the browser
    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
    expect(logs).not.toContain(jasmine.objectContaining({
      level: logging.Level.SEVERE,
    } as logging.Entry));
  });
 });
--- a/projects/bytebot-html/e2e/src/app.po.ts
+++ b/projects/bytebot-html/e2e/src/app.po.ts
 import { browser, by, element } from 'protractor';
 export class AppPage {
  navigateTo() {
    return browser.get(browser.baseUrl) as Promise<any>;
  }
  getTitleText() {
    return element(by.css('app-root .content span')).getText() as Promise<string>;
  }
 }
--- a/projects/bytebot-html/e2e/tsconfig.json
+++ b/projects/bytebot-html/e2e/tsconfig.json
 {
  "extends": "../../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../../out-tsc/e2e",
    "module": "commonjs",
    "target": "es5",
    "types": [
      "jasmine",
      "jasminewd2",
      "node"
    ]
  }
 }
--- a/projects/bytebot-html/karma.conf.js
+++ b/projects/bytebot-html/karma.conf.js
 // Karma configuration file, see link for more information
 // https://karma-runner.github.io/1.0/config/configuration-file.html
 module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, '../../coverage/bytebot-html'),
      reports: ['html', 'lcovonly', 'text-summary'],
      fixWebpackSourcePaths: true
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    restartOnFileChange: true
  });
 };
--- a/projects/bytebot-html/src/app/app-routing.module.ts
+++ b/projects/bytebot-html/src/app/app-routing.module.ts
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { BaseLayoutComponent, NotFoundComponent } from '@xdf/layouts';
 import { AuthGuard, LoginComponent } from '@xdf/security';
 import { HomeComponent } from './views/home/home.component';
 const routes: Routes = [
  // Remover para SSO
  { path: 'login', component: LoginComponent },
  // Main redirect
  { path: '', redirectTo: 'home', pathMatch: 'full', canActivate: [AuthGuard] },
  {
    path: '', component: BaseLayoutComponent,
    children: [
      { path: 'home', component: HomeComponent, data: { breadcrumb: 'Home' } },
      {
        path: 'security', data: { breadcrumb: 'Seguridad' }, canLoad: [AuthGuard],
        loadChildren: () => import('./modules/security/security.module').then(m => m.SecurityModule)
      },
      {
        path: 'settings', data: { breadcrumb: 'Ajustes Generales' }, canLoad: [AuthGuard],
        loadChildren: () => import('./modules/settings/settings.module').then(m => m.SettingsModule)
      },
      {
        path: 'config', data: { breadcrumb: 'Agentes' }, canLoad: [AuthGuard],
        loadChildren: () => import('./modules/agent/agent.module').then(m => m.AgentModule)
-      }
+      },
+      {
-    ],
+        path: 'configuration', canLoad: [AuthGuard],
-    canActivate: [AuthGuard]
+        loadChildren: () => import('./modules/configuration/configuration.module').then(m => m.ConfigurationModule)
-  },
+      }
-  { path: 'notpermitted', component: NotFoundComponent},
+    ],
-  // Handle all other routes
+    canActivate: [AuthGuard]
-  { path: '**', component: NotFoundComponent}
+  },
-];
+  { path: 'notpermitted', component: NotFoundComponent},
-@NgModule({
+  // Handle all other routes
-  imports: [RouterModule.forRoot(routes, {
+  { path: '**', component: NotFoundComponent}
-    scrollPositionRestoration: 'enabled',
+];
-    anchorScrolling: 'enabled',
\ No newline at end of file
-    onSameUrlNavigation: 'ignore'
-  })],
-  exports: [RouterModule]
-})
-export class AppRoutingModule { }
\ No newline at end of file
--- a/projects/bytebot-html/src/app/app.component.spec.ts
+++ b/projects/bytebot-html/src/app/app.component.spec.ts
 import { TestBed, async } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
 describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));
  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  });
  it(`should have as title 'bytebot-html'`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('bytebot-html');
  });
  it('should render title', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('.content span').textContent).toContain('bytebot-html app is running!');
  });
 });
--- a/projects/bytebot-html/src/app/app.component.ts
+++ b/projects/bytebot-html/src/app/app.component.ts
 import { Component } from '@angular/core';
 @Component({
  selector: 'byte-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
  title = 'bytebot-html';
 }
--- a/projects/bytebot-html/src/app/interceptors/agent-fake-backend.interceptor.ts
+++ b/projects/bytebot-html/src/app/interceptors/agent-fake-backend.interceptor.ts
--- a/projects/bytebot-html/src/app/interceptors/custom-programs-fake-backend.interceptor.ts
+++ b/projects/bytebot-html/src/app/interceptors/custom-programs-fake-backend.interceptor.ts
 import { HttpRequest, HttpResponse, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
 import { Observable, of, throwError } from 'rxjs';
 import { delay, mergeMap, materialize, dematerialize } from 'rxjs/operators';
 import { Injectable } from '@angular/core';
 import * as source from '../../assets/fake-data/programs-data.json';
 import * as controlsSource from '../../assets/fake-data/controls-data.json';
 const basePath = '/service/security/programs';
 const basePathCotnrols = '/service/security/controls';
 @Injectable()
 export class CustomProgramsFakeBackendInterceptor implements HttpInterceptor {
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const { url, method, headers, body } = request;
        const data = (source as any).default;
        const dataControls = (controlsSource as any).default;
        return of(null)
            .pipe(mergeMap(handleRoute))
            .pipe(materialize())
            .pipe(delay(50))
            .pipe(dematerialize());
        function handleRoute() {
            switch (true) {
                case url.match('.*' + basePath) && method === 'GET':
                    return getList();
                case url.match('.*'+ basePathCotnrols + '.*') && method === 'GET':
                    return getControls();
                default:
                    // pass through any requests not handled above
                    return next.handle(request);
            }
        }
        function getList() {
            return ok(data);
        }
        function getControls() {
            return ok(dataControls);
        }
        // helper functions
        function ok(bodyContent?) {
            return of(new HttpResponse({ status: 200, body: bodyContent }));
        }
        function error(message: string) {
            return throwError({ error: { message } });
        }
    }
 }
--- a/projects/bytebot-html/src/app/modules/configuration/configuration-routing.module.ts
+++ b/projects/bytebot-html/src/app/modules/configuration/configuration-routing.module.ts
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { AuthGuard } from '@xdf/security';
+import { TemplateResolver, CrudDetailComponent, DirtyGuard, GridViewComponent, CrudGridComponent, RecordResolver } from '@xdf/gallery';
+import { ResourceAuthGuard } from '@xdf/security';
+import { UserRoleFormComponent, AccessDetailResolver } from '@xdf/settings';
+import { AgentComponent } from './view/agent/agent.component';
+const routes: Routes = [
+  {
+    path: 'agent', component: AgentComponent, canActivate: [AuthGuard, ResourceAuthGuard], 
+    data: {
+      program: 'agent',
+      breadcrumb: 'breadcrumb.agent'
+    }
+  },
+];
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ConfigurationRoutingModule { }
--- a/projects/bytebot-html/src/app/modules/configuration/configuration.module.ts
+++ b/projects/bytebot-html/src/app/modules/configuration/configuration.module.ts
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { ConfigurationRoutingModule } from './configuration-routing.module';
+import { AgentComponent } from './view/agent/agent.component';
+import { XdfGalleryModule } from '@xdf/gallery';
+import { MatProgressSpinnerModule, MatTableModule, MatSortModule, MatIconModule, MatTooltipModule, MatPaginatorModule, MatButtonModule } from '@angular/material';
+@NgModule({
+  declarations: [
+    AgentComponent
+  ],
+  imports: [
+    CommonModule,
+    ConfigurationRoutingModule,
+    FormsModule,
+    MatButtonModule,
+    MatIconModule,
+    MatPaginatorModule,
+    MatProgressSpinnerModule,
+    MatSortModule,
+    MatTableModule,
+    MatTooltipModule,
+    ReactiveFormsModule,
+    TranslateModule,
+    XdfGalleryModule
+  ]
+})
+export class ConfigurationModule { }
--- a/projects/bytebot-html/src/app/modules/configuration/services/agent.service.spec.ts
+++ b/projects/bytebot-html/src/app/modules/configuration/services/agent.service.spec.ts
+import { TestBed } from '@angular/core/testing';
+import { AgentService } from './agent.service';
+describe('AgentService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+  it('should be created', () => {
+    const service: AgentService = TestBed.get(AgentService);
+    expect(service).toBeTruthy();
+  });
+});
--- a/projects/bytebot-html/src/app/modules/configuration/services/agent.service.ts
+++ b/projects/bytebot-html/src/app/modules/configuration/services/agent.service.ts
+import { Injectable } from '@angular/core';
+import { DynaDataService } from '@xdf/gallery';
+import { HttpClient } from '@angular/common/http';
+@Injectable({
+  providedIn: 'root'
+})
+export class AgentService extends DynaDataService {
+  serviceURL = './service/agent';
+  constructor(private httpClient: HttpClient) {
+    super(httpClient);
+  }
+}
--- a/projects/bytebot-html/src/app/modules/configuration/view/agent/agent.component.html
+++ b/projects/bytebot-html/src/app/modules/configuration/view/agent/agent.component.html
+<div class="wrapper wrapper-content animated fadeInRight">
+    <div class="row">
+        <div class="col-lg-12">
+            <div class="ibox float-e-margins">
+                <div class="ibox-title">
+                    <h5>{{'label.external.systems' | translate}}</h5>
+                </div>
+                <div class="ibox-content">
+                    <div class="content">
+                        <div class="grid-ibox-content">
+                            <div class="filter-panel mat-elevation-z3">
+                                <xdf-ngx-tags-input name="name" class="input-lg" [fields]="fieldFilters"
+                                    (filterEvent)="onFilter($event)"></xdf-ngx-tags-input>
+                            </div>
+                            <br />
+                            <div class="grid-container mat-elevation-z3">
+                                <div class="spinner-container" *ngIf="dataSource?.loading$ | async">
+                                    <mat-spinner diameter="40"></mat-spinner>
+                                </div>
+                                <table class="crud-table table table-striped table-hover" mat-table
+                                    [dataSource]="dataSource" matSort [matSortActive]="sortColumn"
+                                    [matSortDirection]="sortDirection" matSortDisableClear multiTemplateDataRows>
+                                    <ng-container matColumnDef="{{template.name}}"
+                                        *ngFor="let template of columnTemplateArray">
+                                        <div *ngIf="template.sortable">
+                                            <th mat-header-cell *matHeaderCellDef mat-sort-header>
+                                                {{ template.title | translate }}
+                                                <mat-icon *ngIf="sortColumn===template?.name">
+                                                    <i class="fa fa-sort-amount-desc"
+                                                        *ngIf="sortDirection === 'desc'"></i>
+                                                    <i class="fa fa-sort-amount-asc"
+                                                        *ngIf="sortDirection === 'asc'"></i>
+                                                </mat-icon>
+                                            </th>
+                                        </div>
+                                        <div *ngIf="!template.sortable">
+                                            <th mat-header-cell *matHeaderCellDef>{{ template.title | translate }}
+                                            </th>
+                                        </div>
+                                        <td mat-cell *matCellDef="let item"
+                                            [style.width]="template.width ? template.width : ''"
+                                            [ngClass]="{'td-view': !this.resourceAuth['view']}" (click)="view(item)">
+                                            <span *ngIf="template['name'] !== 'avatar'">{{ item[template['name']] }}</span>
+                                            <img  *ngIf="template['name'] === 'avatar'" [src]="item[template['name']]" alt="Avatar" class="avatar">
+                                        </td>
+                                    </ng-container>
+                                    <ng-container matColumnDef="actions">
+                                        <th mat-header-cell *matHeaderCellDef></th>
+                                        <td class="text-center mat-cell cdk-column-actions mat-column-actions ng-star-inserted"
+                                            mat-cell="" role="gridcell" *matCellDef="let item">
+                                            <div class="btn-group">
+                                                <button class="btn btn-default btn-sm" (click)="edit(item)"
+                                                    *ngIf="this.resourceAuth['edit']" type="button">
+                                                    <i class="fa fa-edit"></i>
+                                                    <span class="visible-md-inline visible-lg-inline visible-xl-inline">
+                                                        {{'btn.edit' | translate}}
+                                                    </span>
+                                                </button>
+                                                <button class="btn btn-default btn-sm" (click)="delete(item)"
+                                                    *ngIf="this.resourceAuth['delete']" type="button">
+                                                    <i class="fa fa-trash"></i>
+                                                    <span class="visible-md-inline visible-lg-inline visible-xl-inline">
+                                                        {{'btn.delete' | translate}}
+                                                    </span>
+                                                </button>
+                                            </div>
+                                        </td>
+                                    </ng-container>
+                                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                                    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+                                </table>
+                                <div class="status-button-bar pull-left">
+                                    <button type="button" mat-icon-button
+                                        matTooltip="{{ 'action.grid.refresh' | translate }}" (click)="onRefresh()">
+                                        <i class="fa fa-refresh"></i>
+                                    </button>
+                                </div>
+                                <mat-paginator [length]="pagination?.totalItems" [pageSize]="pagination?.itemsPerPage"
+                                    [pageSizeOptions]="[5, 10, 15]" [pageIndex]="pagination?.currentPage">
+                                </mat-paginator>
+                            </div>
+                        </div>
+                        <!--Boton de Nuevo-->
+                        <div class="toolbar-option">
+                            <button color="default" mat-mini-fab="" class="mat-mini-fab"
+                                matTooltip="{{'btn.new' | translate}}" (click)="create()"
+                                *ngIf="this.resourceAuth['new']">
+                                <span><i class="fa fa-file-o"></i></span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
--- a/projects/bytebot-html/src/app/modules/configuration/view/agent/agent.component.scss
+++ b/projects/bytebot-html/src/app/modules/configuration/view/agent/agent.component.scss
+.toolbar-option {
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+  $fontcolor: #676a6c;
+  .content {
+    width: 100%;
+    display: flex;
+    padding-right: 0px !important;
+    .grid-container,
+    .filter-panel {
+      .crud-table {
+        margin-bottom: 0px;
+        width: 100%;
+      }
+      .form {
+        padding: 10px 20px 10px 20px;
+      }
+    }
+    .filter-panel {
+      margin-bottom: 10px;
+    }
+  }
+  .grid-ibox-content {
+    width: 100%;
+  }
+  .btn-group {
+    .btn {
+      font-size: 10px;
+    }
+  }
+  .td-view{
+    cursor: auto !important
+  }
+  .mat-row-auth:hover {
+    background-color: #f8f9fa;
+    cursor: pointer !important;
+  }
+  .spinner-container {
+    height: 100%;
+    width: 100%;
+    padding-top: 50px;
+    position: fixed;
+  }
+  .spinner-container {
+    height: 100%;
+    width: 100%;
+    padding-top: 50px;
+    position: fixed;
+  }
+  .spinner-container mat-spinner {
+    margin: -10px auto 0 auto;
+  }
+  th.mat-column-actions {
+    width: 1px !important;
+    padding-right: 0px !important;
+  }
+  td.mat-column-actions {
+    min-width: 170px;
+    padding-right: 20px !important;
+    cursor: default !important;
+  }
+  td {
+    vertical-align: middle !important;
+    color: $fontcolor;
+    font-size: 12px;
+  }
+  th {
+    vertical-align: middle !important;
+  }
+  tr.mat-header-row {
+    height: 50px !important;
+  }
+  tr.mat-footer-row,
+  tr.mat-row {
+    height: 40px !important;
+  }
+  .table-toolbar {
+    right: 10px;
+    top: 10px;
+    button {
+      font-size: 12px;
+    }
+  }
+  .status-button-bar {
+    button {
+      font-size: 16px;
+    }
+    padding-top: 8px;
+    padding-left: 15px;
+  }
+  .mat-raised-button {
+    padding: 0px 10px;
+  }
+  .icon-centered-button span.mat-button-wrapper {
+    display: flex;
+  }
+  .icon-centered-button mat-icon {
+    font-size: 15px;
+    padding-top: 2px;
+  }
+  ::ng-deep .mat-sort-header-arrow {
+    visibility: hidden;
+  }
+  ::ng-deep .mat-sort-header-button {
+    .mat-icon {
+      padding-left: 10px;
+      font-size: 12px;
+      padding-top: 5px;
+    }
+  }
+  th {
+    background: rgb(242, 242, 242);
+  }
+  tr.example-detail-row {
+    height: 0 !important;
+  }
+  tr.example-element-row:not(.example-expanded-row):hover {
+    background: #dedede;
+    cursor: pointer;
+  }
+  tr.example-element-row:not(.example-expanded-row):active {
+    background: #efefef;
+  }
+  .example-element-row td {
+    border-bottom-width: 0;
+  }
+  .example-element-detail {
+    overflow: hidden;
+    display: flex;
+  }
+  .example-detail-row td {
+    padding-top: 0px;
+    padding-bottom: 0px;
+    border: none !important;
+    background-color: #f2f2f2;
+  }
+  i.state {
+    font-size: 1.3em;
+  }
+  i.fa-key.pull-left {
+    color: rgba(128, 128, 128, 0.33);
+    margin-right: 6px;
+  }
+  //////
+  table {
+    width: 100%;
+  }
+  tr.mat-header-row {
+    height: 25px;
+  }
+  tr.mat-footer-row,
+  tr.mat-row {
+    height: 40px;
+  }
+  .button-grid {
+    margin: 2px 5px;
+    mat-icon {
+      padding-top: 2px;
+    }
+  }
+  .btn-header-new {
+    margin-top: -4px;
+  }
+  .btn-grid-filter {
+    height: 36px;
+    width: 85px;
+    padding-left: 0px;
+    padding-top: 2px;
+  }
+  .btn-grid-action {
+    padding: 0 10px;
+    line-height: 0em;
+  }
+  .mat-row:hover {
+    cursor: pointer;
+    background-color: #f8f9fa;
+  }
+  .spinner-container {
+    height: 100%;
+    width: 100%;
+    padding-top: 50px;
+    position: fixed;
+  }
+  .spinner-container mat-spinner {
+    margin: -10px auto 0 auto;
+  }
+  .mat-raised-button {
+    padding: 0px 10px;
+  }
+  .icon-centered-button span.mat-button-wrapper {
+    display: flex;
+  }
+  .icon-centered-button mat-icon {
+    font-size: 15px;
+    padding-top: 2px;
+  }
+  .ibox-content {
+    padding-right: 0px;
+  }
+  .content {
+    width: 100%;
+    display: flex;
+    padding-right: 0px !important;
+  }
+  .grid-ibox-content {
+    width: 100%;
+  }
+  .avatar {
+    vertical-align: middle;
+    width: 35px;
+    height: 35px;
+    border-radius: 50%;
+  }
\ No newline at end of file
--- a/projects/bytebot-html/src/app/modules/configuration/view/agent/agent.component.spec.ts
+++ b/projects/bytebot-html/src/app/modules/configuration/view/agent/agent.component.spec.ts
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { AgentComponent } from './agent.component';
+describe('AgentComponent', () => {
+  let component: AgentComponent;
+  let fixture: ComponentFixture<AgentComponent>;
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AgentComponent ]
+    })
+    .compileComponents();
+  }));
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AgentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/projects/bytebot-html/src/app/modules/configuration/view/agent/agent.component.ts
+++ b/projects/bytebot-html/src/app/modules/configuration/view/agent/agent.component.ts
+import { Component, OnInit, ViewChild, ViewContainerRef, Input } from '@angular/core';
+import { MatPaginator, MatSort } from '@angular/material';
+import { ColumnTemplate, DynaDataSource, ConfirmationDialogService, extractRSQL, FieldFilter } from '@xdf/gallery';
+import { Pagination, SortField, NotificationType, NotificationService } from '@xdf/commons';
+import { Router, ActivatedRoute } from '@angular/router';
+import { tap } from 'rxjs/operators';
+import { TagFilter } from '@xdf/gallery/lib/views/gallery/ngx-tags-input/model/tag-filter';
+import { TranslateService } from '@ngx-translate/core';
+import { AgentService } from '../../services/agent.service';
+const columnTemplateArray = [
+  {
+    name: 'avatar',
+    sortable: true,
+    title: 'etl_avatar',
+    visible: true,
+    filtable: true,
+    style: { width: 'auto' },
+    type: 'string',
+    aliasName: null,
+    queryName: null,
+    responsive: null,
+    styles: null,
+    values: null,
+    digitsInfo: null,
+    dateFormat: null,
+    colStyle: null
+  },
+  {
+    name: 'id',
+    sortable: true,
+    title: 'etl_code',
+    visible: true,
+    filtable: true,
+    style: { width: 'auto' },
+    type: 'number',
+    aliasName: null,
+    queryName: null,
+    responsive: null,
+    styles: null,
+    values: null,
+    digitsInfo: null,
+    dateFormat: null,
+    colStyle: null
+  },
+  {
+    name: 'name',
+    sortable: true,
+    title: 'etl_name',
+    visible: true,
+    filtable: true,
+    style: { width: 'auto' },
+    type: 'string',
+    aliasName: null,
+    queryName: null,
+    responsive: null,
+    styles: null,
+    values: null,
+    digitsInfo: null,
+    dateFormat: null,
+    colStyle: null
+  },
+  {
+    name: 'version',
+    sortable: true,
+    title: 'etl_version',
+    visible: true,
+    filtable: true,
+    style: { width: 'auto' },
+    type: 'string',
+    aliasName: null,
+    queryName: null,
+    responsive: null,
+    styles: null,
+    values: null,
+    digitsInfo: null,
+    dateFormat: null,
+    colStyle: null
+  },
+  {
+    name: 'status',
+    sortable: true,
+    title: 'etl_status',
+    visible: true,
+    filtable: true,
+    style: { width: 'auto' },
+    type: 'string',
+    aliasName: null,
+    queryName: null,
+    responsive: null,
+    styles: null,
+    values: null,
+    digitsInfo: null,
+    dateFormat: null,
+    colStyle: null
+  },
+  {
+    name: 'country',
+    sortable: true,
+    title: 'etl_country',
+    visible: true,
+    filtable: true,
+    style: { width: 'auto' },
+    type: 'string',
+    aliasName: null,
+    queryName: null,
+    responsive: null,
+    styles: null,
+    values: null,
+    digitsInfo: null,
+    dateFormat: null,
+    colStyle: null
+  },
+  {
+    name: 'timezone',
+    sortable: true,
+    title: 'etl_timezone',
+    visible: true,
+    filtable: true,
+    style: { width: 'auto' },
+    type: 'string',
+    aliasName: null,
+    queryName: null,
+    responsive: null,
+    styles: null,
+    values: null,
+    digitsInfo: null,
+    dateFormat: null,
+    colStyle: null
+  }
+];
+const fieldFilters = [
+  new FieldFilter('etl_code', 'id', 'id', 'number', undefined),
+  new FieldFilter('etl_abbreviation', 'abbreviation', 'abbreviation', 'string', undefined),
+  new FieldFilter('etl_name', 'name', 'name', 'string', undefined),
+];
+@Component({
+  selector: 'byte-agent',
+  templateUrl: './agent.component.html',
+  styleUrls: ['./agent.component.scss']
+})
+export class AgentComponent implements OnInit {
+  @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;
+  @ViewChild(MatSort, { static: false }) sort: MatSort;
+  sortColumn: string;
+  sortDirection: string;
+  statusQuickFilter: string;
+  pagingSize = 10;
+  programIdentifier = 'agent';
+  columnTemplateArray: ColumnTemplate[];
+  dataSource: DynaDataSource;
+  displayedColumns = new Array<string>();
+  fieldFilters: Array<FieldFilter> = fieldFilters;
+  filterTags = [];
+  pagination: Pagination;
+  public resourceAuth: any;
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private agentService: AgentService,
+    private notificationService: NotificationService,
+    private translateService: TranslateService,
+    protected confirmationDialogService: ConfirmationDialogService,
+    protected vcRef: ViewContainerRef
+  ) { }
+  ngAfterViewInit(): void {
+    this.sort.sortChange.subscribe(() => {
+      if (!this.sort.disabled && this.sort.active) {
+        this.pagination.sortFields = new Array();
+        const sortField: SortField = new SortField();
+        sortField.direction = this.sortDirection = this.sort.direction;
+        sortField.field = this.sortColumn = this.sort.active;
+        this.pagination.sortFields.push(sortField);
+      }
+      this.paginator.pageIndex = 0;
+      this.dataSource.load(this.pagination);
+    });
+    this.paginator.page
+      .pipe(
+        tap(() => {
+          this.pagination.currentPage = this.paginator.pageIndex;
+          this.pagination.itemsPerPage = this.paginator.pageSize;
+          this.dataSource.load(this.pagination);
+        })
+      )
+      .subscribe();
+  }
+  ngOnInit() {
+    this.sortColumn = 'id';
+    this.sortDirection = 'asc';
+    const authList = this.route.snapshot.paramMap['authorization'];
+    if (authList) {
+      this.resourceAuth = new Object();
+      authList.forEach(option => {
+        this.resourceAuth[option] = true;
+      });
+    }
+    this.columnTemplateArray = columnTemplateArray;
+    this.dataSource = new DynaDataSource(this.agentService);
+    const previousState = JSON.parse(localStorage.getItem(this.programIdentifier + '-state'));
+    if (previousState) {
+      const PAG = 'pagination';
+      const FILTERS = 'filtersTags';
+      this.pagination = previousState[PAG];
+      this.filterTags = previousState[FILTERS];
+      localStorage.removeItem(this.programIdentifier + '-state');
+    } else {
+      // Paginación
+      this.pagination = new Pagination();
+      this.pagination.currentPage = 0;
+      this.pagination.itemsPerPage = this.pagingSize;
+      this.pagination.filterExpression = "id != 0";
+      // Ordenación por defecto
+      if (this.sortColumn && this.sortDirection) {
+        this.pagination.sortFields = new Array();
+        const sortField: SortField = new SortField();
+        sortField.direction = this.sortDirection;
+        sortField.field = this.sortColumn;
+        this.pagination.sortFields.push(sortField);
+      }
+    }
+    // calculando la columnas a pintar
+    this.columnTemplateArray.forEach(column => {
+      this.displayedColumns.push(column.name);
+    });
+    this.displayedColumns.push('actions');
+    this.dataSource.load(this.pagination);
+  }
+  onFilter(tags: Array<TagFilter>) {
+    this.filterTags = tags;
+    this.pagination.currentPage = 0;
+    // let tagsTemp = tags.slice();
+    const tagsTemp = tags.map(a => Object.assign({}, a));
+    for (let i = 0; i < tagsTemp.length; i++) {
+      if (tagsTemp[i].column !== 'id') {
+        tagsTemp[i].value = tagsTemp[i].value;
+      }
+    }
+    this.pagination.filterExpression = extractRSQL(tagsTemp);
+    if (this.pagination.filterExpression == null || this.pagination.filterExpression == undefined) {
+      this.pagination.filterExpression = "id != 0";
+    }
+    this.dataSource.load(this.pagination);
+  }
+  onRefresh() {
+    this.dataSource.load(this.pagination);
+  }
+  delete(item) {
+    this.confirmationDialogService.loadComponent(
+      this.vcRef,
+      'title.delete.confirmation',
+      'message.delete.confirmation').subscribe(result => {
+        if (result) {
+          this.agentService.delete(item.id).subscribe((rslt: any) => {
+            if (rslt.statusCode != 200) {
+              this.notificationService.showMessage(
+                this.translateService.instant(rslt.message), this.translateService.instant('label.error.message.title'), NotificationType.error);
+            } else {
+              this.dataSource.load(this.pagination);
+            }
+          }
+          );
+        }
+      });
+  }
+  edit(item) {
+    this.router.navigate(['/etl/external-system/detail/edit/' + item.id]);
+  }
+  view(item) {
+    this.router.navigate(['/etl/external-system/detail/view/' + item.id]);
+  }
+  create() {
+    this.router.navigate(['/etl/external-system/detail/new']);
+  }
+}
--- a/projects/bytebot-html/src/app/modules/security/security-routing.module.ts
+++ b/projects/bytebot-html/src/app/modules/security/security-routing.module.ts
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { AuthGuard } from '@xdf/security';
 import { TemplateResolver, CrudDetailComponent, DirtyGuard, GridViewComponent, CrudGridComponent, RecordResolver } from '@xdf/gallery';
 import { ResourceAuthGuard } from '@xdf/security';
 import { UserRoleFormComponent, AccessDetailResolver } from '@xdf/settings';
 const routes: Routes = [
  {
    path: 'user-role', component: GridViewComponent, canActivate: [AuthGuard, ResourceAuthGuard], 
    resolve: { template: TemplateResolver },
    data: {
      program: 'user_role',
      breadcrumb: 'breadcrumb.user.role'
    }
  },
  {
    path: 'user-role/detail/:mode', component: UserRoleFormComponent, canActivate: [AuthGuard, ResourceAuthGuard], canDeactivate: [DirtyGuard],
    resolve: { record: RecordResolver, accessList: AccessDetailResolver },
    data: {
      program: 'user_role',
      breadcrumb: 'breadcrumb.user.role.detail'
    }
  },
  {
    path: 'user', component: CrudGridComponent, canActivate: [AuthGuard, ResourceAuthGuard], 
    resolve: { template: TemplateResolver },
    data: {
      innerTemplate: 'none',
      program: 'user',
      breadcrumb: 'breadcrumb.user'
    }
  },
  {
    path: 'user/detail/:mode', component: CrudDetailComponent, canActivate: [AuthGuard, ResourceAuthGuard], canDeactivate: [DirtyGuard],
    resolve: { record: RecordResolver },
    data: {
      program: 'user',
      breadcrumb: 'breadcrumb.user.detail'
    }
  }
 ];
 @NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
 })
 export class SecurityRoutingModule { }
--- a/projects/bytebot-html/src/app/modules/security/security.module.ts
+++ b/projects/bytebot-html/src/app/modules/security/security.module.ts
 import { NgModule } from '@angular/core';
 import { DirtyGuard, XdfGalleryModule } from '@xdf/gallery';
 import { SecurityRoutingModule } from './security-routing.module';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { TranslateModule } from '@ngx-translate/core';
 import { XdfSettingsModule } from '@xdf/settings';
 @NgModule({
  declarations: [
  ],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    TranslateModule,
    XdfGalleryModule,
    XdfSettingsModule,
    SecurityRoutingModule
  ],
  entryComponents:[
  ],
  providers: [
    { provide: DirtyGuard, useClass: DirtyGuard }
  ]
 })
 export class SecurityModule { }
--- a/projects/bytebot-html/src/app/modules/settings/settings-routing.module.ts
+++ b/projects/bytebot-html/src/app/modules/settings/settings-routing.module.ts
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { AuthGuard } from '@xdf/security';
 import { DirtyGuard, TemplateResolver, CrudGridComponent, EditableDataTableTemplateResolver, CrudDetailComponent, FormViewComponent, ListResolver, RecordResolver } from '@xdf/gallery';
 import { ResourceAuthGuard } from '@xdf/security';
 import { ApplicationFormComponent, ValposFormComponent } from '@xdf/settings';
 import { TabsLayoutComponent, TabsTemplateResolver } from '@xdf/layouts';
 const routes: Routes = [
  {
    path: "system-settings", component: TabsLayoutComponent, 
    resolve: { template: TabsTemplateResolver },
    data: {
      templateName: "system-settings",
    },
    children: [
      { path: 'information', component: FormViewComponent, canActivate: [AuthGuard, ResourceAuthGuard], canDeactivate: [DirtyGuard],
      resolve: { record: ListResolver },
        data: {
          option: 'information',
          program: 'system_settings_information',
          breadcrumb: 'breadcrumb.settings.information' 
        } 
      },
      { path: 'information/:mode', component: FormViewComponent, canActivate: [AuthGuard, ResourceAuthGuard], canDeactivate: [DirtyGuard],
      resolve: { ecord: ListResolver },
        data: {
          withoutGrid: true,
          option: 'information',
          program: 'system_settings_information',
          breadcrumb: 'breadcrumb.settings.information' 
        } 
      },
      { path: 'password', component: FormViewComponent, canActivate: [AuthGuard, ResourceAuthGuard], canDeactivate: [DirtyGuard],
      resolve: { record: ListResolver },
        data: {
          option: 'password',
          program: 'system_settings_password',
          breadcrumb: 'breadcrumb.settings.password' 
        } 
      },
      { path: 'password/:mode', component: FormViewComponent, canActivate: [AuthGuard, ResourceAuthGuard], canDeactivate: [DirtyGuard],
      resolve: { record: ListResolver },
        data: {
          withoutGrid: true,
          option: 'password',
          program: 'system_settings_password',
          breadcrumb: 'breadcrumb.settings.password' 
        } 
      },
      { path: 'userpolicy', component: FormViewComponent, canActivate: [AuthGuard, ResourceAuthGuard], canDeactivate: [DirtyGuard],
      resolve: { record: ListResolver },
        data: {
          option: 'userpolicy',
          program: 'system_settings_userpolicy',
          breadcrumb: 'breadcrumb.settings.userpolicy' 
        } 
      },
      { path: 'userpolicy/:mode', component: FormViewComponent, canActivate: [AuthGuard, ResourceAuthGuard], canDeactivate: [DirtyGuard],
      resolve: { record: ListResolver },
        data: {
          withoutGrid: true,
          option: 'userpolicy',
          program: 'system_settings_userpolicy',
          breadcrumb: 'breadcrumb.settings.userpolicy' 
        } 
      }
    ]
  },
  {
    path: 'application', component: CrudGridComponent, canActivate: [AuthGuard, ResourceAuthGuard],
    resolve: { template: TemplateResolver },
    data: {
      program: 'application',
      breadcrumb: 'breadcrumb.application'
    }
  },
  {
    path: 'application/detail/:mode', component: ApplicationFormComponent, canActivate: [AuthGuard, ResourceAuthGuard], canDeactivate: [DirtyGuard],
    resolve: { record: RecordResolver },
    data: {
      program: 'application',
      breadcrumb: 'breadcrumb.application.detail'
    }
  },
  {
    path: 'valpos', component: CrudGridComponent, canActivate: [AuthGuard, ResourceAuthGuard],
    resolve: { template: TemplateResolver },
    data: {
      program: 'valpos',
      breadcrumb: 'breadcrumb.valpos'
    }
  },
  {
    path: 'valpos/detail/:mode', component: ValposFormComponent, canActivate: [AuthGuard, ResourceAuthGuard], canDeactivate: [DirtyGuard],
    resolve: { record: RecordResolver, editableTableTemplate: EditableDataTableTemplateResolver },
    data: {
      program: 'valpos',
      breadcrumb: 'breadcrumb.valpos.detail',
      editableTableTemplate: 'valpos-detail'
    }
  }
 ];
 @NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
 })
 export class SettingsRoutingModule { }
--- a/projects/bytebot-html/src/app/modules/settings/settings.module.ts
+++ b/projects/bytebot-html/src/app/modules/settings/settings.module.ts
 import { NgModule } from '@angular/core';
 import { DirtyGuard, XdfGalleryModule, EditableDataTableTemplateResolver } from '@xdf/gallery';
 import { SettingsRoutingModule } from './settings-routing.module';
 import { TranslateModule } from '@ngx-translate/core';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { MatFormFieldModule, MatSelectModule, MatTooltipModule, MatButtonModule } from '@angular/material';
 import { XdfSettingsModule } from '@xdf/settings';
 import { XdfLayoutsModule } from '@xdf/layouts';
 @NgModule({
  declarations: [
    ],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    TranslateModule,
    SettingsRoutingModule,
    MatFormFieldModule,
    MatSelectModule,
    MatTooltipModule,
    XdfGalleryModule,
    XdfSettingsModule,
    XdfLayoutsModule,
    MatButtonModule
  ],
  entryComponents: [
  ],
  providers: [
    { provide: DirtyGuard, useClass: DirtyGuard },
    EditableDataTableTemplateResolver
  ]
 })
 export class SettingsModule { }
--- a/projects/bytebot-html/src/app/views/home/home.component.html
+++ b/projects/bytebot-html/src/app/views/home/home.component.html
 <p>home works!</p>
--- a/projects/bytebot-html/src/app/views/home/home.component.spec.ts
+++ b/projects/bytebot-html/src/app/views/home/home.component.spec.ts
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { HomeComponent } from './home.component';
 describe('HomeComponent', () => {
  let component: HomeComponent;
  let fixture: ComponentFixture<HomeComponent>;
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ HomeComponent ]
    })
    .compileComponents();
  }));
  beforeEach(() => {
    fixture = TestBed.createComponent(HomeComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
  it('should create', () => {
    expect(component).toBeTruthy();
  });
 });
--- a/projects/bytebot-html/src/app/views/home/home.component.ts
+++ b/projects/bytebot-html/src/app/views/home/home.component.ts
 import { Component, OnInit } from '@angular/core';
 @Component({
  selector: 'byte-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
 })
 export class HomeComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
 }
--- a/projects/bytebot-html/src/assets/data/gmt.json
+++ b/projects/bytebot-html/src/assets/data/gmt.json
 [
    {
        "view":"(UTC-11:00) Midway, Niue, Pago Pago",
        "gmt":"-11:00"
    },
    {
        "view":"(UTC-10:00) Honolulu, Tahiti",
        "gmt":"-10:00"
    },
    {
        "view":"(UTC-9:30) Marquesas",
        "gmt":"-9:30"
    },
    {
        "view":"(UTC-9:00) Juneau, Nome, Gambier",
        "gmt":"-9:00"
    },
    {
        "view":"(UTC-8:00) Dawson, Los Angeles, Tijuana, Vancouver",
        "gmt":"-8:00"
    },
    {
        "view":"(UTC-7:00) Boise, Phoenix, Edmonton, Inuvik",
        "gmt":"-7:00"
    },
    {
        "view":"(UTC-6:00) Belize, Chicago, Costa Rica, El Salvador, Guatemala, Managua, Mexico City",
        "gmt":"-6:00"
    },
    {
        "view":"(UTC-5:00) Bogota, Cancun, Detroit, Lima, New York, Panama, Toronto",
        "gmt":"-5:00"
    },
    {
        "view":"(UTC-4:00) Aruba, Barbados, Caracas, Guyana, La Paz, Manaus, Santiago, Puerto Rico",
        "gmt":"-4:00"
    },
    {
        "view":"(UTC-3:30) St Johns",
        "gmt":"-3:30"
    },
    {
        "view":"(UTC-3:00) Buenos Aires, Bahia, Cayenne, Montevideo",
        "gmt":"-3:00"
    },
    {
        "view":"(UTC-2:00) Noronha, South Georgia",
        "gmt":"-2:00"
    },
    {
        "view":"(UTC-1:00) Scoresbysund, Azores, Cape Verde",
        "gmt":"-1:00"
    },
    {
        "view":"(UTC) Hora universal coordinada",
        "gmt":"0:00"
    },
    {
        "view":"(UTC+1:00) Algiers, Madrid, Berlin, Bruselas, Lagos, Túnez, Niamey, Amsterdam",
        "gmt":"+1:00"
    },
    {
        "view":"(UTC+2:00) Cairo, Harare, Tripoli, Gaza, Atenas",
        "gmt":"+2:00"
    },
    {
        "view":"(UTC+3:00) Qatar, Moscú, Simferopol ",
        "gmt":"+3:00"
    },
    {
        "view":"(UTC+3:30) Tehran",
        "gmt":"+3:30"
    },
    {
        "view":"(UTC+4:00) Baku, Dubai",
        "gmt":"+4:00"
    },
    {
        "view":"(UTC+4:30) Kabul ",
        "gmt":"+4:30"
    },
    {
        "view":"(UTC+5:00) Mawson, Aqtobe, Karachi, Maldivas",
        "gmt":"+5:00"
    },
    {
        "view":"(UTC+5:30) Colombo, Kolkata ",
        "gmt":"+5:30"
    },
    {
        "view":"(UTC+5:45) Kathmandu",
        "gmt":"+5:45"
    },
    {
        "view":"(UTC+6:00) Bishkek, Novosibirsk, Qyzylorda",
        "gmt":"+6:00"
    },
    {
        "view":"(UTC+7:00) Bangkok, Indonesia, Barnaul ",
        "gmt":"+7:00"
    },
    {
        "view":"(UTC+8:00) Macau, Shanghai, Singapore",
        "gmt":"+8:00"
    },
    {
        "view":"(UTC+8:30)  Pyongyang",
        "gmt":"+8:30"
    },
    {
        "view":"(UTC+8:45) Eucla",
        "gmt":"+8:45"
    },
    {
        "view":"(UTC+9:00) Chita, Jayapura, Tokyo, Palau",
        "gmt":"+9:00"
    },
    {
        "view":"(UTC+9:30) Darwin, Adelaide",
        "gmt":"+9:30"
    },
    {
        "view":"(UTC+10:00) Vladivostok, Brisbane, Hobart",
        "gmt":"+10:00"
    },
    {
        "view":"(UTC+10:30) Lord Howe",
        "gmt":"+10:30"
    },
    {
        "view":"(UTC+11:00) Magadan, Bougainville, Guadalcanal",
        "gmt":"+11:00"
    },
    {
        "view":"(UTC+12:00) Kamchatka, Auckland, Majuro",
        "gmt":"+12:00"
    },
    {
        "view":"(UTC+12:45) Chatham",
        "gmt":"+12:45"
    },
    {
        "view":"(UTC+13:00) Apia, Enderbury, Tongatapu ",
        "gmt":"+13:00"
    },
    {
        "view":"(UTC+14:00) Kiritimati ",
        "gmt":"+14:00"
    }
 ]
\ No newline at end of file
--- a/projects/bytebot-html/src/assets/data/navigation.json
+++ b/projects/bytebot-html/src/assets/data/navigation.json
 [
    {
        "id": 30,
        "name": "security",
        "label": "menu.security",
        "icon": "<i class=\"fa fa-address-book\"></i>",
        "fullPath": "/security",
        "singlePath": "security",
        "isProgram": false,
        "children": [
            {
                "id": 32,
                "name": "user",
                "label": "menu.security.user",
                "icon": null,
                "fullPath": "/security/user",
                "singlePath": "user",
                "isProgram": true,
                "children": []
            },
            {
                "id": 32,
                "name": "user_role",
                "label": "menu.security.user.role",
                "icon": null,
                "fullPath": "/security/user-role",
                "singlePath": "user-role",
                "isProgram": true,
                "children": []
            }
        ]
    },
    {
        "id": 37,
        "name": "agent",
        "label": "menu.parent.agent",
        "icon": "<i class=\"fa fa-cog\"></i>",
        "fullPath": "/config/agent",
        "singlePath": "config",
        "isProgram": true,
        "children": []
    }
 ]
--- a/projects/bytebot-html/src/assets/definitions/definitions.json
+++ b/projects/bytebot-html/src/assets/definitions/definitions.json
 [
    { "user": "./assets/definitions/security-definitions/user.json" },
    { "user_role": "./assets/definitions/security-definitions/user-role.json" },
    { "system_settings_information": "./assets/definitions/setting-definitions/system-settings-information.json" },
    { "system_settings_password": "./assets/definitions/setting-definitions/system-settings-password.json" },
    { "system_settings_userpolicy": "./assets/definitions/setting-definitions/system-settings-userpolicy.json" },
    { "application": "./assets/definitions/setting-definitions/application.json" },
    { "valpos": "./assets/definitions/setting-definitions/valpos.json"}
 ]
\ No newline at end of file
--- a/projects/bytebot-html/src/assets/definitions/editable-table-definitions/valpos-detail.json
+++ b/projects/bytebot-html/src/assets/definitions/editable-table-definitions/valpos-detail.json
 {
    "label": {
        "type": "text",
        "required": true
    },
    "value": {
        "type": "text",
        "required": true
    }
 }
\ No newline at end of file
--- a/projects/bytebot-html/src/assets/definitions/security-definitions/user-role.json
+++ b/projects/bytebot-html/src/assets/definitions/security-definitions/user-role.json
 {
  "name": "user_role",
  "title": "user.role.title",
  "fieldToShowInActon": "identifier",
  "icon": "<span class=\"material-icons\">supervisor_account</span>",
  "service": "./service/user-role",
  "recordId": "id",
  "showFormIn": "standard",
  "definitionReport": "user-role-report-1",
  "attributes": [
    {
      "name": "id",
      "type": "number",
      "formOptions": {
        "options": {
          "hideInNew": true,
          "readonly": true,
          "styleClass": "col-xs-3 col-sm-6  col-md-3"
        },
        "validators": [
          "required"
        ],
        "controlType": "number"
      }
    },
    {
      "name": "identifier",
      "type": "string",
      "formOptions": {
        "options": {
          "styleClass": "col-md-6",
          "showLength": true,
          "maxLength": 80
        },
        "validators": [
          "required"
        ]
      }
    },
    {
      "name": "description",
      "type": "string",
      "formOptions": {
        "options": {
          "styleClass": "col-md-6",
          "showLength": true,
          "maxLength": 120
        },
        "validators": [
          "required"
        ]
      }
    }
  ],
  "grid": [
    {
      "sortColumnDefault": "id",
      "sortColumnDirection": "desc",
      "pagingSize": 5,
      "expandRow": false,
      "columns": [
        {
          "name": "id",
          "sortable": true,
          "style": {"width": "100px"},
          "optional": false,
          "filter": true
        },
        {
          "name": "identifier",
          "sortable": true,
          "style": {"width": "180px"},
          "filter": true
        },
        {
          "name": "description",
          "sortable": true,
          "style": {"width": "180px"},
          "filter": true
        }
      ]
    }
  ]
 }
\ No newline at end of file
--- a/projects/bytebot-html/src/assets/definitions/security-definitions/user.json
+++ b/projects/bytebot-html/src/assets/definitions/security-definitions/user.json
--- a/projects/bytebot-html/src/assets/definitions/setting-definitions/application.json
+++ b/projects/bytebot-html/src/assets/definitions/setting-definitions/application.json
--- a/projects/bytebot-html/src/assets/definitions/setting-definitions/system-settings-information.json
+++ b/projects/bytebot-html/src/assets/definitions/setting-definitions/system-settings-information.json
 {
  "name": "system_settings_information",
  "title": "system_settings_information_title",
  "titleDesc": "system_settings_information_title_desc",
  "icon": "<i class=\"fa fa-info-circle fa-2x\"></i>",
  "service": "./service/system-settings/information",
  "attributes": [
    {
      "name": "name",
      "type": "string",
      "formOptions": {
        "options": {
          "max-length": "200",
          "styleClass": "col-12"
        },
        "validators": [
          "required"
        ]
      }
    },
    {
      "name": "email",
      "type": "string",
      "formOptions": {
        "options": {
          "rightIcon": "mail",
          "rightIconLabel": "",
          "showLength": true,
          "maxLength": 200,
          "styleClass": "col-12"
        },
        "validators": [
          "required",
          "email"
        ]
      }
    },
    {
      "name": "domain",
      "type": "string",
      "formOptions": {
        "options": {
          "rightIcon": "http",
          "rightIconLabel": "",
          "showLength": true,
          "maxLength": 200,
          "styleClass": "col-12"
        },
        "validators": [
          "required",
          "url"
        ]
      }
    },
    {
      "name": "image",
      "type": "file-upload",
      "formOptions": {
        "options": {
          "text": "btn.upload.image",
          "param": "file",
          "target": "./service/file/upload",
          "height": "250px",
          "styleClass": "col-6"
        },
        "controlType": "file-upload"
      }
    }
  ],
  "groups": [
    {
      "name": "info",
      "title": "",
      "description": "settings_information_group_info_description",
      "controls": [
        "name",
        "email",
        "domain",
        ["image"]
      ]
    }
  ]
 }
\ No newline at end of file
--- a/projects/bytebot-html/src/assets/definitions/setting-definitions/system-settings-password.json
+++ b/projects/bytebot-html/src/assets/definitions/setting-definitions/system-settings-password.json
 {
  "name": "system_settings_password",
  "title": "system_settings_password_title",
  "titleDesc": "system_settings_password_title_desc",
  "icon": "<i class=\"fa fa-key fa-2x\"></i>",
  "service": "./service/system-settings/password",
  "attributes": [
    {
      "name": "includeUppercase",
      "type": "boolean",
      "formOptions": {
        "options": {
          "showSuggest": true,
          "styleClass": "col-12"
        },
        "controlType": "checkbox"
      }
    },
    {
      "name": "includeNumber",
      "type": "boolean",
      "formOptions": {
        "options": {
          "showSuggest": true,
          "styleClass": "col-12"
        },
        "controlType": "checkbox"
      }
    },
    {
      "name": "notIncludeUserId",
      "type": "boolean",
      "formOptions": {
        "options": {
          "showSuggest": true,
          "styleClass": "col-12"
        },
        "controlType": "checkbox"
      }
    },
    {
      "name": "notIncludeReverseUserId",
      "type": "boolean",
      "formOptions": {
        "options": {
          "showSuggest": true,
          "styleClass": "col-12"
        },
        "controlType": "checkbox"
      }
    },
    {
      "name": "passwordMinLength",
      "type": "boolean",
      "formOptions": {
        "options": {
          "showSuggest": true,
          "styleClass": "col-12"
        },
        "controlType": "checkbox"
      }
    }
  ]
 }
\ No newline at end of file
--- a/projects/bytebot-html/src/assets/definitions/setting-definitions/system-settings-userpolicy.json
+++ b/projects/bytebot-html/src/assets/definitions/setting-definitions/system-settings-userpolicy.json
 {
  "name": "system_settings_userpolicy",
  "title": "system_settings_userpolicy_title",
  "titleDesc": "system_settings_userpolicy_title_desc",
  "icon": "<i class=\"fa fa-user-secret fa-2x\"></i>",
  "service": "./service/system-settings/userpolicy",
  "attributes": [
    {
      "name": "maxFailLogin",
      "type": "number",
      "formOptions": {
        "options": {
          "showSuggest": true,
          "styleClass": "col-12"
        },
        "validators": [
          "required",
          {
            "name": "min",
            "value": 0
          },
          {
            "name": "max",
            "value": 99
          }
        ],
        "controlType": "number"
      }
    },
    {
      "name": "historyValidation",
      "type": "number",
      "formOptions": {
        "options": {
          "showSuggest": true,
          "styleClass": "col-12"
        },
        "validators": [
          "required",
          {
            "name": "min",
            "value": 0
          },
          {
            "name": "max",
            "value": 99
          }
        ],
        "controlType": "number"
      }
    },
    {
      "name": "userInactivity",
      "type": "number",
      "formOptions": {
        "options": {
          "showSuggest": true,
          "styleClass": "col-12"
        },
        "validators": [
          "required",
          {
            "name": "min",
            "value": 0
          },
          {
            "name": "max",
            "value": 99
          }
        ],
        "controlType": "number"
      }
    },
    {
      "name": "passwordExpiration",
      "type": "number",
      "formOptions": {
        "options": {
          "showSuggest": true,
          "styleClass": "col-12"
        },
        "validators": [
          "required",
          {
            "name": "min",
            "value": 0
          },
          {
            "name": "max",
            "value": 99
          }
        ],
        "controlType": "number"
      }
    },
    {
      "name": "automaticUnlock",
      "type": "number",
      "formOptions": {
        "options": {
          "showSuggest": true,
          "styleClass": "col-12"
        },
        "validators": [
          "required",
          {
            "name": "min",
            "value": 0
          },
          {
            "name": "max",
            "value": 99
          }
        ],
        "controlType": "number"
      }
    },
    {
      "name": "manageAccountByEmail",
      "type": "boolean",
      "formOptions": {
        "options": {
          "showSuggest": true,
          "styleClass": "col-12"
        },
        "controlType": "checkbox"
      }
    }
  ]
 }
\ No newline at end of file
--- a/projects/bytebot-html/src/assets/definitions/setting-definitions/valpos.json
+++ b/projects/bytebot-html/src/assets/definitions/setting-definitions/valpos.json
--- a/projects/bytebot-html/src/assets/definitions/tabs-definition/system-settings.json
+++ b/projects/bytebot-html/src/assets/definitions/tabs-definition/system-settings.json
 [
    {
        "name": "system_settings_information",
        "label": "tabs.system.settings.information.title",
        "description": "tabs.system.settings.information.title.desc",
        "path": "/settings/system-settings/information",
        "icon": "<i class=\"fa fa-info-circle fa-1_5x\"></i>"
    },
    {
        "name": "system_settings_password",
        "label": "tabs.system.settings.password.title",
        "description": "tabs.system.settings.password.title.desc",
        "path": "/settings/system-settings/password",
        "icon": "<i class=\"fa fa-key fa-1_5x\"></i>"
    },
    {
        "name": "system_settings_userpolicy",
        "label": "tabs.system.settings.userpolicy.title",
        "description": "tabs.system.settings.userpolicy.title.desc",
        "path": "/settings/system-settings/userpolicy",
        "icon": "<i class=\"fa fa-user-secret fa-1_5x\"></i>"
    }
 ]
\ No newline at end of file
--- a/projects/bytebot-html/src/assets/fake-data/controls-data.json
+++ b/projects/bytebot-html/src/assets/fake-data/controls-data.json
 [
    "view",
    "edit",
    "delete",
    "new"
 ]
\ No newline at end of file
--- a/projects/bytebot-html/src/assets/fake-data/user-country-code-data.json
+++ b/projects/bytebot-html/src/assets/fake-data/user-country-code-data.json
 [
    {"id": 1, "name": "Perú (+51)", "code": "+51"},
    {"id": 2, "name": "Chile (+52)", "code": "+52"},
    {"id": 3, "name": "México (+53)", "code": "+53"}
 ]
\ No newline at end of file
--- a/projects/bytebot-html/src/assets/fake-data/user-data.json
+++ b/projects/bytebot-html/src/assets/fake-data/user-data.json
--- a/projects/bytebot-html/src/assets/fake-data/user-role-data.json
+++ b/projects/bytebot-html/src/assets/fake-data/user-role-data.json
 [
    { "id": 1, "identifier": "ADMIN", "description": "Aministración" },
    { "id": 2, "identifier": "XDFUSER", "description": "XdfUser" }
 ]
\ No newline at end of file
--- a/projects/bytebot-html/src/assets/fonts/glyphicons-halflings-regular.svg
+++ b/projects/bytebot-html/src/assets/fonts/glyphicons-halflings-regular.svg
--- a/projects/bytebot-html/src/assets/i18n/commons/en.json
+++ b/projects/bytebot-html/src/assets/i18n/commons/en.json
 {
    "title.error": "Error",
    "title.http.error": "Http Error",
    "title.not.http.error": "Error!"
 }
\ No newline at end of file
--- a/projects/bytebot-html/src/assets/i18n/commons/es.json
+++ b/projects/bytebot-html/src/assets/i18n/commons/es.json
 {
    "title.error": "Error",
    "title.http.error": "Error Http",
    "title.not.http.error": "Error!"
 }
\ No newline at end of file
--- a/projects/bytebot-html/src/assets/i18n/en.json
+++ b/projects/bytebot-html/src/assets/i18n/en.json
 {
    "home.subtitle": "Welcome to XDF Project",
    "home.comments": "It is an application skeleton for a typical web app. You can use it to quickly bootstrap your webapp projects and dev environment."
 }
\ No newline at end of file
--- a/projects/bytebot-html/src/assets/i18n/es.json
+++ b/projects/bytebot-html/src/assets/i18n/es.json
 {
    "home.subtitle": "Bienvenido al proyecto XDF",
-    "home.comments": "Este proyecto presenta una aplicación web típica. Puede usarlo como un marco de referencia para el desarrollo de sus aplicaciones web."
+    "home.comments": "Este proyecto presenta una aplicación web típica. Puede usarlo como un marco de referencia para el desarrollo de sus aplicaciones web.",
+    "etl_avatar": "Avatar",
+    "etl_code": "ID",
+    "etl_name": "Nombre",
+    "etl_version": "Versión",
+    "etl_status": "Estado",
+    "etl_country": "País",
+    "etl_timezone": "Zona horaria"
 }
\ No newline at end of file
--- a/projects/bytebot-html/src/assets/i18n/gallery/en.json
+++ b/projects/bytebot-html/src/assets/i18n/gallery/en.json
--- a/projects/bytebot-html/src/assets/i18n/gallery/es.json
+++ b/projects/bytebot-html/src/assets/i18n/gallery/es.json
--- a/projects/bytebot-html/src/assets/i18n/layouts/en.json
+++ b/projects/bytebot-html/src/assets/i18n/layouts/en.json
--- a/projects/bytebot-html/src/assets/i18n/layouts/es.json
+++ b/projects/bytebot-html/src/assets/i18n/layouts/es.json
--- a/projects/bytebot-html/src/assets/i18n/menu/en.json
+++ b/projects/bytebot-html/src/assets/i18n/menu/en.json
--- a/projects/bytebot-html/src/assets/i18n/menu/es.json
+++ b/projects/bytebot-html/src/assets/i18n/menu/es.json
--- a/projects/bytebot-html/src/assets/i18n/security/en.json
+++ b/projects/bytebot-html/src/assets/i18n/security/en.json
--- a/projects/bytebot-html/src/assets/i18n/security/es.json
+++ b/projects/bytebot-html/src/assets/i18n/security/es.json
--- a/projects/bytebot-html/src/assets/i18n/settings/en.json
+++ b/projects/bytebot-html/src/assets/i18n/settings/en.json
--- a/projects/bytebot-html/src/assets/i18n/settings/es.json
+++ b/projects/bytebot-html/src/assets/i18n/settings/es.json
--- a/projects/bytebot-html/src/assets/styles/_style.scss
+++ b/projects/bytebot-html/src/assets/styles/_style.scss
 @import "~bootstrap/scss/bootstrap";
 @import "./css/animate";
 @import "./css/inspinia";
 @import '~@swimlane/ngx-datatable/index.css';
 @import "~@ng-select/ng-select/themes/default.theme.css";
 @import './css/ngx-datatable/bootstrap';
 @import './css/ngx-datatable/material';
\ No newline at end of file
--- a/projects/bytebot-html/src/assets/styles/css/_animate.scss
+++ b/projects/bytebot-html/src/assets/styles/css/_animate.scss
--- a/projects/bytebot-html/src/assets/styles/css/_custom.scss
+++ b/projects/bytebot-html/src/assets/styles/css/_custom.scss
--- a/projects/bytebot-html/src/assets/styles/css/_inspinia.scss
+++ b/projects/bytebot-html/src/assets/styles/css/_inspinia.scss
--- a/projects/bytebot-html/src/assets/styles/css/ngx-datatable/_bootstrap.scss
+++ b/projects/bytebot-html/src/assets/styles/css/ngx-datatable/_bootstrap.scss
--- a/projects/bytebot-html/src/assets/styles/css/ngx-datatable/_material.scss
+++ b/projects/bytebot-html/src/assets/styles/css/ngx-datatable/_material.scss
--- a/projects/bytebot-html/src/assets/styles/google-robot.css
+++ b/projects/bytebot-html/src/assets/styles/google-robot.css
--- a/projects/bytebot-html/src/environments/environment.prod.ts
+++ b/projects/bytebot-html/src/environments/environment.prod.ts
--- a/projects/bytebot-html/src/environments/environment.ts
+++ b/projects/bytebot-html/src/environments/environment.ts
--- a/projects/bytebot-html/src/index.html
+++ b/projects/bytebot-html/src/index.html
--- a/projects/bytebot-html/src/main.ts
+++ b/projects/bytebot-html/src/main.ts
--- a/projects/bytebot-html/src/polyfills.ts
+++ b/projects/bytebot-html/src/polyfills.ts
--- a/projects/bytebot-html/src/test.ts
+++ b/projects/bytebot-html/src/test.ts
--- a/projects/bytebot-html/tsconfig.app.json
+++ b/projects/bytebot-html/tsconfig.app.json
--- a/projects/bytebot-html/tsconfig.spec.json
+++ b/projects/bytebot-html/tsconfig.spec.json
--- a/projects/bytebot-html/tslint.json
+++ b/projects/bytebot-html/tslint.json
--- a/tsconfig.json
+++ b/tsconfig.json
--- a/tslint.json
+++ b/tslint.json
--- a/vendor/inspinia/inspinia.js
+++ b/vendor/inspinia/inspinia.js
--- a/vendor/metismenu/metisMenu.js
+++ b/vendor/metismenu/metisMenu.js