diff --git a/src/app/app.component.html b/src/app/app.component.html index 6c9d09b..c1c87b1 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,27 +1,54 @@ - - - - - - - - - - - + [open]="forcedOpen" + [contained]="mainSectionContained" +> + + + + + + + + + + + + + {{ subNavRoute.label }} + open_in_new @@ -75,45 +106,96 @@ - -
- - - SQL editor - +
+ + + SQL editor + - - + +
- - - - -
- - - - - - - - - -
- +
+ + + + + + + + + +
+ +
+ + Light mode + brightness_high + +
+ +
+ + Dark mode + brightness_low + +
+
+
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index ac84fe8..48f0639 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -49,6 +49,7 @@ export interface navigationItem { path?: string | any[]; label?: string; children?: navigationItem[]; + external?: boolean; } export interface navMapItem { @@ -95,26 +96,11 @@ export class AppComponent { _helpBaseUrl = 'https://www.teradata.com/product-help/'; readonly USE_CASES_ID: string = 'bkm1640280721917'; - items: IMarkdownNavigatorItem[] = [ - { - id: 'covalent', - title: 'Covalent', - children: [ - { - id: 'component', - title: 'Components', - children: [ - { - id: 'td-loading', - url: 'https://raw.githubusercontent.com/Teradata/covalent/main/src/platform/core/loading/README.md', - title: 'tdLoading', - }, - ], - }, - ], - }, - ]; + items: IMarkdownNavigatorItem[] = []; + @ViewChild('accountMenu') accountMenu?: ElementRef; + @ViewChild('accountMenuTrigger') accountMenuTrigger?: ElementRef; + constructor( public router: Router, public activeRoute: ActivatedRoute, @@ -152,6 +138,8 @@ export class AppComponent { this.setCurrentRoute(url); }); + + // Load the help JSON from Teradata's CDN this.getHelpJSON().subscribe({ next: (items: IMarkdownNavigatorItem[]) => { this.items = items; @@ -159,6 +147,17 @@ export class AppComponent { this.cdr.markForCheck(); }, }); + + // Set the theme based on user preference or system preference + const localTheme = localStorage.getItem('theme'); + + // Set active theme from user dark theme preference if not set locally + this.activeTheme = + localTheme ?? + (window.matchMedia && + window.matchMedia('(prefers-color-scheme: dark)').matches + ? 'theme-dark' + : 'theme-light'); } ngOnInit(): void { @@ -168,6 +167,27 @@ export class AppComponent { ); } + ngAfterViewInit() { + const accountMenuEl = this.accountMenu?.nativeElement; + accountMenuEl.anchor = this.accountMenuTrigger?.nativeElement; + } + + accountMenuClick() { + const accountMenuEl = this.accountMenu?.nativeElement; + accountMenuEl.open = true; + } + + get activeTheme(): string | null { + return localStorage.getItem('theme'); + } + set activeTheme(activeTheme: string) { + document.querySelector('body')?.classList.remove('theme-dark'); + document.querySelector('body')?.classList.remove('theme-light'); + + localStorage.setItem('theme', activeTheme); + document.querySelector('body')?.classList.add(activeTheme); + } + setContainedPage(url: string) { // List of page URLs that should NOT show the contained state const barePages = [ @@ -287,10 +307,12 @@ export class AppComponent { { path: '/documentation', label: 'Documentation', + external: true, }, { path: '/support', label: 'Support', + external: true, }, ], } @@ -299,6 +321,7 @@ export class AppComponent { }, environments: { path: '/environments/**', + showSectionTitle: false, children: [ { path: ['/environments', this.sectionName], @@ -362,6 +385,86 @@ export class AppComponent { }, ], }, + 'modelOps': { + path: '/model-ops/**', + children: [ + { + path: ['/model-ops', this.sectionName], + icon: 'webhook', + label: this.sectionName + }, + { + path: ['/model-ops', this.sectionName, 'deployments'], + icon: 'deployed_code', + label: 'Deployments' + }, + { + path: ['/model-ops', this.sectionName, 'data-sets'], + icon: 'nearby', + label: 'Data sets' + }, + { + path: ['/model-ops', this.sectionName, 'jobs'], + icon: 'nearby', + label: 'Jobs' + }, + { + path: ['/model-ops', this.sectionName, 'alerts'], + icon: 'new_releases', + label: 'Alerts' + }, + { + path: ['/model-ops', this.sectionName, 'settings'], + icon: 'settings', + label: 'Settings' + }, + ] + }, + 'modelOpsModel': { + path: '/model-ops/**/model/**', + children: [ + { + path: `${this.sectionParentRoute}/model/${this.sectionName}`, + icon: 'webhook', + label: this.sectionName + }, + { + path: `${this.sectionParentRoute}/model/${this.sectionName}/commit-history`, + icon: 'nearby', + label: 'Commit history' + }, + { + path: `${this.sectionParentRoute}/model/${this.sectionName}/alerts`, + icon: 'nearby', + label: 'Alerts' + }, + ] + }, + 'modelOpsRun': { + path: '/model-ops/*/model/*/run/**', + children: [ + { + path: [this.sectionParentRoute, 'run', this.sectionName], + icon: 'webhook', + label: this.sectionName + }, + { + path: [this.sectionParentRoute, 'run', this.sectionName, 'life-cycle'], + icon: 'nearby', + label: 'Life cycle' + }, + { + path: [this.sectionParentRoute, 'run', this.sectionName, 'artifacts'], + icon: 'nearby', + label: 'Artifacts' + }, + { + path: [this.sectionParentRoute, 'run', this.sectionName, 'jobs'], + icon: 'nearby', + label: 'Jobs' + }, + ] + }, }; const navMatches = []; diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 1851690..08a4bee 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -35,7 +35,6 @@ import { BackupsComponent } from './environment/backups/backups.component'; import { ConsumptionDetailComponent } from './monitor/consumption-detail/consumption-detail.component'; import { CostCalculatorComponent } from './monitor/cost-calculator/cost-calculator.component'; import { UsersComponent } from './environment/users/users.component'; -import { GlobalSwitcherListComponent } from './global-switcher-list/global-switcher-list.component'; import { GlobalSwitcherOverlayListComponentComponent } from './global-switcher-overlay-list-component/global-switcher-overlay-list-component.component'; import { CreateUsersComponent } from './create-users/create-users.component'; import { CreateEnvironmentComponent } from './environments/create-environment.component'; @@ -77,7 +76,6 @@ import { CreateBackupComponent } from './environment/backups/create/create-backu CostCalculatorComponent, UsersComponent, GlobalSwitcherOverlayListComponentComponent, - GlobalSwitcherListComponent, CreateEnvironmentComponent, CreateUsersComponent, CreateComputeComponent, diff --git a/src/app/global-switcher-list/global-switcher-list.component.html b/src/app/global-switcher-list/global-switcher-list.component.html deleted file mode 100644 index 109d7a1..0000000 --- a/src/app/global-switcher-list/global-switcher-list.component.html +++ /dev/null @@ -1,46 +0,0 @@ - - - -
-
- check -
-
- ACME - Organization -
-
-
- -
-
- check -
-
- Production -
-
-
- -
-
-
- check -
-
- Production -
-
-
-
- - Production - - - Staging - - - Development - -
-
\ No newline at end of file diff --git a/src/app/global-switcher-list/global-switcher-list.component.scss b/src/app/global-switcher-list/global-switcher-list.component.scss deleted file mode 100644 index cc3784b..0000000 --- a/src/app/global-switcher-list/global-switcher-list.component.scss +++ /dev/null @@ -1,20 +0,0 @@ -.overlay-container { - position: absolute; - left: 264px; - top: 60px; - width: 300px; -} - -.select-container{ - display: flex; - align-items: flex-end; -} - -.item-selected { - padding-right: 24px; - display: flex; -} - -.select-container-subnav { - padding-left: 32px; -} \ No newline at end of file diff --git a/src/app/global-switcher-list/global-switcher-list.component.spec.ts b/src/app/global-switcher-list/global-switcher-list.component.spec.ts deleted file mode 100644 index c91f078..0000000 --- a/src/app/global-switcher-list/global-switcher-list.component.spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { GlobalSwitcherListComponent } from './global-switcher-list.component'; - -describe('GlobalSwitcherListComponent', () => { - let component: GlobalSwitcherListComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [GlobalSwitcherListComponent] - }) - .compileComponents(); - - fixture = TestBed.createComponent(GlobalSwitcherListComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/global-switcher-list/global-switcher-list.component.ts b/src/app/global-switcher-list/global-switcher-list.component.ts deleted file mode 100644 index 01b6fbb..0000000 --- a/src/app/global-switcher-list/global-switcher-list.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; -import '@covalent/components/card'; -@Component({ - selector: 'app-global-switcher-list', - templateUrl: './global-switcher-list.component.html', - styleUrl: './global-switcher-list.component.scss' -}) -export class GlobalSwitcherListComponent { - -} diff --git a/src/app/global-switcher-overlay-list-component/global-switcher-overlay-list-component.component.html b/src/app/global-switcher-overlay-list-component/global-switcher-overlay-list-component.component.html index d68140e..704180b 100644 --- a/src/app/global-switcher-overlay-list-component/global-switcher-overlay-list-component.component.html +++ b/src/app/global-switcher-overlay-list-component/global-switcher-overlay-list-component.component.html @@ -1,79 +1,51 @@ -
+
-
- - {{ - selectedSwitcherItem?.name - }} - {{ - selectedSwitcherItem?.description - }} - - - {{ selectedSwitcherItem?.name }} - - arrow_drop_down -
-
+
+ {{ selectedSwitcherItem?.name }} + + {{selectedSwitcherItem?.status?.icon}} + arrow_drop_down + +
+
- + Environments - - check - - {{ item.name }} - {{ item.description }} - + *ngIf="i === 1" + class="environments-header" + scale="caption" + >Environments + + + check + + {{ item.name }} - {{ item.name }} + {{ item.name }} + + {{item.status?.icon}} + {{item.status?.message ? item.status?.message : item.description}} + - +
+
+
+
diff --git a/src/app/global-switcher-overlay-list-component/global-switcher-overlay-list-component.component.scss b/src/app/global-switcher-overlay-list-component/global-switcher-overlay-list-component.component.scss index 9d260c3..9af3db5 100644 --- a/src/app/global-switcher-overlay-list-component/global-switcher-overlay-list-component.component.scss +++ b/src/app/global-switcher-overlay-list-component/global-switcher-overlay-list-component.component.scss @@ -1,8 +1,11 @@ .global-selector { - width: 250px; + width: 264px; + display: flex; + align-items: center; background-color: var(--cv-theme-secondary-container); border-radius: 12px; padding: 4px 16px; + min-height: 40px; &:hover { cursor: pointer; } @@ -12,6 +15,15 @@ align-items: center; justify-content: space-between; width: 100%; + + .selector-icons { + display: flex; + align-items: center; + } + + .status-icon { + --mdc-icon-size: 18px; + } } } @@ -21,7 +33,48 @@ } } +.environments-header { + margin-left: 58px; + padding: 8px 0 8px 22px; + border-left: 1px solid var(--cv-theme-divider); + display: block; +} + +.tree-divider { + border-left: 1px solid var(--cv-theme-divider); + height: 48px; + margin-top: -48px; + margin-left: 58px; + + .tree-divider-line { + display: block; + background-color:var(--cv-theme-divider); + width: 12px; + height: 1px; + top: 50%; + position: relative; + } + + &.last { + height: 24px; + margin-top: -48px; + margin-bottom: 24px; + + .tree-divider-line { + top: 100%; + } + } +} cv-list-item { - min-width: 300px; + --mdc-list-item-graphic-margin: 42px; + min-width: 330px; + + [slot="meta"] { + --mdc-icon-size: 16px; + } + + &.org-item { + --mdc-list-item-graphic-margin: 17px; + } } diff --git a/src/app/mock-data/global-switcher.ts b/src/app/mock-data/global-switcher.ts index 66012b3..83944de 100644 --- a/src/app/mock-data/global-switcher.ts +++ b/src/app/mock-data/global-switcher.ts @@ -23,7 +23,7 @@ export interface GlobalSwitcherItem { name: 'Production', status: { state: 'positive', - icon: 'check', + icon: 'electric_bolt', message: 'Active', }, }, @@ -33,7 +33,7 @@ export interface GlobalSwitcherItem { name: 'Staging', status: { state: 'positive', - icon: 'check', + icon: 'electric_bolt', message: 'Active', }, }, @@ -42,9 +42,9 @@ export interface GlobalSwitcherItem { url: '/environments/development', name: 'Development', status: { - state: 'positive', - icon: 'check', - message: 'Active', + state: 'negative', + icon: 'do_not_disturb_on', + message: 'Unavailable', }, }, ]; \ No newline at end of file diff --git a/src/app/model-ops/model-op/model-op.component.html b/src/app/model-ops/model-op/model-op.component.html index 3922668..be80bdc 100644 --- a/src/app/model-ops/model-op/model-op.component.html +++ b/src/app/model-ops/model-op/model-op.component.html @@ -20,7 +20,7 @@
- +
diff --git a/src/app/model-ops/model-ops.component.html b/src/app/model-ops/model-ops.component.html index fc72db1..efc47a7 100644 --- a/src/app/model-ops/model-ops.component.html +++ b/src/app/model-ops/model-ops.component.html @@ -18,7 +18,7 @@ -
ID {{element.id}}
+
diff --git a/src/app/model-ops/model-run/model-run.component.html b/src/app/model-ops/model-run/model-run.component.html index 565b4c5..7e14e51 100644 --- a/src/app/model-ops/model-run/model-run.component.html +++ b/src/app/model-ops/model-run/model-run.component.html @@ -10,22 +10,20 @@
- - - -
Content
-
- -
Content
-
- -
Content
-
- -
Content
-
-
-
+ + +
Content
+
+ +
Content
+
+ +
Content
+
+ +
Content
+
+
diff --git a/src/app/model-ops/model-run/model-run.component.scss b/src/app/model-ops/model-run/model-run.component.scss index 8492e0c..e69de29 100644 --- a/src/app/model-ops/model-run/model-run.component.scss +++ b/src/app/model-ops/model-run/model-run.component.scss @@ -1,5 +0,0 @@ -.container { - max-width:1178px; - margin: auto; - padding: 16px; -} \ No newline at end of file diff --git a/src/app/model-ops/model/model.component.html b/src/app/model-ops/model/model.component.html index df1cb1e..2fd017c 100644 --- a/src/app/model-ops/model/model.component.html +++ b/src/app/model-ops/model/model.component.html @@ -19,7 +19,7 @@ -
Project {{element.project}}
+
diff --git a/src/styles.scss b/src/styles.scss index 79c9874..31010e7 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -83,22 +83,23 @@ body { } // Dark theme -// @media (prefers-color-scheme: dark) { -// $theme-dark: $td-dark-theme; - -// @include mat.core-theme($theme-dark); -// @include mat.all-component-themes($theme-dark); -// @include covalent-theme($theme-dark); -// @include covalent-markdown-theme($theme-dark); -// @include covalent-highlight-theme($theme-dark); -// @include covalent-flavored-markdown-theme($theme-dark); -// @include covalent-markdown-navigator-theme($theme-dark); - -// body { -// color: #fff; -// font-family: 'Inter', Arial, Helvetica, sans-serif; -// } -// } +.theme-dark { + $theme-dark: $td-dark-theme; + + @include mat.core-theme($theme-dark); + @include mat.all-component-themes($theme-dark); + @include covalent-theme($theme-dark); + @include covalent-markdown-theme($theme-dark); + @include covalent-highlight-theme($theme-dark); + @include covalent-flavored-markdown-theme($theme-dark); + @include covalent-markdown-navigator-theme($theme-dark); + + // Covalent web components theme + @include covalent-theme.components-theme( + $dark-colors, + map-get(covalent-tokens.$tokens, typography) + ); +} :root {
ID {{element.id}}