working on expanding row content.

pull/295/head
Jason Kulatunga 2 years ago
parent cbd230a7e0
commit b9eb5687cd

@ -329,17 +329,62 @@
<!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns --> <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
<ng-container matColumnDef="expandedDetail"> <ng-container matColumnDef="expandedDetail">
<td mat-cell *matCellDef="let attribute" [attr.colspan]="smartAttributeTableColumns.length"> <td mat-cell *matCellDef="let attribute" [attr.colspan]="smartAttributeTableColumns.length">
<div class="attribute-detail" <div class="attribute-detail"
[@detailExpand]="attribute == expandedAttribute ? 'expanded' : 'collapsed'"> [@detailExpand]="attribute == expandedAttribute ? 'expanded' : 'collapsed'">
<div class="attribute-position-diagram">
<div class="attribute-position"> {{getAttributeName(attribute)}} </div> <div class="flex flex-auto w-1/3 min-w-80 py-4">
<div class="attribute-symbol"> {{getAttributeName(attribute)}} </div> <div class="flex flex-col flex-auto justify-end text-md pb-3">
<div class="attribute-name"> {{getAttributeName(attribute)}} </div> {{getAttributeDescription(attribute)}}
<div class="attribute-weight"> {{getAttributeName(attribute)}} </div> </div>
</div> </div>
<div class="attribute-detail-description"> <div class="flex flex-auto w-2/3 min-w-80">
{{getAttributeDescription(attribute)}} <div class="flex flex-col flex-auto justify-end text-md px-6 pb-3">
<span class="attribute-detail-description-attribution"> -- Wikipedia </span> <div class="flex items-center justify-between py-3 border-b last:border-b-0 ng-star-inserted">
<div class="flex items-center w-1/4">Type</div>
<div class="flex items-center w-1/4">Value</div>
<div class="flex items-center w-1/4">Worst/Thresh</div>
<div class="flex items-center w-1/4">Failure</div>
</div>
<div class="flex items-center justify-between py-3 border-b last:border-b-0 ng-star-inserted">
<div class="flex items-center w-1/4">
<div class="flex-shrink-0 w-2 h-2 mr-3 rounded-full"
[ngClass]="{'bg-red': getAttributeScrutinyStatusName(attribute.status) === 'failed',
'bg-green': getAttributeScrutinyStatusName(attribute.status) === 'passed',
'bg-yellow': getAttributeStatusName(attribute.status) === 'warn'}"></div>
<div class="truncate">Scrutiny</div>
</div>
<div class="w-1/4 items-center font-medium">{{getAttributeValue(attribute)}}</div>
<div class="w-1/4 items-center text-secondary">--</div>
<div class="w-1/4 items-center text-secondary">{{(attribute.failure_rate | percent) || '--'}}</div>
</div>
<div class="flex items-center justify-between py-3 border-b last:border-b-0 ng-star-inserted">
<div class="flex items-center w-1/4">
<div class="flex-shrink-0 w-2 h-2 mr-3 rounded-full"
[ngClass]="{'bg-red': getAttributeSmartStatusName(attribute.status) === 'failed',
'bg-green': getAttributeSmartStatusName(attribute.status) === 'passed'}"
></div>
<div class="truncate">Normalized</div>
</div>
<div class="w-1/4 items-center font-medium">{{attribute.value}}</div>
<div class="w-1/4 items-center text-secondary">{{getAttributeWorst(attribute) || '--' }}/{{getAttributeThreshold(attribute)}}</div>
<div class="w-1/4 items-center text-secondary">--</div>
</div>
<div class="flex items-center justify-between py-3 border-b last:border-b-0 ng-star-inserted">
<div class="flex items-center w-1/4">
<div class="flex-shrink-0 w-2 h-2 mr-3 rounded-full"></div>
<div class="truncate">Raw</div>
</div>
<div class="w-1/4 items-center font-medium">{{attribute.raw_value}}</div>
<div class="w-1/4 items-center text-secondary">--</div>
<div class="w-1/4 items-center text-secondary">--</div>
</div>
</div>
</div> </div>
</div> </div>
</td> </td>

@ -31,13 +31,13 @@ tr.attribute-detail-row {
height: 0; height: 0;
} }
tr.attribute-row:not(.attribute-expanded-row):hover { //tr.attribute-row:not(.attribute-expanded-row):hover {
@if ($is-dark) { // @if ($is-dark) {
background: rgba(0, 0, 0, 0.05); // background: rgba(0, 0, 0, 0.05);
} @else { // } @else {
background: map-get($primary, 50); // background: map-get($primary, 50);
} // }
} //}
tr.attribute-row:not(.attribute-expanded-row):active { tr.attribute-row:not(.attribute-expanded-row):active {
background: #efefef; background: #efefef;

@ -150,6 +150,28 @@ export class DetailComponent implements OnInit, AfterViewInit, OnDestroy {
return '' return ''
// tslint:enable:no-bitwise // tslint:enable:no-bitwise
} }
getAttributeScrutinyStatusName(attributeStatus: number): string {
// tslint:disable:no-bitwise
if ((attributeStatus & 4) !== 0){
return 'failed'
} else if ((attributeStatus & 2) !== 0){
return 'warn'
} else {
return 'passed'
}
// tslint:enable:no-bitwise
}
getAttributeSmartStatusName(attributeStatus: number): string {
// tslint:disable:no-bitwise
if ((attributeStatus & 1) !== 0){
return 'failed'
} else {
return 'passed'
}
// tslint:enable:no-bitwise
}
getAttributeName(attribute_data): string { getAttributeName(attribute_data): string {
let attribute_metadata = this.metadata[attribute_data.attribute_id] let attribute_metadata = this.metadata[attribute_data.attribute_id]
@ -279,7 +301,7 @@ export class DetailComponent implements OnInit, AfterViewInit, OnDestroy {
} else { } else {
//ATA //ATA
attributes = latest_smart_result.attrs attributes = latest_smart_result.attrs
this.smartAttributeTableColumns = ['status', 'id', 'name', 'value', 'worst', 'thresh','ideal', 'failure', 'history']; this.smartAttributeTableColumns = ['status', 'id', 'name', 'value', 'thresh','ideal', 'failure', 'history'];
} }
for(const attrId in attributes){ for(const attrId in attributes){

Loading…
Cancel
Save