fix: fix the tag version of image after the tag is selected (#4228)

* fix: fix the image selected (#1805) * fix: fix the image selected Signed-off-by: harrisonliu5 <harrisonliu@kubesphere.io> * fix: fix the image not fetch when the secret is harbor Signed-off-by: harrisonliu5 <harrisonliu@kubesphere.io> * fix: add the fetch abort to get dockhub Signed-off-by: harrisonliu5 <harrisonliu@kubesphere.io> --------- Signed-off-by: harrisonliu5 <harrisonliu@kubesphere.io> * fix: fix the harbor not search in edit (#1814) Signed-off-by: harrisonliu5 <harrisonliu@kubesphere.io> * fix: fix the code 400 when not chart in harbor (#1891) Signed-off-by: harrisonliu5 <harrisonliu@kubesphere.io> --------- Signed-off-by: harrisonliu5 <harrisonliu@kubesphere.io>
kubesphere · Oct 26, 2023 · 8f171db · 8f171db
1 parent d2e0f1b
commit 8f171db
Show file tree

Hide file tree

Showing 8 changed files with 109 additions and 70 deletions.
diff --git a/server/controllers/api.js b/server/controllers/api.js
@@ -139,13 +139,9 @@ const handleHarborProxy = async ctx => {
     let isErrorRes = false
 
     if (requestUrl === 'search') {
-      const { repository, project, chart } = res
+      const { repository, project } = res
       // Check whether the response is the requirements
-      isErrorRes = !(
-        Array.isArray(repository) &&
-        Array.isArray(project) &&
-        Array.isArray(chart)
-      )
+      isErrorRes = !(Array.isArray(repository) && Array.isArray(project))
     } else {
       isErrorRes = !Array.isArray(res)
     }

diff --git a/server/libs/request.js b/server/libs/request.js
@@ -111,7 +111,7 @@ const send_harbor_request = ({ path, params }) => {
         const contentType = response.headers.get('content-type')
 
         if (contentType && contentType.includes('json')) {
-          return response.json().then(res => {
+          response.json().then(res => {
             if (res.errors) {
               const errorMsg = res.errors[0]
                 ? res.errors[0].message
@@ -123,7 +123,6 @@ const send_harbor_request = ({ path, params }) => {
                 resolve({ repository: [], project: [], chart: [] })
               }
             }
-
             if (
               response.ok &&
               response.status >= 200 &&
@@ -138,13 +137,13 @@ const send_harbor_request = ({ path, params }) => {
               statusText: response.statusText,
             })
           })
+        } else {
+          reject({
+            code: 400,
+            statusText: response.statusText,
+            message: 'bad request',
+          })
         }
-
-        reject({
-          code: 400,
-          statusText: response.statusText,
-          message: 'bad request',
-        })
       })
       .catch(err => {
         reject(err)

diff --git a/.../Workload/ContainerSettings/ContainerForm/ContainerSetting/ImageInput/DropdownContent.jsx b/.../Workload/ContainerSettings/ContainerForm/ContainerSetting/ImageInput/DropdownContent.jsx
@@ -17,6 +17,8 @@
  */
 
 import React from 'react'
+import PropTypes from 'prop-types'
+
 import { get, set, isEmpty } from 'lodash'
 import classnames from 'classnames'
 import { Icon, InputSearch, Loading } from '@kube-design/components'
@@ -26,13 +28,16 @@ import Input from './Input'
 import styles from './index.scss'
 
 export default class DropdownContent extends React.Component {
+  static contextTypes = {
+    setImageDetail: PropTypes.func,
+  }
+
   constructor(props) {
     super(props)
     const { imageRegistries } = this.props
-
     const harborData =
       this.hubType === 'harbor'
-        ? imageRegistries.find(item => item === this.secretValue)
+        ? imageRegistries.find(item => item.value === this.secretValue)
         : {}
 
     this.state = {
@@ -42,8 +47,10 @@ export default class DropdownContent extends React.Component {
       visible: false,
       isLoading: false,
     }
+
     this.store = props.store
     this.dropContentRef = React.createRef()
+    this.isUnMounted = false
   }
 
   static defaultProps = {
@@ -74,6 +81,7 @@ export default class DropdownContent extends React.Component {
     if (this.secretValue && this.registryUrl.indexOf('docker.io') < 0) {
       return 'harbor'
     }
+
     return 'others'
   }
 
@@ -129,7 +137,7 @@ export default class DropdownContent extends React.Component {
     }
 
     if (this.hubType === 'harbor') {
-      this.fetchHarborList('', this.defaultHarbor)
+      this.fetchHarborList('', this.state.harborData)
     }
   }
 
@@ -195,6 +203,7 @@ export default class DropdownContent extends React.Component {
     }
     image = image.replace(/\s+/g, '')
     this.props.onChange(image)
+    this.context.setImageDetail && this.context.setImageDetail({ image })
   }
 
   handleKeyUp = e => {
@@ -254,6 +263,7 @@ export default class DropdownContent extends React.Component {
 
   fetchHarborList = async (keyword, harborData) => {
     const url = get(harborData, 'url')
+
     if (!url || isEmpty(harborData)) return
 
     this.setState({ isLoading: true })

diff --git a/...ents/Forms/Workload/ContainerSettings/ContainerForm/ContainerSetting/ImageInput/index.jsx b/...ents/Forms/Workload/ContainerSettings/ContainerForm/ContainerSetting/ImageInput/index.jsx
@@ -19,7 +19,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { toJS } from 'mobx'
-import { get, debounce, isObject, throttle } from 'lodash'
+import { get, debounce, isObject, throttle, set } from 'lodash'
 import moment from 'moment-mini'
 import classnames from 'classnames'
 
@@ -39,9 +39,9 @@ export default class ImageSearch extends Component {
 
     this.state = {
       isLoading: false,
+      selectedLoading: false,
       selectedImage: undefined,
       selectedImageTag: undefined,
-      selectedLoading: false,
     }
   }
 
@@ -56,12 +56,9 @@ export default class ImageSearch extends Component {
   }
 
   get secret() {
-    const { imageRegistries, formTemplate, type } = this.props
+    const { imageRegistries, formTemplate } = this.props
     const defaultsecrect = imageRegistries.find(item => item.isDefault)
 
-    if (type === 'Edit') {
-      get(formTemplate, 'pullSecret', '')
-    }
     return get(formTemplate, 'pullSecret', defaultsecrect?.value || '')
   }
 
@@ -119,7 +116,7 @@ export default class ImageSearch extends Component {
       this.getImageDetail(this.ImageDetail)
     },
     800,
-    { leading: false, trailing: true }
+    { leading: true, trailing: false }
   )
 
   getImageDetailNoCert = () => {
@@ -128,14 +125,15 @@ export default class ImageSearch extends Component {
 
   getImage = async ({ image, insecure, tag }) => {
     const pamram = this.getImageParam()
-
+    this.setState({ selectedLoading: true })
     const imageDetail = await this.store.getImageDetail({
       image: `${image}:${tag || 'lastest'}`,
       secret: this.secret,
       insecure,
       ...pamram,
     })
 
+    this.setState({ selectedLoading: false })
     return imageDetail
   }
 
@@ -173,7 +171,6 @@ export default class ImageSearch extends Component {
       const { imageName, tag } = this.getTag(image)
 
       let imageDetail
-      let tagList = []
 
       if (tag && tag !== 'latest') {
         imageDetail = await this.store.getImageDetail({
@@ -190,42 +187,45 @@ export default class ImageSearch extends Component {
           page: Number(params.page) || 1,
           isLoading: false,
         })
+
+        this.setState(
+          {
+            isLoading: false,
+            selectedImageTag: tag,
+            selectedImage: {
+              ...imageDetail,
+              image: `${imageName}:${tag}`,
+            },
+          },
+          () => {
+            set(
+              this.props.formTemplate,
+              'image',
+              this.state.selectedImage.image
+            )
+            this.context.setImageDetail &&
+              this.context.setImageDetail(this.state.selectedImage)
+          }
+        )
       } else {
-        const resTagList = await this.getImageList({
+        await this.getImageList({
           imageName,
           page: 1,
           ...params,
         })
 
-        imageDetail = await this.store.getImageDetail({
-          image: `${imageName}${
-            resTagList && Array.isArray(resTagList) ? `:${resTagList[0]}` : ''
-          }`,
-          insecure,
-          secret,
-          ...params,
+        this.setState({
+          selectedImage: undefined,
+          selectedImageTag: '',
+          isLoading: false,
         })
       }
-
-      tagList = toJS(this.store.tagList.data)
-
-      this.setState(
-        {
-          isLoading: false,
-          selectedImageTag: tagList[0],
-          selectedImage: {
-            ...imageDetail,
-            image: `${imageName}:${tagList[0]}`,
-          },
-        },
-        () => {
-          this.context.setImageDetail &&
-            this.context.setImageDetail(this.state.selectedImage)
-        }
-      )
     },
     800,
-    { leading: false, trailing: true }
+    {
+      leading: true,
+      trailing: false,
+    }
   )
 
   renderWaringText = () => {
@@ -234,20 +234,24 @@ export default class ImageSearch extends Component {
 
   onSelectImageTag = throttle(
     async tag => {
-      this.setState({ selectedImageTag: tag, selectedLoading: true })
+      this.setState({ selectedImageTag: tag })
+      const currentImage = this.image
+      const { imageName } = this.getTag(currentImage)
+      const newImage = `${imageName}:${tag}`
 
       const imageDetail = await this.getImage({
-        image: this.image,
+        image: imageName,
         tag,
       })
 
+      set(this.props.formTemplate, 'image', newImage)
+
       this.setState(
         {
           selectedImage: {
             ...imageDetail,
-            image: `${this.image}:${tag}`,
+            image: newImage,
           },
-          selectedLoading: false,
         },
         () => {
           this.context.setImageDetail &&
@@ -274,6 +278,8 @@ export default class ImageSearch extends Component {
 
     const { selectedImage, selectedImageTag, selectedLoading } = this.state
 
+    const tagList = toJS(this.store.tagList)
+
     if (isObject(selectedImage)) {
       const { message, status } = selectedImage
 
@@ -367,14 +373,25 @@ export default class ImageSearch extends Component {
             <ImageTagRadioList
               onSelectImageTag={this.onSelectImageTag}
               selectedImageTag={selectedImageTag}
-              tagList={toJS(this.store.tagList)}
+              tagList={tagList}
               getImageList={this.getImageList}
             />
           </div>
         </>
       )
     }
 
+    if (tagList.data.length > 0) {
+      return (
+        <ImageTagRadioList
+          onSelectImageTag={this.onSelectImageTag}
+          selectedImageTag={selectedImageTag}
+          tagList={toJS(this.store.tagList)}
+          getImageList={this.getImageList}
+        />
+      )
+    }
+
     return (
       <div className={classnames(styles.selectedContent, styles.emptyContent)}>
         <div>

diff --git a/...nts/Forms/Workload/ContainerSettings/ContainerForm/ContainerSetting/ImageInput/index.scss b/...nts/Forms/Workload/ContainerSettings/ContainerForm/ContainerSetting/ImageInput/index.scss
@@ -158,9 +158,12 @@
       }
       .imageInfo {
         flex-grow: 1;
+
         p:first-child {
           height: 20px;
+          width: 220px;
           @include TypographyTitleH6;
+          @include ellipsis;
         }
         p:last-child {
           height: 20px;

diff --git a/src/components/Forms/Workload/ContainerSettings/ContainerForm/index.jsx b/src/components/Forms/Workload/ContainerSettings/ContainerForm/index.jsx
@@ -177,8 +177,6 @@ export default class ContaineForm extends React.Component {
           })
         }
 
-        data.image = this.state.imageDetail.image
-
         onSave(data)
         callback && callback()
       })

diff --git a/src/pages/fedprojects/components/ContainerImage/index.jsx b/src/pages/fedprojects/components/ContainerImage/index.jsx
@@ -62,7 +62,7 @@ export default class ContainerImages extends Component {
 
   handleSubmit = data => {
     const { index, containerType, onEdit } = this.props
-    data.image = this.state.imageDetail.image
+
     onEdit({ index, containerType, data: omit(data, 'type') })
   }