ITC-3591 - Wizard: NGINX Status

src/app/app.routes.ts

@@ -43,6 +43,7 @@ import { ms365ModuleRoutes } from './modules/ms365_module/ms365_module.routes';
 import { mshypervModuleRoutes } from './modules/mshyperv_module/mshyperv_module.routes';
 import { ciscoModuleRoutes } from './modules/cisco_module/cisco_module.routes';
 import { broadcomProxyModuleRoutes } from './modules/broadcomproxy_module/broadcomproxy_module.routes';
+import { nginxModuleRoutes } from './modules/nginx_module/nginx_module.routes';
 
 @Component({
     selector: 'legacy-redirect',
@@ -107,7 +108,8 @@ const moduleRoutes: Routes = [
     ...ms365ModuleRoutes,
     ...mshypervModuleRoutes,
     ...ciscoModuleRoutes,
-    ...broadcomProxyModuleRoutes
+    ...broadcomProxyModuleRoutes,
+    ...nginxModuleRoutes
 ];
 /***    Core routes   ***/
 const coreRoutes: Routes = [{

src/app/modules/nginx_module/nginx_module.routes.ts

@@ -0,0 +1,9 @@
+import { Routes } from '@angular/router';
+import { NginxComponent } from './pages/wizards/nginx/nginx.component';
+
+export const nginxModuleRoutes: Routes = [
+    {
+        path: 'nginx_module/wizards/nginx/:hostId/nginx',
+        loadComponent: () => import('./pages/wizards/nginx/nginx.component').then(m => NginxComponent),
+    },
+];

src/app/modules/nginx_module/pages/wizards/nginx/nginx-wizard.interface.ts

@@ -0,0 +1,31 @@
+import { WizardGet, WizardPost } from '../../../../../pages/wizards/wizards.interface';
+
+// WIZARD GET
+export interface NginxWizardGet extends WizardGet {
+}
+
+
+export interface Servicecommandargumentvalue {
+    commandargument: Commandargument
+    commandargument_id: number
+    created: string
+    id: number
+    modified: string
+    servicetemplate_id: number
+    value: string
+}
+
+export interface Commandargument {
+    command_id: number
+    created: string
+    human_name: string
+    id: number
+    modified: string
+    name: string
+}
+
+
+// WIZARD POST
+export interface NginxWizardPost extends WizardPost {
+}
+

src/app/modules/nginx_module/pages/wizards/nginx/nginx-wizard.service.ts

@@ -0,0 +1,40 @@
+import { Injectable } from '@angular/core';
+import { catchError, map, Observable, of } from 'rxjs';
+import { WizardsService } from '../../../../../pages/wizards/wizards.service';
+import { GenericResponseWrapper, GenericValidationError } from '../../../../../generic-responses';
+import { NginxWizardGet, NginxWizardPost, } from './nginx-wizard.interface';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class NginxWizardService extends WizardsService {
+
+    public fetch(hostId: number): Observable<NginxWizardGet> {
+        return this.http.get<NginxWizardGet>(`${this.proxyPath}/nginx_module/wizards/nginx/${hostId}.json?angular=true`).pipe(
+            map((data: NginxWizardGet): NginxWizardGet => {
+                return data;
+            })
+        );
+    }
+
+    public submit(post: NginxWizardPost): Observable<GenericResponseWrapper> {
+        return this.http.post<any>(`${this.proxyPath}/nginx_module/wizards/nginx.json?angular=true`, post)
+            .pipe(
+                map(data => {
+                    return {
+                        success: true,
+                        data: null
+                    };
+                }),
+                catchError((error: any) => {
+                    const err = error.error.error as GenericValidationError;
+                    return of({
+                        success: false,
+                        data: err
+                    });
+                })
+            );
+    }
+
+
+}

src/app/modules/nginx_module/pages/wizards/nginx/nginx.component.html

@@ -0,0 +1,119 @@
+<ng-container *transloco="let t">
+
+    <nav aria-label="breadcrumb" class="mt-3">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a [routerLink]="['/']">
+                    <fa-icon [icon]="['fas', 'home']"></fa-icon>
+                    {{ t('Home') }}
+                </a></li>
+            <li aria-current="page" class="breadcrumb-item">
+                <a [routerLink]="['/', 'wizards', 'index']">
+                    <fa-icon [icon]="['fas', 'wand-sparkles']"></fa-icon>
+                    {{ t('Wizards') }}
+                </a></li>
+            <li aria-current="page" class="breadcrumb-item active">
+                <fa-icon [icon]="['fas', 'server']"></fa-icon>
+                {{ t('nginx Status') }}
+            </li>
+        </ol>
+    </nav>
+
+    <c-card>
+        <c-card-header>
+            <h5 cCardTitle>
+                {{ t('Configuration Wizard: nginx Status') }}
+            </h5>
+        </c-card-header>
+        <c-card-body class="p-0">
+            <div class="row m-0 text-center mb-3" style="min-height: 22px;">
+                <div
+                    class="col-xs-12 col-md-4 col-lg-2 wizard-bg-inactive d-inline-flex align-items-center justify-content-center wizard-success">
+                    <span>
+                        <fa-icon [icon]="['fas', 'info-circle']"></fa-icon>
+                        {{ t('Host Information') }}
+                    </span>
+                </div>
+                <div
+                    class="col-xs-12 col-md-4 col-lg-2 wizard-bg-inactive d-inline-flex align-items-center justify-content-center wizard-active">
+                    <span>
+                        <fa-icon [icon]="['fas', 'info-circle']"></fa-icon>
+                        {{ t('Configure services for nginx Status') }}
+                    </span>
+                </div>
+                <div class="col-lg-6 wizard-bg-inactive d-inline-flex">
+                </div>
+                <div class="col-xs-12 col-md-4 col-lg-2 ps-0 pe-0 wizard-bg-inactive">
+                    <div class="btn-group btn-group-xs w-100 h-100">
+                        <button type="button" class="btn btn-primary"
+                                [title]="'Back' | transloco"
+                                style="border-radius: 0;"
+                                [fallbackUrl]="['wizards', 'index']"
+                                oitcBackButton>
+                            <i class="fa fa-arrow-left"></i>
+                        </button>
+
+                        <button type="button" class="btn btn-success"
+                                style="border-radius: 0;"
+                                [title]="'Next' | transloco"
+                                (click)="submit()">
+                            {{ t('Next') }}
+                            <i class="fa fa-arrow-right"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </c-card-body>
+        <c-card-body>
+
+            <fieldset class="padding-bottom-20">
+                <legend class="fs-md fieldset-legend-border-bottom">
+                    <h4>
+                        {{ t('nginx Status') }}
+                    </h4>
+                </legend>
+
+                <c-accordion class="mb-3">
+                    <c-accordion-item #item0="cAccordionItem" [visible]="false">
+                        <ng-template cTemplateId="accordionHeaderTemplate">
+                            <button (click)="item0.toggleItem()" [collapsed]="!item0.visible" cAccordionButton>
+                                <i class="fas fa-life-ring width-2 alert-icon mr-5"></i>
+                                {{ t('nginx Status configuration help') }}
+                            </button>
+                        </ng-template>
+                        <ng-template cTemplateId="accordionBodyTemplate">
+                            <div class="accordion-body">
+                                <ol>
+                                    <li>
+                                        {{ t('Add the following code to your nginx configuration file in the monitored server:') }}
+                                        <pre>location /stub_status &#123;
+  # Turn on nginx stats
+  stub_status on;
+
+  # Disable access.log for stats
+  access_log off;
+  &#125;</pre>
+                                    </li>
+                                    <li>
+                                        {{ t('Restart the ngninx server:') }}
+                                        <pre>systemctl restart nginx</pre>
+                                    </li>
+                                </ol>
+                            </div>
+                        </ng-template>
+                    </c-accordion-item>
+                </c-accordion>
+            </fieldset>
+
+            <oitc-wizards-dynamicfields
+                [(post)]="post.services"
+                [errors]="errors"
+                [titleErrorField]="'services'"
+                [title]="'nginx Status services'|transloco"
+            />
+
+
+        </c-card-body>
+    </c-card>
+
+</ng-container>

src/app/modules/nginx_module/pages/wizards/nginx/nginx.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NginxComponent } from './nginx.component';
+
+describe('NginxComponent', () => {
+    let component: NginxComponent;
+    let fixture: ComponentFixture<NginxComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [NginxComponent]
+        })
+            .compileComponents();
+
+        fixture = TestBed.createComponent(NginxComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

src/app/modules/nginx_module/pages/wizards/nginx/nginx.component.ts

@@ -0,0 +1,60 @@
+import { ChangeDetectionStrategy, Component, inject, ViewChild } from '@angular/core';
+import { WizardsAbstractComponent } from '../../../../../pages/wizards/wizards-abstract/wizards-abstract.component';
+import { BackButtonDirective } from '../../../../../directives/back-button.directive';
+import {
+    AccordionButtonDirective,
+    AccordionComponent,
+    AccordionItemComponent,
+    CardBodyComponent,
+    CardComponent,
+    CardHeaderComponent,
+    CardTitleDirective,
+    TemplateIdDirective
+} from '@coreui/angular';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { TranslocoDirective, TranslocoPipe } from '@jsverse/transloco';
+import {
+    WizardsDynamicfieldsComponent
+} from '../../../../../components/wizards/wizards-dynamicfields/wizards-dynamicfields.component';
+import { NginxWizardPost } from './nginx-wizard.interface';
+import { NginxWizardService } from './nginx-wizard.service';
+import { RouterLink } from '@angular/router';
+
+@Component({
+    selector: 'oitc-nginx',
+    imports: [
+        BackButtonDirective,
+        CardBodyComponent,
+        CardComponent,
+        CardHeaderComponent,
+        CardTitleDirective,
+        FaIconComponent,
+        ReactiveFormsModule,
+        TranslocoDirective,
+        TranslocoPipe,
+        WizardsDynamicfieldsComponent,
+        FormsModule,
+        RouterLink,
+        AccordionButtonDirective,
+        AccordionComponent,
+        AccordionItemComponent,
+        TemplateIdDirective,
+    ],
+    templateUrl: './nginx.component.html',
+    styleUrl: './nginx.component.css',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class NginxComponent extends WizardsAbstractComponent {
+
+    @ViewChild(WizardsDynamicfieldsComponent) childComponentLocal!: WizardsDynamicfieldsComponent;
+    protected override WizardService: NginxWizardService = inject(NginxWizardService);
+    public checked: boolean = false;
+
+    protected override post: NginxWizardPost = {
+// Default fields from the base wizard
+        host_id: 0,
+        services: [],
+    } as NginxWizardPost;
+
+}

src/app/pages/wizards/wizards-index/wizards-index.component.html

@@ -88,6 +88,12 @@ <h5 class="card-title">{{ t('Configuration Wizards') }}</h5>
                                     <fa-icon [icon]="['fas', 'server']"></fa-icon>
                                     {{ t('Hardware') }}
                                 </button>
+                                <button cButton color="primary" size="xs"
+                                        [ngClass]="{'btn-primary': filter.Category.webserver, 'btn-default': !filter.Category.webserver}"
+                                        (click)="filter.Category.webserver=!filter.Category.webserver">
+                                    <fa-icon [icon]="['fas', 'server']"></fa-icon>
+                                    {{ t('Webserver') }}
+                                </button>
                             </c-button-group>
                         </span>
                     </c-input-group>

src/app/pages/wizards/wizards-index/wizards-index.component.ts

@@ -80,7 +80,8 @@ export class WizardsIndexComponent implements OnInit, OnDestroy {
             docker: true,
             macos: true,
             virtualization: true,
-            hardware: true
+            hardware: true,
+            webserver: true
         }
     }