From b9eb5687cd9474fa1b12958987db804c7709134f Mon Sep 17 00:00:00 2001
From: Jason Kulatunga <jason@thesparktree.com>
Date: Thu, 9 Jun 2022 22:13:44 -0700
Subject: [PATCH] working on expanding row content.

---
 .../app/modules/detail/detail.component.html  | 61 ++++++++++++++++---
 .../app/modules/detail/detail.component.scss  | 14 ++---
 .../app/modules/detail/detail.component.ts    | 24 +++++++-
 3 files changed, 83 insertions(+), 16 deletions(-)

diff --git a/webapp/frontend/src/app/modules/detail/detail.component.html b/webapp/frontend/src/app/modules/detail/detail.component.html
index 67ccc8e..861f34f 100644
--- a/webapp/frontend/src/app/modules/detail/detail.component.html
+++ b/webapp/frontend/src/app/modules/detail/detail.component.html
@@ -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>
diff --git a/webapp/frontend/src/app/modules/detail/detail.component.scss b/webapp/frontend/src/app/modules/detail/detail.component.scss
index 947b793..89b9136 100644
--- a/webapp/frontend/src/app/modules/detail/detail.component.scss
+++ b/webapp/frontend/src/app/modules/detail/detail.component.scss
@@ -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;
diff --git a/webapp/frontend/src/app/modules/detail/detail.component.ts b/webapp/frontend/src/app/modules/detail/detail.component.ts
index 048ab0c..f52e495 100644
--- a/webapp/frontend/src/app/modules/detail/detail.component.ts
+++ b/webapp/frontend/src/app/modules/detail/detail.component.ts
@@ -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){