@spinnaker/core 0.14.1 → 0.16.0

package/src/managed/graphql/graphql-sdk.ts

@@ -55,6 +55,8 @@ export interface MdArtifact {
   reference: Scalars['String'];
   versions?: Maybe<Array<MdArtifactVersionInEnvironment>>;
   pinnedVersion?: Maybe<MdPinnedVersion>;
+  latestApprovedVersion?: Maybe<MdArtifactVersionInEnvironment>;
+  resources?: Maybe<Array<MdResource>>;
 }
 
 export interface MdArtifactVersionsArgs {
@@ -87,7 +89,6 @@ export interface MdArtifactVersionInEnvironment {
   buildNumber?: Maybe<Scalars['String']>;
   createdAt?: Maybe<Scalars['InstantTime']>;
   deployedAt?: Maybe<Scalars['InstantTime']>;
-  resources?: Maybe<Array<MdResource>>;
   gitMetadata?: Maybe<MdGitMetadata>;
   packageDiff?: Maybe<MdPackageDiff>;
   environment?: Maybe<Scalars['String']>;
@@ -330,6 +331,7 @@ export interface MdResource {
 
 export interface MdResourceActuationState {
   __typename?: 'MdResourceActuationState';
+  resourceId: Scalars['String'];
   status: MdResourceActuationStatus;
   reason?: Maybe<Scalars['String']>;
   event?: Maybe<Scalars['String']>;
@@ -342,9 +344,18 @@ export interface MdResourceTask {
   __typename?: 'MdResourceTask';
   id: Scalars['String'];
   name: Scalars['String'];
+  running: Scalars['Boolean'];
   summary?: Maybe<MdExecutionSummary>;
 }
 
+export interface MdRestartConstraintEvaluationPayload {
+  application: Scalars['String'];
+  environment: Scalars['String'];
+  type: Scalars['String'];
+  reference: Scalars['String'];
+  version: Scalars['String'];
+}
+
 export interface MdRetryArtifactActionPayload {
   application: Scalars['String'];
   environment: Scalars['String'];
@@ -409,6 +420,7 @@ export interface MdVersionVeto {
 export interface Mutation {
   __typename?: 'Mutation';
   updateConstraintStatus?: Maybe<Scalars['Boolean']>;
+  restartConstraintEvaluation?: Maybe<Scalars['Boolean']>;
   toggleManagement?: Maybe<Scalars['Boolean']>;
   pinArtifactVersion?: Maybe<Scalars['Boolean']>;
   markArtifactVersionAsBad?: Maybe<Scalars['Boolean']>;
@@ -425,6 +437,10 @@ export interface MutationUpdateConstraintStatusArgs {
   payload: MdConstraintStatusPayload;
 }
 
+export interface MutationRestartConstraintEvaluationArgs {
+  payload: MdRestartConstraintEvaluationPayload;
+}
+
 export interface MutationToggleManagementArgs {
   application: Scalars['ID'];
   isPaused: Scalars['Boolean'];
@@ -538,6 +554,14 @@ export type BaseEnvironmentFieldsFragment = { __typename?: 'MdEnvironment' } & P
     >;
   };
 
+export type BaesResourceFieldsFragment = { __typename?: 'MdResource' } & Pick<
+  MdResource,
+  'id' | 'kind' | 'displayName' | 'rawDefinition'
+> & {
+    moniker?: Maybe<{ __typename?: 'MdMoniker' } & Pick<MdMoniker, 'app' | 'stack' | 'detail'>>;
+    location?: Maybe<{ __typename?: 'MdLocation' } & Pick<MdLocation, 'account' | 'regions'>>;
+  };
+
 export type FetchApplicationQueryVariables = Exact<{
   appName: Scalars['String'];
   statuses?: Maybe<Array<MdArtifactStatusInEnvironment> | MdArtifactStatusInEnvironment>;
@@ -545,7 +569,7 @@ export type FetchApplicationQueryVariables = Exact<{
 
 export type FetchApplicationQuery = { __typename?: 'Query' } & {
   application?: Maybe<
-    { __typename?: 'MdApplication' } & Pick<MdApplication, 'id' | 'name' | 'account'> & {
+    { __typename?: 'MdApplication' } & Pick<MdApplication, 'id' | 'name'> & {
         config?: Maybe<{ __typename?: 'MdConfig' } & Pick<MdConfig, 'id' | 'previewEnvironmentsConfigured'>>;
         environments: Array<
           { __typename?: 'MdEnvironment' } & Pick<MdEnvironment, 'isDeleting'> & {
@@ -559,20 +583,11 @@ export type FetchApplicationQuery = { __typename?: 'Query' } & {
                           versions?: Maybe<
                             Array<{ __typename?: 'MdArtifactVersionInEnvironment' } & DetailedVersionFieldsFragment>
                           >;
+                          resources?: Maybe<Array<{ __typename?: 'MdResource' } & BaesResourceFieldsFragment>>;
                         } & ArtifactPinnedVersionFieldsFragment
                     >
                   >;
-                  resources?: Maybe<
-                    Array<
-                      { __typename?: 'MdResource' } & Pick<
-                        MdResource,
-                        'id' | 'kind' | 'displayName' | 'rawDefinition'
-                      > & {
-                          moniker?: Maybe<{ __typename?: 'MdMoniker' } & Pick<MdMoniker, 'app' | 'stack' | 'detail'>>;
-                          location?: Maybe<{ __typename?: 'MdLocation' } & Pick<MdLocation, 'account' | 'regions'>>;
-                        }
-                    >
-                  >;
+                  resources?: Maybe<Array<{ __typename?: 'MdResource' } & BaesResourceFieldsFragment>>;
                 };
             } & BaseEnvironmentFieldsFragment
         >;
@@ -580,6 +595,45 @@ export type FetchApplicationQuery = { __typename?: 'Query' } & {
   >;
 };
 
+export type FetchCurrentVersionQueryVariables = Exact<{
+  appName: Scalars['String'];
+}>;
+
+export type FetchCurrentVersionQuery = { __typename?: 'Query' } & {
+  application?: Maybe<
+    { __typename?: 'MdApplication' } & Pick<MdApplication, 'id' | 'name'> & {
+        environments: Array<
+          { __typename?: 'MdEnvironment' } & Pick<MdEnvironment, 'id' | 'name'> & {
+              state: { __typename?: 'MdEnvironmentState' } & {
+                artifacts?: Maybe<
+                  Array<
+                    { __typename?: 'MdArtifact' } & Pick<MdArtifact, 'id' | 'name' | 'reference' | 'environment'> & {
+                        versions?: Maybe<
+                          Array<
+                            { __typename?: 'MdArtifactVersionInEnvironment' } & Pick<
+                              MdArtifactVersionInEnvironment,
+                              'id' | 'version' | 'buildNumber' | 'createdAt'
+                            > & {
+                                gitMetadata?: Maybe<
+                                  { __typename?: 'MdGitMetadata' } & Pick<MdGitMetadata, 'commit'> & {
+                                      commitInfo?: Maybe<
+                                        { __typename?: 'MdCommitInfo' } & Pick<MdCommitInfo, 'sha' | 'message'>
+                                      >;
+                                    }
+                                >;
+                              }
+                          >
+                        >;
+                      }
+                  >
+                >;
+              };
+            }
+        >;
+      }
+  >;
+};
+
 export type FetchVersionsHistoryQueryVariables = Exact<{
   appName: Scalars['String'];
   limit?: Maybe<Scalars['Int']>;
@@ -587,7 +641,7 @@ export type FetchVersionsHistoryQueryVariables = Exact<{
 
 export type FetchVersionsHistoryQuery = { __typename?: 'Query' } & {
   application?: Maybe<
-    { __typename?: 'MdApplication' } & Pick<MdApplication, 'id' | 'name' | 'account'> & {
+    { __typename?: 'MdApplication' } & Pick<MdApplication, 'id' | 'name'> & {
         environments: Array<
           { __typename?: 'MdEnvironment' } & {
             state: { __typename?: 'MdEnvironmentState' } & Pick<MdEnvironmentState, 'id'> & {
@@ -836,6 +890,15 @@ export type ToggleResourceManagementMutationVariables = Exact<{
 
 export type ToggleResourceManagementMutation = { __typename?: 'Mutation' } & Pick<Mutation, 'toggleResourceManagement'>;
 
+export type RestartConstraintEvaluationMutationVariables = Exact<{
+  payload: MdRestartConstraintEvaluationPayload;
+}>;
+
+export type RestartConstraintEvaluationMutation = { __typename?: 'Mutation' } & Pick<
+  Mutation,
+  'restartConstraintEvaluation'
+>;
+
 export const ActionDetailsFragmentDoc = gql`
   fragment actionDetails on MdAction {
     id
@@ -933,12 +996,28 @@ export const BaseEnvironmentFieldsFragmentDoc = gql`
     basedOn
   }
 `;
+export const BaesResourceFieldsFragmentDoc = gql`
+  fragment baesResourceFields on MdResource {
+    id
+    kind
+    displayName
+    moniker {
+      app
+      stack
+      detail
+    }
+    location {
+      account
+      regions
+    }
+    rawDefinition
+  }
+`;
 export const FetchApplicationDocument = gql`
   query fetchApplication($appName: String!, $statuses: [MdArtifactStatusInEnvironment!]) {
     application(appName: $appName) {
       id
       name
-      account
       config {
         id
         previewEnvironmentsConfigured
@@ -958,21 +1037,12 @@ export const FetchApplicationDocument = gql`
               ...detailedVersionFields
             }
             ...artifactPinnedVersionFields
+            resources {
+              ...baesResourceFields
+            }
           }
           resources {
-            id
-            kind
-            displayName
-            moniker {
-              app
-              stack
-              detail
-            }
-            location {
-              account
-              regions
-            }
-            rawDefinition
+            ...baesResourceFields
           }
         }
       }
@@ -981,6 +1051,7 @@ export const FetchApplicationDocument = gql`
   ${BaseEnvironmentFieldsFragmentDoc}
   ${DetailedVersionFieldsFragmentDoc}
   ${ArtifactPinnedVersionFieldsFragmentDoc}
+  ${BaesResourceFieldsFragmentDoc}
 `;
 
 /**
@@ -1015,12 +1086,85 @@ export function useFetchApplicationLazyQuery(
 export type FetchApplicationQueryHookResult = ReturnType<typeof useFetchApplicationQuery>;
 export type FetchApplicationLazyQueryHookResult = ReturnType<typeof useFetchApplicationLazyQuery>;
 export type FetchApplicationQueryResult = Apollo.QueryResult<FetchApplicationQuery, FetchApplicationQueryVariables>;
+export const FetchCurrentVersionDocument = gql`
+  query fetchCurrentVersion($appName: String!) {
+    application(appName: $appName) {
+      id
+      name
+      environments {
+        id
+        name
+        state {
+          artifacts {
+            id
+            name
+            reference
+            environment
+            versions(statuses: [CURRENT]) {
+              id
+              version
+              buildNumber
+              createdAt
+              gitMetadata {
+                commit
+                commitInfo {
+                  sha
+                  message
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+/**
+ * __useFetchCurrentVersionQuery__
+ *
+ * To run a query within a React component, call `useFetchCurrentVersionQuery` and pass it any options that fit your needs.
+ * When your component renders, `useFetchCurrentVersionQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useFetchCurrentVersionQuery({
+ *   variables: {
+ *      appName: // value for 'appName'
+ *   },
+ * });
+ */
+export function useFetchCurrentVersionQuery(
+  baseOptions: Apollo.QueryHookOptions<FetchCurrentVersionQuery, FetchCurrentVersionQueryVariables>,
+) {
+  const options = { ...defaultOptions, ...baseOptions };
+  return Apollo.useQuery<FetchCurrentVersionQuery, FetchCurrentVersionQueryVariables>(
+    FetchCurrentVersionDocument,
+    options,
+  );
+}
+export function useFetchCurrentVersionLazyQuery(
+  baseOptions?: Apollo.LazyQueryHookOptions<FetchCurrentVersionQuery, FetchCurrentVersionQueryVariables>,
+) {
+  const options = { ...defaultOptions, ...baseOptions };
+  return Apollo.useLazyQuery<FetchCurrentVersionQuery, FetchCurrentVersionQueryVariables>(
+    FetchCurrentVersionDocument,
+    options,
+  );
+}
+export type FetchCurrentVersionQueryHookResult = ReturnType<typeof useFetchCurrentVersionQuery>;
+export type FetchCurrentVersionLazyQueryHookResult = ReturnType<typeof useFetchCurrentVersionLazyQuery>;
+export type FetchCurrentVersionQueryResult = Apollo.QueryResult<
+  FetchCurrentVersionQuery,
+  FetchCurrentVersionQueryVariables
+>;
 export const FetchVersionsHistoryDocument = gql`
   query fetchVersionsHistory($appName: String!, $limit: Int) {
     application(appName: $appName) {
       id
       name
-      account
       environments {
         ...baseEnvironmentFields
         state {
@@ -1942,3 +2086,48 @@ export type ToggleResourceManagementMutationOptions = Apollo.BaseMutationOptions
   ToggleResourceManagementMutation,
   ToggleResourceManagementMutationVariables
 >;
+export const RestartConstraintEvaluationDocument = gql`
+  mutation RestartConstraintEvaluation($payload: MdRestartConstraintEvaluationPayload!) {
+    restartConstraintEvaluation(payload: $payload)
+  }
+`;
+export type RestartConstraintEvaluationMutationFn = Apollo.MutationFunction<
+  RestartConstraintEvaluationMutation,
+  RestartConstraintEvaluationMutationVariables
+>;
+
+/**
+ * __useRestartConstraintEvaluationMutation__
+ *
+ * To run a mutation, you first call `useRestartConstraintEvaluationMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useRestartConstraintEvaluationMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [restartConstraintEvaluationMutation, { data, loading, error }] = useRestartConstraintEvaluationMutation({
+ *   variables: {
+ *      payload: // value for 'payload'
+ *   },
+ * });
+ */
+export function useRestartConstraintEvaluationMutation(
+  baseOptions?: Apollo.MutationHookOptions<
+    RestartConstraintEvaluationMutation,
+    RestartConstraintEvaluationMutationVariables
+  >,
+) {
+  const options = { ...defaultOptions, ...baseOptions };
+  return Apollo.useMutation<RestartConstraintEvaluationMutation, RestartConstraintEvaluationMutationVariables>(
+    RestartConstraintEvaluationDocument,
+    options,
+  );
+}
+export type RestartConstraintEvaluationMutationHookResult = ReturnType<typeof useRestartConstraintEvaluationMutation>;
+export type RestartConstraintEvaluationMutationResult = Apollo.MutationResult<RestartConstraintEvaluationMutation>;
+export type RestartConstraintEvaluationMutationOptions = Apollo.BaseMutationOptions<
+  RestartConstraintEvaluationMutation,
+  RestartConstraintEvaluationMutationVariables
+>;

package/src/managed/graphql/schema.graphql

@@ -77,6 +77,8 @@ type MdArtifact {
   reference: String!
   versions(statuses: [MdArtifactStatusInEnvironment!], versions: [String!], limit: Int): [MdArtifactVersionInEnvironment!]
   pinnedVersion: MdPinnedVersion
+  latestApprovedVersion: MdArtifactVersionInEnvironment
+  resources: [MdResource!]
 }
 
 type MdArtifactVersionInEnvironment {
@@ -85,7 +87,6 @@ type MdArtifactVersionInEnvironment {
   buildNumber: String
   createdAt: InstantTime
   deployedAt: InstantTime
-  resources: [MdResource!]
   gitMetadata: MdGitMetadata
   packageDiff: MdPackageDiff
   environment: String
@@ -189,6 +190,7 @@ enum MdResourceActuationStatus {
 }
 
 type MdResourceActuationState {
+  resourceId: String!
   status: MdResourceActuationStatus!
   reason: String
   event: String
@@ -198,6 +200,7 @@ type MdResourceActuationState {
 type MdResourceTask {
   id: String!
   name: String!
+  running: Boolean!
   summary: MdExecutionSummary
 }
 
@@ -312,6 +315,7 @@ type MdAction {
 
 type Mutation @extends {
   updateConstraintStatus(payload: MdConstraintStatusPayload!): Boolean
+  restartConstraintEvaluation(payload: MdRestartConstraintEvaluationPayload!): Boolean
   toggleManagement(application: ID!, isPaused: Boolean!, comment: String): Boolean
   pinArtifactVersion(payload: MdArtifactVersionActionPayload!): Boolean
   markArtifactVersionAsBad(payload: MdArtifactVersionActionPayload!): Boolean
@@ -324,6 +328,15 @@ type Mutation @extends {
   importDeliveryConfig(application: String!): Boolean
 }
 
+input MdRestartConstraintEvaluationPayload {
+  application: String!
+  environment: String!
+  type: String!
+  reference: String!
+  version: String!
+}
+
+
 input MdToggleResourceManagementPayload {
   id: ID!
   isPaused: Boolean!

package/src/managed/overview/EnvironmentOverview.tsx

@@ -3,9 +3,8 @@ import React from 'react';
 import { Resource } from './Resource';
 import { Artifact } from './artifact/Artifact';
 import { BaseEnvironment } from '../environmentBaseElements/BaseEnvironment';
-import { useFetchResourceStatusQuery } from '../graphql/graphql-sdk';
 import type { ICollapsibleSectionProps } from '../../presentation';
-import { CollapsibleSection, useApplicationContextSafe } from '../../presentation';
+import { CollapsibleSection } from '../../presentation';
 import type { QueryEnvironment } from './types';
 
 const sectionProps: Partial<ICollapsibleSectionProps> = {
@@ -19,11 +18,8 @@ interface IEnvironmentProps {
 }
 
 export const EnvironmentOverview = ({ environment }: IEnvironmentProps) => {
-  const app = useApplicationContextSafe();
-  const { data } = useFetchResourceStatusQuery({ variables: { appName: app.name } });
-  const resources = data?.application?.environments.find((env) => env.name === environment.name)?.state.resources;
-  const hasResourcesWithIssues = resources?.some((resource) => resource.state?.status !== 'UP_TO_DATE');
   const state = environment.state;
+
   return (
     <BaseEnvironment
       name={environment.name}
@@ -32,20 +28,21 @@ export const EnvironmentOverview = ({ environment }: IEnvironmentProps) => {
       isPreview={environment.isPreview}
       isDeleting={environment.isDeleting}
     >
-      <CollapsibleSection heading="Artifacts" {...sectionProps} defaultExpanded enableCaching={false}>
+      <CollapsibleSection
+        heading="Code deployments"
+        {...sectionProps}
+        defaultExpanded
+        cacheKey={`${environment.name}-artifacts`}
+      >
         {state.artifacts?.length ? (
-          state.artifacts.map((artifact) => <Artifact key={artifact.reference} artifact={artifact} />)
+          state.artifacts.map((artifact) => (
+            <Artifact key={artifact.reference} artifact={artifact} isPreview={environment.isPreview} />
+          ))
         ) : (
           <NoItemsMessage>No artifacts found</NoItemsMessage>
         )}
       </CollapsibleSection>
-      <CollapsibleSection
-        heading="Resources"
-        key={`resources-section-${Boolean(data)}`} // This is used remount the section for defaultExpanded to work
-        {...sectionProps}
-        enableCaching={false}
-        defaultExpanded={hasResourcesWithIssues}
-      >
+      <CollapsibleSection heading="Infrastructure" {...sectionProps} enableCaching={false}>
         {state.resources?.length ? (
           state.resources.map((resource) => (
             <Resource key={resource.id} resource={resource} environment={environment.name} />

package/src/managed/overview/EnvironmentsOverview.less

@@ -11,21 +11,22 @@
       align-items: center;
       cursor: pointer;
       padding: var(--l-spacing) var(--base-horizontal-padding);
-      color: var(--color-black);
+      text-transform: uppercase;
+      color: var(--color-primary);
       margin: 0;
-      font-weight: 600;
-      font-size: 18px;
+      font-weight: 700;
+      font-size: 16px;
+      letter-spacing: 0.3px;
       line-height: 1;
       border-bottom: 1px solid var(--color-cirrus);
     }
 
     .environment-section-body {
-      padding-bottom: var(--xl-spacing);
+      padding-bottom: var(--l-spacing);
     }
 
     &:not(:last-of-type) {
       .environment-section-body {
-        padding-bottom: var(--xl-spacing);
         border-bottom: 1px solid var(--color-cirrus);
       }
     }

package/src/managed/overview/PreviewEnvironments.tsx

@@ -28,9 +28,6 @@ export const PreviewEnvironments = ({ orderedEnvironments, isConfigured }: IPrev
       {isConfigured && !hasActivePreviewEnvironments && (
         <div className="self-left">
           No PRs matching your branch filter were found.
-          <br />
-          Your preview environments will automatically appear here once you create a PR from a branch matching your
-          config definition.{' '}
           {docsLink && (
             <a target="_blank" onClick={() => logClick({ action: 'Learn More' })} href={docsLink}>
               Learn More

package/src/managed/overview/Resource.less

@@ -1,7 +1,7 @@
 .Resource {
   .resource-metadata {
     margin-top: var(--xs-spacing);
-    color: var(--color-titanium);
+    color: var(--color-nobel);
   }
 
   .resource-status {

package/src/managed/overview/Resource.tsx

@@ -1,7 +1,9 @@
+import classnames from 'classnames';
 import React from 'react';
 
 import { ResourceTask } from './ResourceTask';
 import { ConfirmationModalService } from '../../confirmationModal/confirmationModal.service';
+import type { IEnvironmentItemProps } from '../environmentBaseElements/EnvironmentItem';
 import { EnvironmentItem } from '../environmentBaseElements/EnvironmentItem';
 import type { MdResourceActuationState } from '../graphql/graphql-sdk';
 import {
@@ -14,7 +16,6 @@ import { showManagedResourceHistoryModal } from '../resourceHistory/ManagedResou
 import { showResourceDefinitionModal } from '../resources/ResourceDefinitionModal';
 import { ResourceTitle } from '../resources/ResourceTitle';
 import { ToggleResourceManagement } from '../resources/ToggleResourceManagement';
-import type { IResourceLinkProps } from '../resources/resourceRegistry';
 import { resourceManager } from '../resources/resourceRegistry';
 import type { QueryResource } from './types';
 import { getIsDebugMode } from '../utils/debugMode';
@@ -116,68 +117,82 @@ const Status = ({ appName, environmentName, resourceId, regions, account }: ISta
   );
 };
 
-export const Resource = ({ resource, environment }: { resource: QueryResource; environment: string }) => {
-  const icon = resourceManager.getIcon(resource.kind);
-  const app = useApplicationContextSafe();
+interface IBaseResourceProps {
+  resource: QueryResource;
+  environment: string;
+}
+
+const ResourceMetadata = ({ resource }: IBaseResourceProps) => {
   const logEvent = useLogEvent('Resource');
   const isDebug = getIsDebugMode();
 
   const account = resource.location?.account;
-
-  const resourceLinkProps: IResourceLinkProps = {
-    kind: resource.kind,
-    displayName: resource.displayName,
-    account,
-    detail: resource.moniker?.detail,
-    stack: resource.moniker?.stack,
-  };
-
   const regions = resource.location?.regions || [];
 
   return (
-    <EnvironmentItem
-      iconName={icon}
-      iconTooltip={resource.kind}
-      className="Resource"
-      title={<ResourceTitle props={resourceLinkProps} />}
-    >
-      <div className="resource-metadata delimited-elements">
-        <span>
-          {regions.map((region, index) => (
-            <span key={region}>
-              {region}
-              {index < regions.length - 1 && ', '}
-            </span>
-          ))}
-        </span>
-        {account && <span>{account}</span>}
+    <div className="resource-metadata delimited-elements">
+      <span>
+        {regions.map((region, index) => (
+          <span key={region}>
+            {region}
+            {index < regions.length - 1 && ', '}
+          </span>
+        ))}
+      </span>
+      {account && <span>{account}</span>}
+      <span>
+        <a
+          href="#"
+          onClick={(e) => {
+            e.preventDefault();
+            showManagedResourceHistoryModal({ id: resource.id, displayName: resource.displayName || resource.id });
+            logEvent({ action: 'ViewHistory' });
+          }}
+        >
+          View history
+        </a>
+      </span>
+      {isDebug && (
         <span>
           <a
             href="#"
             onClick={(e) => {
               e.preventDefault();
-              showManagedResourceHistoryModal({ id: resource.id, displayName: resource.displayName || resource.id });
-              logEvent({ action: 'ViewHistory' });
+              showResourceDefinitionModal({ resource: resource });
+              logEvent({ action: 'ViewDefinition' });
             }}
           >
-            View history
+            View definition
           </a>
         </span>
-        {isDebug && (
-          <span>
-            <a
-              href="#"
-              onClick={(e) => {
-                e.preventDefault();
-                showResourceDefinitionModal({ resource: resource });
-                logEvent({ action: 'ViewDefinition' });
-              }}
-            >
-              View definition
-            </a>
-          </span>
-        )}
-      </div>
+      )}
+    </div>
+  );
+};
+
+export const Resource = ({
+  resource,
+  environment,
+  withPadding,
+  size,
+  className,
+}: IBaseResourceProps & Pick<IEnvironmentItemProps, 'size' | 'withPadding' | 'className'>) => {
+  const icon = resourceManager.getIcon(resource.kind);
+  const app = useApplicationContextSafe();
+
+  const account = resource.location?.account;
+  const regions = resource.location?.regions || [];
+
+  return (
+    <EnvironmentItem
+      iconName={icon}
+      iconTooltip={resource.kind}
+      className={classnames('Resource', className)}
+      title={<ResourceTitle resource={resource} />}
+      size={size}
+      withPadding={withPadding}
+    >
+      <ResourceMetadata environment={environment} resource={resource} />
       <div>
         <Status
           appName={app.name}