Skip to content

Commit 688a244

Browse files
paula-stachopaula-stacho
committed
feat(compass-global-writes): incomplete sharding setup COMPASS-8372 
1 parent 2b44d26 commit 688a244

File tree

9 files changed

+313
-125
lines changed

9 files changed

+313
-125
lines changed

‎packages/compass-global-writes/src/components/example-commands-markup.tsx‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import {
2+
Body,
3+
Code,
4+
css,
5+
Label,
6+
Link,
7+
spacing,
8+
Subtitle,
9+
} from '@mongodb-js/compass-components';
10+
import React, { useMemo } from 'react';
11+
import type { ShardKey } from '../store/reducer';
12+
import toNS from 'mongodb-ns';
13+
14+
const codeBlockContainerStyles = css({
15+
display: 'flex',
16+
flexDirection: 'column',
17+
gap: spacing[100],
18+
});
19+
20+
interface ExampleCommandsMarkupProps {
21+
shardKey: ShardKey;
22+
namespace: string;
23+
showMetaData?: boolean;
24+
type?: 'requested' | 'existing';
25+
}
26+
27+
const paragraphStyles = css({
28+
display: 'flex',
29+
flexDirection: 'column',
30+
gap: spacing[100],
31+
});
32+
33+
export function ExampleCommandsMarkup({
34+
namespace,
35+
shardKey,
36+
}: ExampleCommandsMarkupProps) {
37+
const customShardKeyField = useMemo(() => {
38+
return shardKey.fields[1].name;
39+
}, [shardKey]);
40+
41+
const sampleCodes = useMemo(() => {
42+
const { collection, database } = toNS(namespace);
43+
return {
44+
findingDocuments: `use ${database}\ndb[${JSON.stringify(
45+
collection
46+
)}].find({"location": "US-NY", "${customShardKeyField}": "<id_value>"})`,
47+
insertingDocuments: `use ${database}\ndb[${JSON.stringify(
48+
collection
49+
)}].insertOne({"location": "US-NY", "${customShardKeyField}": "<id_value>",...<other fields>})`,
50+
};
51+
}, [namespace, customShardKeyField]);
52+
53+
return (
54+
<>
55+
<Subtitle>Example commands</Subtitle>
56+
<div className={paragraphStyles}>
57+
<Body>
58+
Start querying your database with some of the most{' '}
59+
<Link
60+
href="https://www.mongodb.com/docs/atlas/global-clusters"
61+
hideExternalIcon
62+
>
63+
common commands
64+
</Link>{' '}
65+
for Global Writes.
66+
</Body>
67+
<Body>
68+
Replace the text to perform operations on different documents. US-NY
69+
is an ISO 3166 location code referring to New York, United States. You
70+
can look up other ISO 3166 location codes below.
71+
</Body>
72+
</div>
73+
74+
<div className={codeBlockContainerStyles}>
75+
<Label htmlFor="finding-documents">Finding documents</Label>
76+
<Code
77+
language="js"
78+
data-testid="sample-finding-documents"
79+
id="finding-documents"
80+
>
81+
{sampleCodes.findingDocuments}
82+
</Code>
83+
</div>
84+
85+
<div className={codeBlockContainerStyles}>
86+
<Label htmlFor="inserting-documents">Inserting documents</Label>
87+
<Code
88+
language="js"
89+
data-testid="sample-inserting-documents"
90+
id="inserting-documents"
91+
>
92+
{sampleCodes.insertingDocuments}
93+
</Code>
94+
</div>
95+
</>
96+
);
97+
}
98+
99+
export default ExampleCommandsMarkup;

‎packages/compass-global-writes/src/components/shard-zones-table.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,24 @@ import {
1717
type LGTableDataType,
1818
getFilteredRowModel,
1919
type LgTableRowType,
20+
Subtitle,
21+
Body,
22+
spacing,
23+
Link,
2024
} from '@mongodb-js/compass-components';
2125
import type { ShardZoneData } from '../store/reducer';
26+
import { useConnectionInfo } from '@mongodb-js/compass-connections/provider';
2227

2328
const containerStyles = css({
2429
height: '400px',
2530
});
2631

32+
const paragraphStyles = css({
33+
display: 'flex',
34+
flexDirection: 'column',
35+
gap: spacing[100],
36+
});
37+
2738
interface ShardZoneRow {
2839
locationName: string;
2940
zone: string;
@@ -127,10 +138,42 @@ export function ShardZonesTable({
127138
[tableRef]
128139
);
129140

141+
const { atlasMetadata } = useConnectionInfo();
142+
130143
const { rows } = table.getRowModel();
131144

132145
return (
133146
<>
147+
<Subtitle>Location Codes</Subtitle>
148+
<div className={paragraphStyles}>
149+
<Body>
150+
Each document’s first field should include an ISO 3166-1 Alpha-2 code
151+
for the location it belongs to.
152+
</Body>
153+
<Body>
154+
We also support ISO 3166-2 subdivision codes for countries containing
155+
a cloud provider data center (both ISO 3166-1 and ISO 3166-2 codes may
156+
be used for these countries). All valid country codes and the zones to
157+
which they map are listed in the table below. Additionally, you can
158+
view a list of all location codes{' '}
159+
<Link href="/static/atlas/country_iso_codes.txt">here</Link>.
160+
</Body>
161+
<Body>
162+
{atlasMetadata?.projectId && atlasMetadata?.clusterName && (
163+
<>
164+
Locations’ zone mapping can be changed by navigating to this
165+
clusters{' '}
166+
<Link
167+
href={`/v2/${atlasMetadata?.projectId}#/clusters/edit/${atlasMetadata?.clusterName}`}
168+
>
169+
Edit Configuration
170+
</Link>{' '}
171+
page and clicking the Configure Location Mappings’ link above the
172+
map.
173+
</>
174+
)}
175+
</Body>
176+
</div>
134177
<SearchInput
135178
value={searchText}
136179
onChange={handleSearchTextChange}

‎packages/compass-global-writes/src/components/states/incomplete-sharding-setup.tsx‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import {
2+
Banner,
3+
BannerVariant,
4+
Button,
5+
spacing,
6+
css,
7+
ButtonVariant,
8+
Link,
9+
} from '@mongodb-js/compass-components';
10+
import React from 'react';
11+
import ShardKeyMarkup from '../shard-key-markup';
12+
import {
13+
resumeManagedNamespace,
14+
ShardingStatuses,
15+
type ShardZoneData,
16+
type RootState,
17+
type ShardKey,
18+
} from '../../store/reducer';
19+
import { connect } from 'react-redux';
20+
import ExampleCommandsMarkup from '../example-commands-markup';
21+
import { ShardZonesTable } from '../shard-zones-table';
22+
23+
const containerStyles = css({
24+
display: 'flex',
25+
flexDirection: 'column',
26+
gap: spacing[400],
27+
marginBottom: spacing[400],
28+
});
29+
30+
const unmanageBtnStyles = css({
31+
marginTop: spacing[100],
32+
});
33+
34+
export interface IncompleteShardingSetupProps {
35+
shardKey: ShardKey;
36+
shardZones: ShardZoneData[];
37+
namespace: string;
38+
isSubmittingForSharding: boolean;
39+
onResume: () => void;
40+
}
41+
42+
export function IncompleteShardingSetup({
43+
shardKey,
44+
shardZones,
45+
namespace,
46+
onResume,
47+
isSubmittingForSharding,
48+
}: IncompleteShardingSetupProps) {
49+
return (
50+
<div className={containerStyles}>
51+
<Banner variant={BannerVariant.Warning}>
52+
<strong>
53+
It looks like you&#39;ve chosen a Global Writes shard key for this
54+
collection, but your configuration is incomplete.
55+
</strong>{' '}
56+
Please enable Global Writes for this collection to ensure that documents
57+
are associated with the appropriate zone.&nbsp;
58+
<Link
59+
href="https://www.mongodb.com/docs/atlas/global-clusters/"
60+
target="_blank"
61+
rel="noreferrer"
62+
>
63+
Read more about Global Writes
64+
</Link>
65+
<div>
66+
<Button
67+
data-testid="manage-collection-button"
68+
onClick={onResume}
69+
variant={ButtonVariant.Default}
70+
isLoading={isSubmittingForSharding}
71+
className={unmanageBtnStyles}
72+
>
73+
Enable Global Writes
74+
</Button>
75+
</div>
76+
</Banner>
77+
<ShardKeyMarkup namespace={namespace} shardKey={shardKey} />
78+
<ExampleCommandsMarkup namespace={namespace} shardKey={shardKey} />
79+
<ShardZonesTable shardZones={shardZones} />
80+
</div>
81+
);
82+
}
83+
84+
export default connect(
85+
(state: RootState) => {
86+
if (!state.shardKey) {
87+
throw new Error('Shard key not found in IncompleteShardingSetup');
88+
}
89+
return {
90+
namespace: state.namespace,
91+
shardKey: state.shardKey,
92+
shardZones: state.shardZones,
93+
isSubmittingForSharding:
94+
state.status === ShardingStatuses.SUBMITTING_FOR_SHARDING_INCOMPLETE,
95+
};
96+
},
97+
{
98+
onResume: resumeManagedNamespace,
99+
}
100+
)(IncompleteShardingSetup);

‎packages/compass-global-writes/src/components/states/shard-key-correct.spec.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import Sinon from 'sinon';
1010
import { renderWithStore } from '../../../tests/create-store';
1111
import { type ConnectionInfo } from '@mongodb-js/compass-connections/provider';
1212

13-
describe('Compass GlobalWrites Plugin', function () {
13+
describe('ShardKeyCorrect', function () {
1414
const shardZones: ShardZoneData[] = [
1515
{
1616
zoneId: '45893084',

0 commit comments

Comments
 (0)