Skip to content

Commit 0bb8684

Browse files
Kav91Kav91
committed
feat: account icons
1 parent 0983a81 commit 0bb8684

File tree

5 files changed

+141
-33
lines changed

5 files changed

+141
-33
lines changed

‎nerdlets/entity-mode/components/custom-nodes/default.js

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,19 @@ export default class CustomNode extends React.PureComponent {
2525
this.renderIcon = this.renderIcon.bind(this);
2626
}
2727

28-
renderIcon(userIcons, nodeData, nodeId, isOpen, icon, colorOne) {
28+
renderIcon(
29+
accountIcons,
30+
userIcons,
31+
nodeData,
32+
nodeId,
33+
isOpen,
34+
icon,
35+
colorOne
36+
) {
2937
if (nodeData.iconSet) {
30-
const iconSet = userIcons.filter(set => set.id === nodeData.iconSet)[0];
38+
const iconSet = [...userIcons, ...accountIcons].filter(
39+
set => set.id === nodeData.iconSet
40+
)[0];
3141
if (iconSet && iconSet.document) {
3242
let iconSrc =
3343
iconSet.document.red ||
@@ -69,6 +79,7 @@ export default class CustomNode extends React.PureComponent {
6979
}
7080

7181
renderIconGroup = (
82+
accountIcons,
7283
userIcons,
7384
data,
7485
nodeId,
@@ -104,6 +115,7 @@ export default class CustomNode extends React.PureComponent {
104115
<Popup
105116
// className="popup-custom"
106117
trigger={this.renderIcon(
118+
accountIcons,
107119
userIcons,
108120
data,
109121
nodeId,
@@ -127,7 +139,7 @@ export default class CustomNode extends React.PureComponent {
127139

128140
return (
129141
<DataConsumer>
130-
{({ userIcons, mapData, closeCharts }) => {
142+
{({ userIcons, accountIcons, mapData, closeCharts }) => {
131143
const data = ((mapData || {}).nodeData || {})[node.id] || {};
132144
const icon =
133145
data.icon ||
@@ -159,6 +171,7 @@ export default class CustomNode extends React.PureComponent {
159171
style={{ height: nodeSize / 10, width: nodeSize / 10 }}
160172
>
161173
{this.renderIconGroup(
174+
accountIcons,
162175
userIcons,
163176
data,
164177
node.id,

‎nerdlets/observability-maps-nerdlet/components/custom-nodes/default.js

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,19 @@ export default class CustomNode extends React.PureComponent {
2525
this.renderIcon = this.renderIcon.bind(this);
2626
}
2727

28-
renderIcon(userIcons, nodeData, nodeId, isOpen, icon, colorOne) {
28+
renderIcon(
29+
accountIcons,
30+
userIcons,
31+
nodeData,
32+
nodeId,
33+
isOpen,
34+
icon,
35+
colorOne
36+
) {
2937
if (nodeData.iconSet) {
30-
const iconSet = userIcons.filter(set => set.id === nodeData.iconSet)[0];
38+
const iconSet = [...userIcons, ...accountIcons].filter(
39+
set => set.id === nodeData.iconSet
40+
)[0];
3141
if (iconSet && iconSet.document) {
3242
let iconSrc =
3343
iconSet.document.red ||
@@ -69,6 +79,7 @@ export default class CustomNode extends React.PureComponent {
6979
}
7080

7181
renderIconGroup = (
82+
accountIcons,
7283
userIcons,
7384
data,
7485
nodeId,
@@ -117,6 +128,7 @@ export default class CustomNode extends React.PureComponent {
117128
<Popup
118129
// className="popup-custom"
119130
trigger={this.renderIcon(
131+
accountIcons,
120132
userIcons,
121133
data,
122134
nodeId,
@@ -140,7 +152,7 @@ export default class CustomNode extends React.PureComponent {
140152

141153
return (
142154
<DataConsumer>
143-
{({ userIcons, mapData, closeCharts, mapConfig }) => {
155+
{({ userIcons, accountIcons, mapData, closeCharts, mapConfig }) => {
144156
const data = ((mapData || {}).nodeData || {})[node.id] || {};
145157
const icon = data.icon || setEntityDesign(data.entityType).icon;
146158
const metrics = buildNodeMetrics(data);
@@ -172,6 +184,7 @@ export default class CustomNode extends React.PureComponent {
172184
style={{ height: nodeSize / 10, width: nodeSize / 10 }}
173185
>
174186
{this.renderIconGroup(
187+
accountIcons,
175188
userIcons,
176189
data,
177190
node.id,

‎nerdlets/observability-maps-nerdlet/components/icons/manage.js

Lines changed: 74 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
import React from 'react';
22
import { Modal, Button, Form, Label } from 'semantic-ui-react';
3-
import { writeUserDocument, deleteUserDocument } from '../../lib/utils';
3+
import {
4+
writeUserDocument,
5+
deleteUserDocument,
6+
writeAccountDocument,
7+
deleteAccountDocument
8+
} from '../../lib/utils';
49
import { DataConsumer } from '../../context/data';
510

611
const iconCollection = 'ObservabilityIcons';
@@ -28,21 +33,47 @@ export default class ManageIcons extends React.PureComponent {
2833
this.handleIconSetChange = this.handleIconSetChange.bind(this);
2934
}
3035

31-
writeIconSet(dataFetcher) {
36+
writeIconSet(storageLocation, dataFetcher) {
3237
const { name, green, orange, red, selected } = this.state;
3338
const documentId = selected === 'new' || name !== '' ? name : selected;
34-
writeUserDocument(iconCollection, documentId, { green, orange, red });
35-
dataFetcher(['userIcons']);
36-
this.handleIconSetChange(null);
39+
40+
if (storageLocation?.type === 'account') {
41+
//
42+
writeAccountDocument(storageLocation.value, iconCollection, documentId, {
43+
green,
44+
orange,
45+
red
46+
});
47+
setTimeout(() => {
48+
dataFetcher(['accountIcons']);
49+
this.handleIconSetChange(null);
50+
}, 1000);
51+
} else {
52+
writeUserDocument(iconCollection, documentId, { green, orange, red });
53+
setTimeout(() => {
54+
dataFetcher(['userIcons']);
55+
this.handleIconSetChange(null);
56+
}, 1000);
57+
}
3758
}
3859

39-
deleteIconSet(selected, dataFetcher) {
40-
deleteUserDocument(iconCollection, selected);
41-
dataFetcher(['userIcons']);
42-
this.handleIconSetChange(null);
60+
deleteIconSet(storageLocation, selected, dataFetcher) {
61+
if (storageLocation?.type === 'account') {
62+
deleteAccountDocument(storageLocation.value, iconCollection, selected);
63+
setTimeout(() => {
64+
dataFetcher(['accountIcons']);
65+
this.handleIconSetChange(null);
66+
}, 1000);
67+
} else {
68+
deleteUserDocument(iconCollection, selected);
69+
setTimeout(() => {
70+
dataFetcher(['userIcons']);
71+
this.handleIconSetChange(null);
72+
}, 1000);
73+
}
4374
}
4475

45-
handleIconSetChange(value, userIcons) {
76+
handleIconSetChange(storageLocation, value, selectedIcons) {
4677
this.setState({ selected: value });
4778
if (value === 'new' || !value) {
4879
this.setState({
@@ -52,13 +83,13 @@ export default class ManageIcons extends React.PureComponent {
5283
red: ''
5384
});
5485
} else {
55-
for (let i = 0; i < userIcons.length; i++) {
56-
if (userIcons[i].id === value) {
86+
for (let i = 0; i < selectedIcons.length; i++) {
87+
if (selectedIcons[i].id === value) {
5788
this.setState({
58-
name: userIcons[i].id,
59-
green: userIcons[i].document.green,
60-
orange: userIcons[i].document.orange,
61-
red: userIcons[i].document.red
89+
name: selectedIcons[i].id,
90+
green: selectedIcons[i].document.green,
91+
orange: selectedIcons[i].document.orange,
92+
red: selectedIcons[i].document.red
6293
});
6394
break;
6495
}
@@ -71,8 +102,17 @@ export default class ManageIcons extends React.PureComponent {
71102

72103
return (
73104
<DataConsumer>
74-
{({ userIcons, updateDataContextState, dataFetcher }) => {
75-
const options = userIcons.map((set, i) => ({
105+
{({
106+
userIcons,
107+
accountIcons,
108+
updateDataContextState,
109+
dataFetcher,
110+
storageLocation
111+
}) => {
112+
const selectedIcons =
113+
storageLocation?.type === 'account' ? accountIcons : userIcons;
114+
115+
const options = selectedIcons.map((set, i) => ({
76116
key: i,
77117
text: set.id.replaceAll('+', ' ').replaceAll('-', ' '),
78118
value: set.id,
@@ -107,7 +147,11 @@ export default class ManageIcons extends React.PureComponent {
107147
placeholder="Select Icon Set"
108148
value={selected}
109149
onChange={(e, d) =>
110-
this.handleIconSetChange(d.value, userIcons)
150+
this.handleIconSetChange(
151+
storageLocation,
152+
d.value,
153+
selectedIcons
154+
)
111155
}
112156
/>
113157
<Form.Button
@@ -139,7 +183,13 @@ export default class ManageIcons extends React.PureComponent {
139183
negative
140184
disabled={selected === '' || selected === 'new'}
141185
content="Delete"
142-
onClick={() => this.deleteIconSet(selected, dataFetcher)}
186+
onClick={() =>
187+
this.deleteIconSet(
188+
storageLocation,
189+
selected,
190+
dataFetcher
191+
)
192+
}
143193
/>
144194
</Form.Group>
145195
</Form>
@@ -186,7 +236,7 @@ export default class ManageIcons extends React.PureComponent {
186236
width={16}
187237
fluid
188238
label="Warning Icon"
189-
placeholder="http://somewebsite.com/someWarningIcon.png"
239+
placeholder="selectedIcons"
190240
value={orange}
191241
onChange={e => this.setState({ orange: e.target.value })}
192242
/>
@@ -225,7 +275,9 @@ export default class ManageIcons extends React.PureComponent {
225275
(selected === '' && name === '') ||
226276
!isValidUrl(green)
227277
}
228-
onClick={() => this.writeIconSet(dataFetcher)}
278+
onClick={() =>
279+
this.writeIconSet(storageLocation, dataFetcher)
280+
}
229281
>
230282
Save
231283
</Button>

‎nerdlets/observability-maps-nerdlet/components/node/edit/icon-set.js

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,28 @@ export default class IconSet extends React.PureComponent {
1818
render() {
1919
return (
2020
<DataConsumer>
21-
{({ userIcons, mapConfig, selectedNode, updateDataContextState }) => {
22-
const userIconSelection = userIcons.map(set => ({
21+
{({
22+
userIcons,
23+
accountIcons,
24+
mapConfig,
25+
selectedNode,
26+
updateDataContextState
27+
}) => {
28+
const iconSelection = userIcons.map(set => ({
2329
key: set.id,
2430
value: set.id,
2531
text: set.id
2632
}));
27-
userIconSelection.unshift({
33+
34+
accountIcons.forEach(set => {
35+
iconSelection.push({
36+
key: `account_${set.id}`,
37+
value: set.id,
38+
text: set.id
39+
});
40+
});
41+
42+
iconSelection.unshift({
2843
key: 'default',
2944
text: 'Default',
3045
value: 'default'
@@ -47,7 +62,7 @@ export default class IconSet extends React.PureComponent {
4762
width="16"
4863
style={{ display: 'inline', width: '100%' }}
4964
search
50-
options={userIconSelection}
65+
options={iconSelection}
5166
placeholder="Select Icon Set"
5267
value={
5368
this.state.iconSet === ''

‎nerdlets/observability-maps-nerdlet/context/data.js

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ export class DataProvider extends Component {
7878
},
7979
tempLocations: {},
8080
userIcons: [],
81+
accountIcons: [],
8182
storeLocation: 'user',
8283
storageLocation: {
8384
key: 'User',
@@ -406,6 +407,11 @@ export class DataProvider extends Component {
406407
return new Promise(async resolve => {
407408
const dataPromises = [];
408409
const content = [];
410+
const { storageLocation } = this.state;
411+
412+
if (actions.includes('accountMaps')) {
413+
actions.push('accountIcons');
414+
}
409415

410416
actions.forEach(action => {
411417
switch (action) {
@@ -417,8 +423,13 @@ export class DataProvider extends Component {
417423
content.push(action);
418424
dataPromises.push(getUserCollection(iconCollection));
419425
break;
426+
case 'accountIcons':
427+
content.push(action);
428+
dataPromises.push(
429+
getAccountCollection(storageLocation.value, 'ObservabilityIcons')
430+
);
431+
break;
420432
case 'accountMaps':
421-
const { storageLocation } = this.state;
422433
content.push(action);
423434
dataPromises.push(
424435
getAccountCollection(storageLocation.value, collectionName)
@@ -460,6 +471,10 @@ export class DataProvider extends Component {
460471
case 'userIcons':
461472
data[content[i]] = value;
462473
break;
474+
case 'accountIcons':
475+
console.log('!!!', value);
476+
data[content[i]] = value;
477+
break;
463478
case 'userConfig':
464479
data.userConfig = value || null;
465480
break;

0 commit comments

Comments
 (0)