Generic YAML editor for all resources (#807)

To test this edit a pod in a list.

Missing things that will be done in next PR:
* make the menu and popup look pretty
* make json editor work on serve:prod (now images are missing)

Author: bryk

bower.json

@@ -11,7 +11,8 @@
     "angular-resource": "~1.5.0",
     "angular-sanitize": "~1.5.0",
     "material-design-icons": "~2.2.2",
-    "roboto-fontface": "~0.4.5"
+    "roboto-fontface": "~0.4.5",
+    "ng-jsoneditor": "angular-tools/ng-jsoneditor#~1.0.0"
   },
   "overrides": {
     "material-design-icons": {
@@ -21,7 +22,10 @@
       "main": "css/roboto-fontface.css"
     },
     "google-closure-library": {
-      "main": ["closure/goog/base.js", "closure/goog/deps.js"]
+      "main": [
+        "closure/goog/base.js",
+        "closure/goog/deps.js"
+      ]
     }
   },
   "devDependencies": {

build/build.js

@@ -88,17 +88,27 @@ gulp.task('locales-for-backend:cross', ['clean-dist'], function() {
  * Builds production version of the frontend application for the default architecture
  * (one copy per locale) and plcaes it under .tmp/dist , preparing it for localization and revision.
  */
-gulp.task('frontend-copies', ['fonts', 'icons', 'assets', 'index:prod', 'clean-dist'], function() {
-  return createFrontendCopies([path.join(conf.paths.distPre, conf.arch.default, 'public')]);
-});
+gulp.task(
+    'frontend-copies',
+    ['fonts', 'icons', 'assets', 'dependency-images', 'index:prod', 'clean-dist'], function() {
+      return createFrontendCopies([path.join(conf.paths.distPre, conf.arch.default, 'public')]);
+    });
 
 /**
  * Builds production versions of the frontend application for all architecures
  * (one copy per locale) and places them under .tmp, preparing them for localization and revision.
  */
 gulp.task(
     'frontend-copies:cross',
-    ['fonts:cross', 'icons:cross', 'assets:cross', 'index:prod', 'clean-dist'], function() {
+    [
+      'fonts:cross',
+      'icons:cross',
+      'assets:cross',
+      'dependency-images:cross',
+      'index:prod',
+      'clean-dist',
+    ],
+    function() {
       return createFrontendCopies(
           conf.arch.list.map((arch) => path.join(conf.paths.distPre, arch, 'public')));
     });
@@ -134,6 +144,20 @@ gulp.task('fonts', ['clean-dist'], function() { return fonts([conf.paths.distPub
  */
 gulp.task('fonts:cross', ['clean-dist'], function() { return fonts(conf.paths.distPublicCross); });
 
+/**
+ * Copies images from dependencies to the dist directory for current architecture.
+ */
+gulp.task('dependency-images', ['clean-dist'], function() {
+  return dependencyImages([conf.paths.distPublic]);
+});
+
+/**
+ * Copies images from dependencies to the dist directory for all architectures.
+ */
+gulp.task('dependency-images:cross', ['clean-dist'], function() {
+  return dependencyImages(conf.paths.distPublicCross);
+});
+
 /**
  * Cleans all build artifacts.
  */
@@ -175,7 +199,13 @@ function createFrontendCopies(outputDirs) {
   return gulp.src(path.join(conf.paths.prodTmp, '*.html'))
       .pipe(gulpUseref({searchPath: searchPath}))
       .pipe(gulpIf('**/vendor.css', gulpMinifyCss()))
-      .pipe(gulpIf('**/vendor.js', gulpUglify({preserveComments: uglifySaveLicense})))
+      .pipe(gulpIf('**/vendor.js', gulpUglify({
+                     preserveComments: uglifySaveLicense,
+                     // Disable compression of unused vars. This speeds up minification a lot (like
+                     // 10 times).
+                     // See https://github.com/mishoo/UglifyJS2/issues/321
+                     compress: {unused: false},
+                   })))
       .pipe(gulpIf('*.html', gulpHtmlmin({
                      removeComments: true,
                      collapseWhitespace: true,
@@ -265,6 +295,18 @@ function fonts(outputDirs) {
       .pipe(multiDest(localizedOutputDirs));
 }
 
+/**
+ * Copies the font files to all dist directories per arch and locale.
+ * @param {!Array<string>} outputDirs
+ * @return {stream}
+ */
+function dependencyImages(outputDirs) {
+  let localizedOutputDirs = createLocalizedOutputs(outputDirs, 'static/img');
+  return gulp
+      .src(path.join(conf.paths.jsoneditorImages, '*.png'), {base: conf.paths.jsoneditorImages})
+      .pipe(multiDest(localizedOutputDirs));
+}
+
 /**
  * Returns one subdirectory path for each supported locale inside all of the specified
  * outputDirs. Optionally, a subdirectory structure can be passed to append after each locale path.

build/conf.js

@@ -196,6 +196,7 @@ export default {
     hyperkube: path.join(basePath, 'build/hyperkube.sh'),
     i18nProd: path.join(basePath, '.tmp/i18n'),
     integrationTest: path.join(basePath, 'src/test/integration'),
+    jsoneditorImages: path.join(basePath, 'bower_components/jsoneditor/src/css/img'),
     karmaConf: path.join(basePath, 'build/karma.conf.js'),
     materialIcons: path.join(basePath, 'bower_components/material-design-icons/iconfont'),
     nodeModules: path.join(basePath, 'node_modules'),

i18n/messages-en.xtb

@@ -155,4 +155,11 @@
 	<translation id="3762856444030194375" key="MSG_PET_SET_INFO_STATUS_SECTION" source="/home/floreks/Projects/dashboard/.tmp/serve/app-dev.js" desc="Pet set info status section name.">Status</translation>
 	<translation id="1744330140020758003" key="MSG_PET_SET_INFO_PODS_ENTRY" source="/home/floreks/Projects/dashboard/.tmp/serve/app-dev.js" desc="Pet set info status section pods entry.">Pods</translation>
 	<translation id="6654869080140416303" key="MSG_PET_SET_INFO_PODS_STATUS_ENTRY" source="/home/floreks/Projects/dashboard/.tmp/serve/app-dev.js" desc="Pet set info status section pods status entry.">Pods status</translation>
+	<translation id="6480734540585386902" key="MSG_DELETE_RESOURCE_DIALOG_TITLE" source="/usr/local/google/home/bryk/src/github.com/dashboard/.tmp/serve/app-dev.js" desc="Title for a delete resource dialog">Delete a <ph name="RESOURCE_KIND_NAME" /></translation>
+	<translation id="1743501197722607271" key="MSG_DELETE_RESOURCE_DIALOG_CANCEL" source="/usr/local/google/home/bryk/src/github.com/dashboard/.tmp/serve/app-dev.js" desc="Label for cancel button">Cancel</translation>
+	<translation id="1375098876763337363" key="MSG_DELETE_RESOURCE_DIALOG_DELETE" source="/usr/local/google/home/bryk/src/github.com/dashboard/.tmp/serve/app-dev.js" desc="Label for delete button">Delete</translation>
+	<translation id="7770496538218207073" key="MSG_EDIT_RESOURCE_DIALOG_TITLE" source="/usr/local/google/home/bryk/src/github.com/dashboard/.tmp/serve/app-dev.js" desc="Title for a delete resource dialog">Edit a <ph name="RESOURCE_KIND_NAME" /></translation>
+	<translation id="5059373780898524627" key="MSG_EDIT_RESOURCE_DIALOG_CANCEL" source="/usr/local/google/home/bryk/src/github.com/dashboard/.tmp/serve/app-dev.js" desc="Label for cancel button">Cancel</translation>
+	<translation id="8463528551217463399" key="MSG_EDIT_RESOURCE_DIALOG_UPDATE" source="/usr/local/google/home/bryk/src/github.com/dashboard/.tmp/serve/app-dev.js" desc="Label for update button">Update</translation>
+	<translation id="6420130406957025720" key="MSG_YAML_EDIT_MENU_LABEL" source="/usr/local/google/home/bryk/src/github.com/dashboard/.tmp/serve/app-dev.js" desc="Label for YAML edit menu item.">View/edit JSON</translation>
 </translationbundle>

i18n/messages-ja.xtb

@@ -155,4 +155,11 @@
 	<translation id="3762856444030194375" key="MSG_PET_SET_INFO_STATUS_SECTION" source="/home/floreks/Projects/dashboard/.tmp/serve/app-dev.js" desc="Pet set info status section name.">Status</translation>
 	<translation id="1744330140020758003" key="MSG_PET_SET_INFO_PODS_ENTRY" source="/home/floreks/Projects/dashboard/.tmp/serve/app-dev.js" desc="Pet set info status section pods entry.">Pods</translation>
 	<translation id="6654869080140416303" key="MSG_PET_SET_INFO_PODS_STATUS_ENTRY" source="/home/floreks/Projects/dashboard/.tmp/serve/app-dev.js" desc="Pet set info status section pods status entry.">Pods status</translation>
+	<translation id="6480734540585386902" key="MSG_DELETE_RESOURCE_DIALOG_TITLE" source="/usr/local/google/home/bryk/src/github.com/dashboard/.tmp/serve/app-dev.js" desc="Title for a delete resource dialog">Delete a <ph name="RESOURCE_KIND_NAME" /></translation>
+	<translation id="1743501197722607271" key="MSG_DELETE_RESOURCE_DIALOG_CANCEL" source="/usr/local/google/home/bryk/src/github.com/dashboard/.tmp/serve/app-dev.js" desc="Label for cancel button">Cancel</translation>
+	<translation id="1375098876763337363" key="MSG_DELETE_RESOURCE_DIALOG_DELETE" source="/usr/local/google/home/bryk/src/github.com/dashboard/.tmp/serve/app-dev.js" desc="Label for delete button">Delete</translation>
+	<translation id="7770496538218207073" key="MSG_EDIT_RESOURCE_DIALOG_TITLE" source="/usr/local/google/home/bryk/src/github.com/dashboard/.tmp/serve/app-dev.js" desc="Title for a delete resource dialog">Edit a <ph name="RESOURCE_KIND_NAME" /></translation>
+	<translation id="5059373780898524627" key="MSG_EDIT_RESOURCE_DIALOG_CANCEL" source="/usr/local/google/home/bryk/src/github.com/dashboard/.tmp/serve/app-dev.js" desc="Label for cancel button">Cancel</translation>
+	<translation id="8463528551217463399" key="MSG_EDIT_RESOURCE_DIALOG_UPDATE" source="/usr/local/google/home/bryk/src/github.com/dashboard/.tmp/serve/app-dev.js" desc="Label for update button">Update</translation>
+	<translation id="6420130406957025720" key="MSG_YAML_EDIT_MENU_LABEL" source="/usr/local/google/home/bryk/src/github.com/dashboard/.tmp/serve/app-dev.js" desc="Label for YAML edit menu item.">View/edit JSON</translation>
 </translationbundle>

src/app/backend/handler/apihandler.go

@@ -40,6 +40,7 @@ import (
 	. "github.com/kubernetes/dashboard/validation"
 	client "k8s.io/kubernetes/pkg/client/unversioned"
 	"k8s.io/kubernetes/pkg/client/unversioned/clientcmd"
+	"k8s.io/kubernetes/pkg/runtime"
 )
 
 const (
@@ -295,7 +296,12 @@ func CreateHttpApiHandler(client *client.Client, heapsterClient HeapsterClient,
 	apiV1Ws.Route(
 		apiV1Ws.DELETE("/{kind}/namespace/{namespace}/name/{name}").
 			To(apiHandler.handleDeleteResource))
-
+	apiV1Ws.Route(
+		apiV1Ws.GET("/{kind}/namespace/{namespace}/name/{name}").
+			To(apiHandler.handleGetResource))
+	apiV1Ws.Route(
+		apiV1Ws.PUT("/{kind}/namespace/{namespace}/name/{name}").
+			To(apiHandler.handlePutResource))
 	return wsContainer
 }
 
@@ -617,6 +623,40 @@ func (apiHandler *ApiHandler) handleDeleteReplicationController(
 	response.WriteHeader(http.StatusOK)
 }
 
+func (apiHandler *ApiHandler) handleGetResource(
+	request *restful.Request, response *restful.Response) {
+	kind := request.PathParameter("kind")
+	namespace := request.PathParameter("namespace")
+	name := request.PathParameter("name")
+
+	result, err := apiHandler.verber.Get(kind, namespace, name)
+	if err != nil {
+		handleInternalError(response, err)
+		return
+	}
+
+	response.WriteHeaderAndEntity(http.StatusCreated, result)
+}
+
+func (apiHandler *ApiHandler) handlePutResource(
+	request *restful.Request, response *restful.Response) {
+	kind := request.PathParameter("kind")
+	namespace := request.PathParameter("namespace")
+	name := request.PathParameter("name")
+	putSpec := &runtime.Unknown{}
+	if err := request.ReadEntity(putSpec); err != nil {
+		handleInternalError(response, err)
+		return
+	}
+
+	if err := apiHandler.verber.Put(kind, namespace, name, putSpec); err != nil {
+		handleInternalError(response, err)
+		return
+	}
+
+	response.WriteHeader(http.StatusOK)
+}
+
 func (apiHandler *ApiHandler) handleDeleteResource(
 	request *restful.Request, response *restful.Response) {
 	kind := request.PathParameter("kind")

src/app/backend/resource/common/verber.go

@@ -18,6 +18,7 @@ import (
 	"fmt"
 
 	"k8s.io/kubernetes/pkg/client/restclient"
+	"k8s.io/kubernetes/pkg/runtime"
 )
 
 // ResourceVerber is a struct responsible for doing common verb operations on resources, like
@@ -29,9 +30,24 @@ type ResourceVerber struct {
 	batchClient      RESTClient
 }
 
+func (verber *ResourceVerber) getRESTClientByType(clientType ClientType) RESTClient {
+	switch clientType {
+	case ClientTypeExtensionClient:
+		return verber.extensionsClient
+	case ClientTypeAppsClient:
+		return verber.appsClient
+	case ClientTypeBatchClient:
+		return verber.batchClient
+	default:
+		return verber.client
+	}
+}
+
 // RESTClient is an interface for REST operations used in this file.
 type RESTClient interface {
 	Delete() *restclient.Request
+	Put() *restclient.Request
+	Get() *restclient.Request
 }
 
 // NewResourceVerber creates a new resource verber that uses the given client for performing
@@ -58,15 +74,42 @@ func (verber *ResourceVerber) Delete(kind string, namespace string, name string)
 		Error()
 }
 
-func (verber *ResourceVerber) getRESTClientByType(clientType ClientType) RESTClient {
-	switch clientType {
-	case ClientTypeExtensionClient:
-		return verber.extensionsClient
-	case ClientTypeAppsClient:
-		return verber.appsClient
-	case ClientTypeBatchClient:
-		return verber.batchClient
-	default:
-		return verber.client
+// Put puts new resource version of the given kind in the given namespace with the given name.
+func (verber *ResourceVerber) Put(kind string, namespace string, name string,
+	object runtime.Object) error {
+
+	resourceSpec, ok := kindToAPIMapping[kind]
+	if !ok {
+		return fmt.Errorf("Unknown resource kind: %s", kind)
+	}
+
+	client := verber.getRESTClientByType(resourceSpec.ClientType)
+
+	return client.Put().
+		Namespace(namespace).
+		Resource(resourceSpec.Resource).
+		Name(name).
+		Body(object).
+		Do().
+		Error()
+}
+
+// Get gets the resource of the given kind in the given namespace with the given name.
+func (verber *ResourceVerber) Get(kind string, namespace string, name string) (runtime.Object, error) {
+	resourceSpec, ok := kindToAPIMapping[kind]
+	if !ok {
+		return nil, fmt.Errorf("Unknown resource kind: %s", kind)
 	}
+
+	client := verber.getRESTClientByType(resourceSpec.ClientType)
+
+	result := &runtime.Unknown{}
+	err := client.Get().
+		Namespace(namespace).
+		Resource(resourceSpec.Resource).
+		Name(name).
+		Do().
+		Into(result)
+
+	return result, err
 }

src/app/frontend/common/components/resourcecard/resourcecard_module.js

@@ -17,6 +17,7 @@ import {resourceCardComponent} from './resourcecard_component';
 import {resourceCardListComponent} from './resourcecardlist_component';
 import {resourceCardMenuComponent} from './resourcecardmenu_component';
 import {resourceCardDeleteMenuItemComponent} from './resourcecarddeletemenuitem_component';
+import {resourceCardEditMenuItemComponent} from './resourcecardeditmenuitem_component';
 import {resourceCardColumnComponent} from './resourcecardcolumn_component';
 import {resourceCardColumnsComponent} from './resourcecardcolumns_component';
 import {resourceCardHeaderColumnComponent} from './resourcecardheadercolumn_component';
@@ -39,6 +40,7 @@ export default angular
     .component('kdResourceCardList', resourceCardListComponent)
     .component('kdResourceCardMenu', resourceCardMenuComponent)
     .component('kdResourceCardDeleteMenuItem', resourceCardDeleteMenuItemComponent)
+    .component('kdResourceCardEditMenuItem', resourceCardEditMenuItemComponent)
     .component('kdResourceCardColumn', resourceCardColumnComponent)
     .component('kdResourceCardColumns', resourceCardColumnsComponent)
     .component('kdResourceCardHeaderColumn', resourceCardHeaderColumnComponent)

src/app/frontend/common/components/resourcecard/resourcecardeditmenuitem.html

@@ -0,0 +1,21 @@
+<!--
+Copyright 2015 Google Inc. All Rights Reserved.
+
+Licensed 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.
+-->
+
+<md-menu-item>
+  <md-button ng-click="$ctrl.edit()">
+    {{::$ctrl.i18n.MSG_YAML_EDIT_MENU_LABEL}}
+  </md-button>
+</md-menu-item>