refactor code for easier extension

.vscode/component-styles.code-snippets

@@ -0,0 +1,24 @@
+{
+	// Place your opensource workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
+	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
+	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
+	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
+	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
+	// Placeholders with the same ids are connected.
+	// Example:
+	"component styles": {
+		"scope": "typescript,typescriptreact",
+		"prefix": "styles snippet",
+		"body": [
+			"import type { StyletronCSSObject, StyletronCSSObjectOf } from \"@/hooks/useStyletronClasses\";",
+			"const cssStylesObj = {",
+			"    ${1:classname}: (theme) => ({",
+			"		$2",
+			"    }),",
+			"} satisfies StyletronCSSObject;",
+			"",
+			"export const cssStyles: StyletronCSSObjectOf<typeof cssStylesObj> = cssStylesObj;"
+		],
+		"description": "Create base structure for component styletron styles",
+	}
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "typescript.tsdk": "node_modules/typescript/lib"
+}

Dockerfile

@@ -1,10 +1,12 @@
 FROM node:18-alpine AS base
 
-# Install dependencies only when needed
-FROM base AS deps
+RUN apk update
 RUN apk --no-cache add git
 # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
 RUN apk add --no-cache libc6-compat
+
+# Install dependencies only when needed
+FROM base AS deps
 WORKDIR /app
 
 # Install dependencies based on the preferred package manager

package.json

@@ -5,13 +5,12 @@
   "scripts": {
     "dev": "next dev -p ${CADENCE_WEB_PORT}",
     "build": "NODE_ENV=production && next build",
-    "start": "CADENCE_WEB_PORT=8088 && next start -p ${CADENCE_WEB_PORT}",
+    "start": "next start -p ${CADENCE_WEB_PORT-8088}",
     "lint": "next lint",
-    "install": "npm run install-idl",
-    "install-idl": "mkdir -p node_modules && cd node_modules && npx tiged https://github.com/uber/cadence-idl#34b4519b270945fbb38f413137dfb50b5fc20af7 cadence-idl",
+    "install-idl": "mkdir -p node_modules && cd node_modules && npx --yes tiged  https://github.com/uber/cadence-idl#e3a59cdd3c3676b0edee2f3262a22379f25b9fa5 cadence-idl",
     "generate:idl": "mkdir -p src/idl; npm run generate:idl:proto",
     "generate:idl:proto": "rm -rf src/idl/proto && cp -R node_modules/cadence-idl/proto src/idl/proto",
-    "postinstall": "npm run generate:idl"
+    "postinstall": "npm run install-idl && npm run generate:idl"
   },
   "engines": {
     "node": "^18.17.1",
@@ -26,6 +25,7 @@
     "query-string": "^9.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-intersection-observer": "^9.8.1",
     "styletron-engine-monolithic": "^1.0.0",
     "styletron-react": "^6.1.1",
     "use-between": "^1.3.5"

src/app/(Home)/domains/page.tsx

@@ -1,17 +1,3 @@
 import DomainPage from "@/containers/domains-page/domains-page";
-import type { DomainData } from "@/containers/domains-page/domains-page.types";
-import grpcClient from "@/utils/grpc-client";
-import { unstable_cache } from "next/cache";
 
-const getCachedDomains = unstable_cache(
-  async () => grpcClient.listDomains({}),
-  ['cluster-domains'],
-  { revalidate: 60 }
-);
-
-export default async function Domains() {
-  const { domains } = await getCachedDomains() as { domains: Array<DomainData> }
-  return (
-    <DomainPage domains={domains} />
-  );
-}
+export default DomainPage;

src/app/(Home)/domainz/page.tsx

@@ -0,0 +1,3 @@
+import DomainPage from "@/containers/domains-page/domains-page";
+
+export default DomainPage;

src/app/(Home)/error.tsx

@@ -1,12 +1,29 @@
 "use client"
+import { HeadingXSmall } from "baseui/typography";
+import { ThemeConsumer, styled } from "baseui";
+import AlertIcon from "baseui/icon/alert";
+
+const StyledContainer = styled('div', ({ $theme }) => {
+    return {
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: $theme.sizing.scale800,
+        padding: `${$theme.sizing.scale900} ${$theme.sizing.scale600}`,
+    };
+});
+
 export default function HomePageError({
     error
 }: Readonly<{
     error: Error;
 }>) {
     return (
-        <div>
-            A problem {error.message}
-        </div>
+        <StyledContainer>
+            <AlertIcon size={64} />
+            <HeadingXSmall>Something went wrong</HeadingXSmall>
+        </StyledContainer>
     );
 }

src/app/(Home)/loading.tsx

@@ -0,0 +1,14 @@
+"use client"
+import { ProgressBar, ProgressBarOverrides } from "baseui/progress-bar";
+
+const progressOverrides = {
+    BarContainer: {
+        style: { margin: 0 }
+    }
+} satisfies ProgressBarOverrides;
+
+export default function HomePageLoading() {
+    return (
+        <ProgressBar overrides={progressOverrides} infinite />
+    );
+}

src/app/StyletronProviderWrapper.tsx

@@ -9,7 +9,15 @@ const cadenceLightTheme = createTheme({ grid: { maxWidth: 1580 } })
 export default function StyletronProviderWrapper({ children }: { children: React.ReactNode }) {
     return (
         <StyletronProvider value={styletron}>
-            <BaseProvider theme={cadenceLightTheme}>
+            <BaseProvider overrides={{
+                AppContainer: {
+                    style: {
+                        display: "flex",
+                        flexDirection: "column",
+                        flex: 1
+                    }
+                }
+            }} theme={cadenceLightTheme}>
                 {children}
             </BaseProvider>
         </StyletronProvider>

src/app/globals.css

@@ -6,9 +6,15 @@
 
 html,
 body {
+  display: flex;
+  flex-direction: column;
   max-width: 100vw;
   overflow-x: hidden;
   height: 100%;
 }
 
-
+body main {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}

src/components/section-loading-indicator/section-loading-indicator.styles.ts

@@ -0,0 +1,12 @@
+import type { StyletronCSSObject, StyletronCSSObjectOf } from "@/hooks/useStyletronClasses";
+
+const cssStylesObj = {
+    spinnerContainer: (theme) => ({
+        padding: `${theme.sizing.scale1200} 0px`,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+    }),
+} satisfies StyletronCSSObject;
+
+export const cssStyles: StyletronCSSObjectOf<typeof cssStylesObj> = cssStylesObj;

src/components/section-loading-indicator/section-loading-indicator.tsx

@@ -0,0 +1,14 @@
+"use client";
+import useStyletronClasses from "@/hooks/useStyletronClasses";
+import { Spinner, SIZE, type SpinnerProps } from "baseui/spinner";
+import { cssStyles } from "./section-loading-indicator.styles";
+
+export default function SectionLoadingIndicator(props: SpinnerProps) {
+    const { cls } = useStyletronClasses(cssStyles);
+
+    return (
+        <div className={cls.spinnerContainer}>
+            <Spinner $size={props.$size || SIZE.medium} />
+        </div>
+    )
+}

src/configs/clusters/cluster-names.ts

@@ -0,0 +1,5 @@
+const envClusterNames = process.env.CADENCE_CLUSTERS_NAMES;
+
+const CLUSTER_NAMES: Array<string> = envClusterNames ? envClusterNames.split(',').filter((c) => Boolean(c.trim())).map((c) => c.trim()) : ['default'];
+
+export default CLUSTER_NAMES;

src/configs/clusters/clusters-configs.ts

@@ -0,0 +1,22 @@
+import GRPC_PEERS from "../grpc/grpc-peers";
+import GRPC_SERVICES_NAMES from "../grpc/grpc-services-names";
+import CLUSTER_NAMES from "./cluster-names";
+import { ClusterConfig, ClustersConfigs } from "./clusters-configs.types";
+
+const configsHasSameLength = [GRPC_PEERS, GRPC_SERVICES_NAMES].every((config) => config.length === CLUSTER_NAMES.length)
+if (!configsHasSameLength) throw new Error('Failed to build cluster configuration: cluster names, grpc peers & service names count doesn\'t match');
+
+const CLUSTERS_CONFIGS: ClustersConfigs = CLUSTER_NAMES.map((clusterName, i) => {
+    return {
+        clusterName: clusterName,
+        grpc: {
+            peer: GRPC_PEERS[i],
+            serviceName: GRPC_SERVICES_NAMES[i],
+            metadata: {},
+        },
+
+    } satisfies ClusterConfig
+})
+
+
+export default CLUSTERS_CONFIGS;

src/configs/clusters/clusters-configs.types.ts

@@ -0,0 +1,8 @@
+import { GRPCRequestConfig, GRPCServiceConfig } from "@/utils/grpc/grpc-service";
+
+export type ClusterConfig = {
+    clusterName: string;
+    grpc: GRPCRequestConfig & Pick<GRPCServiceConfig, "peer">;
+}
+
+export type ClustersConfigs = Array<ClusterConfig>;

src/configs/grpc/grpc-peers.ts

@@ -0,0 +1,6 @@
+const envPeers = process.env.CADENCE_GRPC_PEERS;
+
+const GRPC_PEERS: Array<string> = envPeers ? envPeers.split(',').filter((p) => Boolean(p.trim())).map((p) => p.trim()) : ['127.0.0.1:7933'];
+
+
+export default GRPC_PEERS;

src/configs/grpc/grpc-proto-dir-base-path.ts

@@ -0,0 +1,3 @@
+const GRPC_PROTO_DIR_BASE_PATH = 'src/idl/proto';
+
+export default GRPC_PROTO_DIR_BASE_PATH;

src/configs/grpc/grpc-services-configs.ts

@@ -0,0 +1,20 @@
+const GRPC_SERVICES_CONFIGS = {
+    adminServiceConfig: {
+        schemaPath: 'uber/cadence/admin/v1/service.proto',
+        servicePath: 'uber.cadence.admin.v1.AdminAPI',
+    },
+    domainServiceConfig: {
+        schemaPath: 'uber/cadence/api/v1/service_domain.proto',
+        servicePath: 'uber.cadence.api.v1.DomainAPI',
+    },
+    visibilityServiceConfig: {
+        schemaPath: 'uber/cadence/api/v1/service_visibility.proto',
+        servicePath: 'uber.cadence.api.v1.VisibilityAPI',
+    },
+    workflowServiceConfig: {
+        schemaPath: 'uber/cadence/api/v1/service_workflow.proto',
+        servicePath: 'uber.cadence.api.v1.WorkflowAPI',
+    },
+};
+
+export default GRPC_SERVICES_CONFIGS;

src/configs/grpc/grpc-services-names.ts

@@ -0,0 +1,6 @@
+
+const envServicesNames = process.env.CADENCE_GRPC_SERVICES_NAMES;
+const GRPC_SERVICES_NAMES = envServicesNames ?  envServicesNames.split(',').filter((s) => Boolean(s.trim())).map((s) => s.trim()) : ['cadence-frontend'];
+
+
+export default GRPC_SERVICES_NAMES;

src/containers/domains-page/domains-page-header/domains-page-header.tsx → src/containers/domains-page/domains-page-filters/domains-page-filters.tsx

@@ -8,32 +8,27 @@ import domainPageQueryParamsConfig from "../domains-page-query-params";
 import usePageQueryParams from "@/hooks/use-page-query-params/use-page-query-params";
 import { Delete, Filter, Search, } from "baseui/icon";
 import useStyletronClasses from "@/hooks/useStyletronClasses";
-import DomainPageHeaderCount from "./domain-page-header-count";
-import { cssStyles, overrides } from "./domains-page-header.styles";
+import { cssStyles, overrides } from "./domains-page-filters.styles";
 import { Button } from "baseui/button";
 import { useMemo, useState } from "react";
+import CLUSTERS_CONFIGS from "@/configs/clusters/clusters-configs";
 
-type Props = {
-  domainsCount: number;
-};
-
-export default function DomainPageHeader({ domainsCount }: Props) {
+export default function DomainPageHeader() {
   const [queryParams, setQueryParams] = usePageQueryParams(domainPageQueryParamsConfig, { pageRerender: false });
   const { cls, theme } = useStyletronClasses(cssStyles);
   const [showFilters, setShowFilters] = useState(false);
   const selectedFiltersCount = useMemo(() => {
     return 0;
-/*     return domainPageQueryParamsConfig
-      .reduce((result, { key, defaultValue }) => queryParams[key] === defaultValue ? result : result + 1, 0); */
+    /*     return domainPageQueryParamsConfig
+          .reduce((result, { key, defaultValue }) => queryParams[key] === defaultValue ? result : result + 1, 0); */
   }, [queryParams]);
+
+  const clustersOptions = CLUSTERS_CONFIGS.map(({ clusterName }) => ({ label: clusterName, id: clusterName }));
+  const clusterValue = clustersOptions.filter(({ id }) => id === queryParams.clusterName)
   return (
     <section>
       <Grid>
         <Cell span={12}>
-          <div className={cls.titleContainer}>
-            <LabelLarge>All domains</LabelLarge>
-            <DomainPageHeaderCount count={domainsCount} />
-          </div>
           <div className={cls.searchBarContainer}>
             <Input
               overrides={overrides.searchInput}
@@ -53,20 +48,13 @@ export default function DomainPageHeader({ domainsCount }: Props) {
             </Button>
           </div>
           {showFilters && <div className={cls.filtersContainer}>
-            <div className={cls.selectFilterContainer}>
-              <FormControl overrides={overrides.selectFormControl}
-                label="Enironments">
-                <Select
-                  id="id-select-domains-environments"
-                  size="compact"
-                />
-              </FormControl>
-            </div>
             <div className={cls.selectFilterContainer}>
               <FormControl overrides={overrides.selectFormControl} label="Clusters">
                 <Select
-                  id="id-select-domains-clusters"
                   size="compact"
+                  value={clusterValue}
+                  options={clustersOptions}
+                  onChange={(params) => setQueryParams({ clusterName: params.value[0].id })}
                 />
               </FormControl>
             </div>

src/containers/domains-page/domains-page-query-params.ts

@@ -5,6 +5,11 @@ const domainPageQueryParamsConfig: PageQueryParamConfig[] = [{
     queryParamKey: "s",
     defaultValue: ""
 },
+{
+    key: "clusterName",
+    queryParamKey: "c",
+    defaultValue: ""
+},
 {
     key: "sortColumn",
     queryParamKey: "sc",