Skip to content
This repository has been archived by the owner on Mar 25, 2023. It is now read-only.

Commit

Permalink
feat(routes) add routes for tabs (closes #397)
Browse files Browse the repository at this point in the history 
feat(routes) add routes for tabs

add routes for tabs (VM, templates and spare-drives sidebar)
  • Loading branch information
Darya Baklanova authored Aug 31, 2017
1 parent e606ed2 commit 583c8bc
Show file tree
Hide file tree
Showing 37 changed files with 838 additions and 368 deletions.
6 changes: 6 additions & 0 deletions src/app/shared/components/sidebar/sidebar.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,12 @@ export abstract class SidebarComponent<M extends BaseModel> implements OnInit {
);
}

public tabIsActive(tabId: string) {
const path = this.route.snapshot;
const pathLastChild = path.firstChild.routeConfig.path;
return (tabId === pathLastChild)
}

private pluckId(): Observable<string> {
return this.route.params.pluck('id').filter(id => !!id) as Observable<string>;
}
Expand Down
14 changes: 8 additions & 6 deletions src/app/spare-drive/spare-drive-sidebar/details/spare-drive-details.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
<cs-spare-drive-sidebar-volume [volume]="volume"></cs-spare-drive-sidebar-volume>
<ng-container *ngIf="volume">
<cs-spare-drive-sidebar-volume [volume]="volume"></cs-spare-drive-sidebar-volume>

<cs-description
[description]="volume.description"
(descriptionChange)="changeDescription($event)"
></cs-description>
<cs-description
[description]="volume.description"
(descriptionChange)="changeDescription($event)"
></cs-description>

<cs-spare-drive-sidebar-disk-offering [volume]="volume"></cs-spare-drive-sidebar-disk-offering>
<cs-spare-drive-sidebar-disk-offering [volume]="volume"></cs-spare-drive-sidebar-disk-offering>
</ng-container>
17 changes: 13 additions & 4 deletions src/app/spare-drive/spare-drive-sidebar/details/spare-drive-details.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,29 @@
import { Component, Input } from '@angular/core';
import { Component } from '@angular/core';
import { Volume } from '../../../shared/models/volume.model';
import { VolumeService } from '../../../shared/services/volume.service';
import { VolumeTagService } from '../../../shared/services/tags/volume-tag.service';
import { ActivatedRoute } from '@angular/router';


@Component({
selector: 'cs-spare-drive-details',
templateUrl: 'spare-drive-details.component.html'
})
export class SpareDriveDetailsComponent {
@Input() public volume: Volume;
public volume: Volume;

constructor(
private volumeService: VolumeService,
private volumeTagService: VolumeTagService
) {}
private volumeTagService: VolumeTagService,
private activatedRoute: ActivatedRoute
) {
const params = this.activatedRoute.snapshot.parent.params;

this.volumeService.get(params.id).subscribe(
volume => {
this.volume = volume;
});
}

public changeDescription(newDescription: string): void {
this.volumeTagService
Expand Down
14 changes: 8 additions & 6 deletions ...re-drive/spare-drive-sidebar/snapshot-details/spare-drive-snapshot-details.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
<cs-spare-drive-snapshot-creation [volume]="volume"></cs-spare-drive-snapshot-creation>
<ng-container *ngIf="volume">
<cs-spare-drive-snapshot-creation [volume]="volume"></cs-spare-drive-snapshot-creation>

<cs-spare-drive-snapshot
*ngFor="let snapshot of volume.snapshots"
[snapshot]="snapshot"
></cs-spare-drive-snapshot>
<cs-spare-drive-snapshot
*ngFor="let snapshot of volume.snapshots"
[snapshot]="snapshot"
></cs-spare-drive-snapshot>

<cs-no-results *ngIf="!volume.snapshots.length"></cs-no-results>
<cs-no-results *ngIf="!volume.snapshots.length"></cs-no-results>
</ng-container>
19 changes: 16 additions & 3 deletions ...pare-drive/spare-drive-sidebar/snapshot-details/spare-drive-snapshot-details.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,29 @@
import { Component, Input, OnInit } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { Volume } from '../../../shared/models/volume.model';
import { SnapshotService } from '../../../shared/services/snapshot.service';
import { ActivatedRoute } from '@angular/router';
import { VolumeService } from '../../../shared/services/volume.service';


@Component({
selector: 'cs-spare-drive-snapshot-details',
templateUrl: 'spare-drive-snapshot-details.component.html'
})
export class SpareDriveSnapshotDetailsComponent implements OnInit {
@Input() public volume: Volume;
public volume: Volume;

constructor(private snapshotService: SnapshotService) {}
constructor(
private volumeService: VolumeService,
private snapshotService: SnapshotService,
private activatedRoute: ActivatedRoute
) {
const params = this.activatedRoute.snapshot.parent.params;

this.volumeService.get(params.id).subscribe(
volume => {
this.volume = volume;
});
}

public ngOnInit(): void {
this.snapshotService.onSnapshotDeleted.subscribe(snapshot => {
Expand Down
47 changes: 29 additions & 18 deletions src/app/spare-drive/spare-drive-sidebar/spare-drive-sidebar.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,26 +4,37 @@ <h4 class="details-header">{{ entity.name }}</h4>
<cs-spare-drive-actions-sidebar [volume]="entity"></cs-spare-drive-actions-sidebar>
</div>

<md-tab-group [selectedIndex]="0" md-no-pagination="true">
<md-tab>
<ng-template md-tab-label >
<div [mdTooltip]="'SPARE_DRIVE_PAGE.SIDEBAR.VOLUME' | translate" class="md-tab-tooltip">
<md-icon>storage</md-icon>
</div>
</ng-template>
<cs-spare-drive-details [volume]="entity"></cs-spare-drive-details>
</md-tab>
<md-tab>
<ng-template md-tab-label>
<div [mdTooltip]="'SPARE_DRIVE_PAGE.SIDEBAR.SNAPSHOTS' | translate" class="md-tab-tooltip">
<md-icon>photo_camera</md-icon>
</div>
</ng-template>
<cs-spare-drive-snapshot-details [volume]="entity"></cs-spare-drive-snapshot-details>
</md-tab>
</md-tab-group>
<nav md-tab-nav-bar>
<a
md-tab-link
[routerLink]="['./volume']"
queryParamsHandling="preserve"
[active]="tabIsActive('volume')"
>
<div [mdTooltip]="'SPARE_DRIVE_PAGE.SIDEBAR.VOLUME' | translate"
class="md-tab-tooltip"
>
<md-icon>storage</md-icon>
</div>
</a>
<a
md-tab-link
[routerLink]="['./snapshots']"
queryParamsHandling="preserve"
[active]="tabIsActive('snapshots')"
>
<div
[mdTooltip]="'SPARE_DRIVE_PAGE.SIDEBAR.SNAPSHOTS' | translate"
class="md-tab-tooltip"
>
<md-icon>photo_camera</md-icon>
</div>
</a>
</nav>
</div>

<router-outlet></router-outlet>

<cs-no-results *ngIf="notFound" [text]="'VOLUME_NOT_FOUND'"></cs-no-results>

<cs-overlay-loading [active]="!entity && !notFound"></cs-overlay-loading>
Expand Down
21 changes: 20 additions & 1 deletion src/app/spare-drive/spare-drive.routing.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@ import { AuthGuard } from '../shared/services/auth-guard.service';
import { SpareDrivePageComponent } from './spare-drive-page/spare-drive-page.component';
import { SpareDriveSidebarComponent } from './spare-drive-sidebar/spare-drive-sidebar.component';
import { SpareDriveCreationDialogComponent } from './spare-drive-creation/spare-drive-creation-dialog.component';
import { SpareDriveDetailsComponent } from './spare-drive-sidebar/details/spare-drive-details.component';
import {
SpareDriveSnapshotDetailsComponent
} from './spare-drive-sidebar/snapshot-details/spare-drive-snapshot-details.component';

const routes: Routes = [
{
Expand All @@ -16,7 +20,22 @@ const routes: Routes = [
}, {
path: ':id',
component: SpareDriveSidebarComponent,
canActivate: [AuthGuard]
canActivate: [AuthGuard],
children: [
{
path: '',
redirectTo: 'volume',
pathMatch: 'full'
},
{
path: 'volume',
component: SpareDriveDetailsComponent
},
{
path: 'snapshots',
component: SpareDriveSnapshotDetailsComponent
}
]
}
]
}
Expand Down
177 changes: 40 additions & 137 deletions src/app/template/template-sidebar/base-template-sidebar.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,148 +7,51 @@ <h4 class="details-header">{{ entity.name }}</h4>
[template]="entity"
></cs-template-actions-sidebar>
</div>
<md-tab-group [selectedIndex]="0">
<md-tab>
<ng-template md-tab-label>
<div [mdTooltip]="'TEMPLATE_PAGE.SIDEBAR.TEMPLATE' | translate" class="md-tab-tooltip">
<div class="disc-icon-container">
<div class="disc-icon"></div>
</div>
</div>
</ng-template>

<cs-template-description [template]="entity"></cs-template-description>

<cs-template-os [template]="entity"></cs-template-os>

<md-card>
<md-card-header>
<md-card-title>
<h2 class="md-card-title-text">{{ "TEMPLATE_PAGE.TEMPLATE_DETAILS.DETAILS" | translate }}</h2>
</md-card-title>
</md-card-header>
<md-card-content>
<div class="grid grid-right">
<div class="row" *ngIf="entity.size">
<div>{{ 'TEMPLATE_PAGE.TEMPLATE_DETAILS.SIZE' | translate }}</div>
<div>{{ entity.size | division:2:30:2 }} {{ 'UNITS.GB' | translate }}</div>
</div>
<div class="row">
<div>{{ 'TEMPLATE_PAGE.TEMPLATE_DETAILS.EXTRACTABLE' | translate }}</div>
<div>{{ entity.isExtractable | viewValue | async }}</div>
</div>
<div class="row">
<div>{{ 'TEMPLATE_PAGE.TEMPLATE_DETAILS.PUBLIC' | translate }}</div>
<div>{{ entity.isPublic | viewValue | async }}</div>
</div>
<div class="row">
<div>{{ 'TEMPLATE_PAGE.TEMPLATE_DETAILS.RECOMMENDED' | translate }}</div>
<div>{{ entity.isFeatured | viewValue | async }}</div>
</div>
<div class="row" *ngIf="entity.isPasswordEnabled !== undefined">
<div>{{ 'TEMPLATE_PAGE.TEMPLATE_DETAILS.PASSWORD_ENABLED' | translate }}</div>
<div>{{ entity.isPasswordEnabled | viewValue | async }}</div>
</div>
<div class="row" *ngIf="entity.isDynamicallyScalable !== undefined">
<div>{{ 'TEMPLATE_PAGE.TEMPLATE_DETAILS.DYNAMICALLY_SCALABLE' | translate }}</div>
<div>{{ entity.isDynamicallyScalable | viewValue | async }}</div>
</div>
<div class="row">
<div>{{ 'TEMPLATE_PAGE.TEMPLATE_DETAILS.CROSS_ZONES' | translate }}</div>
<div>{{ entity.crossZones | viewValue | async }}</div>
</div>
<div class="row">
<div>{{ 'TEMPLATE_PAGE.TEMPLATE_DETAILS.DOMAIN' | translate }}</div>
<div>{{ entity.domain }}</div>
</div>
<div class="row">
<div>{{ 'TEMPLATE_PAGE.TEMPLATE_DETAILS.CREATED' | translate }}</div>
<div>{{ entity.created | stringifyDate }}</div>
</div>
<div *ngIf="entity.type" class="row">
<div>{{ 'TEMPLATE_PAGE.TEMPLATE_DETAILS.TYPE' | translate }}</div>
<div>{{ templateTypeTranslationToken | translate }}</div>
</div>
<div *ngIf="entity.hypervisor" class="row">
<div>{{ 'TEMPLATE_PAGE.TEMPLATE_DETAILS.HYPERVISOR' | translate }}</div>
<div>{{ entity.hypervisor }}</div>
</div>
</div>
</md-card-content>
</md-card>
<md-card *ngIf="entity?.downloadUrl" mdl-shadow="2">
<md-card-header>
<md-card-title><h2>{{ 'TEMPLATE_PAGE.TEMPLATE_DETAILS.DOWNLOAD_URL' | translate }}</h2></md-card-title>
</md-card-header>
<md-card-content>
<cs-input-group>
<mdl-textfield
class="md-card-input-copy"
cs-input-group-textbox
readonly
[ngModel]="entity?.downloadUrl"
>
</mdl-textfield>
<button
mdl-button
mdl-button-type="icon"
cs-input-group-button
ngxClipboard
[cbContent]="entity?.downloadUrl"
(cbOnSuccess)="onCopySuccess()"
(cbOnError)="onCopyFail()"
>
<md-icon
mdTooltipPosition="below"
[mdTooltip]="'CLIPBOARD.COPY' | translate"
>
content_copy
</md-icon>
</button>
</cs-input-group>
</md-card-content>
</md-card>
</md-tab>

<md-tab>
<ng-template md-tab-label>
<div [mdTooltip]="'TEMPLATE_PAGE.SIDEBAR.ZONES' | translate" class="md-tab-tooltip">
<md-icon>public</md-icon>
<nav md-tab-nav-bar>
<a
md-tab-link
[routerLink]="['./details']"
queryParamsHandling="preserve"
[active]="tabIsActive('details')"
>
<div
[mdTooltip]="'TEMPLATE_PAGE.SIDEBAR.TEMPLATE' | translate"
class="md-tab-tooltip"
>
<div class="disc-icon-container">
<div class="disc-icon"></div>
</div>
</ng-template>
<div *ngIf="!readyInEveryZone" class="update-button-container">
<mdl-button (click)="updateStatus()">{{ 'COMMON.UPDATE' | translate }}</mdl-button>
</div>
<md-card *ngFor="let zone of entity.zones" class="vm-card" mdl-shadow="2">
<md-card-header>
<md-card-title>
<h2 class="md-card-title-text">{{ zone.zoneName }}</h2>
</md-card-title>
</md-card-header>
<md-card-content class="grid">
<div class="row">
<div>{{ 'TEMPLATE_PAGE.ZONE_DETAILS.READY' | translate }}</div>
<div>{{ zone.isReady | viewValue | async }}</div>
</div>
<div *ngIf="!zone.isReady && zone.status" class="row">
<div>{{ 'COMMON.STATUS' | translate }}</div>
<div>{{ zone.status }}</div>
</div>
</md-card-content>
</md-card>
</md-tab>

<md-tab>
<ng-template md-tab-label>
<div [mdTooltip]="'TEMPLATE_PAGE.SIDEBAR.TAGS' | translate" class="md-tab-tooltip">
<md-icon>local_offer</md-icon>
</div>
</ng-template>
<cs-template-tags [entity]="entity"></cs-template-tags>
</md-tab>
</md-tab-group>
</a>
<a
md-tab-link
[routerLink]="['./zones']"
queryParamsHandling="preserve"
[active]="tabIsActive('zones')"
>
<div [mdTooltip]="'TEMPLATE_PAGE.SIDEBAR.ZONES' | translate" class="md-tab-tooltip">
<md-icon>public</md-icon>
</div>
</a>
<a
md-tab-link
[routerLink]="['./tags']"
queryParamsHandling="preserve"
[active]="tabIsActive('tags')"
>
<div
[mdTooltip]="'TEMPLATE_PAGE.SIDEBAR.TAGS' | translate"
class="md-tab-tooltip"
>
<md-icon>local_offer</md-icon>
</div>
</a>
</nav>
</div>

<router-outlet></router-outlet>

<cs-no-results *ngIf="notFound" [text]="'TEMPLATE_NOT_FOUND'"></cs-no-results>

<cs-overlay-loading [active]="!entity && !notFound"></cs-overlay-loading>
Loading

0 comments on commit 583c8bc

Please sign in to comment.