New annotation (gimlet.io/app) to explicitelly associate k8s services…

pkg/agent/kube.go

@@ -35,6 +35,7 @@ import (
 )
 
 const AnnotationGitRepository = "gimlet.io/git-repository"
+const AnnotationApp = "gimlet.io/app"
 const AnnotationGitSha = "gimlet.io/git-sha"
 const AnnotationGitBranch = "gimlet.io/git-branch"
 const AnnotationDocsLink = "v1alpha1.opensca.dev/documentation"
@@ -125,6 +126,7 @@ func (e *KubeEnv) Services(repo string) ([]*api.Stack, error) {
 
 		stacks = append(stacks, &api.Stack{
 			Repo:       service.ObjectMeta.GetAnnotations()[AnnotationGitRepository],
+			App:        service.ObjectMeta.GetAnnotations()[AnnotationApp],
 			Osca:       getOpenServiceCatalogAnnotations(service),
 			Service:    &api.Service{Name: service.Name, Namespace: service.Namespace},
 			Deployment: deployment,

pkg/dashboard/api/types.go

@@ -188,6 +188,7 @@ type AgentState struct {
 type Stack struct {
 	Repo       string      `json:"repo"`
 	Env        string      `json:"env"`
+	App        string      `json:"app"`
 	Osca       *Osca       `json:"osca"`
 	Service    *Service    `json:"service"`
 	Deployment *Deployment `json:"deployment,omitempty"`

web/src/components/env/env.jsx

@@ -74,32 +74,31 @@ function renderServices(
   let configsWeDeployed = [];
   // render services that are deployed on k8s
   services = filteredStacks.map((stack) => {
-    configsWeDeployed.push(stack.service.name);
-    const configExists = configsWeHave.includes(stack.service.name)
-    let config = undefined;
-    if (configExists) {
+    let config = envConfigs.find((config) => config.app === stack.app);
+    if (!config) {
       config = envConfigs.find((config) => config.app === stack.service.name)
     }
+    configsWeDeployed.push(config.app);
 
     let deployment = "";
     if (stack.deployment) {
       deployment = stack.deployment.namespace + "/" + stack.deployment.name
     }
 
+    const appOrServiceName = config ? config.app : stack.service.name
     return (
-      <div key={'sc-'+stack.service.name} className="w-full flex items-center justify-between space-x-6 p-4 card">
+      <div key={'sc-'+appOrServiceName} className="w-full flex items-center justify-between space-x-6 p-4 card">
         <ServiceDetail
-          key={'sc-'+stack.service.name}
+          key={'sc-'+appOrServiceName}
           stack={stack}
-          rolloutHistory={repoRolloutHistory?.[environment.name]?.[stack.service.name]}
+          rolloutHistory={repoRolloutHistory?.[environment.name]?.[appOrServiceName]}
           rollback={rollback}
           environment={environment}
           owner={owner}
           repoName={repoName}
-          fileName={fileName(fileInfos, stack.service.name)}
+          fileName={fileName(fileInfos, appOrServiceName)}
           navigateToConfigEdit={navigateToConfigEdit}
           linkToDeployment={linkToDeployment}
-          configExists={configExists}
           config={config}
           releaseHistorySinceDays={releaseHistorySinceDays}
           gimletClient={gimletClient}
@@ -117,27 +116,27 @@ function renderServices(
   }
 
   const configsWeHaventDeployed = configsWeHave.filter(config => !configsWeDeployed.includes(config) && config.includes(appFilter));
-
   services.push(
-    ...configsWeHaventDeployed.sort().map(config => {
+    ...configsWeHaventDeployed.sort().map(configName => {
+      const config = envConfigs.find((config) => config.app === configName)
       return (
-        <div key={config} className="w-full flex items-center justify-between space-x-6 p-4 pb-8 card">
+        <div key={configName} className="w-full flex items-center justify-between space-x-6 p-4 pb-8 card">
           <ServiceDetail
-            key={config}
+            key={configName}
             stack={{
               service: {
-                name: config
+                name: configName
               }
             }}
-            rolloutHistory={repoRolloutHistory?.[environment.name]?.[config]}
+            rolloutHistory={repoRolloutHistory?.[environment.name]?.[configName]}
             rollback={rollback}
             environment={environment}
             owner={owner}
             repoName={repoName}
-            fileName={fileName(fileInfos, config)}
+            fileName={fileName(fileInfos, configName)}
             navigateToConfigEdit={navigateToConfigEdit}
             linkToDeployment={linkToDeployment}
-            configExists={true}
+            config={config}
             releaseHistorySinceDays={releaseHistorySinceDays}
             gimletClient={gimletClient}
             store={store} 

web/src/components/serviceDetail/serviceDetail.jsx

@@ -21,13 +21,15 @@ function ServiceDetail(props) {
   const { store, gimletClient } = props;
   const { owner, repoName } = props;
   const { environment } = props;
-  const { stack, rolloutHistory, rollback, navigateToConfigEdit, linkToDeployment, configExists, config, fileName, releaseHistorySinceDays, deploymentFromParams, scmUrl, serviceAlerts } = props;
+  const { stack, rolloutHistory, rollback, navigateToConfigEdit, linkToDeployment, config, fileName, releaseHistorySinceDays, deploymentFromParams, scmUrl, serviceAlerts } = props;
   const ref = useRef(null);
   const posthog = usePostHog()
   const [pullRequests, setPullRequests] = useState()
 
   const progressToastId = useRef(null);
 
+  const configExists = config !== undefined
+
   useEffect(() => {
     if (deploymentFromParams === stack.service.name) {
       window.scrollTo({ behavior: 'smooth', top: ref.current.offsetTop })
@@ -36,23 +38,25 @@ function ServiceDetail(props) {
   }, [deploymentFromParams, stack.service.name]);
 
   useEffect(() => {
-    gimletClient.getRolloutHistoryPerApp(owner, repoName, environment.name, stack.service.name)
-      .then(data => {
-        store.dispatch({
-          type: ACTION_TYPE_ROLLOUT_HISTORY, payload: {
-            owner: owner,
-            repo: repoName,
-            env: environment.name,
-            app: stack.service.name,
-            releases: data,
-          }
-        });
-      }, () => {/* Generic error handler deals with it */ });
-
-    gimletClient.getConfigChangePullRequestsPerConfig(owner, repoName, environment.name, stack.service.name)
-      .then(data => {
-        setPullRequests(data)
-      })
+    if (config) {
+      gimletClient.getRolloutHistoryPerApp(owner, repoName, environment.name, config.app)
+        .then(data => {
+          store.dispatch({
+            type: ACTION_TYPE_ROLLOUT_HISTORY, payload: {
+              owner: owner,
+              repo: repoName,
+              env: environment.name,
+              app: config.app,
+              releases: data,
+            }
+          });
+        }, () => {/* Generic error handler deals with it */ });
+
+      gimletClient.getConfigChangePullRequestsPerConfig(owner, repoName, environment.name, config.app)
+        .then(data => {
+          setPullRequests(data)
+        })
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -194,7 +198,7 @@ function ServiceDetail(props) {
                         onClick={() => {
                           if (configExists) {
                             posthog?.capture('Env config edit pushed')
-                            navigateToConfigEdit(environment.name, stack.service.name)
+                            navigateToConfigEdit(environment.name, config.app)
                           }
                         }}
                       >
@@ -345,12 +349,13 @@ function ServiceDetail(props) {
             </div>
           </div>
           }
+          {config &&
           <div>
             <p className="serviceCardLabel">Deploy History</p>
             <div className="text-neutral-900 text-sm pt-2">
               <RolloutHistory
                 env={environment.name}
-                app={stack.service.name}
+                app={config.app}
                 rollback={rollback}
                 appRolloutHistory={rolloutHistory}
                 releaseHistorySinceDays={releaseHistorySinceDays}
@@ -359,6 +364,7 @@ function ServiceDetail(props) {
               />
             </div>
           </div>
+          }
         </div>
       </div>
     </div>