This is an automated email from the ASF dual-hosted git repository.

ccondit pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/yunikorn-web.git


The following commit(s) were added to refs/heads/master by this push:
     new d714335  [YUNIKORN-2954] Remove so-called modular sidebar (#219)
d714335 is described below

commit d714335f0953b2030dadc5b2553ede0c63f2672f
Author: Craig Condit <[email protected]>
AuthorDate: Tue Oct 29 15:51:57 2024 -0500

    [YUNIKORN-2954] Remove so-called modular sidebar (#219)
    
    Remove the modular remote sidebar functionality, as it goes against the
    open philosophy of Apache YuniKorn development.
    
    This reverts commit 21ebe5d9b1bbfc2e1eea8bbb8440d2a8bd38af4e.
    
    Closes: #219
---
 Makefile                                           |   4 +-
 angular.json                                       |  47 ++----
 package.json                                       |   7 +-
 pnpm-lock.yaml                                     | 165 ++++-----------------
 src/app/app.module.ts                              |   4 -
 .../allocations-drawer.component.html              |  94 ------------
 .../allocations-drawer.component.scss              | 154 -------------------
 .../allocations-drawer.component.spec.ts           | 113 --------------
 .../allocations-drawer.component.ts                | 133 -----------------
 .../components/apps-view/apps-view.component.html  | 122 ++++++++++++---
 .../components/apps-view/apps-view.component.scss  |  92 +++++++-----
 .../apps-view/apps-view.component.spec.ts          |  59 ++------
 .../components/apps-view/apps-view.component.ts    | 111 ++++++--------
 src/app/models/envconfig.model.ts                  |   2 -
 src/app/services/envconfig/envconfig.service.ts    |  15 +-
 src/app/testing/mocks.ts                           |   2 -
 src/assets/config/envconfig.json                   |   4 +-
 src/bootstrap.ts                                   |  31 ----
 src/main.ts                                        |  14 +-
 tsconfig.app.json                                  |   3 +-
 tsconfig.json                                      |   3 +-
 webpack.config.js                                  |  37 -----
 webpack.prod.config.js                             |  19 ---
 23 files changed, 273 insertions(+), 962 deletions(-)

diff --git a/Makefile b/Makefile
index dc84d88..8dbc072 100644
--- a/Makefile
+++ b/Makefile
@@ -195,9 +195,9 @@ OS := $(shell uname -s | tr '[:upper:]' '[:lower:]')
 license-check:
        @echo "checking license headers:"
 ifeq (darwin,$(OS))
-       $(shell mkdir -p "$(OUTPUT)" && find -E . -not \( -path './.git*' 
-prune \) -not \( -path ./coverage -prune \) -not \( -path ./node_modules 
-prune \) -not \( -path ./build -prune \) -not \( -path ./tools -prune \) -not 
-path ./pnpm-lock.yaml  -not \( -path ./dist -prune \) -regex 
".*\.(go|sh|md|conf|yaml|yml|html|mod|js)" -exec grep -L "Licensed to the 
Apache Software Foundation" {} \; > "$(OUTPUT)/license-check.txt")
+       $(shell mkdir -p "$(OUTPUT)" && find -E . -not \( -path './.git*' 
-prune \) -not \( -path ./coverage -prune \) -not \( -path ./node_modules 
-prune \) -not \( -path ./build -prune \) -not \( -path ./tools -prune \) -not 
-path ./pnpm-lock.yaml -regex ".*\.(go|sh|md|conf|yaml|yml|html|mod)" -exec 
grep -L "Licensed to the Apache Software Foundation" {} \; > 
"$(OUTPUT)/license-check.txt")
 else
-       $(shell mkdir -p "$(OUTPUT)" && find . -not \( -path './.git*' -prune 
\) -not \( -path ./coverage -prune \) -not \( -path ./node_modules -prune \) 
-not \( -path ./build -prune \) -not \( -path ./tools -prune \) -not -path 
./pnpm-lock.yaml -not \( -path ./node_modules -prune \) -regex 
".*\.\(go\|sh\|md\|conf\|yaml\|yml\|html\|mod\|js\)" -exec grep -L "Licensed to 
the Apache Software Foundation" {} \; > "$(OUTPUT)/license-check.txt")
+       $(shell mkdir -p "$(OUTPUT)" && find . -not \( -path './.git*' -prune 
\) -not \( -path ./coverage -prune \) -not \( -path ./node_modules -prune \) 
-not \( -path ./build -prune \) -not \( -path ./tools -prune \) -not -path 
./pnpm-lock.yaml -regex ".*\.\(go\|sh\|md\|conf\|yaml\|yml\|html\|mod\)" -exec 
grep -L "Licensed to the Apache Software Foundation" {} \; > 
"$(OUTPUT)/license-check.txt")
 endif
        @if [ -s "$(OUTPUT)/license-check.txt" ]; then \
                echo "following files are missing license header:" ; \
diff --git a/angular.json b/angular.json
index da0bfdf..9fce7aa 100644
--- a/angular.json
+++ b/angular.json
@@ -22,7 +22,7 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "ngx-build-plus:browser",
+          "builder": "@angular-devkit/build-angular:browser",
           "options": {
             "outputPath": "dist/yunikorn-web",
             "index": "src/index.html",
@@ -30,24 +30,14 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets",
-              {
-                "glob": "LICENSE",
-                "input": "./",
-                "output": "./"
-              }
-            ],
+            "assets": ["src/favicon.ico", "src/assets", {"glob": "LICENSE", 
"input": "./", "output": "./"}],
             "styles": [
               "src/styles.scss",
               "node_modules/@fontsource/roboto/index.css",
               "node_modules/@fontsource/roboto/500.css",
               "node_modules/@fortawesome/fontawesome-free/css/all.css"
             ],
-            "scripts": [],
-            "extraWebpackConfig": "webpack.config.js",
-            "commonChunk": false
+            "scripts": []
           },
           "configurations": {
             "production": {
@@ -69,8 +59,7 @@
                   "with": "src/environments/environment.prod.ts"
                 }
               ],
-              "outputHashing": "all",
-              "extraWebpackConfig": "webpack.prod.config.js"
+              "outputHashing": "all"
             },
             "development": {
               "buildOptimizer": false,
@@ -84,28 +73,21 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "ngx-build-plus:dev-server",
+          "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "yunikorn-web:build:production",
-              "extraWebpackConfig": "webpack.prod.config.js"
+              "browserTarget": "yunikorn-web:build:production"
             },
             "development": {
               "buildTarget": "yunikorn-web:build:development"
             }
           },
-          "defaultConfiguration": "development",
-          "options": {
-            "port": 4200,
-            "publicHost": "http://localhost:4200";,
-            "extraWebpackConfig": "webpack.config.js"
-          }
+          "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "ngx-build-plus:extract-i18n",
+          "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "yunikorn-web:build",
-            "extraWebpackConfig": "webpack.config.js"
+            "browserTarget": "yunikorn-web:build"
           }
         },
         "test": {
@@ -116,17 +98,12 @@
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
             "inlineStyleLanguage": "scss",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/styles.scss"],
             "scripts": []
           }
         }
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/package.json b/package.json
index de48204..c541154 100644
--- a/package.json
+++ b/package.json
@@ -13,8 +13,7 @@
     "build:prod": "ng build --configuration production",
     "start:srv": "json-server --watch json-db.json",
     "test:coverage": "ng test --code-coverage 
--karma-config=./karma.conf.ci.js",
-    "prettify": "prettier --config ./.prettierrc --write 
'src/**/*.{js,ts,json,css,scss,md,html}'",
-    "run:all": "node 
node_modules/@angular-architects/module-federation/src/server/mf-dev-server.js"
+    "prettify": "prettier --config ./.prettierrc --write 
'src/**/*.{js,ts,json,css,scss,md,html}'"
   },
   "private": true,
   "husky": {
@@ -29,7 +28,6 @@
     ]
   },
   "dependencies": {
-    "@angular-architects/module-federation": "^18.0.6",
     "@angular/animations": "^18.2.6",
     "@angular/cdk": "^18.2.6",
     "@angular/common": "^18.2.6",
@@ -83,7 +81,6 @@
     "karma-super-dots-reporter": "^0.2.0",
     "lint-staged": "^15.2.10",
     "ng-mocks": "^14.13.1",
-    "ngx-build-plus": "^18.0.0",
     "prettier": "^3.3.3",
     "puppeteer": "^23.4.1",
     "typescript": "5.5.4"
@@ -93,4 +90,4 @@
     "pnpm": "9"
   },
   "packageManager": "pnpm@9"
-}
\ No newline at end of file
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7b53e82..b8b9ef9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,9 +8,6 @@ importers:
 
   .:
     dependencies:
-      '@angular-architects/module-federation':
-        specifier: ^18.0.6
-        version: 
18.0.6(@angular/[email protected](@angular/[email protected]([email protected])([email protected]))([email protected]))(@angular/[email protected]([email protected])([email protected]))([email protected])
       '@angular/animations':
         specifier: ^18.2.6
         version: 18.2.6(@angular/[email protected]([email protected])([email protected]))
@@ -165,9 +162,6 @@ importers:
       ng-mocks:
         specifier: ^14.13.1
         version: 
14.13.1(@angular/[email protected](@angular/[email protected]([email protected])([email protected]))([email protected]))(@angular/[email protected]([email protected])([email protected]))(@angular/[email protected](@angular/[email protected](@angular/[email protected]([email protected])([email protected]))([email protected]))(@angular/[email protected]([email protected])([email protected]))(@angular/[email protected](@angular/[email protected](@angular/[email protected]([email protected])([email protected])))(@angular/[email protected](@angular/[email protected]([email protected])(z
 [...]
-      ngx-build-plus:
-        specifier: ^18.0.0
-        version: 
18.0.0(@angular-devkit/[email protected](@angular/[email protected](@angular/[email protected](@angular/[email protected]([email protected])([email protected])))([email protected]))(@types/[email protected])([email protected])([email protected])([email protected]))([email protected])([email protected])
       prettier:
         specifier: ^3.3.3
         version: 3.3.3
@@ -184,15 +178,6 @@ packages:
     resolution: {integrity: 
sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
 
-  '@angular-architects/[email protected]':
-    resolution: {integrity: 
sha512-rOpuNxg48Lk9ZrNRMcCvMu1D3MhnKPqLw7xhtX8Qva5BOuaQ3gMtBZI4NM5eI8WqPlZNbzVxMNrVzSKaxDApZQ==}
-    peerDependencies:
-      '@angular/common': '>=18.0.0'
-      '@angular/core': '>=18.0.0'
-
-  '@angular-architects/[email protected]':
-    resolution: {integrity: 
sha512-uI7Yqs8OM4leakD7sdnk2Pt+bIt9nLGbo6xcYGpLoTWpS0OnCQRQJinNCynAL+F+4NEzNToeNSXXKgffDuQtCQ==}
-
   '@angular-devkit/[email protected]':
     resolution: {integrity: 
sha512-oF7cPFdTLxeuvXkK/opSdIxZ1E4LrBbmuytQ/nCoAGOaKBWdqvwagRZ6jVhaI0Gwu48rkcV7Zhesg/ESNnROdw==}
     engines: {node: ^18.19.1 || ^20.11.1 || >=22.0.0, npm: ^6.11.0 || ^7.5.6 
|| >=8.0.0, yarn: '>= 1.13.0'}
@@ -2171,9 +2156,6 @@ packages:
     resolution: {integrity: 
sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==}
     engines: {node: '>= 0.4'}
 
-  [email protected]:
-    resolution: {integrity: 
sha512-0vdNRFXn5q+dtOqjfFtmtlI9N2eVZ7LMyEV2iKC5mEEFvSg/69Ml6b/WU2qF8W1nLRa0wiSrDT3Y5jOHZCwKPQ==}
-
   [email protected]:
     resolution: {integrity: 
sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
@@ -2377,6 +2359,7 @@ packages:
 
   [email protected]:
     resolution: {integrity: 
sha512-Oyqew0FGM0wYUSNqR0L6AteO5MpMoUU0rhKRieXeiKs+PmRTxiJMyaunYB2KF6fQ3dzChXKCpbFOEJx3OQ1v/Q==}
+    deprecated: Ownership of Critters has moved to the Nuxt team, who will be 
maintaining the project going forward. If you'd like to keep using Critters, 
please switch to the actively-maintained fork at 
https://github.com/danielroe/beasties
 
   [email protected]:
     resolution: {integrity: 
sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
@@ -3682,12 +3665,6 @@ packages:
       '@angular/forms': 5.0.0-alpha - 5 || 6.0.0-alpha - 6 || 7.0.0-alpha - 7 
|| 8.0.0-alpha - 8 || 9.0.0-alpha - 9 || 10.0.0-alpha - 10 || 11.0.0-alpha - 11 
|| 12.0.0-alpha - 12 || 13.0.0-alpha - 13 || 14.0.0-alpha - 14 || 15.0.0-alpha 
- 15 || 16.0.0-alpha - 16 || 17.0.0-alpha - 17 || 18.0.0-alpha - 18
       '@angular/platform-browser': 5.0.0-alpha - 5 || 6.0.0-alpha - 6 || 
7.0.0-alpha - 7 || 8.0.0-alpha - 8 || 9.0.0-alpha - 9 || 10.0.0-alpha - 10 || 
11.0.0-alpha - 11 || 12.0.0-alpha - 12 || 13.0.0-alpha - 13 || 14.0.0-alpha - 
14 || 15.0.0-alpha - 15 || 16.0.0-alpha - 16 || 17.0.0-alpha - 17 || 
18.0.0-alpha - 18
 
-  [email protected]:
-    resolution: {integrity: 
sha512-dmnD5CpwopUPoN51ysoTLkS7Csqkgbs2dNLL5QI5pIhV4MxDXNE8+75QTwy8EPvK37t8RjGCTBdOqmAp8Rpa/g==}
-    peerDependencies:
-      '@angular-devkit/build-angular': ^18.0.0
-      rxjs: '>= 6.0.0'
-
   [email protected]:
     resolution: {integrity: 
sha512-VWDSvLlCnaWqu0W1L+ybQIRHTbd+GffkX1sWs++iMPXMGVJ2ZCuzW32FHnu+p0regMUHU8r1/rvUcFD0YooJxQ==}
     peerDependencies:
@@ -3705,15 +3682,6 @@ packages:
   [email protected]:
     resolution: {integrity: 
sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==}
 
-  [email protected]:
-    resolution: {integrity: 
sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==}
-    engines: {node: 4.x || >=6.0.0}
-    peerDependencies:
-      encoding: ^0.1.0
-    peerDependenciesMeta:
-      encoding:
-        optional: true
-
   [email protected]:
     resolution: {integrity: 
sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==}
     engines: {node: '>= 6.13.0'}
@@ -4609,9 +4577,6 @@ packages:
     resolution: {integrity: 
sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
     engines: {node: '>=0.6'}
 
-  [email protected]:
-    resolution: {integrity: 
sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
-
   [email protected]:
     resolution: {integrity: 
sha512-dpev9ABuLWdEubk+cIaI9cHwRNNDjkBBLXTwI4UCUFdQ5xXKqNXoK4FEciw/vxf+NQ7Cb7sGUyeUtORvHIdRXQ==}
     engines: {node: '>=10.0'}
@@ -4783,9 +4748,6 @@ packages:
   [email protected]:
     resolution: {integrity: 
sha512-DEAoo25RfSYMuTGc9vPJzZcZullwIqRDSI9LOy+fkCJPi6hykCnfKaXTuPBDuXAUcqHXyOgFtHNp/kB2FjYHbw==}
 
-  [email protected]:
-    resolution: {integrity: 
sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
-
   [email protected]:
     resolution: {integrity: 
sha512-xOO8n6eggxnwYpy1NlzUKpvrjfJTvae5/D6WOK0S2LSo7vjmo5gCM1DbLUmFqrMTJP+W/0YZNctm7jasWvLuBA==}
     engines: {node: '>= 18.12.0'}
@@ -4808,10 +4770,6 @@ packages:
       webpack-cli:
         optional: true
 
-  [email protected]:
-    resolution: {integrity: 
sha512-+4zXKdx7UnO+1jaN4l2lHVD+mFvnlZQP/6ljaJVb4SZiwIKeUnrT5l0gkT8z+n4hKpC+jpOv6O9R+gLtag7pSA==}
-    engines: {node: '>=10.0.0'}
-
   [email protected]:
     resolution: {integrity: 
sha512-hXXvrjtx2PLYx4qruKl+kyRSLc52V+cCvMxRjmKwoA+CBbbF5GfIBtR6kCvl0fYGqTUPKB+1ktVmTHqMOzgCBg==}
     engines: {node: '>=18.0.0'}
@@ -4848,9 +4806,6 @@ packages:
     resolution: {integrity: 
sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==}
     engines: {node: '>=0.8.0'}
 
-  [email protected]:
-    resolution: {integrity: 
sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
-
   [email protected]:
     resolution: {integrity: 
sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==}
     hasBin: true
@@ -4868,10 +4823,6 @@ packages:
   [email protected]:
     resolution: {integrity: 
sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==}
 
-  [email protected]:
-    resolution: {integrity: 
sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
-    engines: {node: '>=0.10.0'}
-
   [email protected]:
     resolution: {integrity: 
sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==}
     engines: {node: '>=8'}
@@ -4970,24 +4921,6 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.5
       '@jridgewell/trace-mapping': 0.3.25
 
-  
'@angular-architects/[email protected](@angular/[email protected](@angular/[email protected]([email protected])([email protected]))([email protected]))(@angular/[email protected]([email protected])([email protected]))':
-    dependencies:
-      '@angular/common': 
18.2.6(@angular/[email protected]([email protected])([email protected]))([email protected])
-      '@angular/core': 18.2.6([email protected])([email protected])
-      tslib: 2.7.0
-
-  
'@angular-architects/[email protected](@angular/[email protected](@angular/[email protected]([email protected])([email protected]))([email protected]))(@angular/[email protected]([email protected])([email protected]))([email protected])':
-    dependencies:
-      '@angular-architects/module-federation-runtime': 
18.0.6(@angular/[email protected](@angular/[email protected]([email protected])([email protected]))([email protected]))(@angular/[email protected]([email protected])([email protected]))
-      callsite: 1.0.0
-      node-fetch: 2.7.0([email protected])
-      semver: 7.6.3
-      word-wrap: 1.2.5
-    transitivePeerDependencies:
-      - '@angular/common'
-      - '@angular/core'
-      - encoding
-
   '@angular-devkit/[email protected]([email protected])':
     dependencies:
       '@angular-devkit/core': 18.2.6([email protected])
@@ -4999,7 +4932,7 @@ snapshots:
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@angular-devkit/architect': 0.1802.6([email protected])
-      '@angular-devkit/build-webpack': 
0.1802.6([email protected])([email protected]([email protected]([email protected])))([email protected]([email protected]))
+      '@angular-devkit/build-webpack': 
0.1802.6([email protected])([email protected]([email protected]))([email protected]([email protected]))
       '@angular-devkit/core': 18.2.6([email protected])
       '@angular/build': 
18.2.6(@angular/[email protected](@angular/[email protected](@angular/[email protected]([email protected])([email protected])))([email protected]))(@types/[email protected])([email protected])([email protected])([email protected])([email protected])([email protected])
       '@angular/compiler-cli': 
18.2.6(@angular/[email protected](@angular/[email protected]([email protected])([email protected])))([email protected])
@@ -5057,8 +4990,8 @@ snapshots:
       vite: 5.4.6(@types/[email protected])([email protected])([email protected])([email protected])
       watchpack: 2.4.1
       webpack: 5.94.0([email protected])
-      webpack-dev-middleware: 7.4.2([email protected]([email protected]))
-      webpack-dev-server: 5.0.4([email protected]([email protected]))
+      webpack-dev-middleware: 7.4.2([email protected])
+      webpack-dev-server: 5.0.4([email protected])
       webpack-merge: 6.0.1
       webpack-subresource-integrity: 5.1.0([email protected]([email protected]))
     optionalDependencies:
@@ -5082,12 +5015,12 @@ snapshots:
       - utf-8-validate
       - webpack-cli
 
-  
'@angular-devkit/[email protected]([email protected])([email protected]([email protected]([email protected])))([email protected]([email protected]))':
+  
'@angular-devkit/[email protected]([email protected])([email protected]([email protected]))([email protected]([email protected]))':
     dependencies:
       '@angular-devkit/architect': 0.1802.6([email protected])
       rxjs: 7.8.1
       webpack: 5.94.0([email protected])
-      webpack-dev-server: 5.0.4([email protected]([email protected]))
+      webpack-dev-server: 5.0.4([email protected])
     transitivePeerDependencies:
       - chokidar
 
@@ -7169,8 +7102,6 @@ snapshots:
       get-intrinsic: 1.2.4
       set-function-length: 1.2.2
 
-  [email protected]: {}
-
   [email protected]: {}
 
   [email protected]: {}
@@ -7387,7 +7318,7 @@ snapshots:
       dom-serializer: 2.0.0
       domhandler: 5.0.3
       htmlparser2: 8.0.2
-      postcss: 8.4.41
+      postcss: 8.4.47
       postcss-media-query-parser: 0.2.3
 
   [email protected]:
@@ -7398,12 +7329,12 @@ snapshots:
 
   [email protected]([email protected]([email protected])):
     dependencies:
-      icss-utils: 5.1.0([email protected])
-      postcss: 8.4.41
-      postcss-modules-extract-imports: 3.1.0([email protected])
-      postcss-modules-local-by-default: 4.0.5([email protected])
-      postcss-modules-scope: 3.2.0([email protected])
-      postcss-modules-values: 4.0.0([email protected])
+      icss-utils: 5.1.0([email protected])
+      postcss: 8.4.47
+      postcss-modules-extract-imports: 3.1.0([email protected])
+      postcss-modules-local-by-default: 4.0.5([email protected])
+      postcss-modules-scope: 3.2.0([email protected])
+      postcss-modules-values: 4.0.0([email protected])
       postcss-value-parser: 4.2.0
       semver: 7.6.3
     optionalDependencies:
@@ -8143,9 +8074,9 @@ snapshots:
     dependencies:
       safer-buffer: 2.1.2
 
-  [email protected]([email protected]):
+  [email protected]([email protected]):
     dependencies:
-      postcss: 8.4.41
+      postcss: 8.4.47
 
   [email protected]: {}
 
@@ -8824,15 +8755,6 @@ snapshots:
       '@angular/forms': 
18.2.6(@angular/[email protected](@angular/[email protected]([email protected])([email protected]))([email protected]))(@angular/[email protected]([email protected])([email protected]))(@angular/[email protected](@angular/[email protected](@angular/[email protected]([email protected])([email protected])))(@angular/[email protected](@angular/[email protected]([email protected])([email protected]))([email protected]))(@angular/[email protected]([email protected])([email protected])))([email protected])
       '@angular/platform-browser': 
18.2.6(@angular/[email protected](@angular/[email protected]([email protected])([email protected])))(@angular/[email protected](@angular/[email protected]([email protected])([email protected]))([email protected]))(@angular/[email protected]([email protected])([email protected]))
 
-  
[email protected](@angular-devkit/[email protected](@angular/[email protected](@angular/[email protected](@angular/[email protected]([email protected])([email protected])))([email protected]))(@types/[email protected])([email protected])([email protected])([email protected]))([email protected])([email protected]):
-    dependencies:
-      '@angular-devkit/build-angular': 
18.2.6(@angular/[email protected](@angular/[email protected](@angular/[email protected]([email protected])([email protected])))([email protected]))(@types/[email protected])([email protected])([email protected])([email protected])
-      '@schematics/angular': 18.2.6([email protected])
-      rxjs: 7.8.1
-      webpack-merge: 5.10.0
-    transitivePeerDependencies:
-      - chokidar
-
   
[email protected](@angular/[email protected](@angular/[email protected]([email protected])([email protected])))(@angular/[email protected](@angular/[email protected]([email protected])([email protected]))([email protected]))(@angular/[email protected]([email protected])([email protected])):
     dependencies:
       '@angular/animations': 
18.2.6(@angular/[email protected]([email protected])([email protected]))
@@ -8851,12 +8773,6 @@ snapshots:
 
   [email protected]: {}
 
-  [email protected]([email protected]):
-    dependencies:
-      whatwg-url: 5.0.0
-    optionalDependencies:
-      encoding: 0.1.13
-
   [email protected]: {}
 
   [email protected]:
@@ -9159,26 +9075,26 @@ snapshots:
 
   [email protected]: {}
 
-  [email protected]([email protected]):
+  [email protected]([email protected]):
     dependencies:
-      postcss: 8.4.41
+      postcss: 8.4.47
 
-  [email protected]([email protected]):
+  [email protected]([email protected]):
     dependencies:
-      icss-utils: 5.1.0([email protected])
-      postcss: 8.4.41
+      icss-utils: 5.1.0([email protected])
+      postcss: 8.4.47
       postcss-selector-parser: 6.1.2
       postcss-value-parser: 4.2.0
 
-  [email protected]([email protected]):
+  [email protected]([email protected]):
     dependencies:
-      postcss: 8.4.41
+      postcss: 8.4.47
       postcss-selector-parser: 6.1.2
 
-  [email protected]([email protected]):
+  [email protected]([email protected]):
     dependencies:
-      icss-utils: 5.1.0([email protected])
-      postcss: 8.4.41
+      icss-utils: 5.1.0([email protected])
+      postcss: 8.4.47
 
   [email protected]:
     dependencies:
@@ -9328,7 +9244,7 @@ snapshots:
 
   [email protected]:
     dependencies:
-      '@babel/runtime': 7.25.0
+      '@babel/runtime': 7.25.6
 
   [email protected]: {}
 
@@ -9358,7 +9274,7 @@ snapshots:
       adjust-sourcemap-loader: 4.0.0
       convert-source-map: 1.9.0
       loader-utils: 2.0.4
-      postcss: 8.4.41
+      postcss: 8.4.47
       source-map: 0.6.1
 
   [email protected]:
@@ -9831,7 +9747,7 @@ snapshots:
       mkdirp: 1.0.4
       yallist: 4.0.0
 
-  [email protected]([email protected])([email protected]([email protected])):
+  [email protected]([email protected])([email protected]):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       jest-worker: 27.5.1
@@ -9875,8 +9791,6 @@ snapshots:
 
   [email protected]: {}
 
-  [email protected]: {}
-
   [email protected]([email protected]):
     dependencies:
       tslib: 2.7.0
@@ -10000,9 +9914,7 @@ snapshots:
 
   [email protected]: {}
 
-  [email protected]: {}
-
-  [email protected]([email protected]([email protected])):
+  [email protected]([email protected]):
     dependencies:
       colorette: 2.0.20
       memfs: 4.12.0
@@ -10013,7 +9925,7 @@ snapshots:
     optionalDependencies:
       webpack: 5.94.0([email protected])
 
-  [email protected]([email protected]([email protected])):
+  [email protected]([email protected]):
     dependencies:
       '@types/bonjour': 3.5.13
       '@types/connect-history-api-fallback': 1.5.4
@@ -10043,7 +9955,7 @@ snapshots:
       serve-index: 1.9.1
       sockjs: 0.3.24
       spdy: 4.0.2
-      webpack-dev-middleware: 7.4.2([email protected]([email protected]))
+      webpack-dev-middleware: 7.4.2([email protected])
       ws: 8.18.0
     optionalDependencies:
       webpack: 5.94.0([email protected])
@@ -10053,12 +9965,6 @@ snapshots:
       - supports-color
       - utf-8-validate
 
-  [email protected]:
-    dependencies:
-      clone-deep: 4.0.1
-      flat: 5.0.2
-      wildcard: 2.0.1
-
   [email protected]:
     dependencies:
       clone-deep: 4.0.1
@@ -10094,7 +10000,7 @@ snapshots:
       neo-async: 2.6.2
       schema-utils: 3.3.0
       tapable: 2.2.1
-      terser-webpack-plugin: 
5.3.10([email protected])([email protected]([email protected]))
+      terser-webpack-plugin: 5.3.10([email protected])([email protected])
       watchpack: 2.4.1
       webpack-sources: 3.2.3
     transitivePeerDependencies:
@@ -10110,11 +10016,6 @@ snapshots:
 
   [email protected]: {}
 
-  [email protected]:
-    dependencies:
-      tr46: 0.0.3
-      webidl-conversions: 3.0.1
-
   [email protected]:
     dependencies:
       isexe: 2.0.0
@@ -10129,8 +10030,6 @@ snapshots:
 
   [email protected]: {}
 
-  [email protected]: {}
-
   [email protected]:
     dependencies:
       ansi-styles: 4.3.0
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 8fcac29..413394b 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -63,8 +63,6 @@ import { HealthchecksComponent } from 
'@app/components/healthchecks/healthchecks
 import { AppNodeUtilizationsComponent } from 
'@app/components/app-node-utilizations/app-node-utilizations.component';
 import { VerticalBarChartComponent } from 
'@app/components/vertical-bar-chart/vertical-bar-chart.component';
 import { LicensesModalComponent } from 
'@app/components/licenses-modal/licenses-modal.component';
-import { AllocationsDrawerComponent } from 
'@app/components/allocations-drawer/allocations-drawer.component';
-import { MatChipsModule } from '@angular/material/chips';
 
 @NgModule({
   declarations: [
@@ -87,7 +85,6 @@ import { MatChipsModule } from '@angular/material/chips';
     AppNodeUtilizationsComponent,
     VerticalBarChartComponent,
     LicensesModalComponent,
-    AllocationsDrawerComponent,
   ],
   imports: [
     BrowserModule,
@@ -114,7 +111,6 @@ import { MatChipsModule } from '@angular/material/chips';
     MatExpansionModule,
     MatIconModule,
     MatDialogModule,
-    MatChipsModule,
   ],
   providers: [
     {
diff --git 
a/src/app/components/allocations-drawer/allocations-drawer.component.html 
b/src/app/components/allocations-drawer/allocations-drawer.component.html
deleted file mode 100644
index b0b6629..0000000
--- a/src/app/components/allocations-drawer/allocations-drawer.component.html
+++ /dev/null
@@ -1,94 +0,0 @@
-<!--
- * 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.
- -->
-
-<mat-drawer-container class="flex-primary" [hasBackdrop]="false">
-  <mat-drawer #matDrawer mode="over" position="end">
-    <mat-drawer-content>
-      <div class="header">
-        <span>{{ selectedRow?.applicationId }} ({{ 
selectedRow?.allocations?.length }} allocations)</span>
-        <span class="far fa-clipboard copy-btn" (click)="copyLinkToClipboard()"
-          matTooltip="Click to copy the URL to this view" 
matTooltipShowDelay="500"></span>
-        <span class="far fa-solid fa-xmark close-btn" 
(click)="closeDrawer()"></span>
-      </div>
-      <div class="content">
-
-        <mat-table [dataSource]="allocDataSource" matSort #allocSort="matSort">
-          <ng-container [matColumnDef]="columnDef.colId" *ngFor="let columnDef 
of allocColumnDef">
-            <mat-header-cell *matHeaderCellDef mat-sort-header 
[style.flex]="columnDef?.colWidth || 1">{{
-              columnDef.colName }}</mat-header-cell>
-
-            <ng-container *ngIf="columnDef.colId === 'priority'; else 
renderNext_3">
-              <mat-cell class="small" *matCellDef="let element" 
[style.flex]="columnDef?.colWidth || 1"
-                [title]="element[columnDef.colId]">{{
-                element['priority'] }} </mat-cell>
-            </ng-container>
-
-            <ng-container *ngIf="columnDef.colId === 'resource'; else 
renderNext_3">
-              <mat-cell *matCellDef="let element" class="allocations-data" 
[style.flex]="columnDef?.colWidth || 1"
-                matTooltip="
-                          {{element[columnDef.colId]}}" 
matTooltipShowDelay="500">
-                <ng-container *ngIf="columnDef.colFormatter; else 
showAllocRowData;">
-                  <ng-container 
*ngIf="columnDef.colFormatter(element[columnDef.colId]) as colValue">
-                    <ul class="mat-res-ul">
-                      <ng-container *ngFor="let resource of 
formatResources(colValue); let i = index">
-                        <li class="mat-res-li" *ngIf="i<1">
-                          {{ resource }}
-                        </li>
-                        <li class="mat-res-li" *ngIf="i>=1 && 
element['expanded']">
-                          {{ resource }}
-                        </li>
-                      </ng-container>
-                    </ul>
-                  </ng-container>
-                </ng-container>
-                <ng-template #showAllocRowData>
-                  <span>{{ element[columnDef.colId] }}</span>
-                </ng-template>
-              </mat-cell>
-            </ng-container>
-
-            <ng-template #renderNext_3>
-              <mat-cell *matCellDef="let element" [class]="element['expanded'] 
? '' : 'ellipsis'"
-                [style.flex]="columnDef?.colWidth || 1" 
matTooltip="{{element[columnDef.colId]}}"
-                matTooltipShowDelay="500">{{ element[columnDef.colId] || 'n/a'
-                }}</mat-cell>
-            </ng-template>
-          </ng-container>
-
-          <ng-container matColumnDef="noRecord">
-            <mat-footer-cell *matFooterCellDef>
-              <div class="no-record">No records found</div>
-            </mat-footer-cell>
-          </ng-container>
-
-          <mat-header-row *matHeaderRowDef="allocColumnIds"></mat-header-row>
-
-          <mat-row *matRowDef="let row; columns: allocColumnIds; let i = 
index" (click)="allocationsDetailToggle(i)"
-            [ngClass]="{'even-row': i % 2 === 0, 'row': true}"></mat-row>
-
-          <mat-footer-row *matFooterRowDef="['noRecord']"
-            [ngStyle]="{ display: isAllocDataSourceEmpty() ? '' : 'none' 
}"></mat-footer-row>
-        </mat-table>
-
-        <mat-paginator #allocationMatPaginator [pageSizeOptions]="[10, 20, 50, 
100]" [pageSize]="50"
-          [ngStyle]="{ display: isAllocDataSourceEmpty() ? 'none' : '' }" 
showFirstLastButtons></mat-paginator>
-
-      </div>
-    </mat-drawer-content>
-  </mat-drawer>
-</mat-drawer-container>
\ No newline at end of file
diff --git 
a/src/app/components/allocations-drawer/allocations-drawer.component.scss 
b/src/app/components/allocations-drawer/allocations-drawer.component.scss
deleted file mode 100644
index 604b73b..0000000
--- a/src/app/components/allocations-drawer/allocations-drawer.component.scss
+++ /dev/null
@@ -1,154 +0,0 @@
-/**
- * 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.
- */
- 
-.mat-drawer-container {
-  min-width: 430px;
-  width: 55%;
-  height: calc(100vh - 60px);
-  background: transparent;
-  pointer-events: none;
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  .mat-drawer {
-    pointer-events: auto;
-    width: 100%;
-    .content {
-      padding: 0 10px;
-    }
-  }
-
-  .full-row-height {
-    border: 1px solid red;
-  }
-
-  .mat-mdc-header-cell {
-    font-size: 15px;
-    font-weight: bold;
-    color: #666;
-  }
-  .mat-mdc-cell {
-    color: #333;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    .mat-res-ul{
-      padding: 0;
-      margin: 0;
-      .mat-res-li{
-        list-style-type: none;
-      }
-    }
-    .mat-toggle-more {
-      display: block;
-      color: #a1a3b7;
-      padding: 5px 45px 0 0;
-      &:hover {
-        color: #8d00d4;
-      }
-    }
-  }
-  .mat-mdc-row {
-    &:hover {
-      background: #cccccc;
-      cursor: pointer;
-    }
-    &.selected-row {
-      background: #303d54;
-      .mat-mdc-cell {
-        color: #fff;
-        .mat-toggle-more {
-          color: #b8bbff;
-          &:hover {
-            color: #b871dc;
-          }
-        }
-      }
-    }
-  }
-  .mat-mdc-header-cell.indicator-icon,
-  .mat-mdc-cell.indicator-icon {
-    max-width: 40px;
-    font-size: 18px;
-    margin-left: 10px;
-  }
-
-  .close-btn {
-    float: right;
-    font-size: 1.2em;
-    cursor: pointer;
-    padding-right: 5px;
-    &:hover {
-      color: #f44336;
-    }
-  }
-  .copy-btn {
-    font-size: 1em;
-    cursor: pointer;
-    padding-left: 5px;
-  }
-  .header {
-    margin: 20px;
-    font-weight: 100;
-    font-size: 1em;
-  }
-  .content {
-    border-top: 1px solid #e1e1e1;
-  }
-  .item-wrapper {
-    .left-item {
-      text-align: right;
-    }
-    .left-item,
-    .right-item {
-      width: 50%;
-      padding: 6px;
-      padding-right: 0;
-      color: #666;
-    }
-    .right-item {
-      font-weight: 600;
-    }
-  }
-  .app-link {
-    text-decoration: none;
-    color: #666;
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-
-  .row {
-    font-size: 0.9em;
-  }
-
-  .even-row {
-    background: #eee;
-  }
-
-  .ellipsis {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: inline-block;
-  }
-
-  .row {
-    min-height: unset;
-  }
-}
\ No newline at end of file
diff --git 
a/src/app/components/allocations-drawer/allocations-drawer.component.spec.ts 
b/src/app/components/allocations-drawer/allocations-drawer.component.spec.ts
deleted file mode 100644
index 49b8ec2..0000000
--- a/src/app/components/allocations-drawer/allocations-drawer.component.spec.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-/**
- * 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.
- */
-
-import { DebugElement } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatDividerModule } from '@angular/material/divider';
-import { MatInputModule } from '@angular/material/input';
-import { MatPaginatorModule } from '@angular/material/paginator';
-import { MatSelectModule } from '@angular/material/select';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { MatSortModule } from '@angular/material/sort';
-import { MatTableDataSource, MatTableModule } from '@angular/material/table';
-import { By } from '@angular/platform-browser';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { NgxSpinnerService } from 'ngx-spinner';
-
-import { MockNgxSpinnerService } from '@app/testing/mocks';
-import { AllocationInfo } from '@app/models/alloc-info.model';
-
-import { AllocationsDrawerComponent } from './allocations-drawer.component';
-
-describe('AllocationsDrawerComponent', () => {
-  let component: AllocationsDrawerComponent;
-  let fixture: ComponentFixture<AllocationsDrawerComponent>;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [AllocationsDrawerComponent],
-      imports: [
-        NoopAnimationsModule,
-        MatSidenavModule,
-        MatPaginatorModule,
-        MatDividerModule,
-        MatSortModule,
-        MatInputModule,
-        MatTableModule,
-        MatSelectModule,
-      ],
-      providers: [{ provide: NgxSpinnerService, useValue: 
MockNgxSpinnerService }],
-    }).compileComponents();
-    fixture = TestBed.createComponent(AllocationsDrawerComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should open drawer', () => {
-    spyOn(component.matDrawer, 'open');
-    component.openDrawer();
-    expect(component.matDrawer.open).toHaveBeenCalled();
-  });
-
-  it('should close drawer', () => {
-    spyOn(component.matDrawer, 'close');
-    component.closeDrawer();
-    expect(component.matDrawer.close).toHaveBeenCalled();
-  });
-
-  it('should copy the allocations URL to clipboard', () => {
-    const debugEl: DebugElement = fixture.debugElement;
-    const copyButton = debugEl.query(By.css('.copy-btn'));
-    const copyButtonSpy = spyOn(component, 'copyLinkToClipboard');
-    copyButton.triggerEventHandler('click', null);
-    expect(copyButtonSpy).toHaveBeenCalled();
-  });
-
-  it('should toggle allocations detail with nothing previously selected', () 
=> {
-    const row = 0;
-    const allocDataSource = new MatTableDataSource([{ expanded: false }]);
-    component.allocDataSource = allocDataSource as unknown as 
MatTableDataSource<
-      AllocationInfo & { expanded: boolean }
-    >;
-
-    component.allocationsDetailToggle(row);
-    expect(component.allocDataSource.data[row].expanded).toBe(true);
-
-    component.allocationsDetailToggle(row);
-    expect(component.allocDataSource.data[row].expanded).toBe(false);
-  });
-
-  it('should toggle allocations detail with previous selection active', () => {
-    const row = 0;
-    const allocDataSource = new MatTableDataSource([{ expanded: false }, { 
expanded: true }]);
-    component.selectedAllocationsRow = 1;
-    component.allocDataSource = allocDataSource as unknown as 
MatTableDataSource<
-      AllocationInfo & { expanded: boolean }
-    >;
-
-    component.allocationsDetailToggle(row);
-    expect(component.allocDataSource.data[row].expanded).toBe(true);
-
-    component.allocationsDetailToggle(row);
-    expect(component.allocDataSource.data[row].expanded).toBe(false);
-  });
-});
diff --git 
a/src/app/components/allocations-drawer/allocations-drawer.component.ts 
b/src/app/components/allocations-drawer/allocations-drawer.component.ts
deleted file mode 100644
index 7b69753..0000000
--- a/src/app/components/allocations-drawer/allocations-drawer.component.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-/**
- * 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.
- */
-
-import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from 
'@angular/core';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatDrawer } from '@angular/material/sidenav';
-import { MatSort } from '@angular/material/sort';
-import { MatTableDataSource } from '@angular/material/table';
-import { AllocationInfo } from '@app/models/alloc-info.model';
-import { AppInfo } from '@app/models/app-info.model';
-import { ColumnDef } from '@app/models/column-def.model';
-import { CommonUtil } from '@app/utils/common.util';
-
-@Component({
-  selector: 'app-allocations-drawer',
-  templateUrl: './allocations-drawer.component.html',
-  styleUrls: ['./allocations-drawer.component.scss'],
-})
-export class AllocationsDrawerComponent implements OnInit {
-  @ViewChild('matDrawer', { static: false }) matDrawer!: MatDrawer;
-  @ViewChild('allocationMatPaginator', { static: true }) allocPaginator!: 
MatPaginator;
-  @ViewChild('allocSort', { static: true }) allocSort!: MatSort;
-  @Input() allocDataSource!: MatTableDataSource<AllocationInfo & { expanded: 
boolean }>;
-  @Input() selectedRow!: AppInfo | null;
-  @Input() partitionSelected!: string;
-  @Input() leafQueueSelected!: string;
-
-  @Output() removeRowSelection = new EventEmitter<void>();
-
-  allocColumnDef: ColumnDef[] = [];
-  allocColumnIds: string[] = [];
-  selectedAllocationsRow: number = -1;
-
-  ngOnChanges(): void {
-    if (this.allocDataSource) {
-      this.allocDataSource.paginator = this.allocPaginator;
-      this.allocDataSource.sort = this.allocSort;
-    }
-  }
-
-  ngOnInit(): void {
-    this.allocColumnDef = [
-      { colId: 'displayName', colName: 'Display Name', colWidth: 1 },
-      { colId: 'allocationKey', colName: 'Allocation Key', colWidth: 1 },
-      { colId: 'nodeId', colName: 'Node ID', colWidth: 1 },
-      {
-        colId: 'resource',
-        colName: 'Resource',
-        colFormatter: CommonUtil.resourceColumnFormatter,
-        colWidth: 1,
-      },
-      { colId: 'priority', colName: 'Priority', colWidth: 0.5 },
-    ];
-    this.allocColumnIds = this.allocColumnDef.map((col) => col.colId);
-  }
-
-  formatResources(colValue: string): string[] {
-    const arr: string[] = colValue.split('<br/>');
-    // Check if there are "cpu" or "Memory" elements in the array
-    const hasCpu = arr.some((item) => item.toLowerCase().includes('cpu'));
-    const hasMemory = arr.some((item) => 
item.toLowerCase().includes('memory'));
-    if (!hasCpu) {
-      arr.unshift('CPU: n/a');
-    }
-    if (!hasMemory) {
-      arr.unshift('Memory: n/a');
-    }
-
-    // Concatenate the two arrays, with "cpu" and "Memory" elements first
-    const cpuAndMemoryElements = arr.filter(
-      (item) => item.toLowerCase().includes('CPU') || 
item.toLowerCase().includes('Memory')
-    );
-    const otherElements = arr.filter(
-      (item) => !item.toLowerCase().includes('CPU') && 
!item.toLowerCase().includes('Memory')
-    );
-    const result = cpuAndMemoryElements.concat(otherElements);
-
-    return result;
-  }
-
-  isAllocDataSourceEmpty() {
-    return this.allocDataSource?.data && this.allocDataSource.data.length === 
0;
-  }
-
-  allocationsDetailToggle(row: number) {
-    if (this.selectedAllocationsRow !== -1) {
-      if (this.selectedAllocationsRow !== row) {
-        this.allocDataSource.data[this.selectedAllocationsRow].expanded = 
false;
-        this.selectedAllocationsRow = row;
-        this.allocDataSource.data[row].expanded = true;
-      } else {
-        this.allocDataSource.data[this.selectedAllocationsRow].expanded = 
false;
-        this.selectedAllocationsRow = -1;
-      }
-    } else {
-      this.selectedAllocationsRow = row;
-      this.allocDataSource.data[row].expanded = true;
-    }
-  }
-
-  closeDrawer() {
-    this.selectedAllocationsRow = -1;
-    this.matDrawer.close();
-    this.removeRowSelection.emit();
-  }
-
-  openDrawer() {
-    this.matDrawer.open();
-  }
-
-  copyLinkToClipboard() {
-    const url = window.location.href.split('?')[0];
-    const copyString = 
`${url}?partition=${this.partitionSelected}&queue=${this.leafQueueSelected}&applicationId=${this?.selectedRow?.applicationId}`;
-    navigator.clipboard
-      .writeText(copyString)
-      .catch((error) => console.error('Writing to the clipboard is not 
allowed. ', error));
-  }
-}
diff --git a/src/app/components/apps-view/apps-view.component.html 
b/src/app/components/apps-view/apps-view.component.html
index 5c85aca..5e44df0 100644
--- a/src/app/components/apps-view/apps-view.component.html
+++ b/src/app/components/apps-view/apps-view.component.html
@@ -43,7 +43,7 @@
     <mat-form-field class="search-wrapper white-mat-form-field">
       <input matInput type="text" [(ngModel)]="searchText" placeholder="Search 
By Application ID" #searchInput />
       <button class="clear-btn" *ngIf="searchText" (click)="onClearSearch()" 
matTooltip="Clear Search"
-        matTooltipShowDelay="500">
+              matTooltipShowDelay="500">
         <i class="far fa-times-circle"></i>
       </button>
       <i *ngIf="!searchText" class="fas fa-search search-icon"></i>
@@ -59,35 +59,32 @@
   <div class="mat-elevation-z8">
     <mat-table [dataSource]="appDataSource" matSort #appSort="matSort">
       <ng-container [matColumnDef]="columnDef.colId" *ngFor="let columnDef of 
appColumnDef">
-        <mat-header-cell *matHeaderCellDef mat-sort-header 
[style.flex]="columnDef.colWidth || 1">{{ columnDef.colName
-          }}</mat-header-cell>
+        <mat-header-cell *matHeaderCellDef mat-sort-header>{{ 
columnDef.colName }}</mat-header-cell>
 
         <ng-container *ngIf="columnDef.colId === 'submissionTime'; else 
renderNext_1">
-          <mat-cell *matCellDef="let element" [style.flex]="columnDef.colWidth 
|| 1">{{
-            element['formattedSubmissionTime'] }}</mat-cell>
+          <mat-cell *matCellDef="let element">{{ 
element['formattedSubmissionTime'] }}</mat-cell>
         </ng-container>
 
         <ng-container *ngIf="columnDef.colId === 'lastStateChangeTime'; else 
renderNext_1">
-          <mat-cell *matCellDef="let element" [style.flex]="columnDef.colWidth 
|| 1">{{
-            element['formattedlastStateChangeTime'] }}</mat-cell>
+          <mat-cell *matCellDef="let element">{{ 
element['formattedlastStateChangeTime'] }}</mat-cell>
         </ng-container>
 
         <ng-template #renderNext_1>
           <ng-container
             *ngIf="columnDef.colId === 'usedResource' || columnDef.colId === 
'pendingResource'; else renderNext_1">
-            <mat-cell *matCellDef="let element" 
[style.flex]="columnDef.colWidth || 1">
+            <mat-cell *matCellDef="let element">
               <ng-container *ngIf="columnDef.colFormatter; else 
showAppRawData">
                 <ng-container 
*ngIf="columnDef.colFormatter(element[columnDef.colId]) as colValue">
-                  <mat-chip-set aria-label="Resources" 
[attr.data-test]="formatResources(colValue)">
+                  <ul class="mat-res-ul">
                     <ng-container *ngFor="let resource of 
formatResources(colValue); let i = index">
-                      <mat-chip class="mat-chip" *ngIf="i<2">
+                      <li class="mat-res-li" *ngIf="i<2">
                         {{ resource }}
-                      </mat-chip>
-                      <mat-chip class="mat-chip" *ngIf="i>=2 && detailToggle">
+                      </li>
+                      <li class="mat-res-li" *ngIf="i>=2 && detailToggle">
                         {{ resource }}
-                      </mat-chip>
+                      </li>
                     </ng-container>
-                  </mat-chip-set>
+                  </ul>
                 </ng-container>
               </ng-container>
               <ng-template #showAppRawData>
@@ -128,19 +125,98 @@
 
       <mat-header-row *matHeaderRowDef="appColumnIds"></mat-header-row>
 
-      <mat-row *matRowDef="let row; columns: appColumnIds; let i = index" 
[class.selected-row]="selectedRow === row"
-        (click)="toggleRowSelection(row)" [ngClass]="{'even-row': i % 2 === 0, 
'row': true}"></mat-row>
+      <mat-row *matRowDef="let row; columns: appColumnIds" 
[class.selected-row]="selectedRow === row"
+               (click)="toggleRowSelection(row)"></mat-row>
 
       <mat-footer-row *matFooterRowDef="['noRecord']"
-        [ngStyle]="{ display: isAppDataSourceEmpty() ? '' : 'none' 
}"></mat-footer-row>
+                      [ngStyle]="{ display: isAppDataSourceEmpty() ? '' : 
'none' }"></mat-footer-row>
     </mat-table>
 
-    <mat-paginator #appsViewMatPaginator [pageSizeOptions]="[10, 20, 50, 100]" 
pageSize="50"
-      [ngStyle]="{ display: isAppDataSourceEmpty() ? 'none' : '' }" 
(page)="onPaginatorChanged()"
-      showFirstLastButtons></mat-paginator>
+    <mat-paginator #appsViewMatPaginator [pageSizeOptions]="[10, 20, 50, 100]"
+                   [ngStyle]="{ display: isAppDataSourceEmpty() ? 'none' : '' 
}" (page)="onPaginatorChanged()"
+                   showFirstLastButtons></mat-paginator>
   </div>
-  <ng-container #drawerContainer></ng-container>
-  <ng-container #mfeContainer></ng-container>
 
+  <mat-drawer-container
+    class="flex-primary"
+    [hasBackdrop]="false"
+  >
+    <mat-drawer #matDrawer mode="over" position="end">
+      <mat-drawer-content>
+        <div class="header">
+          <span>{{ selectedRow?.applicationId }} ({{ 
selectedRow?.allocations?.length }} allocations)</span>
+          <span class="far fa-clipboard copy-btn" 
(click)="copyLinkToClipboard()" matTooltip="Click to copy the URL to this view" 
matTooltipShowDelay="500"></span>
+          <span class="far fa-solid fa-xmark close-btn" 
(click)="closeDrawer()"></span>
+        </div>
+        <div class="content">
 
-</div>
\ No newline at end of file
+          <mat-table [dataSource]="allocDataSource" matSort 
#allocSort="matSort">
+            <ng-container [matColumnDef]="columnDef.colId" *ngFor="let 
columnDef of allocColumnDef">
+              <mat-header-cell *matHeaderCellDef mat-sort-header 
[style.flex]="columnDef?.colWidth || 1">{{ columnDef.colName 
}}</mat-header-cell>
+
+              <ng-container *ngIf="columnDef.colId === 'priority'; else 
renderNext_3" >
+                <mat-cell class="small" *matCellDef="let element"
+                          [style.flex]="columnDef?.colWidth || 1"
+                          [style.min-height]="allocationsToggle ? '96px' : 
'unset'"
+                          [title]="element[columnDef.colId]"
+                >{{ element['priority'] }}  </mat-cell>
+              </ng-container>
+
+              <ng-container *ngIf="columnDef.colId === 'resource'; else 
renderNext_3">
+                <mat-cell *matCellDef="let element" class="allocations-data" 
[style.flex]="columnDef?.colWidth || 1" matTooltip="
+                          {{element[columnDef.colId]}}" 
matTooltipShowDelay="500" >
+                  <ng-container *ngIf="columnDef.colFormatter; else 
showAllocRowData;">
+                    <ng-container 
*ngIf="columnDef.colFormatter(element[columnDef.colId]) as colValue">
+                      <ul class="mat-res-ul">
+                        <ng-container *ngFor="let resource of 
formatResources(colValue); let i = index">
+                          <li class="mat-res-li" *ngIf="i<1">
+                            {{ resource }}
+                          </li>
+                          <li class="mat-res-li" *ngIf="i>=1 && 
allocationsToggle">
+                            {{ resource }}
+                          </li>
+                        </ng-container>
+                      </ul>
+                    </ng-container>
+                  </ng-container>
+                  <ng-template #showAllocRowData>
+                    <span>{{ element[columnDef.colId] }}</span>
+                  </ng-template>
+                </mat-cell>
+              </ng-container>
+
+              <ng-template #renderNext_3>
+                <mat-cell *matCellDef="let element"
+                          [class]="allocationsToggle ? '' : 'ellipsis'"
+                          [style.flex]="columnDef?.colWidth || 1"
+                          [style.min-height]="allocationsToggle ? '96px' : 
'unset'"
+                          matTooltip="{{element[columnDef.colId]}}" 
matTooltipShowDelay="500"
+                >{{ element[columnDef.colId] || 'n/a' }}</mat-cell>
+              </ng-template>
+            </ng-container>
+
+            <ng-container matColumnDef="noRecord">
+              <mat-footer-cell *matFooterCellDef>
+                <div class="no-record">No records found</div>
+              </mat-footer-cell>
+            </ng-container>
+
+            <mat-header-row *matHeaderRowDef="allocColumnIds"></mat-header-row>
+
+            <mat-row *matRowDef="let row; columns: allocColumnIds; let i = 
index" (click)="allocationsDetailToggle()"
+                     [ngClass]="{'even-row': i % 2 === 0, 'row': true}"
+            ></mat-row>
+
+            <mat-footer-row *matFooterRowDef="['noRecord']"
+                            [ngStyle]="{ display: isAllocDataSourceEmpty() ? 
'' : 'none' }"></mat-footer-row>
+          </mat-table>
+
+          <mat-paginator #allocationMatPaginator [pageSizeOptions]="[10, 20, 
50, 100]"
+                         [ngStyle]="{ display: isAllocDataSourceEmpty() ? 
'none' : '' }"
+                         showFirstLastButtons></mat-paginator>
+
+        </div>
+      </mat-drawer-content>
+    </mat-drawer>
+  </mat-drawer-container>
+</div>
diff --git a/src/app/components/apps-view/apps-view.component.scss 
b/src/app/components/apps-view/apps-view.component.scss
index 67cd8e3..be0dff8 100644
--- a/src/app/components/apps-view/apps-view.component.scss
+++ b/src/app/components/apps-view/apps-view.component.scss
@@ -17,19 +17,22 @@
  */
 @import '~material-design-icons/iconfont/material-icons.css';
 
- .top-section {
+.top-section {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  .left-side{
+
+  .left-side {
     display: flex;
     flex-direction: row;
     align-items: center;
+
     .dropdown-wrapper {
       padding-right: 40px;
+
       .dropdown-label {
         color: #333;
         font-size: 14px;
@@ -37,19 +40,24 @@
       }
     }
   }
-  .right-side{
+
+  .right-side {
     display: flex;
     flex-direction: row;
     align-items: center;
+
     .btn-wrapper {
       filter: drop-shadow(0px 2px 1px rgba(90, 90, 90, 0.5));
-      &:hover{
+
+      &:hover {
         filter: drop-shadow(0px 3px 3px rgba(90, 90, 90, 0.5));
       }
-      :hover{
+
+      :hover {
         cursor: pointer;
       }
-      .btn{
+
+      .btn {
         display: block;
         border: none;
         padding: 5px 16px;
@@ -57,31 +65,38 @@
         font-size: 24px;
         transform: translateY(-13px);
       }
-      .material-icons{
+
+      .material-icons {
         transform: translateY(2px);
       }
     }
+
     .search-wrapper {
       width: 300px;
       right: 20px;
       padding-right: 20px;
+
       input {
         width: calc(100% - 22px);
         color: #333;
       }
+
       .clear-btn {
         outline: none;
         border: none;
         padding: 0 0 0 4px;
         cursor: pointer;
         background: transparent;
+
         i {
           font-size: 18px;
+
           &:hover {
             color: #f44336;
           }
         }
       }
+
       .search-icon {
         margin-left: 4px;
         font-size: 17px;
@@ -90,7 +105,7 @@
   }
 }
 
-.mdc-button .mdc-button__label{
+.mdc-button .mdc-button__label {
   display: flex;
   align-items: center;
 }
@@ -99,72 +114,53 @@
   width: 100%;
   height: 100%;
 
-  mat-chip {
-    height: 20px;
-    line-height: 14px;
-    font-size: 12px;
-    margin: 1px;
-    // border-radius: 5px;
-    // background-color: #313D54;
-    background-color: transparent;
-
-    span {
-        font-size: 12px;
-    }
-  }
-
-  .mat-mdc-standard-chip {
-    --mdc-chip-label-text-color: #333;
-    --mdc-chip-label-text-size: 12px;
-    --mdc-chip-label-text-weight: 400;
-  }
-
-  .selected-row .mat-mdc-standard-chip {
-    --mdc-chip-label-text-color: #fff;
-  }
-
   .mat-mdc-header-cell {
     font-size: 15px;
     font-weight: 500;
     color: #666;
   }
+
   .mat-mdc-cell {
     color: #333;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    .mat-res-ul{
+
+    .mat-res-ul {
       padding: 0;
       margin: 0;
-      .mat-res-li{
+
+      .mat-res-li {
         list-style-type: none;
       }
     }
+
     .mat-toggle-more {
       display: block;
       color: #a1a3b7;
       padding: 5px 45px 0 0;
+
       &:hover {
         color: #8d00d4;
       }
     }
   }
-  .even-row {
-    background: #eee;
-  }
+
   .mat-mdc-row {
-    min-height: unset;
-    font-size: 12px;
     &:hover {
       background: #cccccc;
       cursor: pointer;
     }
+
     &.selected-row {
       background: #303d54;
+
       .mat-mdc-cell {
         color: #fff;
+
         .mat-toggle-more {
           color: #b8bbff;
+
           &:hover {
             color: #b871dc;
           }
@@ -172,18 +168,22 @@
       }
     }
   }
+
   .mat-mdc-header-cell.indicator-icon,
   .mat-mdc-cell.indicator-icon {
     max-width: 40px;
     font-size: 18px;
     margin-left: 10px;
   }
+
   .app-allocations {
     margin-top: 40px;
+
     .mat-mdc-table {
       margin-top: 20px;
     }
   }
+
   .no-record {
     font-size: 14px;
     font-weight: 500;
@@ -203,39 +203,48 @@
   position: absolute;
   right: 0;
   bottom: 0;
+
   .mat-drawer {
     pointer-events: auto;
     width: 100%;
+
     .content {
       padding: 0 10px;
     }
   }
+
   .close-btn {
     float: right;
     font-size: 1.2em;
     cursor: pointer;
     padding-right: 5px;
+
     &:hover {
       color: #f44336;
     }
   }
+
   .copy-btn {
     font-size: 1em;
     cursor: pointer;
     padding-left: 5px;
   }
+
   .header {
     margin: 20px;
     font-weight: 100;
     font-size: 1em;
   }
+
   .content {
     border-top: 1px solid #e1e1e1;
   }
+
   .item-wrapper {
     .left-item {
       text-align: right;
     }
+
     .left-item,
     .right-item {
       width: 50%;
@@ -243,13 +252,16 @@
       padding-right: 0;
       color: #666;
     }
+
     .right-item {
       font-weight: 600;
     }
   }
+
   .app-link {
     text-decoration: none;
     color: #666;
+
     &:hover {
       text-decoration: underline;
     }
@@ -273,4 +285,4 @@
   .row {
     min-height: unset;
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/components/apps-view/apps-view.component.spec.ts 
b/src/app/components/apps-view/apps-view.component.spec.ts
index 36c8969..951b932 100644
--- a/src/app/components/apps-view/apps-view.component.spec.ts
+++ b/src/app/components/apps-view/apps-view.component.spec.ts
@@ -31,15 +31,8 @@ import { By, HAMMER_LOADER } from 
'@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AppInfo } from '@app/models/app-info.model';
-import { EnvconfigService } from '@app/services/envconfig/envconfig.service';
 import { SchedulerService } from '@app/services/scheduler/scheduler.service';
-import { MatChipsModule } from '@angular/material/chips';
-
-import {
-  MockEnvconfigService,
-  MockNgxSpinnerService,
-  MockSchedulerService,
-} from '@app/testing/mocks';
+import { MockNgxSpinnerService, MockSchedulerService } from 
'@app/testing/mocks';
 import { NgxSpinnerService } from 'ngx-spinner';
 import { of } from 'rxjs';
 
@@ -64,20 +57,15 @@ describe('AppsViewComponent', () => {
         MatTooltipModule,
         MatSelectModule,
         MatSidenavModule,
-        MatChipsModule,
       ],
       providers: [
         { provide: SchedulerService, useValue: MockSchedulerService },
         { provide: NgxSpinnerService, useValue: MockNgxSpinnerService },
         { provide: HAMMER_LOADER, useValue: () => new Promise(() => {}) },
-        { provide: EnvconfigService, useValue: MockEnvconfigService },
       ],
     }).compileComponents();
     fixture = TestBed.createComponent(AppsViewComponent);
     component = fixture.componentInstance;
-    spyOn(component, 'initializeSidebarComponent').and.callFake(
-      (b = null) => new Promise(() => {})
-    );
     fixture.detectChanges();
   });
 
@@ -85,7 +73,7 @@ describe('AppsViewComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should have usedResource and pendingResource column with detailToggle 
OFF', () => {
+  it('should have usedResource and pendingResource column', () => {
     let service: SchedulerService;
     service = TestBed.inject(SchedulerService);
     let appInfo = new AppInfo(
@@ -102,45 +90,22 @@ describe('AppsViewComponent', () => {
     );
     spyOn(service, 'fetchAppList').and.returnValue(of([appInfo]));
     component.fetchAppListForPartitionAndQueue('default', 'root');
+    component.toggle();
     fixture.detectChanges();
     const debugEl: DebugElement = fixture.debugElement;
     expect(
-      debugEl.query(By.css('[data-test="Memory: 500.0 KB,CPU: 10,pods: 
1"]')).nativeElement
-        .innerText
-    ).toContain('Memory: 500.0 KB\nCPU: 10');
+      
debugEl.query(By.css('mat-cell.mat-column-usedResource')).nativeElement.innerText
+    ).toContain('Memory: 500.0 KB\nCPU: 10\npods: 1');
     expect(
-      debugEl.query(By.css('[data-test="Memory: 0.0 bytes,CPU: 0,pods: 
n/a"]')).nativeElement
-        .innerText
-    ).toContain('Memory: 0.0 bytes\nCPU: 0');
+      
debugEl.query(By.css('mat-cell.mat-column-pendingResource')).nativeElement.innerText
+    ).toContain('Memory: 0.0 bytes\nCPU: 0\npods: n/a');
   });
 
-  it('should have usedResource and pendingResource column with detailToggle 
ON', () => {
-    let service: SchedulerService;
-    service = TestBed.inject(SchedulerService);
-    let appInfo = new AppInfo(
-      'app1',
-      'Memory: 500.0 KB, CPU: 10, pods: 1',
-      'Memory: 0.0 bytes, CPU: 0, pods: n/a',
-      '',
-      1,
-      2,
-      [],
-      2,
-      'RUNNING',
-      []
-    );
-    spyOn(service, 'fetchAppList').and.returnValue(of([appInfo]));
-    component.fetchAppListForPartitionAndQueue('default', 'root');
-    component.detailToggle = true;
-    fixture.detectChanges();
+  it('should copy the allocations URL to clipboard', () => {
     const debugEl: DebugElement = fixture.debugElement;
-    expect(
-      debugEl.query(By.css('[data-test="Memory: 500.0 KB,CPU: 10,pods: 
1"]')).nativeElement
-        .innerText
-    ).toContain('Memory: 500.0 KB\nCPU: 10\npods: 1');
-    expect(
-      debugEl.query(By.css('[data-test="Memory: 0.0 bytes,CPU: 0,pods: 
n/a"]')).nativeElement
-        .innerText
-    ).toContain('Memory: 0.0 bytes\nCPU: 0\npods: n/a');
+    const copyButton = debugEl.query(By.css('.copy-btn'));
+    const copyButtonSpy = spyOn(component, 'copyLinkToClipboard');
+    copyButton.triggerEventHandler('click', null);
+    expect(copyButtonSpy).toHaveBeenCalled();
   });
 });
diff --git a/src/app/components/apps-view/apps-view.component.ts 
b/src/app/components/apps-view/apps-view.component.ts
index c65d5cb..d742aac 100644
--- a/src/app/components/apps-view/apps-view.component.ts
+++ b/src/app/components/apps-view/apps-view.component.ts
@@ -16,36 +16,25 @@
  * limitations under the License.
  */
 
-import {
-  Component,
-  ComponentRef,
-  ElementRef,
-  OnInit,
-  ViewChild,
-  ViewContainerRef,
-} from '@angular/core';
+import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 import { MatPaginator } from '@angular/material/paginator';
-import { MatSelect, MatSelectChange } from '@angular/material/select';
-import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
-import { ActivatedRoute, Router } from '@angular/router';
-import { AllocationsDrawerComponent } from 
'@app/components/allocations-drawer/allocations-drawer.component';
-import { AllocationInfo } from '@app/models/alloc-info.model';
+import { MatSort } from '@angular/material/sort';
+import { MatSelectChange, MatSelect } from '@angular/material/select';
+import { finalize, debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { fromEvent } from 'rxjs';
+
+import { SchedulerService } from '@app/services/scheduler/scheduler.service';
 import { AppInfo } from '@app/models/app-info.model';
+import { AllocationInfo } from '@app/models/alloc-info.model';
 import { ColumnDef } from '@app/models/column-def.model';
-import { DropdownItem } from '@app/models/dropdown-item.model';
+import { CommonUtil } from '@app/utils/common.util';
 import { PartitionInfo } from '@app/models/partition-info.model';
+import { DropdownItem } from '@app/models/dropdown-item.model';
 import { QueueInfo } from '@app/models/queue-info.model';
-import { EnvconfigService } from '@app/services/envconfig/envconfig.service';
-import { SchedulerService } from '@app/services/scheduler/scheduler.service';
-import { CommonUtil } from '@app/utils/common.util';
-import { NgxSpinnerService } from 'ngx-spinner';
-import { fromEvent } from 'rxjs';
-import { debounceTime, distinctUntilChanged, finalize } from 'rxjs/operators';
-import {
-  loadRemoteModule,
-  LoadRemoteModuleEsmOptions,
-} from '@angular-architects/module-federation';
+import { MatDrawer } from '@angular/material/sidenav';
 
 @Component({
   selector: 'app-applications-view',
@@ -59,12 +48,7 @@ export class AppsViewComponent implements OnInit {
   @ViewChild('allocSort', { static: true }) allocSort!: MatSort;
   @ViewChild('searchInput', { static: true }) searchInput!: ElementRef;
   @ViewChild('queueSelect', { static: false }) queueSelect!: MatSelect;
-
-  @ViewChild('drawerContainer', { read: ViewContainerRef, static: true })
-  drawerContainer!: ViewContainerRef;
-
-  @ViewChild('mfeContainer', { read: ViewContainerRef, static: true })
-  mfeContainer!: ViewContainerRef;
+  @ViewChild('matDrawer', { static: false }) matDrawer!: MatDrawer;
 
   appDataSource = new MatTableDataSource<AppInfo>([]);
   appColumnDef: ColumnDef[] = [];
@@ -83,14 +67,13 @@ export class AppsViewComponent implements OnInit {
   leafQueueSelected = '';
 
   detailToggle: boolean = false;
-  allocationsDrawerComponent: ComponentRef<AllocationsDrawerComponent> | 
undefined = undefined;
+  allocationsToggle: boolean = false;
 
   constructor(
     private scheduler: SchedulerService,
     private spinner: NgxSpinnerService,
     private activatedRoute: ActivatedRoute,
-    private router: Router,
-    private envConfig: EnvconfigService
+    private router: Router
   ) {}
 
   ngOnInit() {
@@ -101,31 +84,27 @@ export class AppsViewComponent implements OnInit {
     this.appSort.sort({ id: 'submissionTime', start: 'desc', disableClear: 
false });
 
     this.appColumnDef = [
-      { colId: 'applicationId', colName: 'Application ID', colWidth: 1 },
-      { colId: 'applicationState', colName: 'Application State', colWidth: 1 },
+      { colId: 'applicationId', colName: 'Application ID' },
+      { colId: 'applicationState', colName: 'Application State' },
       {
         colId: 'lastStateChangeTime',
         colName: 'Last State Change Time',
         colFormatter: CommonUtil.timeColumnFormatter,
-        colWidth: 1,
       },
       {
         colId: 'usedResource',
         colName: 'Used Resource',
         colFormatter: CommonUtil.resourceColumnFormatter,
-        colWidth: 2,
       },
       {
         colId: 'pendingResource',
         colName: 'Pending Resource',
         colFormatter: CommonUtil.resourceColumnFormatter,
-        colWidth: 2,
       },
       {
         colId: 'submissionTime',
         colName: 'Submission Time',
         colFormatter: CommonUtil.timeColumnFormatter,
-        colWidth: 1,
       },
     ];
 
@@ -175,31 +154,6 @@ export class AppsViewComponent implements OnInit {
           this.clearQueueSelection();
         }
       });
-
-    this.initializeSidebarComponent(
-      this.envConfig.getAllocationsDrawerComponentRemoteConfig()
-    ).catch(console.error);
-  }
-
-  async initializeSidebarComponent(remoteComponentConfig: 
LoadRemoteModuleEsmOptions | null) {
-    let component = AllocationsDrawerComponent;
-
-    if (remoteComponentConfig !== null) {
-      const { AllocationsDrawerComponent: allocationsDrawerComponent } =
-        await loadRemoteModule(remoteComponentConfig);
-      component = allocationsDrawerComponent;
-    }
-
-    this.drawerContainer.clear();
-    this.allocationsDrawerComponent = 
this.drawerContainer.createComponent(component);
-
-    this.allocationsDrawerComponent.setInput('selectedRow', this.selectedRow);
-    this.allocationsDrawerComponent.setInput('allocDataSource', 
this.allocDataSource);
-    this.allocationsDrawerComponent.setInput('partitionSelected', 
this.partitionSelected);
-    this.allocationsDrawerComponent.setInput('leafQueueSelected', 
this.leafQueueSelected);
-    this.allocationsDrawerComponent.instance.removeRowSelection.subscribe(() 
=> {
-      this.removeRowSelection();
-    });
   }
 
   fetchQueuesForPartition(partitionName: string) {
@@ -323,12 +277,10 @@ export class AppsViewComponent implements OnInit {
     } else {
       this.selectedRow = row;
       row.isSelected = true;
+      this.matDrawer.open();
       if (row.allocations) {
         this.allocDataSource.data = row.allocations;
       }
-      this.allocationsDrawerComponent?.setInput('selectedRow', 
this.selectedRow);
-      this.allocationsDrawerComponent?.setInput('allocDataSource', 
this.allocDataSource);
-      this.allocationsDrawerComponent?.instance.openDrawer();
     }
   }
 
@@ -348,6 +300,10 @@ export class AppsViewComponent implements OnInit {
     return this.appDataSource.data && this.appDataSource.data.length === 0;
   }
 
+  isAllocDataSourceEmpty() {
+    return this.allocDataSource.data && this.allocDataSource.data.length === 0;
+  }
+
   onClearSearch() {
     this.searchText = '';
     this.removeRowSelection();
@@ -421,7 +377,9 @@ export class AppsViewComponent implements OnInit {
     const otherElements = arr.filter(
       (item) => !item.toLowerCase().includes('CPU') && 
!item.toLowerCase().includes('Memory')
     );
-    return cpuAndMemoryElements.concat(otherElements);
+    const result = cpuAndMemoryElements.concat(otherElements);
+
+    return result;
   }
 
   clearQueueSelection() {
@@ -437,4 +395,21 @@ export class AppsViewComponent implements OnInit {
   toggle() {
     this.detailToggle = !this.detailToggle;
   }
+
+  allocationsDetailToggle() {
+    this.allocationsToggle = !this.allocationsToggle;
+  }
+
+  closeDrawer() {
+    this.matDrawer.close();
+    this.removeRowSelection();
+  }
+
+  copyLinkToClipboard() {
+    const url = window.location.href.split('?')[0];
+    const copyString = 
`${url}?partition=${this.partitionSelected}&queue=${this.leafQueueSelected}&applicationId=${this?.selectedRow?.applicationId}`;
+    navigator.clipboard
+      .writeText(copyString)
+      .catch((error) => console.error('Writing to the clipboard is not 
allowed. ', error));
+  }
 }
diff --git a/src/app/models/envconfig.model.ts 
b/src/app/models/envconfig.model.ts
index 78b3a41..0ca4a7e 100644
--- a/src/app/models/envconfig.model.ts
+++ b/src/app/models/envconfig.model.ts
@@ -18,6 +18,4 @@
 
 export interface EnvConfig {
   localSchedulerWebAddress: string;
-  moduleFederationRemoteEntry?: string;
-  allocationsDrawerRemoteComponent?: string;
 }
diff --git a/src/app/services/envconfig/envconfig.service.ts 
b/src/app/services/envconfig/envconfig.service.ts
index f351b46..8118795 100644
--- a/src/app/services/envconfig/envconfig.service.ts
+++ b/src/app/services/envconfig/envconfig.service.ts
@@ -21,7 +21,7 @@ import { HttpClient } from '@angular/common/http';
 import { environment } from '../../../environments/environment';
 
 import { EnvConfig } from '@app/models/envconfig.model';
-import { LoadRemoteModuleEsmOptions } from 
'@angular-architects/module-federation';
+import { DEFAULT_PROTOCOL } from '@app/utils/constants';
 
 const ENV_CONFIG_JSON_URL = './assets/config/envconfig.json';
 
@@ -63,17 +63,4 @@ export class EnvconfigService {
 
     return `${this.uiProtocol}//${this.uiHostname}:${this.uiPort}`;
   }
-
-  getAllocationsDrawerComponentRemoteConfig(): LoadRemoteModuleEsmOptions | 
null {
-    if (
-      this.envConfig.allocationsDrawerRemoteComponent &&
-      this.envConfig.moduleFederationRemoteEntry
-    )
-      return {
-        type: 'module',
-        remoteEntry: this.envConfig.moduleFederationRemoteEntry,
-        exposedModule: this.envConfig.allocationsDrawerRemoteComponent,
-      };
-    return null;
-  }
 }
diff --git a/src/app/testing/mocks.ts b/src/app/testing/mocks.ts
index c91ffd7..45efbd4 100644
--- a/src/app/testing/mocks.ts
+++ b/src/app/testing/mocks.ts
@@ -21,7 +21,6 @@ import { AppInfo } from '@app/models/app-info.model';
 import { CommonUtil } from '@app/utils/common.util';
 
 export const noopFn = () => {};
-export const nullFn = () => null;
 
 export const MockSchedulerService = {
   fetchClusterByName: () => of({}),
@@ -42,7 +41,6 @@ export const MockNgxSpinnerService = {
 
 export const MockEnvconfigService = {
   getSchedulerWebAddress: noopFn,
-  getAllocationsDrawerComponentRemoteConfig: nullFn,
 };
 
 export const MockEventBusService = {
diff --git a/src/assets/config/envconfig.json b/src/assets/config/envconfig.json
index 8e21192..fb22397 100644
--- a/src/assets/config/envconfig.json
+++ b/src/assets/config/envconfig.json
@@ -1,5 +1,3 @@
 {
-  "localSchedulerWebAddress": "http://localhost:9889";,
-  "moduleFederationRemoteEntry": "",
-  "allocationsDrawerRemoteComponent": ""
+  "localSchedulerWebAddress": "http://localhost:9889";
 }
diff --git a/src/bootstrap.ts b/src/bootstrap.ts
deleted file mode 100644
index be5f6fc..0000000
--- a/src/bootstrap.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * 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.
- */
-
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
-
-if (environment.production) {
-  enableProdMode();
-}
-
-platformBrowserDynamic()
-  .bootstrapModule(AppModule)
-  .catch((err) => console.error(err));
diff --git a/src/main.ts b/src/main.ts
index 8039bb0..be5f6fc 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -16,4 +16,16 @@
  * limitations under the License.
  */
 
-import('./bootstrap').catch((err) => console.error(err));
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch((err) => console.error(err));
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 58c0f98..82d91dc 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -1,3 +1,4 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
@@ -11,4 +12,4 @@
   "include": [
     "src/**/*.d.ts"
   ]
-}
\ No newline at end of file
+}
diff --git a/tsconfig.json b/tsconfig.json
index 5fe89cf..bfb36a8 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,3 +1,4 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "compileOnSave": false,
   "compilerOptions": {
@@ -37,4 +38,4 @@
     "strictInputAccessModifiers": true,
     "strictTemplates": true
   }
-}
\ No newline at end of file
+}
diff --git a/webpack.config.js b/webpack.config.js
deleted file mode 100644
index f730193..0000000
--- a/webpack.config.js
+++ /dev/null
@@ -1,37 +0,0 @@
-//
-// 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.
-//
-
-const {
-  shareAll,
-  withModuleFederationPlugin,
-} = require('@angular-architects/module-federation/webpack');
-
-const webpackConfig = withModuleFederationPlugin({
-  shared: {
-    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 
'auto' }),
-  },
-});
-
-module.exports = {
-  ...webpackConfig,
-  output: {
-    ...webpackConfig.output,
-    scriptType: 'text/javascript',
-  },
-};
diff --git a/webpack.prod.config.js b/webpack.prod.config.js
deleted file mode 100644
index f2e70c2..0000000
--- a/webpack.prod.config.js
+++ /dev/null
@@ -1,19 +0,0 @@
-//
-// 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.
-//
-module.exports = require('./webpack.config');


---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]

Reply via email to