From 7a47c0f15c66fa2d22866626221b4dfe8fb7f34c Mon Sep 17 00:00:00 2001
From: minghaoye <minghaoye@yunify.com>
Date: Tue, 4 Feb 2020 21:53:24 +0800
Subject: [PATCH] fix: add image search cache

---
 .../ContainerSetting/ImageSearch/index.jsx    | 37 +++++++++----------
 1 file changed, 17 insertions(+), 20 deletions(-)

diff --git a/src/components/Forms/Workload/ContainerSettings/ContainerForm/ContainerSetting/ImageSearch/index.jsx b/src/components/Forms/Workload/ContainerSettings/ContainerForm/ContainerSetting/ImageSearch/index.jsx
index 0d36216868c..ce74ad5bb9b 100644
--- a/src/components/Forms/Workload/ContainerSettings/ContainerForm/ContainerSetting/ImageSearch/index.jsx
+++ b/src/components/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,24 +97,23 @@ 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 })
     }
@@ -119,12 +121,7 @@ export default class ImageSearch extends React.Component {
   }
 
   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 {