### File

`src/app/resource/resource-detail/resource-detail.component.ts`

### Implements

`OnInit`

### Metadata

selector | `hi-resource-detail`
styleUrls | `./resource-detail.component.scss`
templateUrl | `./resource-detail.component.html`

### Index

###### Properties
can clusterName isLoading resource resourceName Readonly tabLinks
###### Methods
disableResource enableResource Protected loadResource ngOnInit removeResource

### Constructor

`constructor(route: ActivatedRoute, router: Router, service: ResourceService, helper: HelperService)`
Defined in src/app/resource/resource-detail/resource-detail.component.ts:25
Parameters :
Name | Type | Optional
route | `ActivatedRoute` | No
router | `Router` | No
service | `ResourceService` | No
helper | `HelperService` | No

### Methods

disableResource
`disableResource()`
Defined in src/app/resource/resource-detail/resource-detail.component.ts:48
Returns : `void`

enableResource
`enableResource()`
Defined in src/app/resource/resource-detail/resource-detail.component.ts:41
Returns : `void`

Protected loadResource
`loadResource()`
Defined in src/app/resource/resource-detail/resource-detail.component.ts:73
Returns : `void`

ngOnInit
`ngOnInit()`
Defined in src/app/resource/resource-detail/resource-detail.component.ts:34
Returns : `void`

removeResource
`removeResource()`
Defined in src/app/resource/resource-detail/resource-detail.component.ts:55
Returns : `void`

### Properties

can
Default value : `false`
Defined in src/app/resource/resource-detail/resource-detail.component.ts:25

clusterName
Type : `string`
Defined in src/app/resource/resource-detail/resource-detail.component.ts:21

isLoading
Default value : `true`
Defined in src/app/resource/resource-detail/resource-detail.component.ts:24

resource
Type : `Resource`
Defined in src/app/resource/resource-detail/resource-detail.component.ts:23

resourceName
Type : `string`
Defined in src/app/resource/resource-detail/resource-detail.component.ts:22

Readonly tabLinks
Type : `[]`
Default value : `[ { label: 'Partitions', link: 'partitions' }, { label: 'External View', link: 'externalView' }, { label: 'Ideal State', link: 'idealState' }, { label: 'Configuration', link: 'configs' }, ]`
Defined in src/app/resource/resource-detail/resource-detail.component.ts:14

    import { Component, OnInit } from '@angular/core';
    import { Router, ActivatedRoute } from '@angular/router';

    import { Resource } from '../shared/resource.model';
    import { HelperService } from '../../shared/helper.service';
    import { ResourceService } from '../shared/resource.service';

    @Component({
      selector: 'hi-resource-detail',
      templateUrl: './resource-detail.component.html',
      styleUrls: ['./resource-detail.component.scss'],
    })
    export class ResourceDetailComponent implements OnInit {
      readonly tabLinks = [
        { label: 'Partitions', link: 'partitions' },
        { label: 'External View', link: 'externalView' },
        { label: 'Ideal State', link: 'idealState' },
        { label: 'Configuration', link: 'configs' },
      ];

      clusterName: string;
      resourceName: string;
      resource: Resource;
      isLoading = true;
      can = false;

      constructor(
        protected route: ActivatedRoute,
        protected router: Router,
        protected service: ResourceService,
        protected helper: HelperService
      ) {}

      ngOnInit() {
        this.service.can().subscribe((data) => (this.can = data));
        this.clusterName = this.route.snapshot.params.cluster_name;
        this.resourceName = this.route.snapshot.params.resource_name;
        this.loadResource();
      }

      enableResource() {
        this.service.enable(this.clusterName, this.resource.name).subscribe(
          () => this.loadResource(),
          (error) => this.helper.showError(error)
        );
      }

      disableResource() {
        this.service.disable(this.clusterName, this.resource.name).subscribe(
          () => this.loadResource(),
          (error) => this.helper.showError(error)
        );
      }

      removeResource() {
        this.helper
          .showConfirmation('Are you sure you want to remove this Resource?')
          .then((result) => {
            console.log(result);
            if (result) {
              this.service
                .remove(this.clusterName, this.resourceName)
                .subscribe((data) => {
                  this.helper.showSnackBar(
                    `Resource: ${this.resourceName} removed!`
                  );
                  this.router.navigate(['..'], { relativeTo: this.route });
                });
            }
          });
      }

      protected loadResource() {
        this.isLoading = true;
        this.service.get(this.clusterName, this.resourceName).subscribe(
          (resource) => (this.resource = resource),
          (error) => this.helper.showError(error),
          () => (this.isLoading = false)
        );
      }
    }

    <!--
      ~ 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.
      -->

    <section>
      <mat-toolbar class="mat-elevation-z1">
        <mat-toolbar-row>
          <hi-detail-header
            [cluster]="clusterName"
            [resource]="resourceName"
          ></hi-detail-header>
          <hi-disabled-label
            *ngIf="!isLoading && !resource.online"
            text="OFFLINE"
          ></hi-disabled-label>
          <hi-disabled-label
            *ngIf="!isLoading && !resource.enabled"
            text="DISABLED"
          ></hi-disabled-label>
        </mat-toolbar-row>
        <mat-toolbar-row class="information">
          <a mat-mini-fab routerLink="../"><mat-icon>arrow_back</mat-icon></a>
          <mat-spinner *ngIf="isLoading" diameter="30"></mat-spinner>
          <hi-key-value-pairs *ngIf="!isLoading" [obj]="resource">
            <hi-key-value-pair
              name="Ideal State Mode"
              prop="idealStateMode"
            ></hi-key-value-pair>
            <hi-key-value-pair
              name="Rebalance Mode"
              prop="rebalanceMode"
            ></hi-key-value-pair>
            <hi-key-value-pair
              name="State Model"
              prop="stateModel"
            ></hi-key-value-pair>
            <hi-key-value-pair
              name="Ideal Partitions"
              prop="partitionCount"
            ></hi-key-value-pair>
            <hi-key-value-pair
              name="Replication Factor"
              prop="replicaCount"
            ></hi-key-value-pair>
          </hi-key-value-pairs>
          <span fxFlex="1 1 auto"></span>
          <button mat-mini-fab *ngIf="can" [matMenuTriggerFor]="menu">
            <mat-icon>menu</mat-icon>
          </button>
          <mat-menu #menu="matMenu">
            <button
              mat-menu-item
              *ngIf="resource && resource.enabled"
              (click)="disableResource()"
            >
              <mat-icon>not_interested</mat-icon>
              <span>Disable this Resource</span>
            </button>
            <button
              mat-menu-item
              *ngIf="resource && !resource.enabled"
              (click)="enableResource()"
            >
              <mat-icon>play_circle_outline</mat-icon>
              <span>Enable this Resource</span>
            </button>
            <button mat-menu-item *ngIf="false" (click)="removeResource()">
              <mat-icon>delete</mat-icon>
              <span>REMOVE this Resource</span>
            </button>
          </mat-menu>
        </mat-toolbar-row>
      </mat-toolbar>
      <nav mat-tab-nav-bar>
        <a
          mat-tab-link
          *ngFor="let tabLink of tabLinks"
          [routerLink]="tabLink.link"
          routerLinkActive
          #rla="routerLinkActive"
          [active]="rla.isActive"
        >
          {{ tabLink.label }}
        </a>
      </nav>
      <router-outlet></router-outlet>
    </section>

`./resource-detail.component.scss`

    @use '@angular/material' as mat;
    @import 'src/theme.scss';

    .offline {
      font-size: 14px;
      padding-left: 24px;
      color: mat.get-color-from-palette($hi-warn);
    }

    .information {
      .mat-spinner {
        margin: 0 20px;
      }
    }

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""