Ngx-dell-sre NPM

✨ Features

DDS Styled SRE Components.
Written in TypeScript with predictable static types.
Powerful customization in every element.

☀️ License

🖥 Environment Support

Angular ^16.0.0
~~Server-side Rendering~~
Modern browsers including the following specific versions
~~Electron~~

| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

🎨 Design Specification

ngx-dell-sre synchronizes design specification with Dell Design System on a regular basis.

📦 Installation

More information about @angular/cli here.

You can also install ngx-dell-sre with npm or yarn

$  npm install ngx-dell-sre

Execute the bellow if you do not have the peer dependencies installed already or encounter peer dependency conflicts.

$  npm i ag-grid-angular@30.1.0 ag-grid-community@30.1.0 ag-grid-enterprise@30.1.0 chart.js@4.4.0 cronstrue@2.32.0 crypto-js@4.2.0 luxon@3.4.3 ng-zorro-antd@16.2.0

$  npm i --legacy-peer-deps ngx-dell-sre

🔨 Usage

Import the modules and components you would want to use into your app.module.ts file and feature modules.

import {
  DellSREIntegrationListComponent,
  DellSREModule,
  DellSRE_Service,
  NgxDellSREConfig,
} from 'ngx-dell-sre';

const appConfig: NgxDellSREConfig = {
  app: {
    name: 'Demo Application Name',
    id: 'demo_app@dell.com',
    secret:
      'VGhpcyBpcyBhIGJhc2U2NCBlbmNvZGluZyBzdHJpbmcgdG8gcmFuZG9tIGdlbmVyYXRlZCBzdHJpbmc=',
  },
  sso: {
    provider: 'none',
    appId: '',
    appSecret: '',
    appDomain: '',
    appServiceUrl: '',
  },
  api: {
    primary: '',
  },
  features: {
    dashboard: {
      overviewWidget: true,
      statusWidget: true,
      summaryWidget: true,
    },
    integrations: {
      files: true,
      restartLoading: false,
      list: {
        dataSourceLabel: 'Data Source',
        restart: true,
      },
      details: {
        restart: true,
        logs: true,
        tableCount: true,
      },
    },
    ecsExplorer: {
      sendMail: true,
      export: true,
      startIntegration: false,
      refreshExpanded: false,
    },
  },
  data: {
    agGridLicense: 'replace_your_ag_grid_license_here',
  },
};

@NgModule({
  imports: [DellSREModule, DellSREIntegrationListComponent],
})
export class AppModule {
  constructor(private dellSRE_Service: DellSRE_Service) {
    this.dellSRE_Service.setConfig(appConfig);
  }
}

@angular/cli users won't have to worry about the things below but it's good to know.

In your styles.scss file, import the base styles for ngx-dell-sre.

/* NG Zorro (Ant Design) */
@use 'node_modules/ng-zorro-antd/ng-zorro-antd.css';
/* Dell Design System */
@use 'node_modules/ngx-dell-sre/ngx-dell.css';
/* AG Grid */
@use 'node_modules/ag-grid-community/styles/ag-grid.css';
/* NGX Dell SRE */
@use 'node_modules/ngx-dell-sre/ngx-dell-sre.css';

In you app.routing.ts file, import the DellSREGuard and add it to the routes you want to protect.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {
  DellSREIntegrationDetailsComponent,
  DellSREIntegrationListComponent,
} from 'ngx-dell-sre';

const routes: Routes = [
  {
    path: 'integration',
    data: {
      title: 'Integrations',
      subtitle: 'Manage Integration Jobs',
      breadcrumb: 'Integrations',
    },
    children: [
      // Integrations
      {
        path: '',
        pathMatch: 'full',
        component: DellSREIntegrationListComponent,
        data: {
          title: 'Integrations',
          subtitle: 'Manage Integration Jobs',
          breadcrumb: 'Integrations',
        },
      },
      // Integration Details
      {
        path: ':id',
        component: DellSREIntegrationDetailsComponent,
        data: {
          title: 'Integration Details',
          breadcrumb: (route: any) => {
            return route.params.id;
          },
        },
      },
    ],
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}