Skip to content

Commit e12345f

Browse files
blegesse-wblegesse-w
authored
fix(operatorUI): improve orgOverlay gid design (#5010)
1 parent 1f8e17b commit e12345f

File tree

2 files changed

+148
-144
lines changed

2 files changed

+148
-144
lines changed

‎src/operator/OrgOverlay.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
.overlay-header--color.overlay-header--title {
22
color: #fff;
3+
justify-content: center;
34
user-select: text !important;
45
-moz-user-select: text !important;
56
-webkit-user-select: text !important;

‎src/operator/OrgOverlay.tsx‎

Lines changed: 147 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
LinkButton,
1616
LinkTarget,
1717
Overlay,
18+
Panel,
1819
RemoteDataState,
1920
SpinnerContainer,
2021
TechnoSpinner,
@@ -87,156 +88,158 @@ const OrgOverlay: FC = () => {
8788
spinnerComponent={<TechnoSpinner diameterPixels={100} />}
8889
>
8990
<Overlay.Body>
90-
<Grid>
91-
<Grid.Row>
92-
<Grid.Column widthMD={Columns.Four}>
93-
<label>Organization Name</label>
94-
<p>{organization?.name ?? ''}</p>
95-
</Grid.Column>
96-
<Grid.Column widthMD={Columns.Four}>
97-
<label>Account Type</label>
98-
<p>{organization?.account?.type ?? ''}</p>
99-
</Grid.Column>
100-
<Grid.Column widthMD={Columns.Four}>
101-
<LinkButton
102-
color={ComponentColor.Secondary}
103-
size={ComponentSize.Medium}
104-
shape={ButtonShape.Default}
105-
testID="usage-button"
106-
text="View Usage Dashboard"
107-
target={LinkTarget.Blank}
108-
className="overlay-button--link"
109-
href={`https://influxdb.aws.influxdata.io/orgs/844910ece80be8bc/dashboards/0649b03029c49000?vars%5Borgid%5D=${orgID}`}
110-
/>
111-
</Grid.Column>
112-
</Grid.Row>
113-
<SpinnerContainer
114-
loading={limitsStatus}
115-
spinnerComponent={<TechnoSpinner diameterPixels={100} />}
116-
testID="limits-spinner-container"
117-
>
91+
<Panel.Body>
92+
<Grid>
11893
<Grid.Row>
119-
<h4>Limits</h4>
120-
<Grid.Column widthMD={Columns.Three}>
121-
<Form.Label label="Read (KBs)" testID="read-kbs" />
122-
<LimitsField
123-
type={InputType.Number}
124-
name="rate.readKBs"
125-
limits={limits}
126-
onChangeLimits={setLimits}
127-
/>
128-
</Grid.Column>
129-
<Grid.Column widthMD={Columns.Three}>
130-
<Form.Label label="Write (KBs)" />
131-
<LimitsField
132-
type={InputType.Number}
133-
name="rate.writeKBs"
134-
limits={limits}
135-
onChangeLimits={setLimits}
136-
/>
94+
<Grid.Column widthMD={Columns.Four}>
95+
<label>Organization Name</label>
96+
<p>{organization?.name ?? ''}</p>
13797
</Grid.Column>
138-
<Grid.Column widthMD={Columns.Three}>
139-
<Form.Label label="Series Cardinality" />
140-
<LimitsField
141-
type={InputType.Number}
142-
name="rate.cardinality"
143-
limits={limits}
144-
onChangeLimits={setLimits}
145-
/>
98+
<Grid.Column widthMD={Columns.Four}>
99+
<label>Account Type</label>
100+
<p>{organization?.account?.type ?? ''}</p>
146101
</Grid.Column>
147-
</Grid.Row>
148-
<Grid.Row>
149-
<Grid.Column widthMD={Columns.Three}>
150-
<Form.Label label="Query Time (seconds)" />
151-
<LimitsField
152-
type={InputType.Number}
153-
name="rate.queryTime"
154-
limits={limits}
155-
onChangeLimits={setLimits}
102+
<Grid.Column widthMD={Columns.Four}>
103+
<LinkButton
104+
color={ComponentColor.Secondary}
105+
size={ComponentSize.Medium}
106+
shape={ButtonShape.Default}
107+
testID="usage-button"
108+
text="View Usage Dashboard"
109+
target={LinkTarget.Blank}
110+
className="overlay-button--link"
111+
href={`https://influxdb.aws.influxdata.io/orgs/844910ece80be8bc/dashboards/0649b03029c49000?vars%5Borgid%5D=${orgID}`}
156112
/>
157113
</Grid.Column>
158114
</Grid.Row>
159-
<Grid.Row>
160-
<Grid.Column widthMD={Columns.Three}>
161-
<Form.Label label="Max Buckets" />
162-
<LimitsField
163-
type={InputType.Number}
164-
name="bucket.maxBuckets"
165-
limits={limits}
166-
onChangeLimits={setLimits}
167-
/>
168-
</Grid.Column>
169-
<Grid.Column widthMD={Columns.Three}>
170-
<Form.Label label="Max Retention Duration (hours)" />
171-
<LimitsField
172-
type={InputType.Number}
173-
name="bucket.maxRetentionDuration"
174-
limits={limits}
175-
onChangeLimits={setLimits}
176-
/>
177-
</Grid.Column>
178-
<Grid.Column widthMD={Columns.Three}>
179-
<Form.Label label="Max Notifications" />
180-
<LimitsField
181-
type={InputType.Number}
182-
name="notificationRule.maxNotifications"
183-
limits={limits}
184-
onChangeLimits={setLimits}
185-
/>
186-
</Grid.Column>
187-
</Grid.Row>
188-
<Grid.Row>
189-
<Grid.Column widthMD={Columns.Three}>
190-
<Form.Label label="Max Dashboards" />
191-
<LimitsField
192-
type={InputType.Number}
193-
name="dashboard.maxDashboards"
194-
limits={limits}
195-
onChangeLimits={setLimits}
196-
/>
197-
</Grid.Column>
198-
<Grid.Column widthMD={Columns.Three}>
199-
<Form.Label label="Max Tasks" />
200-
<LimitsField
201-
type={InputType.Number}
202-
name="task.maxTasks"
203-
limits={limits}
204-
onChangeLimits={setLimits}
205-
/>
206-
</Grid.Column>
207-
<Grid.Column widthMD={Columns.Three}>
208-
<Form.Label label="Max Checks" />
209-
<LimitsField
210-
type={InputType.Number}
211-
name="check.maxChecks"
212-
limits={limits}
213-
onChangeLimits={setLimits}
214-
/>
215-
</Grid.Column>
216-
</Grid.Row>
217-
<Grid.Row>
218-
<h4>Notification Rules</h4>
219-
<Grid.Column widthMD={Columns.Three}>
220-
<Form.Label label="Blocked Notification Rules" />
221-
<LimitsField
222-
type={InputType.Text}
223-
name="notificationRule.blockedNotificationRules"
224-
limits={limits}
225-
onChangeLimits={setLimits}
226-
/>
227-
</Grid.Column>
228-
<Grid.Column widthMD={Columns.Three}>
229-
<Form.Label label="Blocked Notification Endpoints" />
230-
<LimitsField
231-
type={InputType.Text}
232-
name="notificationEndpoint.blockedNotificationEndpoints"
233-
limits={limits}
234-
onChangeLimits={setLimits}
235-
/>
236-
</Grid.Column>
237-
</Grid.Row>
238-
</SpinnerContainer>
239-
</Grid>
115+
<SpinnerContainer
116+
loading={limitsStatus}
117+
spinnerComponent={<TechnoSpinner diameterPixels={100} />}
118+
testID="limits-spinner-container"
119+
>
120+
<Grid.Row>
121+
<h4>Limits</h4>
122+
<Grid.Column widthMD={Columns.Four}>
123+
<Form.Label label="Read (KBs)" testID="read-kbs" />
124+
<LimitsField
125+
type={InputType.Number}
126+
name="rate.readKBs"
127+
limits={limits}
128+
onChangeLimits={setLimits}
129+
/>
130+
</Grid.Column>
131+
<Grid.Column widthMD={Columns.Four}>
132+
<Form.Label label="Write (KBs)" />
133+
<LimitsField
134+
type={InputType.Number}
135+
name="rate.writeKBs"
136+
limits={limits}
137+
onChangeLimits={setLimits}
138+
/>
139+
</Grid.Column>
140+
<Grid.Column widthMD={Columns.Four}>
141+
<Form.Label label="Series Cardinality" />
142+
<LimitsField
143+
type={InputType.Number}
144+
name="rate.cardinality"
145+
limits={limits}
146+
onChangeLimits={setLimits}
147+
/>
148+
</Grid.Column>
149+
</Grid.Row>
150+
<Grid.Row>
151+
<Grid.Column widthMD={Columns.Four}>
152+
<Form.Label label="Query Time (seconds)" />
153+
<LimitsField
154+
type={InputType.Number}
155+
name="rate.queryTime"
156+
limits={limits}
157+
onChangeLimits={setLimits}
158+
/>
159+
</Grid.Column>
160+
</Grid.Row>
161+
<Grid.Row>
162+
<Grid.Column widthMD={Columns.Four}>
163+
<Form.Label label="Max Buckets" />
164+
<LimitsField
165+
type={InputType.Number}
166+
name="bucket.maxBuckets"
167+
limits={limits}
168+
onChangeLimits={setLimits}
169+
/>
170+
</Grid.Column>
171+
<Grid.Column widthMD={Columns.Four}>
172+
<Form.Label label="Max Retention Duration (hours)" />
173+
<LimitsField
174+
type={InputType.Number}
175+
name="bucket.maxRetentionDuration"
176+
limits={limits}
177+
onChangeLimits={setLimits}
178+
/>
179+
</Grid.Column>
180+
<Grid.Column widthMD={Columns.Four}>
181+
<Form.Label label="Max Notifications" />
182+
<LimitsField
183+
type={InputType.Number}
184+
name="notificationRule.maxNotifications"
185+
limits={limits}
186+
onChangeLimits={setLimits}
187+
/>
188+
</Grid.Column>
189+
</Grid.Row>
190+
<Grid.Row>
191+
<Grid.Column widthMD={Columns.Four}>
192+
<Form.Label label="Max Dashboards" />
193+
<LimitsField
194+
type={InputType.Number}
195+
name="dashboard.maxDashboards"
196+
limits={limits}
197+
onChangeLimits={setLimits}
198+
/>
199+
</Grid.Column>
200+
<Grid.Column widthMD={Columns.Four}>
201+
<Form.Label label="Max Tasks" />
202+
<LimitsField
203+
type={InputType.Number}
204+
name="task.maxTasks"
205+
limits={limits}
206+
onChangeLimits={setLimits}
207+
/>
208+
</Grid.Column>
209+
<Grid.Column widthMD={Columns.Four}>
210+
<Form.Label label="Max Checks" />
211+
<LimitsField
212+
type={InputType.Number}
213+
name="check.maxChecks"
214+
limits={limits}
215+
onChangeLimits={setLimits}
216+
/>
217+
</Grid.Column>
218+
</Grid.Row>
219+
<Grid.Row>
220+
<h4>Notification Rules</h4>
221+
<Grid.Column widthMD={Columns.Four}>
222+
<Form.Label label="Blocked Notification Rules" />
223+
<LimitsField
224+
type={InputType.Text}
225+
name="notificationRule.blockedNotificationRules"
226+
limits={limits}
227+
onChangeLimits={setLimits}
228+
/>
229+
</Grid.Column>
230+
<Grid.Column widthMD={Columns.Four}>
231+
<Form.Label label="Blocked Notification Endpoints" />
232+
<LimitsField
233+
type={InputType.Text}
234+
name="notificationEndpoint.blockedNotificationEndpoints"
235+
limits={limits}
236+
onChangeLimits={setLimits}
237+
/>
238+
</Grid.Column>
239+
</Grid.Row>
240+
</SpinnerContainer>
241+
</Grid>
242+
</Panel.Body>
240243
</Overlay.Body>
241244
<Overlay.Footer>
242245
{hasWritePermissions && (

0 commit comments

Comments
 (0)