sbom dependency tree enhancements

app/components/sbom/component-details/overview/index.ts

@@ -31,6 +31,7 @@ export default class SbomComponentDetailsOverviewComponent extends Component<Sbo
   @service declare intl: IntlService;
   @service declare store: Store;
   @service declare router: RouterService;
+  @service('notifications') declare notify: NotificationService;
 
   @tracked expandedNodes: string[] = [];
   @tracked treeNodes: AkTreeNodeProps[] = [];
@@ -71,45 +72,6 @@ export default class SbomComponentDetailsOverviewComponent extends Component<Sbo
     return this.args.queryParams.sbom_component_id;
   }
 
-  get componentDetailsList() {
-    return [
-      {
-        name: this.intl.t('sbomModule.componentType'),
-        value: this.args.sbomComponent?.type,
-      },
-      {
-        name: this.intl.t('version'),
-        value: this.args.sbomComponent?.version,
-      },
-      {
-        name: this.intl.t('sbomModule.latestVersion'),
-        value: this.args.sbomComponent?.latestVersion,
-      },
-      {
-        name: this.intl.t('status'),
-        component: 'sbom/component-status' as const,
-      },
-      {
-        name: this.intl.t('author'),
-        value: this.args.sbomComponent?.author,
-      },
-    ];
-  }
-
-  get columns() {
-    return [
-      {
-        name: this.intl.t('sbomModule.componentDetails'),
-        valuePath: 'name',
-        width: 40,
-      },
-      {
-        name: '',
-        valuePath: 'value',
-      },
-    ];
-  }
-
   @action
   updateExpandedNodes(nodes: string[]) {
     this.expandedNodes = nodes;
@@ -158,6 +120,8 @@ export default class SbomComponentDetailsOverviewComponent extends Component<Sbo
       const sbProjectId = this.sbomProject?.get('id') || '';
       const sbFileId = this.sbomFile?.get('id') || '';
 
+      this.notify.error(this.intl.t('sbomModule.parentComponentNotFound'));
+
       this.router.transitionTo(
         'authenticated.dashboard.sbom.component-details',
         sbProjectId,

app/components/sbom/component-details/summary/index.ts

@@ -3,18 +3,34 @@ import { inject as service } from '@ember/service';
 import { capitalize } from '@ember/string';
 import type IntlService from 'ember-intl/services/intl';
 
+import * as semver from 'semver';
 import type SbomComponentModel from 'irene/models/sbom-component';
 
 export interface SbomComponentDetailsSummarySignature {
   Element: HTMLDivElement;
   Args: {
-    sbomComponent: SbomComponentModel | null;
+    sbomComponent: SbomComponentModel;
   };
 }
 
 export default class SbomComponentDetailsSummaryComponent extends Component<SbomComponentDetailsSummarySignature> {
   @service declare intl: IntlService;
 
+  get isLatestVersionLess() {
+    const latestVersion = this.args.sbomComponent?.cleanLatestVersion;
+    const version = this.args.sbomComponent?.cleanVersion;
+
+    if (!latestVersion || !version) {
+      return false;
+    }
+
+    if (!semver.valid(latestVersion) || !semver.valid(version)) {
+      return false;
+    }
+
+    return semver.lt(latestVersion, version);
+  }
+
   get componentSummary() {
     return [
       {
@@ -29,11 +45,13 @@ export default class SbomComponentDetailsSummaryComponent extends Component<Sbom
       },
       {
         label: this.intl.t('version'),
-        value: this.args.sbomComponent?.version,
+        value: this.args.sbomComponent?.cleanVersion,
       },
       {
         label: this.intl.t('sbomModule.latestVersion'),
-        value: this.args.sbomComponent?.latestVersion,
+        value: this.isLatestVersionLess
+          ? null
+          : this.args.sbomComponent?.cleanLatestVersion,
       },
       {
         label: this.intl.t('status'),

app/components/sbom/component-status/index.ts

@@ -2,6 +2,7 @@ import { inject as service } from '@ember/service';
 import Component from '@glimmer/component';
 import IntlService from 'ember-intl/services/intl';
 import SbomComponentModel from 'irene/models/sbom-component';
+import * as semver from 'semver';
 
 export interface SbomComponentStatusSignature {
   Args: {
@@ -17,6 +18,26 @@ type ComponentStatus = {
 export default class SbomComponentStatusComponent extends Component<SbomComponentStatusSignature> {
   @service declare intl: IntlService;
 
+  get isOutdated() {
+    const component = this.args.sbomComponent;
+
+    if (!component?.latestVersion || !component?.version) {
+      return false;
+    } else if (
+      !semver.valid(component.cleanVersion) ||
+      !semver.valid(component.cleanLatestVersion)
+    ) {
+      return false;
+    } else if (
+      semver.compare(component.cleanVersion, component.cleanLatestVersion) ===
+      -1
+    ) {
+      return true;
+    }
+
+    return false;
+  }
+
   get componentStatus() {
     const status = [] as ComponentStatus[];
     const component = this.args.sbomComponent;
@@ -34,7 +55,7 @@ export default class SbomComponentStatusComponent extends Component<SbomComponen
         });
       }
 
-      if (component.isOutdated) {
+      if (this.isOutdated) {
         status.push({
           label: this.intl.t('chipStatus.outdated'),
           color: 'default',

app/components/sbom/empty-loading-view/index.hbs

@@ -1,10 +1,10 @@
 {{! @glint-nocheck: or}}
 {{#if (or @empty @loading)}}
   <AkStack
-    local-class='empty-loading-container'
+    local-class='empty-loading-container 
+    {{if @skeleton "skeleton"}} 
+    {{if this.tree "" "list"}}'
     {{style height=(or @height '500px')}}
-    @alignItems='center'
-    @justifyContent='center'
     @direction='column'
     @spacing='2.5'
   >
@@ -23,7 +23,7 @@
         {{else}}
           <AkSvg::EmptyLoadingList
             width={{@loadingSvgWidth}}
-            height={{or @loadingSvgHeight '50%'}}
+            height={{or @loadingSvgHeight '40%'}}
             data-test-sbom-loadingSvg
           />
         {{/if}}

app/components/sbom/empty-loading-view/index.scss

@@ -2,12 +2,15 @@
   width: 100%;
   border: 1px solid var(--sbom-empty-loading-view-border-color);
   border-radius: var(--sbom-empty-loading-view-border-radius);
-  padding: 1em;
   justify-content: center;
   align-items: center;
 
   &.skeleton {
     justify-content: flex-start;
     align-items: flex-start;
   }
+
+  &.list {
+    border: 0px;
+  }
 }

app/components/sbom/scan-details/component-tree/index.hbs

@@ -64,7 +64,7 @@
             @alignItems='center'
             @width='full'
             local-class='tree-node {{if
-              (or node.dataObject.hasNextSibling this.hasMoreComponents)
+              node.dataObject.hasNextSibling
               ""
               "last-node"
             }}'
@@ -133,7 +133,7 @@
                 @underline='hover'
                 data-test-component-tree-nodeLabel
               >
-                {{node.dataObject.bomRef}} : {{node.label}}
+                {{node.label}}
               </AkTypography>
             </AkButton>
 
@@ -142,14 +142,19 @@
             />
 
             {{#if node.dataObject.isHighlighted}}
-              <AkStack local-class='highlighted-return-icon-container'>
+              <AkTooltip
+                @title={{t 'highlightedNodeTooltip'}}
+                @placement='right'
+                @arrow={{true}}
+                local-class='highlighted-return-icon-container'
+              >
                 <AkIcon
                   data-test-component-tree-returnIcon
                   @iconName='keyboard-return'
                   @size='small'
                   local-class='highlighted-return-icon'
                 />
-              </AkStack>
+              </AkTooltip>
             {{/if}}
           </AkStack>
 
@@ -162,10 +167,8 @@
                     @color='secondary'
                     @underline='always'
                     @typographyFontWeight='medium'
-                    {{on
-                      'click'
-                      (fn this.handleLoadMoreChildren node.parent.key)
-                    }}
+                    {{on 'click' (fn this.handleLoadMoreChildren node.parent)}}
+                    data-test-component-tree-child-viewMore
                   >
                     <:default>{{t 'viewMore'}}</:default>
                     <:rightIcon>
@@ -174,11 +177,7 @@
                   </AkButton>
                 {{/if}}
 
-                {{#if
-                  (this.isNodeScrollable
-                    node.parent.key node.parent.dataObject.dependencyCount
-                  )
-                }}
+                {{#if (this.isNodeScrollable node.parent)}}
                   <AkButton
                     @variant='text'
                     @color='secondary'