Add example docker commands popover to imageStreamTag page

openshift · May 21, 2019 · f34f61b · f34f61b
1 parent c21d600
commit f34f61b
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 7 deletions.
diff --git a/frontend/public/components/image-stream-tag.tsx b/frontend/public/components/image-stream-tag.tsx
@@ -5,8 +5,10 @@ import { K8sResourceKind, K8sResourceKindReference } from '../module/k8s';
 import { DetailsPage } from './factory';
 import { Kebab, SectionHeading, navFactory, ResourceSummary } from './utils';
 import { humanizeBinaryBytes } from './utils/units';
+import { ExampleDockerCommandPopover } from './image-stream';
 
 const ImageStreamTagsReference: K8sResourceKindReference = 'ImageStreamTag';
+const ImageStreamsReference: K8sResourceKindReference = 'ImageStream';
 
 const { common } = Kebab.factory;
 const menuActions = [...common];
@@ -28,7 +30,7 @@ const splitEnv = (nameValue: string) => {
   };
 };
 
-export const ImageStreamTagsDetails: React.SFC<ImageStreamTagsDetailsProps> = ({obj: imageStreamTag}) => {
+export const ImageStreamTagsDetails: React.SFC<ImageStreamTagsDetailsProps> = ({obj: imageStreamTag, imageStream}) => {
   const config = _.get(imageStreamTag, 'image.dockerImageMetadata.Config', {});
   const labels = config.Labels || {};
   // Convert to an array of objects with name and value properties, then sort the array for display.
@@ -40,6 +42,7 @@ export const ImageStreamTagsDetails: React.SFC<ImageStreamTagsDetailsProps> = ({
   const size = _.get(imageStreamTag, 'image.dockerImageMetadata.Size');
   const humanizedSize = _.isFinite(size) && humanizeBinaryBytes(size);
   const architecture = _.get(imageStreamTag, 'image.dockerImageMetadata.Architecture');
+  const tagName = _.get(imageStreamTag, 'tag.name');
 
   return <div className="co-m-pane__body">
     <div className="co-m-pane__body-group">
@@ -54,6 +57,7 @@ export const ImageStreamTagsDetails: React.SFC<ImageStreamTagsDetailsProps> = ({
             {humanizedSize && <dt>Size</dt>}
             {humanizedSize && <dd>{humanizedSize}</dd>}
           </ResourceSummary>
+          <ExampleDockerCommandPopover imageStream={imageStream} tag={tagName} />
         </div>
         <div className="col-md-6 col-sm-12">
           <SectionHeading text="Configuration" />
@@ -122,9 +126,13 @@ export const ImageStreamTagsDetails: React.SFC<ImageStreamTagsDetailsProps> = ({
   </div>;
 };
 
+const parseName = (nameAndTag: string): string => {
+  return nameAndTag.split(':')[0];
+};
+
 export const getImageStreamNameForTag = (imageStreamTag: K8sResourceKind): string => {
   const name = _.get(imageStreamTag, 'metadata.name', '');
-  return name.split(':')[0];
+  return parseName(name);
 };
 
 const pages = [navFactory.details(ImageStreamTagsDetails), navFactory.editYaml()];
@@ -143,13 +151,19 @@ export const ImageStreamTagsDetailsPage: React.SFC<ImageStreamTagsDetailsPagePro
     }}
     kind={ImageStreamTagsReference}
     menuActions={menuActions}
+    resources={[
+      {kind: ImageStreamsReference, name: parseName(props.name), namespace: props.namespace, isList: false, prop: 'imageStream'},
+    ]}
     pages={pages} />;
 ImageStreamTagsDetailsPage.displayName = 'ImageStreamTagsDetailsPage';
 
 export type ImageStreamTagsDetailsProps = {
-  obj: any,
+  obj: K8sResourceKind;
+  imageStream: K8sResourceKind;
 };
 
 export type ImageStreamTagsDetailsPageProps = {
-  match: any,
+  match: any;
+  namespace: string;
+  name: string;
 };
diff --git a/frontend/public/components/image-stream.tsx b/frontend/public/components/image-stream.tsx
@@ -108,14 +108,14 @@ const ImageStreamTagsRow: React.SFC<ImageStreamTagsRowProps> = ({imageStream, sp
   </div>;
 };
 
-const ExampleDockerCommandPopover: React.FC<ImageStreamManipulationHelpProps> = ({imageStream}) => {
+export const ExampleDockerCommandPopover: React.FC<ImageStreamManipulationHelpProps> = ({imageStream, tag}) => {
   const publicImageRepository = _.get(imageStream, 'status.publicDockerImageRepository');
   if (!publicImageRepository) {
     return null;
   }
   const loginCommand = 'oc registry login';
-  const pushCommand = `docker push ${publicImageRepository}:<tag>`;
-  const pullCommand = `docker pull ${publicImageRepository}:<tag>`;
+  const pushCommand = `docker push ${publicImageRepository}:${tag || '<tag>'}`;
+  const pullCommand = `docker pull ${publicImageRepository}:${tag || '<tag>'}`;
 
   return <Popover
     headerContent={<React.Fragment>Image registry commands</React.Fragment>}
@@ -243,6 +243,7 @@ type ImageStreamTagsRowProps = {
 
 export type ImageStreamManipulationHelpProps = {
   imageStream: K8sResourceKind;
+  tag?: string
 };
 
 export type ImageStreamsRowProps = {