Feature: Edit existing model servers from UI (#114)

* Feat: Added model edit feature through UI (#14)

* Implement editing model servers (#13)

* Added Model Edit feature

* fix: apply prettier formatting

Signed-off-by: LogicalGuy77 <harshitacademia@gmail.com>
Co-authored-by: Mark Winter <mark.winter@navercorp.com>
Signed-off-by: LogicalGuy77 <harshitacademia@gmail.com>

* refactored edit-component styles

Signed-off-by: LogicalGuy77 <harshitacademia@gmail.com>

* chore: cleaned up code

Signed-off-by: LogicalGuy77 <harshitacademia@gmail.com>

---------

Signed-off-by: LogicalGuy77 <harshitacademia@gmail.com>
Co-authored-by: Mark Winter <mark.winter@navercorp.com>

Author: LogicalGuy77

backend/apps/v1beta1/routes/__init__.py

@@ -3,4 +3,4 @@
 
 bp = Blueprint("default_routes", __name__)
 
-from . import post  # noqa: F401, E402
+from . import post, put  # noqa: F401, E402

backend/apps/v1beta1/routes/put.py

@@ -0,0 +1,38 @@
+from flask import request
+
+from kubeflow.kubeflow.crud_backend import api, decorators, logging
+
+from ...common import versions
+from . import bp
+
+log = logging.getLogger(__name__)
+
+
+@bp.route("/api/namespaces/<namespace>/inferenceservices/<isvc>",
+          methods=["PUT"])
+@decorators.request_is_json_type
+@decorators.required_body_params("apiVersion", "kind", "metadata", "spec")
+def replace_inference_service(namespace: str, isvc: str):
+    gvk = versions.inference_service_gvk()
+    api.authz.ensure_authorized(
+        "update",
+        group=gvk["group"],
+        version=gvk["version"],
+        resource=gvk["kind"],
+        namespace=namespace,
+    )
+
+    cr = request.get_json()
+
+    api.custom_api.replace_namespaced_custom_object(
+        group=gvk["group"],
+        version=gvk["version"],
+        plural=gvk["kind"],
+        namespace=namespace,
+        name=isvc,
+        body=cr)
+
+    return api.success_response(
+        "message",
+        "InferenceService successfully updated"
+    )

frontend/COMMIT

@@ -1 +1 @@
-78969ee
+78969ee

frontend/angular.json

@@ -39,6 +39,11 @@
                 "glob": "**/*",
                 "input": "node_modules/monaco-editor",
                 "output": "assets/monaco-editor"
+              },
+              {
+                "glob": "**/*",
+                "input": "node_modules/ace-builds/src-min-noconflict",
+                "output": "assets/ace-builds"
               }
             ],
             "styles": ["src/styles.scss"],

frontend/package-lock.json

@@ -38,12 +38,14 @@
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@kubernetes/client-node": "^0.17.0",
+    "ace-builds": "^1.40.0",
     "date-fns": "^1.29.0",
     "js-yaml": "^4.1.0",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "material-icons": "^1.10.8",
     "monaco-editor": "^0.33.0",
+    "ngx-ace-wrapper": "^14.0.0",
     "rxjs": "~7.5.6",
     "tslib": "^2.4.0",
     "zone.js": "~0.11.5"
@@ -72,6 +74,7 @@
     "karma-coverage-istanbul-reporter": "~3.0.3",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "^2.0.0",
+    "prettier": "^2.8.8",
     "protractor": "~7.0.0",
     "ts-node": "~10.9.1",
     "typescript": "~4.8.0"

frontend/package.json

@@ -0,0 +1,19 @@
+import * as ace from 'ace-builds';
+
+export function configureAce() {
+  return () => {
+    try {
+      const basePath = '/assets/ace-builds';
+      ace.config.set('basePath', basePath);
+      ace.config.set('modePath', basePath);
+      ace.config.set('themePath', basePath);
+      ace.config.set('workerPath', basePath);
+
+      console.log('[Debug] ACE editor configuration completed');
+      return Promise.resolve();
+    } catch (error) {
+      console.error('[Debug] ACE editor configuration failed:', error);
+      return Promise.reject(error);
+    }
+  };
+}

frontend/src/app/ace-config.ts

@@ -1,5 +1,6 @@
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import { NgModule, APP_INITIALIZER } from '@angular/core';
+import { configureAce } from './ace-config';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -33,6 +34,11 @@ const MwaSnackBarConfig: MatSnackBarConfig = {
   ],
   providers: [
     { provide: MAT_SNACK_BAR_DEFAULT_OPTIONS, useValue: MwaSnackBarConfig },
+    {
+      provide: APP_INITIALIZER,
+      useFactory: () => configureAce,
+      multi: true,
+    },
   ],
   bootstrap: [AppComponent],
 })

frontend/src/app/app.module.ts

@@ -0,0 +1,33 @@
+<div class="edit-component">
+  <div
+    #editorWrapper
+    style="border: 1px solid #ccc"
+    [style.width]="editorStyle.width"
+    [style.height]="editorStyle.height"
+    [style.fontSize]="editorStyle.fontSize"
+  ></div>
+
+  <div style="margin-top: 10px">
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="submit()"
+      [disabled]="applying"
+    >
+      <mat-spinner
+        *ngIf="applying"
+        diameter="20"
+        style="display: inline-block; margin-right: 5px"
+      ></mat-spinner>
+      Submit
+    </button>
+    <button
+      mat-stroked-button
+      (click)="cancelEdit.emit(true)"
+      [disabled]="applying"
+      style="margin-left: 10px"
+    >
+      Cancel
+    </button>
+  </div>
+</div>

frontend/src/app/pages/server-info/edit/edit.component.html

@@ -0,0 +1,22 @@
+ace {
+  display: block;
+  border: 1px solid #e0e0e0;
+  width: 100%;
+}
+
+.edit-component {
+  margin-top: 1rem;
+
+  button[mat-raised-button][color='primary'] {
+    background-color: #1976d2;
+    color: white;
+  }
+}
+
+.waiting-button-wrapper {
+  display: flex;
+}
+
+.waiting-button-wrapper .mat-spinner {
+  margin: auto 0.2rem;
+}