diff --git a/web-app/src/app/routes/alert/alert-center/alert-center.component.html b/web-app/src/app/routes/alert/alert-center/alert-center.component.html index c824304e5e5..d6a8dfbfa9b 100644 --- a/web-app/src/app/routes/alert/alert-center/alert-center.component.html +++ b/web-app/src/app/routes/alert/alert-center/alert-center.component.html @@ -23,68 +23,70 @@ [module_name]="'menu.alert.center'" [icon_name]="'alert'" > - -
- + - - - - + + + - - - - - - - - - - - - - - -
+ + + + + + + + + + + + + + + + + + + + + + + -
- - - - - -
+ + + + + + + + + + + + + + -
- + + + - -
+ + + @@ -153,17 +157,19 @@ -
- + + + - -
+ + + @@ -224,16 +230,18 @@ -
- - -
+ + + + + + + -
- - - - - -
    -
  • - -
    • -
  • - - + + + + + +
      +
    • + - -
      • -
    -     - - -
+ +
  • + + + +
    • + + + + + + + + + -
    - - - - - -
    + + + + + + + + + + + -
    - - + + + + - - - -
      -
    • - -
      • -
    • - -
      • -
    • - -
      • -
    • - -
      • -
    • - - + + +
        +
      • + +
        • +
      • + +
        • +
      • + - -
        • -
      -       - - - - - - - - - -
    + +
  • + +
    • +
  • + + + +
    • + + + + + + + + + + + + + + + - -
    - + - + + + - + - + - + - - -
    + + + + + + + + -
    - - - -
    + + + + + + + @@ -224,21 +227,23 @@     -
    - - - -
    + + + + + + + - -
    - - + - + + + + - - -
    + + + + + + + + +
    +
    + + + + +
    +
    + + + + +
    +
    + + + + +
    +
    diff --git a/web-app/src/app/shared/components/toolbar/toolbar.component.less b/web-app/src/app/shared/components/toolbar/toolbar.component.less new file mode 100755 index 00000000000..4fb53f2295f --- /dev/null +++ b/web-app/src/app/shared/components/toolbar/toolbar.component.less @@ -0,0 +1,15 @@ +.wrapper { + display: flex; + margin-bottom: 20px; + justify-content: space-between; + + .container { + display: flex; + gap: 8px; + + } + + .container:first-child { + gap: 0px; + } +} diff --git a/web-app/src/app/shared/components/toolbar/toolbar.component.spec.ts b/web-app/src/app/shared/components/toolbar/toolbar.component.spec.ts new file mode 100755 index 00000000000..7f243894f60 --- /dev/null +++ b/web-app/src/app/shared/components/toolbar/toolbar.component.spec.ts @@ -0,0 +1,43 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ToolbarComponent } from './toolbar.component'; + +describe('ToolbarComponent', () => { + let component: ToolbarComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ToolbarComponent] + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ToolbarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/web-app/src/app/shared/components/toolbar/toolbar.component.ts b/web-app/src/app/shared/components/toolbar/toolbar.component.ts new file mode 100755 index 00000000000..0b0423f504d --- /dev/null +++ b/web-app/src/app/shared/components/toolbar/toolbar.component.ts @@ -0,0 +1,41 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { Component, ContentChild, TemplateRef, AfterContentInit, Input } from '@angular/core'; + +@Component({ + selector: 'app-toolbar', + templateUrl: './toolbar.component.html', + styleUrls: ['./toolbar.component.less'] +}) +export class ToolbarComponent { + @ContentChild('left', { static: true }) leftTemplateRef: TemplateRef | undefined; + @ContentChild('right', { static: true }) rightTemplateRef: TemplateRef | undefined; + @ContentChild('center', { static: true }) centerTemplateRef: TemplateRef | undefined; + @Input() wrapperClass: string = ''; + @Input() wrapperStyle: string = ''; + @Input() containerClass: string = ''; + @Input() containerStyle: string = ''; + @Input() leftClass: string = ''; + @Input() leftStyle: string = ''; + @Input() rightClass: string = ''; + @Input() rightStyle: string = ''; + @Input() centerClass: string = ''; + @Input() centerStyle: string = ''; +} diff --git a/web-app/src/app/shared/shared.module.ts b/web-app/src/app/shared/shared.module.ts index 81ed05447ec..8cb1f7eeb84 100644 --- a/web-app/src/app/shared/shared.module.ts +++ b/web-app/src/app/shared/shared.module.ts @@ -12,6 +12,7 @@ import { HelpMassageShowComponent } from './components/help-massage-show/help-ma import { KeyValueInputComponent } from './components/key-value-input/key-value-input.component'; import { MetricsFieldInputComponent } from './components/metrics-field-input/metrics-field-input.component'; import { MultiFuncInputComponent } from './components/multi-func-input/multi-func-input.component'; +import { ToolbarComponent } from './components/toolbar/toolbar.component'; import { ElapsedTimePipe } from './pipe/elapsed-time.pipe'; import { I18nElsePipe } from './pipe/i18n-else.pipe'; import { TimezonePipe } from './pipe/timezone.pipe'; @@ -23,7 +24,8 @@ const COMPONENTS: Array> = [ KeyValueInputComponent, MultiFuncInputComponent, HelpMassageShowComponent, - MetricsFieldInputComponent + MetricsFieldInputComponent, + ToolbarComponent ]; const DIRECTIVES: Array> = [TimezonePipe, I18nElsePipe, ElapsedTimePipe];