gilles/scrutiny
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

working on expanding row content.

Browse Source
This commit is contained in:
Jason Kulatunga
2022-06-09 22:13:44 -07:00
parent cbd230a7e0
commit b9eb5687cd
3 changed files with 83 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp/frontend/src/app/modules/detail/detail.component.html
+53 -8
View File
@@ -329,17 +329,62 @@
<!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
<ng-container matColumnDef="expandedDetail">
<td mat-cell *matCellDef="let attribute" [attr.colspan]="smartAttributeTableColumns.length">
<div class="attribute-detail"
[@detailExpand]="attribute == expandedAttribute ? 'expanded' : 'collapsed'">
<div class="attribute-position-diagram">
<div class="attribute-position"> {{getAttributeName(attribute)}} </div>
<div class="attribute-symbol"> {{getAttributeName(attribute)}} </div>
<div class="attribute-name"> {{getAttributeName(attribute)}} </div>
<div class="attribute-weight"> {{getAttributeName(attribute)}} </div>
<div class="flex flex-auto w-1/3 min-w-80 py-4">
<div class="flex flex-col flex-auto justify-end text-md pb-3">
{{getAttributeDescription(attribute)}}
</div>
</div>
<div class="attribute-detail-description">
{{getAttributeDescription(attribute)}}
<span class="attribute-detail-description-attribution"> -- Wikipedia </span>
<div class="flex flex-auto w-2/3 min-w-80">
<div class="flex flex-col flex-auto justify-end text-md px-6 pb-3">
<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>
</td>
webapp/frontend/src/app/modules/detail/detail.component.scss
+7 -7
View File
@@ -31,13 +31,13 @@ tr.attribute-detail-row {
height: 0;
}
tr.attribute-row:not(.attribute-expanded-row):hover {
@if ($is-dark) {
background: rgba(0, 0, 0, 0.05);
} @else {
background: map-get($primary, 50);
}
}
//tr.attribute-row:not(.attribute-expanded-row):hover {
// @if ($is-dark) {
// background: rgba(0, 0, 0, 0.05);
// } @else {
// background: map-get($primary, 50);
// }
//}
tr.attribute-row:not(.attribute-expanded-row):active {
background: #efefef;
webapp/frontend/src/app/modules/detail/detail.component.ts
+23 -1
View File
@@ -150,6 +150,28 @@ export class DetailComponent implements OnInit, AfterViewInit, OnDestroy {
return ''
// 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 {
let attribute_metadata = this.metadata[attribute_data.attribute_id]
@@ -279,7 +301,7 @@ export class DetailComponent implements OnInit, AfterViewInit, OnDestroy {
} else {
//ATA
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){