fix: add image search cache

kubesphere · Feb 5, 2020 · 7a47c0f · 7a47c0f
1 parent 70a944b
commit 7a47c0f
Showing 1 changed file with 17 additions and 20 deletions.
diff --git a/...nts/Forms/Workload/ContainerSettings/ContainerForm/ContainerSetting/ImageSearch/index.jsx b/...nts/Forms/Workload/ContainerSettings/ContainerForm/ContainerSetting/ImageSearch/index.jsx
@@ -55,7 +55,9 @@ export default class ImageSearch extends React.Component {
 
   get selectedImage() {
     const { formTemplate } = this.props
-    return get(formTemplate, 'metadata.annotations["kubesphere.io/image"]')
+    const image = get(formTemplate, 'image', '')
+
+    return get(globals.cache, `[${image}]`)
   }
 
   get tag() {
@@ -66,17 +68,18 @@ export default class ImageSearch extends React.Component {
 
   componentDidMount() {
     const { formTemplate } = this.props
-    const selectedImage = get(
-      formTemplate,
-      'metadata.annotations["kubesphere.io/imageName"]'
-    )
+
     const image = get(formTemplate, 'image', '')
-    if (!selectedImage && image) {
+    if (!this.selectedImage && image) {
       const secret = get(formTemplate, 'pullSecret')
       this.getImageDetail({ image, secret })
     }
   }
 
+  componentWillUnMount() {
+    this.isUnMounted = true
+  }
+
   handleEnter = params => {
     if (!globals.config.enableImageSearch) {
       return
@@ -94,37 +97,31 @@ export default class ImageSearch extends React.Component {
   }
 
   getImageDetail = async ({ image, secret, ...rest }) => {
-    const { namespace, formTemplate } = this.props
+    const { namespace } = this.props
     if (!image) {
       return
     }
     this.image = image
 
     this.setState({ isLoading: true })
-    let selectedImage = await this.store.getImageDetail({
+    const result = await this.store.getImageDetail({
       namespace,
       image,
       secret,
     })
-    selectedImage = { ...selectedImage, ...rest, image }
-    set(
-      formTemplate,
-      'metadata.annotations["kubesphere.io/image"]',
-      selectedImage
-    )
+    const selectedImage = { ...result, ...rest, image }
+    set(globals, `cache[${image}]`, selectedImage)
+    if (this.isUnMounted) {
+      return
+    }
     if (!isEmpty(selectedImage.exposedPorts)) {
       this.setState({ showPortsTips: true })
     }
     this.setState({ isLoading: false })
   }
 
   handleFillPorts = () => {
-    const selectedImage = get(
-      this.props.formTemplate,
-      'metadata.annotations["kubesphere.io/image"]',
-      selectedImage
-    )
-    const ports = selectedImage.exposedPorts.map(port => {
+    const ports = this.selectedImage.exposedPorts.map(port => {
       const protocol = port.split('/')[1]
       const containerPort = Number(port.split('/')[0])
       return {