job and task tab refactor, app modules refactor

app/app.component.ts

@@ -6,7 +6,6 @@ import { Observable } from "rxjs";
 import {
     AccountService, AdalService, CommandService, NodeService, SSHKeyService, SettingsService, SubscriptionService,
 } from "app/services";
-import AccountCreateDialogComponent from "./components/account/add/account-create-dialog.component";
 import { SidebarContentComponent, SidebarManager } from "./components/base/sidebar";
 
 const adalConfig = {
@@ -74,10 +73,6 @@ export class AppComponent implements AfterViewInit, OnInit {
         this.sidebar.open();
     }
 
-    public addAccount() {
-        this.sidebarManager.open("add-account", AccountCreateDialogComponent);
-    }
-
     public logout() {
         this.adalService.logout();
     }

app/app.layout.html

@@ -30,16 +30,9 @@
                 <md-sidenav #rightSidebar align="end">
                     <bl-sidebar-content #sidebarContent [sidebar]="rightSidebar"></bl-sidebar-content>
                 </md-sidenav>
-                <!--[hidden]="!(hasAccount | async)"-->
                 <div>
                     <router-outlet></router-outlet>
                 </div>
-                <!--<div *ngIf="!(hasAccount | async)" class="no-account">
-                    <md-card (click)="addAccount()">
-                        <i class="fa fa-user fa-lg"></i>
-                        <div>Add a batch account</div>
-                    </md-card>
-                </div>-->
             </md-sidenav-container>
         </div>
     </section>

app/app.module.ts

@@ -5,65 +5,28 @@ import { MaterialModule } from "@angular/material";
 import { BrowserModule } from "@angular/platform-browser";
 import { RouterModule } from "@angular/router";
 
+// application router
 import { routes } from "./app.routes";
 
 // components
-import { NodeConnectModule } from "app/components/node/connect";
-import { StartTaskModule } from "app/components/pool/start-task";
-import { AppComponent } from "./app.component";
-import { DeleteAccountDialogComponent } from "./components/account/action/delete-account-dialog.component";
-import AccountCreateDialogComponent from "./components/account/add/account-create-dialog.component";
-import { AccountBrowseModule } from "./components/account/browse";
-import { AccountDetailsHomeComponent } from "./components/account/details/account-details-home.component";
-import { AccountDetailsComponent } from "./components/account/details/account-details.component";
-import { AccountHomeComponent } from "./components/account/home/account-home.component";
-import { ApplicationModule } from "./components/application/application.module";
-import { BaseModule } from "./components/base";
-import { FileBrowseModule } from "./components/file/browse";
-import { FileDetailsModule } from "./components/file/details";
-import { FileHomeComponent } from "./components/file/home";
-import { JobStatsPreviewComponent } from "./components/job/base/job-stats-preview";
-import { JobAdvancedFilterComponent } from "./components/job/browse/filter/job-advanced-filter.component";
-import { JobListComponent } from "./components/job/browse/job-list.component";
-import { JobDetailsModule } from "./components/job/details";
-import { JobHomeComponent } from "./components/job/home/job-home.component";
-import { NodeBrowseModule } from "./components/node/browse";
-import { NoNodeSelectedComponent, NodeDetailsComponent, NodePropertiesComponent } from "./components/node/details";
-import { NodeHomeComponent } from "./components/node/home";
-import { PoolNodesPreviewComponent } from "./components/pool/base/pool-nodes-preview.component";
-import { PoolAdvancedFilterComponent } from "./components/pool/browse/filter";
-import { PoolListComponent } from "./components/pool/browse/pool-list.component";
-import { PoolDetailsModule } from "./components/pool/details";
-import { PoolGraphsModule } from "./components/pool/graphs";
-import { PoolHomeComponent } from "./components/pool/home/pool-home.component";
-import { MainNavigationComponent } from "./components/shared/main-navigation.component";
-import { TaskBrowseModule } from "./components/task/browse";
-import { TaskDetailsModule } from "./components/task/details";
-import { TaskHomeComponent } from "./components/task/home";
-import { AADUserDropdownComponent } from "./components/user";
+import { AppComponent } from "app/app.component";
+import { MainNavigationComponent } from "app/components/shared/main-navigation.component";
+import { AADUserDropdownComponent } from "app/components/user";
 
-// job actions
-import { JobActionModule } from "./components/job/action";
+// extenal modules
+import { AccountModule } from "app/components/account/account.module";
+import { ApplicationModule } from "app/components/application/application.module";
+import { BaseModule } from "app/components/base";
+import { FileModule } from "app/components/file/file.module";
+import { JobModule } from "app/components/job/job.module";
+import { NodeModule } from "app/components/node/node.module";
+import { PoolModule } from "app/components/pool/pool.module";
+import { TaskModule } from "app/components/task/task.module";
 
-// pool actions
-import {
-    DeletePoolDialogComponent,
-    PoolCreateBasicDialogComponent,
-    PoolOsPickerComponent,
-    PoolResizeDialogComponent,
-} from "./components/pool/action";
-
-// task actions
-import {
-    DeleteTaskDialogComponent,
-    RerunTaskFormComponent,
-    TaskCreateBasicDialogComponent,
-    TerminateTaskDialogComponent,
-} from "./components/task/action";
-import { TaskBaseModule } from "./components/task/base";
+// unhandled application error handler
+import { BatchLabsErrorHandler } from "app/error-handler";
 
 // services
-import { BatchLabsErrorHandler } from "app/error-handler";
 import {
     AccountService,
     AdalService,
@@ -89,13 +52,7 @@ import {
 } from "./services";
 
 const modules = [
-    AccountBrowseModule,
-    ApplicationModule,
-    PoolDetailsModule, PoolGraphsModule, StartTaskModule,
-    JobDetailsModule, JobActionModule,
-    TaskBaseModule, TaskDetailsModule, TaskBrowseModule,
-    NodeBrowseModule, NodeConnectModule,
-    FileBrowseModule, FileDetailsModule,
+    AccountModule, ApplicationModule, FileModule, JobModule, NodeModule, PoolModule, TaskModule,
 ];
 
 @NgModule({
@@ -104,46 +61,11 @@ const modules = [
     ],
     declarations: [
         AADUserDropdownComponent,
-        AccountCreateDialogComponent,
-        AccountDetailsComponent,
-        AccountDetailsHomeComponent,
-        AccountHomeComponent,
         AppComponent,
-        DeleteAccountDialogComponent,
-        DeletePoolDialogComponent,
-        DeleteTaskDialogComponent,
-        FileHomeComponent,
-        JobAdvancedFilterComponent,
-        JobHomeComponent,
-        JobListComponent,
-        JobStatsPreviewComponent,
         MainNavigationComponent,
-        NodeDetailsComponent,
-        NodePropertiesComponent,
-        NodeHomeComponent,
-        NoNodeSelectedComponent,
-        PoolAdvancedFilterComponent,
-        PoolCreateBasicDialogComponent,
-        PoolHomeComponent,
-        PoolListComponent,
-        PoolNodesPreviewComponent,
-        PoolOsPickerComponent,
-        PoolResizeDialogComponent,
-        RerunTaskFormComponent,
-        TaskCreateBasicDialogComponent,
-        TaskHomeComponent,
-        TerminateTaskDialogComponent,
     ],
     entryComponents: [
-        AccountCreateDialogComponent,
-        DeleteAccountDialogComponent,
-        DeletePoolDialogComponent,
-        DeleteTaskDialogComponent,
-        PoolCreateBasicDialogComponent,
-        PoolResizeDialogComponent,
-        RerunTaskFormComponent,
-        TaskCreateBasicDialogComponent,
-        TerminateTaskDialogComponent,
+        // imported in specific area modules
     ],
     imports: [
         BrowserModule,
@@ -161,20 +83,20 @@ const modules = [
         ApplicationService,
         AzureHttpService,
         ArmHttpService,
+        BatchClientService,
         CommandService,
         ElectronRemote,
         ElectronShell,
         FileService,
         FileSystemService,
         HttpUploadService,
         JobService,
-        PoolService,
-        SubscriptionService,
-        SSHKeyService,
         NodeService,
         NodeUserService,
-        BatchClientService,
+        PoolService,
         SettingsService,
+        SSHKeyService,
+        SubscriptionService,
         TaskService,
         { provide: ErrorHandler, useClass: BatchLabsErrorHandler },
         ...commands,

app/app.routes.ts

@@ -3,23 +3,20 @@ import { Routes } from "@angular/router";
 
 import { Constants } from "app/utils";
 // component imports for routing
-import { AccountDetailsHomeComponent } from "./components/account/details/account-details-home.component";
-import { AccountDetailsComponent } from "./components/account/details/account-details.component";
+import { AccountDefaultComponent, AccountDetailsComponent } from "./components/account/details";
 import { AccountHomeComponent } from "./components/account/home/account-home.component";
-import { ApplicationDefaultComponent } from "./components/application/details/application-default.component";
-import { ApplicationDetailsComponent } from "./components/application/details/application-details.component";
+import { ApplicationDefaultComponent, ApplicationDetailsComponent } from "./components/application/details";
 import { ApplicationHomeComponent } from "./components/application/home/application-home.component";
 import { FileDetailsComponent } from "./components/file/details/file-details.component";
 import { FileHomeComponent } from "./components/file/home";
-import { JobDetailsHomeComponent } from "./components/job/details/job-details-home.component";
-import { JobDetailsComponent } from "./components/job/details/job-details.component";
+import { JobDefaultComponent, JobDetailsComponent } from "./components/job/details";
 import { JobHomeComponent } from "./components/job/home/job-home.component";
-import { NoNodeSelectedComponent, NodeDetailsComponent } from "./components/node/details";
+import { NodeDefaultComponent, NodeDetailsComponent } from "./components/node/details";
 import { NodeHomeComponent } from "./components/node/home";
 import { PoolDetailsComponent } from "./components/pool/details";
-import { PoolDetailsHomeComponent } from "./components/pool/details";
+import { PoolDefaultComponent } from "./components/pool/details";
 import { PoolHomeComponent } from "./components/pool/home/pool-home.component";
-import { NoTaskSelectedComponent, TaskDetailsComponent } from "./components/task/details";
+import { TaskDefaultComponent, TaskDetailsComponent } from "./components/task/details";
 import { TaskHomeComponent } from "./components/task/home";
 
 // set up the routing table
@@ -29,23 +26,23 @@ export const routes: Routes = [
         component: AccountHomeComponent,
         path: "accounts",
         children: [
-            { path: "", component: AccountDetailsHomeComponent }, // accounts/
+            { path: "", component: AccountDefaultComponent }, // accounts/
             { path: ":id", component: AccountDetailsComponent }, // accounts/{account.id}
         ],
     },
     {
         path: "jobs",
         component: JobHomeComponent,
         children: [
-            { path: "", component: JobDetailsHomeComponent }, // jobs/
+            { path: "", component: JobDefaultComponent }, // jobs/
             { path: ":id", component: JobDetailsComponent }, // jobs/{job.id}
         ],
     },
     {
         path: "pools",
         component: PoolHomeComponent,
         children: [
-            { path: "", component: PoolDetailsHomeComponent }, // pools/
+            { path: "", component: PoolDefaultComponent }, // pools/
             { path: ":id", component: PoolDetailsComponent }, // pools/{pool.id}
         ],
     },
@@ -61,15 +58,15 @@ export const routes: Routes = [
         path: "pools/:poolId/nodes",
         component: NodeHomeComponent,
         children: [
-            { path: "", component: NoNodeSelectedComponent }, // pools/{pool.id}/nodes
+            { path: "", component: NodeDefaultComponent }, // pools/{pool.id}/nodes
             { path: ":id", component: NodeDetailsComponent }, // pools/{pool.id}/nodes/{node.id}
         ],
     },
     {
         path: "jobs/:jobId/tasks",
         component: TaskHomeComponent,
         children: [
-            { path: "", component: NoTaskSelectedComponent }, // jobs/{job.id}/tasks
+            { path: "", component: TaskDefaultComponent }, // jobs/{job.id}/tasks
             { path: ":id", component: TaskDetailsComponent }, // jobs/{job.id}/tasks/{task.id}
         ],
     },

app/assets/styles/base/forms.scss

@@ -117,6 +117,10 @@ fieldset {
             width: 100%;
             margin: 10px 0;
 
+            &.element-spacer {
+                margin-bottom: 15px;
+            }
+
             &.pad-top {
                 margin-top: 20px;
             }
@@ -159,7 +163,7 @@ fieldset {
             md-select {
                 height: 2em;
                 margin-top: 5px;
-                width: 33%;
+                width: 40%;
             }
 
             .input-summary {

app/assets/styles/base/list.scss

@@ -169,5 +169,14 @@ bl-no-item {
                 font-size: 5em;
             }
         }
+
+        &.slim {
+            height: 30px;
+            font-size: 1.05em;
+            align-items: left;
+            justify-content: left;
+            color: $genericGray;
+            display: block;
+        }
     }
 }

app/assets/styles/base/property-list.scss

@@ -8,11 +8,14 @@ $group-padding: 28px;
     $value-width: $property-width - $label-width - $label-value-margin - $clipboard-width;
 
     section {
-        width: $property-width;
+        // add an extra 10px to make room for the copy button
+        width: $property-width + 10px;
+
         label, > table td.label {
             width: $label-width !important;
             min-width: $label-width;
         }
+
         .value {
             width: $value-width;
         }
@@ -162,7 +165,7 @@ bl-property-group {
         }
 
         > table {
-            $table-width: $property-width - $clipboard-width + 1;
+            $table-width: $property-width - $clipboard-width + 15;
             width: $table-width;
             max-width: $table-width;
             table-layout: fixed;
@@ -192,18 +195,18 @@ bl-property-group {
                 padding: 5px;
                 padding-left: 20px;
                 font-size: $value-font-size;
-                height: 23px;
+                height: 20px;
             }
 
             bl-tp-cell {
                 cursor: pointer;
                 font-size: $value-font-size;
-                height: 23px;
+                height: 20px;
                 position: relative;
                 padding: 0;
 
                 .cell-value {
-                    padding: 5px 8px;
+                    padding: 4px 8px;
                     text-overflow: ellipsis;
                     overflow: hidden;
                 }

app/assets/styles/job/details.scss

@@ -11,7 +11,6 @@ bl-job-details {
 
 bl-job-progress-status {
     display: block;
-
     padding-top: 5px;
 
     .running-task-status {
@@ -20,7 +19,7 @@ bl-job-progress-status {
 
     .running {
         width: 220px;
-        height: 180px;
+        height: 130px;
     }
 
     .queued, .completed {
@@ -43,17 +42,16 @@ bl-job-progress-status {
     .toggle-job-pool-tasks {
         margin: 0 10px;
         display: flex;
-        font-size: 11px;
+        font-size: 12px;
         justify-content: space-between;
 
         > .option {
             cursor: pointer;
 
             &.active {
                 color: map-get($md-prussian-blue, 600);
-                text-decoration: underline;
+                font-weight: bold;
             }
         }
     }
-
 }