Better progress message detail during docker operations, include imag…

…e name

What I Did
------------

Improve progress messages during docker operations in `render` step.

How I Did it
------------

- Add `image` field to `images.Progress`
- Send image down to client
- Client reads `image` and other status fields
- Client shows layer name under progress bar
- Add debug logging during docker pull

How to verify it
------------

Run a ship yaml with a
```yaml

assets:
  v1:
  - docker:
      image: postgres:9.6
      dest: ./postgres.tar
lifecycle:
  v1:
    - render {}
```

See fancy messages on render step.

Description for the Changelog
------------

Improve progress messages during docker operations in `render` step.

:boat:

pkg/images/progress.go

@@ -2,9 +2,11 @@ package images
 
 import (
 	"encoding/json"
+	"fmt"
 	"io"
 
 	"github.com/docker/docker/pkg/jsonmessage"
+	"github.com/go-kit/kit/log"
 	"github.com/pkg/errors"
 )
 
@@ -14,10 +16,11 @@ import (
 type Progress struct {
 	ID             string      `json:"id"` // this will be layer ID
 	Status         string      `json:"status"`
+	Image          string      `json:"image"`
 	ProgressDetail interface{} `json:"progressDetail"`
 }
 
-func copyDockerProgress(reader io.ReadCloser, ch chan interface{}) error {
+func copyDockerProgress(debug log.Logger, image string, reader io.ReadCloser, ch chan interface{}) error {
 	dec := json.NewDecoder(reader)
 	for {
 		var jm jsonmessage.JSONMessage
@@ -29,9 +32,12 @@ func copyDockerProgress(reader io.ReadCloser, ch chan interface{}) error {
 			return jm.Error
 		}
 
+		debug.Log("event", "docker.JSONMessage.receive", "JSONMessage", fmt.Sprintf("%+v", jm))
+
 		ch <- Progress{
 			ID:             jm.ID,
 			Status:         jm.Status,
+			Image:          image,
 			ProgressDetail: jm.Progress,
 		}
 	}

pkg/images/save.go

@@ -97,7 +97,7 @@ func (s *CLISaver) saveImage(ctx context.Context, saveOpts SaveOpts, progressCh
 	if err != nil {
 		return errors.Wrapf(err, "pull image %s", saveOpts.PullURL)
 	}
-	copyDockerProgress(progressReader, progressCh)
+	copyDockerProgress(debug, saveOpts.PullURL, progressReader, progressCh)
 	if saveOpts.Filename != "" {
 		return s.createFile(ctx, progressCh, saveOpts)
 	} else if saveOpts.DestinationURL != nil {
@@ -180,7 +180,7 @@ func (s *CLISaver) pushImage(ctx context.Context, progressCh chan interface{}, s
 	if err != nil {
 		return errors.Wrapf(err, "push image %s", destinationParams.DestinationImageName)
 	}
-	return copyDockerProgress(progressReader, progressCh)
+	return copyDockerProgress(debug, destinationParams.DestinationImageName, progressReader, progressCh)
 }
 
 func buildDestinationParams(destinationURL *url.URL) (DestinationParams, error) {

pkg/lifecycle/kustomize/patch.go

@@ -8,7 +8,6 @@ import (
 	"strings"
 
 	"github.com/ghodss/yaml"
-
 	"github.com/go-kit/kit/log"
 	"github.com/go-kit/kit/log/level"
 	"github.com/pkg/errors"

pkg/lifecycle/kustomize/patch_test.go

@@ -5,10 +5,9 @@ import (
 	"testing"
 
 	"github.com/ghodss/yaml"
-	"github.com/replicatedhq/ship/pkg/constants"
-
 	"github.com/go-kit/kit/log"
 	"github.com/replicatedhq/ship/pkg/api"
+	"github.com/replicatedhq/ship/pkg/constants"
 	"github.com/spf13/afero"
 	"github.com/stretchr/testify/require"
 	kustomizepatch "sigs.k8s.io/kustomize/pkg/patch"

pkg/lifecycle/kustomize/pre_kustomize.go

@@ -6,12 +6,11 @@ import (
 	"path/filepath"
 	"strings"
 
-	"github.com/replicatedhq/ship/pkg/constants"
-
 	"github.com/go-kit/kit/log"
 	"github.com/go-kit/kit/log/level"
 	"github.com/pkg/errors"
 	"github.com/replicatedhq/ship/pkg/api"
+	"github.com/replicatedhq/ship/pkg/constants"
 	"github.com/replicatedhq/ship/pkg/util"
 	yaml "gopkg.in/yaml.v2"
 )

pkg/lifecycle/render/helm/dependency.go

@@ -6,15 +6,13 @@ import (
 	"path/filepath"
 	"strings"
 
+	"github.com/pkg/errors"
+	"github.com/replicatedhq/ship/pkg/api"
 	"github.com/replicatedhq/ship/pkg/constants"
-
 	"github.com/replicatedhq/ship/pkg/specs/apptype"
 	"github.com/replicatedhq/ship/pkg/specs/githubclient"
 	"github.com/replicatedhq/ship/pkg/specs/gogetter"
 	"github.com/replicatedhq/ship/pkg/util"
-
-	"github.com/pkg/errors"
-	"github.com/replicatedhq/ship/pkg/api"
 	"k8s.io/helm/pkg/chartutil"
 )
 

web/init/src/components/shared/StepBuildingAssets.jsx

@@ -31,9 +31,27 @@ export class StepBuildingAssets extends React.Component {
   }
 
   render() {
+    /* status json looks something like
+
+{
+  "currentStep": {
+    "render": {}
+  },
+  "phase": "render",
+  "progress": {
+    "source": "docker",
+    "type": "json",
+    "level": "info",
+    "detail": "{\"id\":\"5523988621d2\",\"status\":\"Downloading\",\"image\":\"registry.replicated.com/myapp/some-image:latest\",\"progressDetail\":{\"current\":31129230,\"total\":31378422}}"
+  }
+}
+
+     */
     const { status = {} } = this.props;
     const isJSON = status.type === "json";
     const parsed = isJSON ? JSON.parse(status.detail) : {};
+    console.log(parsed);
+
     const message = parsed.message ? parsed.message : "";
     const isError = parsed && parsed.status === "error";
     const isSuccess = parsed && parsed.status === "success";
@@ -48,7 +66,7 @@ export class StepBuildingAssets extends React.Component {
           <div className="icon progress-detail-success"></div> :
           isError ?
             <div className="icon progress-detail-error"></div> :
-            <Loader size="60" />
+          <Loader size="60" />
         }
         {status.source === "render" ?
           <div>
@@ -62,12 +80,12 @@ export class StepBuildingAssets extends React.Component {
               <div>
                 <p className="u-fontSizer--larger u-color--tundora u-fontWeight--bold u-marginTop--20 u-lineHeight--more u-textAlign--center">
                   {message.length > 500 ?
-                    <span>There was an unexpected error! Please check <code className="language-bash">.ship/debug.log</code> for more details</span> : message} {progressDetail && <span>{percent > 0 ? `${percent}%` : ""}</span>}
+                    <span>There was an unexpected error! Please check <code className="language-bash">.ship/debug.log</code> for more details</span> : message} {progressDetail && <span> {parsed.status || "Saving"} {parsed.image} </span>}
                 </p>
-                {!progressDetail ? null :
+                {!progressDetail || percent <= 0 ? null :
                   <div className="u-marginTop--20">
                     <div className="progressBar-wrapper">
-                      <Line percent={percent} strokeWidth="1" strokeColor="#337AB7" />
+                      <Line percent={percent} strokeWidth="1" strokeColor="#337AB7" />{parsed.id}
                     </div>
                   </div>
                 }