[YUNIKORN-2342] Skeleton of the new UI (#177)

Implement skeleton of the new UI.

Closes: #177

Signed-off-by: Yu-Lin Chen <[email protected]>

package.json

@@ -39,9 +39,20 @@
     "@angular/platform-browser-dynamic": "^16.2.10",
     "@angular/router": "^16.2.10",
     "@fortawesome/fontawesome-free": "^6.5.1",
+    "@types/d3-flextree": "^2.1.4",
+    "@types/d3-hierarchy": "^3.1.6",
+    "@types/d3-selection": "^3.0.10",
+    "@types/d3-shape": "^3.1.6",
+    "@types/d3-transition": "^3.0.8",
+    "@types/d3-zoom": "^3.0.8",
     "angular-material-expansion-panel": "^0.7.2",
     "chart.js": "^4.4.0",
     "chartjs-adapter-date-fns": "^3.0.0",
+    "d3-flextree": "^2.1.2",
+    "d3-hierarchy": "^3.1.2",
+    "d3-selection": "^3.0.0",
+    "d3-transition": "^3.0.1",
+    "d3-zoom": "^3.0.0",
     "date-fns": "^2.30.0",
     "fontsource-roboto": "^4.0.0",
     "material-design-icons": "^3.0.1",

src/app/app-routing.module.ts

@@ -21,6 +21,7 @@ import { Routes, RouterModule } from '@angular/router';
 
 import { DashboardComponent } from './components/dashboard/dashboard.component';
 import { QueuesViewComponent } from './components/queues-view/queues-view.component';
+import { QueueV2Component } from './components/queue-v2/queues-v2.component';
 import { AppsViewComponent } from './components/apps-view/apps-view.component';
 import { NodesViewComponent } from './components/nodes-view/nodes-view.component';
 import { StatusViewComponent } from './components/status-view/status-view.component';
@@ -42,6 +43,11 @@ const appRoutes: Routes = [
     component: QueuesViewComponent,
     data: { breadcrumb: 'Queues' },
   },
+  {
+    path: 'queues-v2',
+    component: QueueV2Component,
+    data: { breadcrumb: 'Queues V2' },
+  },
   {
     path: 'nodes',
     component: NodesViewComponent,

src/app/app.component.html

@@ -38,6 +38,17 @@
         <span>Queues</span>
       </a>
     </li>
+    <li routerLinkActive="active">
+      <a routerLink="/queues-v2">
+        <i class="fa fa-caret-right"></i>
+        <i class="fa fa-sitemap" style="width: 16px"></i>
+        <span>Queues V2</span>
+        <div class="beta-tag">
+          <i class="fa fa-flask"></i>
+          Beta
+        </div> 
+      </a>
+    </li>
     <li routerLinkActive="active">
       <a routerLink="/applications">
         <i class="fa fa-caret-right"></i>

src/app/app.component.scss

@@ -219,6 +219,13 @@ ul.navigation-primary {
   padding-top: 61px;
 }
 
+//  remove the beta tag when the feature is ready for production
+.beta-tag {
+  color: #eaa31f;
+  font-size: 12px;
+  padding-top: 4px;
+}
+
 .header {
   height: 61px;
   background: #fff;

src/app/components/queue-v2/queues-v2.component.html

@@ -0,0 +1,31 @@
+<!--
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ -->
+
+ <div class="queue-container">
+    <div class="queue-content-box">
+      <div class="header">
+        <div class="title-group">
+          <div>Partition</div>
+        </div>
+      </div>
+      <div class="body">
+        <div class="visualize-area">
+        </div>
+      </div>
+    </div>
+  </div>

src/app/components/queue-v2/queues-v2.component.scss

@@ -0,0 +1,61 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ .queue-content-box {
+    width: calc(100% - 2rem); /* Subtract padding from the total width */
+    height: calc(100vh - 2rem); /* Subtract padding from the total height to ensure it's nearly as tall as the container */
+    border-radius: 0.5rem;
+    background-color: white;
+    padding: 20px; /* Adjust padding to your preference */
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    overflow: auto; /* Add scroll for overflow content */
+  }
+
+  .header .title-group {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-bottom: 1rem;
+  }
+
+  .title-group .icon {
+    height: 2rem;
+    width: 2rem;
+    margin-right: 10px;
+  }
+
+  .title-group div {
+    font-size: 1.25rem; 
+    font-weight: 600; 
+    color: #010407; 
+  } 
+
+  .visualize-area {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 600px; 
+    max-height: 80%; /* Ensure there's space around the area within the content box */
+    width: 100%;
+    border-radius: 0.5rem;
+    border: 2px dashed #d1d5db;
+    background-color: #f9fafb; 
+    gap: 0.2rem;
+    padding: 20px;
+  }