Add Dependency Graph for Terraform objects

api/terraform/terraform.swagger.json

@@ -319,6 +319,17 @@
         }
       }
     },
+    "v1NamespacedObjectReference": {
+      "type": "object",
+      "properties": {
+        "name": {
+          "type": "string"
+        },
+        "namespace": {
+          "type": "string"
+        }
+      }
+    },
     "v1Pagination": {
       "type": "object",
       "properties": {
@@ -452,6 +463,12 @@
             "type": "string"
           }
         },
+        "dependsOn": {
+          "type": "array",
+          "items": {
+            "$ref": "#/definitions/v1NamespacedObjectReference"
+          }
+        },
         "suspended": {
           "type": "boolean"
         }

api/terraform/types.proto

@@ -23,24 +23,31 @@ message ResourceRef {
     string identifier = 3;
 }
 
+message NamespacedObjectReference {
+    string name = 1;
+    string namespace = 2;
+}
+
 message TerraformObject {
     string name        = 1;
     string namespace   = 2;
     string clusterName = 3;
 
     SourceRef sourceRef            = 4;
+
     string    appliedRevision      = 5;
     string    path                 = 6;
     Interval  interval             = 7;
     string    lastUpdatedAt        = 8;
     bool      driftDetectionResult = 9;
+
+    repeated ResourceRef               inventory   = 10;
+    repeated Condition                 conditions  = 11;
+    map<string, string>                labels      = 12;
+    map<string, string>                annotations = 13;
+    repeated NamespacedObjectReference dependsOn   = 14;
 
-    repeated ResourceRef inventory   = 10;
-    repeated Condition   conditions  = 11;
-    map<string, string>  labels      = 12;
-    map<string, string>  annotations = 13;
-
-    bool suspended = 14;
+    bool suspended = 15;
 }
 
 message Pagination {

pkg/terraform/internal/convert/convert.go

@@ -36,6 +36,17 @@ func ToPBTerraformObject(clusterName string, tf *tfctrl.Terraform) pb.TerraformO
 		}
 	}
 
+	dependsOn := []*pb.NamespacedObjectReference{}
+
+	if tf.Spec.DependsOn != nil {
+		for _, r := range tf.Spec.DependsOn {
+			dependsOn = append(dependsOn, &pb.NamespacedObjectReference{
+				Name:      r.Name,
+				Namespace: r.Namespace,
+			})
+		}
+	}
+
 	return pb.TerraformObject{
 		Name:        tf.Name,
 		Namespace:   tf.Namespace,
@@ -56,6 +67,7 @@ func ToPBTerraformObject(clusterName string, tf *tfctrl.Terraform) pb.TerraformO
 		Conditions:           conditions,
 		Labels:               tf.Labels,
 		Annotations:          tf.Annotations,
+		DependsOn:            dependsOn,
 		Suspended:            tf.Spec.Suspend,
 	}
 }

ui-cra/src/api/terraform/types.pb.ts

@@ -22,6 +22,11 @@ export type ResourceRef = {
   identifier?: string
 }
 
+export type NamespacedObjectReference = {
+  name?: string
+  namespace?: string
+}
+
 export type TerraformObject = {
   name?: string
   namespace?: string
@@ -36,6 +41,7 @@ export type TerraformObject = {
   conditions?: Condition[]
   labels?: {[key: string]: string}
   annotations?: {[key: string]: string}
+  dependsOn?: NamespacedObjectReference[]
   suspended?: boolean
 }
 

ui-cra/src/components/GitOpsRun/NoRunsMessage.tsx

@@ -1,28 +1,5 @@
-import { Link, theme } from '@weaveworks/weave-gitops';
-import styled from 'styled-components';
-
-const Message = styled.div`
-  background: rgba(255, 255, 255, 0.85);
-  box-shadow: 5px 10px 50px 3px rgb(0 0 0 / 10%);
-  border-radius: 10px;
-  padding: ${theme.spacing.large} ${theme.spacing.xxl};
-  max-width: 560px;
-  margin: auto;
-  display: flex;
-  flex-direction: column;
-`;
-const Title = styled.h4`
-  font-size: ${theme.fontSizes.large};
-  font-weight: 600;
-  color: ${theme.colors.neutral30};
-  margin-bottom: ${theme.spacing.small};
-`;
-
-const Body = styled.p`
-  font-size: ${theme.fontSizes.medium};
-  color: ${theme.colors.neutral30};
-  font-weight: 400;
-`;
+import { Link } from '@weaveworks/weave-gitops';
+import { Body, Message, Title } from '../Shared';
 
 const NoRunsMessage = () => {
   return (

ui-cra/src/components/Shared.tsx

@@ -58,3 +58,27 @@ export const TableWrapper = styled.div`
     overflow: unset;
   }
 `;
+
+//In NoRunsMessage and TerraformDependenciesView
+export const Message = styled.div`
+  background: rgba(255, 255, 255, 0.85);
+  box-shadow: 5px 10px 50px 3px rgb(0 0 0 / 10%);
+  border-radius: 10px;
+  padding: ${({ theme }) => `${theme.spacing.large} ${theme.spacing.xxl}`};
+  max-width: 560px;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+`;
+export const Title = styled.h4`
+  font-size: ${({ theme }) => theme.fontSizes.large};
+  font-weight: 600;
+  color: ${({ theme }) => theme.colors.neutral30};
+  margin-bottom: ${({ theme }) => theme.spacing.small};
+`;
+
+export const Body = styled.p`
+  font-size: ${({ theme }) => theme.fontSizes.medium};
+  color: ${({ theme }) => theme.colors.neutral30};
+  font-weight: 400;
+`;

ui-cra/src/components/Terraform/TerraformDependencyView.tsx

@@ -0,0 +1,94 @@
+import { DagGraph } from '@weaveworks/weave-gitops';
+import { FluxObjectNode } from '@weaveworks/weave-gitops/ui/lib/objects';
+import React from 'react';
+import styled from 'styled-components';
+import { TerraformObject } from '../../api/terraform/types.pb';
+import { useListTerraformObjects } from '../../contexts/Terraform';
+import { ContentWrapper } from '../Layout/ContentWrapper';
+import { Body, Message, Title } from '../Shared';
+import {
+  getGraphNodes,
+  makeObjectId,
+  TerraformNodesMap,
+  TerraformObjectNode,
+} from './utils';
+
+type Props = {
+  className?: string;
+  object: TerraformObject;
+};
+
+function TerraformDependencyView({ className, object }: Props) {
+  const { isLoading, data, error } = useListTerraformObjects();
+  const [graphNodes, setGraphNodes] = React.useState<TerraformObjectNode[]>([]);
+
+  React.useEffect(() => {
+    if (isLoading) {
+      return;
+    }
+
+    if (error) {
+      setGraphNodes([]);
+      return;
+    }
+
+    const allNodes: TerraformNodesMap = {};
+    data?.objects?.forEach(obj => {
+      const id = makeObjectId(obj.namespace, obj.name);
+      allNodes[id] = {
+        ...obj,
+        type: 'Terraform',
+        id: id,
+        isCurrentNode: false,
+        parentIds:
+          obj?.dependsOn?.map(dependency => {
+            const namespace = dependency.namespace || obj.namespace;
+
+            return namespace + '/' + dependency.name;
+          }) || [],
+      };
+    });
+
+    const nodes = getGraphNodes(allNodes, object);
+
+    nodes.sort((a, b) => a.id.localeCompare(b.id));
+
+    if (nodes.length === 0) {
+      setGraphNodes([]);
+    } else {
+      setGraphNodes(nodes);
+    }
+  }, [isLoading, data, error]);
+
+  const shouldShowGraph = graphNodes && graphNodes.length;
+
+  return (
+    <ContentWrapper loading={isLoading}>
+      {shouldShowGraph ? (
+        <DagGraph
+          className={className}
+          nodes={graphNodes as FluxObjectNode[]}
+        />
+      ) : (
+        <Message>
+          <Title>No Dependencies</Title>
+          <Body>
+            There are no dependencies set up for your Terraform object at this
+            time. You can set them up using the "dependsOn" field.
+          </Body>
+          <Title>What are dependencies for?</Title>
+          <Body>
+            Dependencies allow you to relate different Terraform objects, as
+            well as specifying an order in which your resources should be
+            started. For example, you can wait for a database to report as
+            'Ready' before attempting to deploy other services.
+          </Body>
+        </Message>
+      )}
+    </ContentWrapper>
+  );
+}
+
+export default styled(TerraformDependencyView).attrs({
+  className: TerraformDependencyView.name,
+})``;

ui-cra/src/components/Terraform/TerraformObjectDetail.tsx

@@ -2,9 +2,11 @@ import { Box } from '@material-ui/core';
 import {
   Button,
   Flex,
+  formatURL,
   InfoList,
   Interval,
   KubeStatusIndicator,
+  LinkResolverProvider,
   Metadata,
   RouterTab,
   SubRouterTabs,
@@ -27,6 +29,7 @@ import { TableWrapper } from '../Shared';
 import YamlView from '../YamlView';
 import useNotifications from './../../contexts/Notifications';
 import { EditButton } from './../Templates/Edit/EditButton';
+import TerraformDependencyView from './TerraformDependencyView';
 import TerraformInventoryTable from './TerraformInventoryTable';
 
 type Props = {
@@ -118,6 +121,16 @@ function TerraformObjectDetail({ className, ...params }: Props) {
       .finally(() => setSuspending(false));
   };
 
+  const resolver = (type: string, params: any) => {
+    return (
+      formatURL(Routes.TerraformDetail, {
+        name: params.name,
+        namespace: params.namespace,
+        clusterName: params.clusterName,
+      }) || ''
+    );
+  };
+
   return (
     <PageTemplate
       documentTitle="Terraform"
@@ -207,6 +220,11 @@ function TerraformObjectDetail({ className, ...params }: Props) {
                 }}
               />
             </RouterTab>
+            <RouterTab name="Dependencies" path={`${path}/dependencies`}>
+              <LinkResolverProvider resolver={resolver}>
+                <TerraformDependencyView object={object || {}} />
+              </LinkResolverProvider>
+            </RouterTab>
             <RouterTab name="Yaml" path={`${path}/yaml`}>
               <>
                 <YamlView