feat(orb-ui): #1267 Agent View Tabs

ui/src/app/pages/fleet/agents/view/agent.view.component.html

@@ -42,21 +42,42 @@
   <div class="loading-spinner"></div>
 </div>
 
-<div *ngIf="!isLoading" class="row">
-  <div class="card-col col-5" style="padding-right: 10px !important;">
-    <ngx-agent-information [agent]="agent"></ngx-agent-information>
-    <ngx-agent-backends [agent]="agent"></ngx-agent-backends>
-  </div>
-
-  <div class="card-col col-7" style="padding-left: 10px !important;">
-    <ngx-agent-policies-datasets
-      [agent]="agent"
-      [datasets]="datasets"
-      (refreshAgent)="retrieveAgent()"
-    >
-    </ngx-agent-policies-datasets>
-    <ngx-agent-groups [agent]="agent" [groups]="groups"></ngx-agent-groups>
-    <ngx-agent-provisioning [agent]="agent"></ngx-agent-provisioning>
-    <ngx-agent-capabilities [agent]="agent"></ngx-agent-capabilities>
-  </div>
+<div *ngIf="!isLoading">
+  <nb-tabset>
+    <nb-tab tabTitle="Agent Information">
+      <div class="row">
+        <div class="card-col col-5">
+          <ngx-agent-information [agent]="agent"></ngx-agent-information>
+        </div>
+        <div class="card-col col-7" style="padding-left: 0;">
+          <ngx-agent-backends [agent]="agent"></ngx-agent-backends>
+          <ngx-agent-capabilities [agent]="agent"></ngx-agent-capabilities>
+        </div>
+      </div>
+    </nb-tab>
+    <nb-tab tabTitle="Policies & Datasets">
+      <div class="row">
+        <div class="card-col col-7">
+          <ngx-agent-policies-datasets
+          [agent]="agent"
+          [datasets]="datasets"
+          (refreshAgent)="retrieveAgent()">
+          </ngx-agent-policies-datasets>
+        </div>
+        <div class="card-col col-5" style="padding-left: 0;">
+          <ngx-agent-groups [agent]="agent" [groups]="groups"></ngx-agent-groups>
+        </div>
+      </div>
+    </nb-tab>
+    <nb-tab tabTitle="Proviosioning Commands">
+      <div class="row">
+        <div class="card-col col-6">
+          <ngx-agent-provisioning [agent]="agent" [provisioningType]="default"></ngx-agent-provisioning>
+        </div>
+        <div class="card-col col-6" style="padding-left: 0;">
+          <ngx-agent-provisioning [agent]="agent" [provisioningType]="configFile"></ngx-agent-provisioning>
+        </div>
+      </div>
+    </nb-tab>
+  </nb-tabset>
 </div>

ui/src/app/pages/fleet/agents/view/agent.view.component.scss

@@ -21,7 +21,10 @@ h4 {
   line-height: 2rem;
   margin-bottom: 1.5rem;
 }
-
+nb-tab {
+  padding: 0 !important;
+  overflow: hidden !important;
+}
 nb-card {
   border: transparent;
   border-radius: 0.5rem;

ui/src/app/pages/fleet/agents/view/agent.view.component.ts

@@ -38,6 +38,9 @@ export class AgentViewComponent implements OnInit, OnDestroy {
 
   agentSubscription: Subscription;
 
+  configFile = 'configFile'
+  default = 'default'
+
   constructor(
     protected agentsService: AgentsService,
     protected route: ActivatedRoute,

ui/src/app/shared/components/orb/agent/agent-backends/agent-backends.component.scss

@@ -8,7 +8,7 @@ h4 {
 }
 
 nb-tab {
-  padding: 1rem 0.5rem !important;
+  padding-bottom: 0 !important;
 }
 
 nb-card {
@@ -151,7 +151,3 @@ nb-card {
     background-color: #3089fc !important;
   }
 }
-
-.summary-accent {
-  color: #969fb9 !important;
-}

ui/src/app/shared/components/orb/agent/agent-groups/agent-groups.component.scss

@@ -127,11 +127,14 @@ nb-card {
   cursor: pointer !important;
   outline: none !important;
   overflow: hidden !important;
+  margin-right: 5px;
+  padding: 5px 5px 8px 6px !important;
 }
 
 .agent-group-accent {
   color: #ffffff !important;
   font-weight: 500;
+
 }
 
 .error-accent {

ui/src/app/shared/components/orb/agent/agent-provisioning/agent-provisioning.component.html

@@ -1,89 +1,42 @@
-<nb-card style="max-height: 500px;">
+<nb-card *ngIf="provisioningTypeMode.default">
   <nb-card-header>
-    Provisioning Commands
-    <nb-select [(selected)]="selectedOS"
-               appearance="filled"
-               class="float-right"
-               data-orb-qa-id="selected_OS">
-      <nb-option *ngFor="let option of availableOS"
-                 [value]="option">
-        {{ option | titlecase }}
-      </nb-option>
-    </nb-select>
-    <button
-      style="color: #3089fc; float: none;"
-      ghost="true"
-      nbButton
-      (click)="toggleProvisioningCommand('hideCommand')">
-      <nb-icon [icon]="hideCommand ? 'plus-outline': 'minus-outline'"
-               pack="eva">
-      </nb-icon>
-    </button>
+    Default Provisioning Command
   </nb-card-header>
-  <nb-card-body [hidden]="hideCommand">
-    <nb-card style="  border: transparent;
-    border-radius: 0.5rem;">
-      <nb-card-header>
-        Default Provisioning Command
-        <button
-        style="color: #3089fc"
-        ghost="true"
-        nbButton
-        (click)="toggleProvisioningCommand('hideCommand2')">
-        <nb-icon [icon]="hideCommand2 ? 'plus-outline': 'minus-outline'"
-                 pack="eva">
-        </nb-icon>
-      </button>
-      </nb-card-header>
-      <nb-card-body [hidden]="hideCommand2"  style="margin: 0 !important; background-color: #1c2339 !important;">
-        <pre>
-          <button [cdkCopyToClipboard]="defaultCommandCopy" class="copy"
-            nbTooltip="Copy Provisioning Command">
-            <nb-icon (click)="toggleIcon('command')" [icon]="copyCommandIcon" pack="eva">
-            </nb-icon>
-          </button>
-          <code [innerHtml]="defaultCommandShow">
-            {{ defaultCommandShow }}
-          </code>
-        </pre>
-      </nb-card-body>    
-    </nb-card>
-    <nb-card style="  border: transparent;
-    border-radius: 0.5rem;">
-      <nb-card-header>
-        Provisioning Command with Configuration File
-        <button
-        style="color: #3089fc"
-        ghost="true"
-        nbButton
-        (click)="toggleProvisioningCommand('hideCommand3')">
-        <nb-icon [icon]="hideCommand3 ? 'plus-outline': 'minus-outline'"
-                 pack="eva">
+  <nb-card-body>
+    <pre>
+      <button [cdkCopyToClipboard]="defaultCommandCopy" 
+        nbTooltip="Copy Provisioning Command">
+        <nb-icon (click)="toggleIcon('command')" [icon]="copyCommandIcon" pack="eva">
         </nb-icon>
       </button>
-      <nb-icon icon="info-outline" style="margin-top: 10px; margin-right: 10px;" 
-      nbTooltip="This command requires that a configuration file named &quot;agent.yaml&quot; exist in your current working directory">
-      </nb-icon>
-      </nb-card-header>
-      <nb-card-body [hidden]="hideCommand3"  style="margin: 0 !important; background-color: #1c2339 !important;">
-        <pre>
-          <button [cdkCopyToClipboard]="fileConfigCommandCopy" class="copy"
-          nbTooltip="Copy Provisioning Command">
-          <nb-icon (click)="toggleIcon('command')" [icon]="copyCommandIcon" pack="eva">
-          </nb-icon>
-          </button>
-          <code [innerHtml]="fileConfigCommandShow">
-            {{ fileConfigCommandShow }}
-          </code>
-        </pre>
-      </nb-card-body>  
-    </nb-card> 
-    <p style="margin-left: 1rem;" *ngIf="!hideCommand3">
-      <a href="https://orb.community/documentation/running_orb_agent/#configuration-files"
-        target="_blank"
-        style="background-color: #ff9f05 !important;">Click here 
-      </a>
-      &nbsp; <span style="color: #ff9f05 !important;">to learn more about how create and apply configuration files.</span>
-    </p> 
-  </nb-card-body>
+      <code [innerHtml]="defaultCommandShow">
+        {{ defaultCommandShow }}
+      </code>
+    </pre>
+  </nb-card-body>    
 </nb-card>
+
+<nb-card *ngIf="provisioningTypeMode.configFile">
+  <nb-card-header>
+    Provisioning Command with Configuration File
+  <a href="https://orb.community/documentation/running_orb_agent/#configuration-files" target="_blank">
+    <nb-icon icon="info-outline" style="margin-top: 3px; margin-right: 10px;" 
+    nbTooltip="This command requires that a configuration file named &quot;agent.yaml&quot; exist in your current working directory. Click to go to documentation.">
+    </nb-icon>
+  </a>
+
+  </nb-card-header>
+  <nb-card-body>
+    <pre>
+      <button [cdkCopyToClipboard]="fileConfigCommandCopy" 
+      nbTooltip="Copy Provisioning Command">
+      <nb-icon (click)="toggleIcon('command')" [icon]="copyCommandIcon" pack="eva">
+      </nb-icon>
+      </button>
+      <code [innerHtml]="fileConfigCommandShow">
+        {{ fileConfigCommandShow }}
+      </code>
+    </pre>
+  </nb-card-body> 
+</nb-card> 
+

ui/src/app/shared/components/orb/agent/agent-provisioning/agent-provisioning.component.scss

@@ -30,8 +30,9 @@ nb-card {
   nb-card-body {
     border-bottom-left-radius: 0.5rem;
     border-bottom-right-radius: 0.5rem;
-    margin: 0 2rem 0 2rem;
-    padding: 0;
+    margin: 0;
+    padding: 0 1rem 0 1rem;
+    background-color: #1c2339 !important;
 
     label {
       color: #969fb9;
@@ -49,12 +50,9 @@ nb-card {
 
     pre {
       display: flex;
-      flex-direction: row-reverse;
-      flex-wrap: wrap;
-      align-content: space-between;
-      align-items: flex-start;
-      justify-content: space-between;
+
       margin: 0;
+      height: fit-content !important;
 
       background: transparent;
       padding: 0.75rem;
@@ -65,15 +63,17 @@ nb-card {
         background: transparent;
         border: 0 transparent;
         color: #969fb9;
-        top: -0.25rem;
-        float: right;
-        right: -0.5rem;
         outline: none;
+        position: absolute;
+        top: 0;
+        right: 1.3rem;
       }
 
       code {
         color: #ffffff;
         line-height: 2.5 !important;
+        font-size: 14px !important;
+        float: left;
       }
     }
   }
@@ -121,15 +121,5 @@ nb-card {
 button {
   box-shadow: none !important;
   outline: none !important;
-  margin-right: 15px;
-}
-a {
-  white-space: nowrap !important;
-  padding: 0 0.3rem !important;
-  background-color: #ff9f05 !important;
-  font-weight: 700 !important;
-  text-decoration: none !important;
-  color: #ffffff !important;
-  border-radius: 10px;
-  fill: #3089fc !important;
 }
+

ui/src/app/shared/components/orb/agent/agent-provisioning/agent-provisioning.component.ts

@@ -8,7 +8,9 @@ import { Agent, AgentStates } from "app/common/interfaces/orb/agent.interface";
   styleUrls: ["./agent-provisioning.component.scss"],
 })
 export class AgentProvisioningComponent implements OnInit {
+
   @Input() agent: Agent;
+  @Input() provisioningType: string;
 
   agentStates = AgentStates;
 
@@ -23,18 +25,24 @@ export class AgentProvisioningComponent implements OnInit {
   fileConfigCommandCopy: string;
   fileConfigCommandShow: string;
 
-  hideCommand: boolean;
-  hideCommand2: boolean;
-  hideCommand3: boolean;
+  provisioningTypeMode = {
+    default: false,
+    configFile: false,
+  }
 
   constructor() {
     this.copyCommandIcon = "copy-outline";
   }
 
   ngOnInit(): void {
-    this.hideCommand2 = false;
-    this.hideCommand3 = true;
-    this.hideCommand = this.agent?.state !== this.agentStates.new;
+    console.log(this.provisioningType);
+    if (this.provisioningType === 'default') {
+      this.provisioningTypeMode.default = true;
+    }
+    else if (this.provisioningType === 'configFile') {
+      this.provisioningTypeMode.configFile = true;
+
+    }
     this.makeCommand2Copy();
   }
 
@@ -82,18 +90,4 @@ orbcommunity/orb-agent run -c /usr/local/orb/agent.yaml`;
 -v \${PWD}/:/usr/local/orb/ \\
 orbcommunity/orb-agent run -c /usr/local/orb/agent.yaml`;
   }
-
-toggleProvisioningCommand(command: string) {
-  switch (command) {
-    case 'hideCommand':
-      this.hideCommand = !this.hideCommand;
-      break;
-    case 'hideCommand2':
-      this.hideCommand2 = !this.hideCommand2;
-      break;
-    case 'hideCommand3':
-      this.hideCommand3 = !this.hideCommand3;
-      break;
-  }
-}
 }