Skip to content

Commit ea76d2f

Browse files
iberingibering
authored
Merge pull request #396 from openITCOCKPIT/ITC-3543
ITC-3543: Wizards Microsoft 365: Sharepoint, OneDrive, Mailbox, Service Status
2 parents f71319e + 973443a commit ea76d2f

26 files changed

+1652
-1
lines changed

‎src/app/app.routes.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ import { mattermostModuleRoutes } from './modules/mattermost_module/mattermost_m
3939
import { servicenowModuleRoutes } from './modules/servicenow_module/servicenow_module.routes';
4040
import { dellModuleRoutes } from './modules/dell_module/dell_module.routes';
4141
import { proxmoxModuleRoutes } from './modules/proxmox_module/proxmox_module.routes';
42+
import { ms365ModuleRoutes } from './modules/ms365_module/ms365_module.routes';
4243

4344
@Component({
4445
selector: 'legacy-redirect',
@@ -99,7 +100,8 @@ const moduleRoutes: Routes = [
99100
...mattermostModuleRoutes,
100101
...servicenowModuleRoutes,
101102
...dellModuleRoutes,
102-
...proxmoxModuleRoutes
103+
...proxmoxModuleRoutes,
104+
...ms365ModuleRoutes
103105
];
104106
/*** Core routes ***/
105107
const coreRoutes: Routes = [{

‎src/app/modules/ms365_module/ms365_module.routes.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { Routes } from '@angular/router';
2+
3+
export const ms365ModuleRoutes: Routes = [
4+
{
5+
path: 'ms365_module/wizards/mailbox/:hostId',
6+
loadComponent: () => import('./pages/wizards/mailbox/mailbox.component').then(m => m.MailboxComponent),
7+
},
8+
{
9+
path: 'ms365_module/wizards/onedrive/:hostId',
10+
loadComponent: () => import('./pages/wizards/one-drive/one-drive.component').then(m => m.OneDriveComponent),
11+
},
12+
{
13+
path: 'ms365_module/wizards/servicestatus/:hostId',
14+
loadComponent: () => import('./pages/wizards/service-status/service-status.component').then(m => m.ServiceStatusComponent),
15+
},
16+
{
17+
path: 'ms365_module/wizards/sharepoint/:hostId',
18+
loadComponent: () => import('./pages/wizards/share-point/share-point.component').then(m => m.SharePointComponent),
19+
},
20+
];

‎src/app/modules/ms365_module/pages/wizards/mailbox/mailbox.component.css‎

Whitespace-only changes.

‎src/app/modules/ms365_module/pages/wizards/mailbox/mailbox.component.html‎

Lines changed: 212 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,212 @@
1+
<ng-container *transloco="let t">
2+
3+
<nav aria-label="breadcrumb" class="mt-3">
4+
<ol class="breadcrumb">
5+
<li class="breadcrumb-item">
6+
<a [routerLink]="['/']">
7+
<fa-icon [icon]="['fas', 'home']"></fa-icon>
8+
{{ t('Home') }}
9+
</a></li>
10+
<li aria-current="page" class="breadcrumb-item">
11+
<a [routerLink]="['/', 'wizards', 'index']">
12+
<fa-icon [icon]="['fas', 'wand-sparkles']"></fa-icon>
13+
{{ t('Wizards') }}
14+
</a></li>
15+
<li aria-current="page" class="breadcrumb-item">
16+
<a [routerLink]="['/', 'wizards', 'index']">
17+
<fa-icon [icon]="['fas', 'wand-sparkles']"></fa-icon>
18+
{{ t('Microsoft 365') }}
19+
</a></li>
20+
<li aria-current="page" class="breadcrumb-item active">
21+
<fa-icon [icon]="['fas', 'envelope']"></fa-icon>
22+
{{ t('Mailbox') }}
23+
</li>
24+
</ol>
25+
</nav>
26+
27+
<c-card>
28+
<c-card-header>
29+
<h5 cCardTitle>
30+
{{ t('Configuration Wizard: Microsoft 365 (Mailbox)') }}
31+
</h5>
32+
</c-card-header>
33+
<c-card-body class="p-0">
34+
35+
<div class="row m-0 text-center mb-3" style="min-height: 22px;">
36+
<div
37+
class="col-xs-12 col-md-4 col-lg-2 wizard-bg-inactive d-inline-flex align-items-center justify-content-center wizard-success">
38+
<span>
39+
<fa-icon [icon]="['fas', 'info-circle']"></fa-icon>
40+
{{ t('Host Information') }}
41+
</span>
42+
</div>
43+
<div
44+
class="col-xs-12 col-md-4 col-lg-2 wizard-bg-inactive d-inline-flex align-items-center justify-content-center wizard-active">
45+
<span>
46+
<fa-icon [icon]="['fas', 'info-circle']"></fa-icon>
47+
{{ t('Configure services') }}
48+
</span>
49+
</div>
50+
<div class="col-lg-6 wizard-bg-inactive d-inline-flex">
51+
</div>
52+
<div class="col-xs-12 col-md-4 col-lg-2 ps-0 pe-0 wizard-bg-inactive">
53+
<div class="btn-group btn-group-xs w-100 h-100">
54+
<button type="button" class="btn btn-primary"
55+
[title]="'Back' | transloco"
56+
style="border-radius: 0;"
57+
[fallbackUrl]="['wizards', 'index']"
58+
oitcBackButton>
59+
<i class="fa fa-arrow-left"></i>
60+
</button>
61+
62+
<button type="button" class="btn btn-success"
63+
style="border-radius: 0;"
64+
[title]="'Next' | transloco"
65+
(click)="submit()">
66+
{{ t('Next') }}
67+
<i class="fa fa-arrow-right"></i>
68+
</button>
69+
</div>
70+
</div>
71+
</div>
72+
</c-card-body>
73+
<c-card-body>
74+
<fieldset class="padding-bottom-20">
75+
<legend class="fs-md fieldset-legend-border-bottom">
76+
<h4>
77+
{{ t('Microsoft 365 Authentication Settings') }}
78+
</h4>
79+
</legend>
80+
81+
<c-accordion class="mb-3">
82+
<c-accordion-item #item0="cAccordionItem" [visible]="false">
83+
<ng-template cTemplateId="accordionHeaderTemplate">
84+
<button (click)="item0.toggleItem()" [collapsed]="!item0.visible" cAccordionButton>
85+
<i class="fas fa-life-ring width-2 alert-icon mr-5"></i>
86+
{{ t('How to set up') }}
87+
</button>
88+
</ng-template>
89+
<ng-template cTemplateId="accordionBodyTemplate">
90+
<div class="accordion-body">
91+
<ol>
92+
<li>
93+
{{ t('Log in at') }}
94+
(<a href="https://entra.microsoft.com/"
95+
target="_blank">Microsoft Entra</a>)
96+
</li>
97+
98+
<li>
99+
{{ t('Go to App Registration and create a new one') }}
100+
</li>
101+
<li>
102+
{{ t('Just enter a Name, for example "openITCOCKPIT Monitoring" and click register') }}
103+
</li>
104+
<li>
105+
{{ t('On the following Page, copy and store Application (Client) ID and Directory (tenant) ID') }}
106+
</li>
107+
<li>
108+
{{ t('Go to Certificate & Secrets, add a client secret key and copy / save it.') }}
109+
</li>
110+
<li>
111+
{{ t('Go to API Permission and add a permission to Microsoft Graph:') }}
112+
<ol type="a">
113+
<li>
114+
{{ t('Application Permission') }}
115+
</li>
116+
<li>
117+
<code>Reports.Read.All</code>
118+
</li>
119+
</ol>
120+
</li>
121+
<li>
122+
{{ t('Finally, click on Grant Admin consent for ….') }}
123+
</li>
124+
125+
</ol>
126+
</div>
127+
</ng-template>
128+
</c-accordion-item>
129+
</c-accordion>
130+
131+
<c-accordion class="mb-3">
132+
<c-accordion-item #item1="cAccordionItem" [visible]="false">
133+
<ng-template cTemplateId="accordionHeaderTemplate">
134+
<button (click)="item1.toggleItem()" [collapsed]="!item1.visible" cAccordionButton>
135+
<i class="fas fa-life-ring width-2 alert-icon mr-5"></i>
136+
{{ t('Display Cleartext values') }}
137+
</button>
138+
</ng-template>
139+
<ng-template cTemplateId="accordionBodyTemplate">
140+
<div class="accordion-body">
141+
<ol>
142+
<li>
143+
{{ t('If you like to to have cleartext Names within your output. Login in at ') }}
144+
(<a href="https://admin.microsoft.com/"
145+
target="_blank">admin.microsoft.com</a>)
146+
</li>
147+
148+
<li>
149+
{{ t('Go to got to Settings -> Org Settings -> Reports') }}
150+
</li>
151+
<li>
152+
{{ t('Uncheck "Display concealed user, group, and site names in all reports"') }}
153+
</li>
154+
</ol>
155+
</div>
156+
</ng-template>
157+
</c-accordion-item>
158+
</c-accordion>
159+
160+
<div class="mb-3">
161+
<label cLabel for="post.tenantId">
162+
{{ t('Tenant ID') }}
163+
</label>
164+
<input cFormControl
165+
id="post.tenantId"
166+
type="text"
167+
name="post.tenantId"
168+
oitcFormError [errors]="errors" errorField="tenantId"
169+
[(ngModel)]="post.tenantId">
170+
<oitc-form-feedback [errors]="errors" errorField="tenantId"></oitc-form-feedback>
171+
</div>
172+
173+
<div class="mb-3">
174+
<label cLabel for="post.clientId">
175+
{{ t('Client ID') }}
176+
</label>
177+
<input cFormControl
178+
id="post.clientId"
179+
type="text"
180+
name="post.clientId"
181+
oitcFormError [errors]="errors" errorField="clientId"
182+
[(ngModel)]="post.clientId">
183+
<oitc-form-feedback [errors]="errors" errorField="clientId"></oitc-form-feedback>
184+
</div>
185+
186+
<div class="mb-3">
187+
<label cLabel for="post.clientSecret">
188+
{{ t('Client Secret') }}
189+
</label>
190+
<input cFormControl
191+
id="post.clientSecret"
192+
type="password"
193+
name="post.clientSecret"
194+
oitcFormError [errors]="errors" errorField="clientSecret"
195+
[(ngModel)]="post.clientSecret">
196+
<oitc-form-feedback [errors]="errors" errorField="clientSecret"></oitc-form-feedback>
197+
</div>
198+
199+
</fieldset>
200+
201+
<oitc-wizards-dynamicfields
202+
[(post)]="post.services"
203+
[errors]="errors"
204+
[titleErrorField]="'services'"
205+
[title]="'Office 365 Mailbox Services'|transloco"
206+
/>
207+
208+
209+
</c-card-body>
210+
</c-card>
211+
212+
</ng-container>

‎src/app/modules/ms365_module/pages/wizards/mailbox/mailbox.component.spec.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { MailboxComponent } from './mailbox.component';
4+
5+
describe('MailboxComponent', () => {
6+
let component: MailboxComponent;
7+
let fixture: ComponentFixture<MailboxComponent>;
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
imports: [MailboxComponent]
12+
})
13+
.compileComponents();
14+
15+
fixture = TestBed.createComponent(MailboxComponent);
16+
component = fixture.componentInstance;
17+
fixture.detectChanges();
18+
});
19+
20+
it('should create', () => {
21+
expect(component).toBeTruthy();
22+
});
23+
});

‎src/app/modules/ms365_module/pages/wizards/mailbox/mailbox.component.ts‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import { ChangeDetectionStrategy, Component, inject, ViewChild } from '@angular/core';
2+
import { BackButtonDirective } from '../../../../../directives/back-button.directive';
3+
import {
4+
AccordionButtonDirective,
5+
AccordionComponent,
6+
AccordionItemComponent,
7+
CardBodyComponent,
8+
CardComponent,
9+
CardHeaderComponent,
10+
CardTitleDirective,
11+
FormControlDirective,
12+
FormLabelDirective,
13+
TemplateIdDirective
14+
} from '@coreui/angular';
15+
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
16+
import { FormsModule } from '@angular/forms';
17+
import { TranslocoDirective, TranslocoPipe } from '@jsverse/transloco';
18+
import {
19+
WizardsDynamicfieldsComponent
20+
} from '../../../../../components/wizards/wizards-dynamicfields/wizards-dynamicfields.component';
21+
import { RouterLink } from '@angular/router';
22+
import { FormErrorDirective } from '../../../../../layouts/coreui/form-error.directive';
23+
import { FormFeedbackComponent } from '../../../../../layouts/coreui/form-feedback/form-feedback.component';
24+
import { WizardsAbstractComponent } from '../../../../../pages/wizards/wizards-abstract/wizards-abstract.component';
25+
import { Ms365ServiceStatusWizardGet, Ms365ServiceStatusWizardPost } from '../service-status/service-status.interface';
26+
import { M365MailboxService } from './mailbox.service';
27+
28+
@Component({
29+
selector: 'oitc-mailbox',
30+
imports: [
31+
BackButtonDirective,
32+
CardBodyComponent,
33+
CardComponent,
34+
CardHeaderComponent,
35+
CardTitleDirective,
36+
FaIconComponent,
37+
FormsModule,
38+
TranslocoDirective,
39+
TranslocoPipe,
40+
WizardsDynamicfieldsComponent,
41+
RouterLink,
42+
FormControlDirective,
43+
FormErrorDirective,
44+
FormFeedbackComponent,
45+
FormLabelDirective,
46+
AccordionButtonDirective,
47+
AccordionComponent,
48+
AccordionItemComponent,
49+
TemplateIdDirective
50+
],
51+
templateUrl: './mailbox.component.html',
52+
styleUrl: './mailbox.component.css',
53+
changeDetection: ChangeDetectionStrategy.OnPush
54+
})
55+
export class MailboxComponent extends WizardsAbstractComponent {
56+
57+
@ViewChild(WizardsDynamicfieldsComponent) childComponentLocal!: WizardsDynamicfieldsComponent;
58+
protected override WizardService: M365MailboxService = inject(M365MailboxService);
59+
public checked: boolean = false;
60+
protected override post: Ms365ServiceStatusWizardPost = {
61+
tenantId: '',
62+
clientId: '',
63+
clientSecret: '',
64+
// Default fields from the base wizard
65+
host_id: 0,
66+
services: [],
67+
} as Ms365ServiceStatusWizardPost;
68+
69+
protected override wizardLoad(result: Ms365ServiceStatusWizardGet): void {
70+
this.post.tenantId = result.tenantId;
71+
this.post.clientId = result.clientId;
72+
this.post.clientSecret = result.clientSecret;
73+
super.wizardLoad(result);
74+
this.cdr.markForCheck();
75+
}
76+
}

‎src/app/modules/ms365_module/pages/wizards/mailbox/mailbox.interface.ts‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { WizardGet, WizardPost } from '../../../../../pages/wizards/wizards.interface';
2+
3+
// WIZARD GET
4+
export interface Ms365MailboxWizardGet extends WizardGet {
5+
tenantId: string
6+
clientId: string
7+
clientSecret: string
8+
}
9+
10+
export interface Servicecommandargumentvalue {
11+
commandargument: Commandargument
12+
commandargument_id: number
13+
created: string
14+
id: number
15+
modified: string
16+
servicetemplate_id: number
17+
value: string
18+
}
19+
20+
export interface Commandargument {
21+
command_id: number
22+
created: string
23+
human_name: string
24+
id: number
25+
modified: string
26+
name: string
27+
}
28+
29+
30+
// WIZARD POST
31+
export interface Ms365MailboxWizardPost extends WizardPost {
32+
tenantId: string
33+
clientId: string
34+
clientSecret: string
35+
}
36+
37+
export interface Ms365MailboxWizardPost {
38+
host_id: number
39+
}

0 commit comments

Comments
 (0)