Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FOGL-6092: Add GUI to FogLAMP notifications to support multiple delivery channels #181

Draft
wants to merge 3 commits into
base: develop
Choose a base branch
from
Draft

FOGL-6092: Add GUI to FogLAMP notifications to support multiple delivery channels #181

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5a85fd8
working on multiple delivery channel on notification details page
mshariq-nerd Jun 24, 2022
b85e7c7
added update muliple delivery channel config
mshariq-nerd Jun 24, 2022
987b254
removed logs from filter page
mshariq-nerd Jun 24, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/app/components/core/filter/add-filter-wizard/add-filter-wizard.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -515,8 +515,8 @@ export class AddFilterWizardComponent implements OnInit {

/**
* Open readthedocs.io documentation of filter plugins
* @param selectedPlugin Selected filter plugin
*
* @param selectedPlugin Selected filter plugin
*
*/
goToLink(selectedPlugin: string) {
const pluginInfo = {
Expand Down
30 changes: 30 additions & 0 deletions ...onents/core/notifications/add-notification-channel/add-notification-channel.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
:host ::ng-deep ng-select .ng-dropdown-panel {
z-index: 40 !important;
}

:host ::ng-deep ng-select .ng-dropdown-panel .ng-dropdown-panel-items {
max-height: 200px !important;
}

:host ::ng-deep ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled {
color: #848181 !important;
font-size: 0.80rem !important;
}

.field-label {
text-align: left;
}

.steps {
overflow-y: visible;
}

.is-vertical-center {
display: flex;
align-items: center;
}

.is-hovered {
cursor: pointer !important;
}

172 changes: 172 additions & 0 deletions ...nents/core/notifications/add-notification-channel/add-notification-channel.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,172 @@
<div class="steps">
<div class="step-item is-active is-success" id="1">
<div class="step-marker">1</div>
<div class="step-details">
<p>Plugin Name</p>
</div>
</div>
<div class="step-item" id="2">
<div class="step-marker">2</div>
<div class="step-details">
<p>Review Configuration</p>
</div>
</div>
<div class="steps-content" [ngClass]="{'loading':!pluginData.length && !stopLoading && requestInProgress}">
<form [formGroup]="pluginChannelForm" validate>
<div class="box step-content is-active" id="c-1">

<ng-container *ngIf="!plugins || plugins.length === 0">
<div *ngIf="!show" class="has-text-centered">
<small class="no-rec">No plugin installed.&nbsp;<a (click)="toggleAvailablePlugins()">Install from available
plugins</a></small>
</div>
<ng-container *ngIf="show">
<div class="field is-horizontal form-group">
<div class="field-label is-normal">
<div class="column">
<label class="label">Plugin</label>
</div>
</div>
<div class="field-body">
<div class="column">
<ng-select #pluginToInstall [items]="pluginData" [searchable]="pluginData.length"
[placeholder]="placeholderText" notFoundText="No plugin available to install"
[loading]="!pluginData.length && !stopLoading" (change)="pluginSelectionChanged($event)"
bindLabel="pluginToInstall" formControlName="pluginToInstall">
</ng-select>
<small *ngIf="!isValidPlugin" class="help is-danger level-left">* Please select a valid plugin</small>
</div>
</div>
</div>
</ng-container>
<p id="requestInProgress" class="help has-text-centered"></p>
<ng-container *ngIf="show">
<div class="field is-horizontal form-group">
<div class="field-label is-normal">
<div class="column">
<label class="label">Name</label>
</div>
</div>
<div class="field-body">
<div class="column">
<div class="field">
<div class="control">
<input class="input" id="name" type="text" placeholder="name" formControlName="name" required
(input)="validateServiceName($event)">
<small *ngIf="!isValidName" class="help is-danger level-left">Channel name is required</small>
</div>
</div>
</div>
</div>
</div>
<div class="field is-horizontal form-group">
<div class="field-label is-normal">
<div class="column">
<label class="label">Description</label>
</div>
</div>
<div class="field-body">
<div class="column">
<div class="field">
<div class="control">
<input class="input" id="description" type="text" placeholder="description"
formControlName="description" required (input)="validDescription($event)">
<!-- <small *ngIf="!isValidName" class="help is-danger level-left">description is required</small> -->
</div>
</div>
</div>
</div>
</div>
</ng-container>
</ng-container>
<ng-container *ngIf="plugins.length > 0">
<div class="field is-horizontal form-group">
<div class="field-label is-normal">
<label class="label">Plugin</label>
</div>
<div class="field-body">
<div class="column is-vertical-center">
<div class="select is-multiple">
<select #selectedPlugin multiple name="type" formControlName="plugin"
(change)="getDescription(selectedPlugin.value)" required>
<option *ngFor="let p of plugins" [value]="p.name"> {{ p.name }}</option>
</select>
</div>
&nbsp;
<small *ngIf="selectedPluginDescription && isValidPlugin && isSinglePlugin"
class="help description level-left">{{ selectedPluginDescription }}</small>
<small *ngIf="!isSinglePlugin" class="help is-danger level-left">* Please select a single plugin</small>
</div>
</div>
<div *ngIf="plugin" class="column is-1">
<span class="icon is-small is-tooltip-left tooltip is-pulled-right is-hovered help-icon"
data-tooltip="Help" (click)="goToLink(plugin)">
<i class="far fa-question-circle"></i>
</span>
</div>
</div>

<div class="field is-horizontal form-group">
<div class="field-label is-normal">
<label class="label"></label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<small class="no-rec" *ngIf="requestInProgress">Install from available plugins</small>
<small><a *ngIf="!requestInProgress" (click)="toggleAvailablePlugins()">Install from available
plugins</a></small>
</div>
</div>
</div>
</div>
<div class="field is-horizontal form-group">
<div class="field-label is-normal">
<label class="label"></label>
</div>
<div class="field-body">
<div class="column" style="padding: 0;">
<ng-select #pluginToInstall *ngIf="show" [items]="pluginData" [searchable]="pluginData.length"
[placeholder]="placeholderText" [loading]="!pluginData.length && !stopLoading"
notFoundText="No plugin available to install" (change)="pluginSelectionChanged($event)"
bindLabel="pluginToInstall" formControlName="pluginToInstall">
</ng-select>
<small *ngIf="!isValidPlugin" class="help is-danger level-left">* Please select a valid plugin</small>
<p id="requestInProgress" class="help has-text-centered"></p>
</div>
</div>
</div>

<div class="field is-horizontal form-group">
<div class="field-label is-normal">
<label class="label">Name</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input class="input" id="name" type="text" placeholder="name" formControlName="name" required
(input)="validateServiceName($event)">
<small *ngIf="!isValidName" class="help is-danger level-left">Channel name is required</small>
</div>
</div>
</div>
</div>
</ng-container>
</div>
<div class="box step-content" id="c-2">
<app-view-config-item [hidden]="!configurationData" [categoryConfigurationData]="configurationData"
[pluginInfo]="{name: payload?.plugin, type:'Filter'}" (onConfigChanged)="getChangedConfig($event)"
[pageId]="'wizard'" [useProxy]="useProxy"></app-view-config-item>
</div>
</form>
</div>
<div class="steps-actions">
<div class="steps-action">
<button (click)="movePrevious()" data-nav="previous" class="button" id="previous">Back</button>
</div>
<div class="steps-action">
<button (click)="gotoNext()" data-nav="next" [disabled]="disabledBtn" class="button is-link"
id="next">Next</button>
</div>
</div>
</div>
25 changes: 25 additions & 0 deletions ...ts/core/notifications/add-notification-channel/add-notification-channel.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { AddNotificationChannelComponent } from './add-notification-channel.component';

describe('AddNotificationChannelComponent', () => {
let component: AddNotificationChannelComponent;
let fixture: ComponentFixture<AddNotificationChannelComponent>;

beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ AddNotificationChannelComponent ]
})
.compileComponents();
});

beforeEach(() => {
fixture = TestBed.createComponent(AddNotificationChannelComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
Loading