Dapp assumes services define only one grpc service

[ferrouswheel]

service-spec-provider returns an array of grpc services, but the dapp just takes the first one:

https://github.com/singnet/snet-dapp/blob/master/src/components/JobDetails.js#L103

I noticed this with my face-detect service on kovan, which publishes all the face related proto files in one directory. It is only passed, via react props, the call details for face-align, because it is the first item in the array returned by service-spec-provider.

As it stands, this makes the "Service Name" drop down in the DefaultService UI component meaningless.

I still believe we should only allow one grpc service to be specified per SNet service, but until that's reflected across all our tools we should make the dapp pass all the service details.

In the mean time I will make seperate directories of proto/grpc definitions and republish my services.

I will be republishing my services, but I will leave snet/face-identity service the same so you can debug

https://protojs.singularitynet.io/kovan/snet/face-identity
Edit: Sorry, I have republished face-identity so you can no longer test with it.

Here is also an example response from service-spec-provider:

[{"nested":{"FaceAlignmentHeader":{"fields":{"source_bboxes":{"rule":"repeated","type":"BoundingBox","id":1}}},"FaceAlignmentRequest":{"oneofs":{"header_or_chunk":{"oneof":["header","image_chunk"]}},"fields":{"header":{"type":"FaceAlignmentHeader","id":1},"image_chunk":{"type":"ImageRGB","id":2}}},"FaceAlignmentResponseHeader":{"fields":{}},"FaceAlignmentResponse":{"oneofs":{"header_or_chunk":{"oneof":["header","image_chunk"]}},"fields":{"header":{"type":"FaceAlignmentResponseHeader","id":1},"image_chunk":{"type":"ImageRGB","id":2}}},"FaceAlignment":{"methods":{"AlignFace":{"requestType":"FaceAlignmentRequest","requestStream":true,"responseType":"FaceAlignmentResponse","responseStream":true}}},"ImageRGB":{"fields":{"content":{"type":"bytes","id":1}}},"BoundingBox":{"fields":{"x":{"type":"int32","id":1},"y":{"type":"int32","id":2},"w":{"type":"int32","id":3},"h":{"type":"int32","id":4}}},"Point2D":{"fields":{"x":{"type":"int32","id":1},"y":{"type":"int32","id":2}}},"FaceDetections":{"fields":{"face_bbox":{"rule":"repeated","type":"BoundingBox","id":1}}},"FaceLandmarks":{"fields":{"landmark_model":{"type":"string","id":1},"point":{"rule":"repeated","type":"Point2D","id":2}}},"FaceLandmarkDescriptions":{"fields":{"landmark_model":{"type":"string","id":1},"landmark_description":{"rule":"repeated","type":"string","id":2},"landmark_avg":{"rule":"repeated","type":"Point2D","id":3}}},"FaceLandmarkModels":{"fields":{"model":{"rule":"repeated","type":"FaceLandmarkDescriptions","id":1}}}}},{"nested":{"FaceDetect":{"methods":{"FindFace":{"requestType":"ImageRGB","requestStream":true,"responseType":"FaceDetections"}}},"ImageRGB":{"fields":{"content":{"type":"bytes","id":1}}},"BoundingBox":{"fields":{"x":{"type":"int32","id":1},"y":{"type":"int32","id":2},"w":{"type":"int32","id":3},"h":{"type":"int32","id":4}}},"Point2D":{"fields":{"x":{"type":"int32","id":1},"y":{"type":"int32","id":2}}},"FaceDetections":{"fields":{"face_bbox":{"rule":"repeated","type":"BoundingBox","id":1}}},"FaceLandmarks":{"fields":{"landmark_model":{"type":"string","id":1},"point":{"rule":"repeated","type":"Point2D","id":2}}},"FaceLandmarkDescriptions":{"fields":{"landmark_model":{"type":"string","id":1},"landmark_description":{"rule":"repeated","type":"string","id":2},"landmark_avg":{"rule":"repeated","type":"Point2D","id":3}}},"FaceLandmarkModels":{"fields":{"model":{"rule":"repeated","type":"FaceLandmarkDescriptions","id":1}}}}},{"nested":{"FaceLandmarkHeader":{"fields":{"landmark_model":{"type":"string","id":1},"faces":{"type":"FaceDetections","id":2}}},"FaceLandmarkRequest":{"oneofs":{"header_or_chunk":{"oneof":["header","image_chunk"]}},"fields":{"header":{"type":"FaceLandmarkHeader","id":1},"image_chunk":{"type":"ImageRGB","id":2}}},"FaceLandmarkResponse":{"fields":{"landmarked_faces":{"rule":"repeated","type":"FaceLandmarks","id":1}}},"Empty":{"fields":{}},"FaceLandmark":{"methods":{"GetLandmarks":{"requestType":"FaceLandmarkRequest","requestStream":true,"responseType":"FaceLandmarkResponse"},"GetLandmarkModels":{"requestType":"Empty","responseType":"FaceLandmarkModels"}}},"ImageRGB":{"fields":{"content":{"type":"bytes","id":1}}},"BoundingBox":{"fields":{"x":{"type":"int32","id":1},"y":{"type":"int32","id":2},"w":{"type":"int32","id":3},"h":{"type":"int32","id":4}}},"Point2D":{"fields":{"x":{"type":"int32","id":1},"y":{"type":"int32","id":2}}},"FaceDetections":{"fields":{"face_bbox":{"rule":"repeated","type":"BoundingBox","id":1}}},"FaceLandmarks":{"fields":{"landmark_model":{"type":"string","id":1},"point":{"rule":"repeated","type":"Point2D","id":2}}},"FaceLandmarkDescriptions":{"fields":{"landmark_model":{"type":"string","id":1},"landmark_description":{"rule":"repeated","type":"string","id":2},"landmark_avg":{"rule":"repeated","type":"Point2D","id":3}}},"FaceLandmarkModels":{"fields":{"model":{"rule":"repeated","type":"FaceLandmarkDescriptions","id":1}}}}},{"nested":{"FaceRecognitionHeader":{"fields":{"faces":{"rule":"repeated","type":"BoundingBox","id":1}}},"FaceRecognitionRequest":{"oneofs":{"header_or_chunk":{"oneof":["header","image_chunk"]}},"fields":{"header":{"type":"FaceRecognitionHeader","id":1},"image_chunk":{"type":"ImageRGB","id":2}}},"FaceRecognitionResponse":{"fields":{"identities":{"rule":"repeated","type":"FaceIdentity","id":1}}},"FaceIdentity":{"fields":{"identity":{"rule":"repeated","type":"float","id":1}}},"FaceRecognition":{"methods":{"RecogniseFace":{"requestType":"FaceRecognitionRequest","requestStream":true,"responseType":"FaceRecognitionResponse"},"RecogniseFacePrealigned":{"requestType":"FaceRecognitionRequest","requestStream":true,"responseType":"FaceRecognitionResponse"}}},"ImageRGB":{"fields":{"content":{"type":"bytes","id":1}}},"BoundingBox":{"fields":{"x":{"type":"int32","id":1},"y":{"type":"int32","id":2},"w":{"type":"int32","id":3},"h":{"type":"int32","id":4}}},"Point2D":{"fields":{"x":{"type":"int32","id":1},"y":{"type":"int32","id":2}}},"FaceDetections":{"fields":{"face_bbox":{"rule":"repeated","type":"BoundingBox","id":1}}},"FaceLandmarks":{"fields":{"landmark_model":{"type":"string","id":1},"point":{"rule":"repeated","type":"Point2D","id":2}}},"FaceLandmarkDescriptions":{"fields":{"landmark_model":{"type":"string","id":1},"landmark_description":{"rule":"repeated","type":"string","id":2},"landmark_avg":{"rule":"repeated","type":"Point2D","id":3}}},"FaceLandmarkModels":{"fields":{"model":{"rule":"repeated","type":"FaceLandmarkDescriptions","id":1}}}}}]

[ferrouswheel]

Since the logic for parsing the service spec is duplicated in every single UI component, this would also be a great opportunity to refactor it into one place! #79