Skip to content

Commit

Permalink
web: general quality of life improvements (#1426)
Browse files Browse the repository at this point in the history 
* web: dont allow adding dns records when the zone cant store records (no etcd handler)

* better label for A records

* add docs links

* simplify bindings

* show zone when creating dns record

* add text when zone cant store records

* remove username from page header
  • Loading branch information
@BeryJu
BeryJu authored Jan 10, 2025
1 parent 3f9f244 commit a8d4095
Show file tree
Hide file tree
Showing 26 changed files with 169 additions and 119 deletions.
4 changes: 2 additions & 2 deletions web/src/App.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,13 +180,13 @@ export class AdminInterface extends AKElement {
<ak-sidebar-item path="/overview">
<span slot="label">Overview</span>
</ak-sidebar-item>
<ak-sidebar-item .expanded=${true}>
<ak-sidebar-item expanded>
<span slot="label">DNS</span>
<ak-sidebar-item path="/dns/zones" .activeWhen=${["^/dns/zones/(?<zone>.*)$"]}>
<span slot="label">Zones</span>
</ak-sidebar-item>
</ak-sidebar-item>
<ak-sidebar-item .expanded=${true}>
<ak-sidebar-item expanded>
<span slot="label">DHCP</span>
<ak-sidebar-item path="/dhcp/scopes" .activeWhen=${["^/dhcp/scopes/(?<scope>.*)$"]}>
<span slot="label">Scopes</span>
Expand Down
2 changes: 1 addition & 1 deletion web/src/elements/forms/ModalForm.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export class ModalForm extends ModalButton {

renderModalInner(): TemplateResult {
return html`${this.loading
? html`<ak-loading-overlay ?topMost=${true}></ak-loading-overlay>`
? html`<ak-loading-overlay topMost></ak-loading-overlay>`
: html``}
<section class="pf-c-modal-box__header pf-c-page__main-section pf-m-light">
<div class="pf-c-content">
Expand Down
2 changes: 1 addition & 1 deletion web/src/elements/router/Route.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export class Route {
if (this.callback) {
return html`${until(
this.callback(args),
html`<ak-empty-state ?loading=${true}></ak-empty-state>`,
html`<ak-empty-state loading></ak-empty-state>`,
)}`;
}
if (this.element) {
Expand Down
2 changes: 1 addition & 1 deletion web/src/elements/table/Table.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -221,7 +221,7 @@ export abstract class Table<T extends object> extends AKElement {
return html`<tr role="row">
<td role="cell" colspan="25">
<div class="pf-l-bullseye">
<ak-empty-state ?loading="${true}" header=${"Loading"}> </ak-empty-state>
<ak-empty-state loading header=${"Loading"}> </ak-empty-state>
</div>
</td>
</tr>`;
Expand Down
2 changes: 1 addition & 1 deletion web/src/pages/auth/AuthTokenForm.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export class AuthTokenForm extends Form<AuthAPIToken> {
};

renderForm(): TemplateResult {
return html` <ak-form-element-horizontal label="User" ?required=${true} name="username">
return html` <ak-form-element-horizontal label="User" required name="username">
<select class="pf-c-form-control">
${until(
new RolesApiApi(DEFAULT_CONFIG).apiGetUsers().then((users) => {
Expand Down
6 changes: 1 addition & 5 deletions web/src/pages/auth/AuthUserForm.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,11 +49,7 @@ export class AuthUserForm extends ModelForm<AuthAPIUser, string> {
renderForm(): TemplateResult {
return html` ${this.instance
? html``
: html`<ak-form-element-horizontal
label="Username"
?required=${true}
name="username"
>
: html`<ak-form-element-horizontal label="Username" required name="username">
<input type="text" class="pf-c-form-control" required />
</ak-form-element-horizontal>`}
<ak-form-element-horizontal
Expand Down
28 changes: 10 additions & 18 deletions web/src/pages/cluster/RoleAPIConfigForm.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,15 +40,15 @@ export class RoleAPIConfigForm extends ModelForm<ApiRoleConfig, string> {
};

renderForm(): TemplateResult {
return html` <ak-form-element-horizontal label="Port" ?required=${true} name="port">
return html` <ak-form-element-horizontal label="Port" required name="port">
<input
type="number"
value="${first(this.instance?.port, 8008)}"
class="pf-c-form-control"
required
/>
</ak-form-element-horizontal>
<ak-form-element-horizontal label="Cookie Secret" ?required=${true} name="cookieSecret">
<ak-form-element-horizontal label="Cookie Secret" required name="cookieSecret">
<input
type="text"
value="${ifDefined(this.instance?.cookieSecret)}"
Expand All @@ -59,7 +59,7 @@ export class RoleAPIConfigForm extends ModelForm<ApiRoleConfig, string> {
</ak-form-element-horizontal>
<ak-form-element-horizontal
label="Session Duration"
?required=${true}
required
name="sessionDuration"
helperText="Duration for which a session is valid for."
>
Expand All @@ -69,10 +69,10 @@ export class RoleAPIConfigForm extends ModelForm<ApiRoleConfig, string> {
required
/>
</ak-form-element-horizontal>
<ak-form-group ?expanded=${true}>
<ak-form-group expanded>
<span slot="header">OIDC</span>
<div slot="body" class="pf-c-form">
<ak-form-element-horizontal label="Issuer" ?required=${true} name="oidc.issuer">
<ak-form-element-horizontal label="Issuer" required name="oidc.issuer">
<input
type="text"
value="${ifDefined(this.instance?.oidc?.issuer)}"
Expand All @@ -84,11 +84,7 @@ export class RoleAPIConfigForm extends ModelForm<ApiRoleConfig, string> {
"".well-known/openid-configuration" suffix is removed.
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label="Client ID"
?required=${true}
name="oidc.clientID"
>
<ak-form-element-horizontal label="Client ID" required name="oidc.clientID">
<input
type="text"
value="${ifDefined(this.instance?.oidc?.clientID)}"
Expand All @@ -98,7 +94,7 @@ export class RoleAPIConfigForm extends ModelForm<ApiRoleConfig, string> {
</ak-form-element-horizontal>
<ak-form-element-horizontal
label="Client Secret"
?required=${true}
required
name="oidc.clientSecret"
>
<input
Expand All @@ -110,7 +106,7 @@ export class RoleAPIConfigForm extends ModelForm<ApiRoleConfig, string> {
</ak-form-element-horizontal>
<ak-form-element-horizontal
label="Redirect URL"
?required=${true}
required
name="oidc.redirectURL"
>
<input
Expand All @@ -128,11 +124,7 @@ export class RoleAPIConfigForm extends ModelForm<ApiRoleConfig, string> {
instance's name and '$INSTANCE_IP' will be replaced by the instances IP.
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label="Scopes"
?required=${true}
name="oidc.scopesList"
>
<ak-form-element-horizontal label="Scopes" required name="oidc.scopesList">
<input
type="text"
value="${first(
Expand All @@ -148,7 +140,7 @@ export class RoleAPIConfigForm extends ModelForm<ApiRoleConfig, string> {
</ak-form-element-horizontal>
<ak-form-element-horizontal
label="Token username field"
?required=${true}
required
name="oidc.tokenUsernameField"
helperText="Field in JWT tokens used to lookup user when using Token API authentication."
>
Expand Down
16 changes: 6 additions & 10 deletions web/src/pages/cluster/RoleBackupConfigForm.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,7 @@ export class RoleBackupConfigForm extends ModelForm<BackupRoleConfig, string> {
};

renderForm(): TemplateResult {
return html` <ak-form-element-horizontal
label="Cron Schedule"
?required=${true}
name="cronExpr"
>
return html` <ak-form-element-horizontal label="Cron Schedule" required name="cronExpr">
<input
type="text"
value="${ifDefined(this.instance?.cronExpr)}"
Expand All @@ -45,7 +41,7 @@ export class RoleBackupConfigForm extends ModelForm<BackupRoleConfig, string> {
/>
<p class="pf-c-form__helper-text">Cron backup schedule</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal label="Endpoint" ?required=${true} name="endpoint">
<ak-form-element-horizontal label="Endpoint" required name="endpoint">
<input
type="text"
value="${ifDefined(this.instance?.endpoint)}"
Expand All @@ -54,31 +50,31 @@ export class RoleBackupConfigForm extends ModelForm<BackupRoleConfig, string> {
/>
<p class="pf-c-form__helper-text">S3 Endpoint, including schema.</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal label="Bucket" ?required=${true} name="bucket">
<ak-form-element-horizontal label="Bucket" required name="bucket">
<input
type="text"
value="${ifDefined(this.instance?.bucket)}"
class="pf-c-form-control"
required
/>
</ak-form-element-horizontal>
<ak-form-element-horizontal label="Access key" ?required=${true} name="accessKey">
<ak-form-element-horizontal label="Access key" required name="accessKey">
<input
type="text"
value="${ifDefined(this.instance?.accessKey)}"
class="pf-c-form-control"
required
/>
</ak-form-element-horizontal>
<ak-form-element-horizontal label="Secret Key" ?required=${true} name="secretKey">
<ak-form-element-horizontal label="Secret Key" required name="secretKey">
<input
type="text"
value="${ifDefined(this.instance?.secretKey)}"
class="pf-c-form-control"
required
/>
</ak-form-element-horizontal>
<ak-form-element-horizontal label="Path" ?required=${true} name="path">
<ak-form-element-horizontal label="Path" required name="path">
<input
type="text"
value="${ifDefined(this.instance?.path)}"
Expand Down
4 changes: 2 additions & 2 deletions web/src/pages/cluster/RoleDHCPConfigForm.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export class RoleDHCPConfigForm extends ModelForm<DhcpRoleConfig, string> {
};

renderForm(): TemplateResult {
return html` <ak-form-element-horizontal label="Port" ?required=${true} name="port">
return html` <ak-form-element-horizontal label="Port" required name="port">
<input
type="number"
value="${first(this.instance?.port, 67)}"
Expand All @@ -42,7 +42,7 @@ export class RoleDHCPConfigForm extends ModelForm<DhcpRoleConfig, string> {
</ak-form-element-horizontal>
<ak-form-element-horizontal
label="Lease negotiation timeout"
?required=${true}
required
name="leaseNegotiateTimeout"
>
<input
Expand Down
2 changes: 1 addition & 1 deletion web/src/pages/cluster/RoleDNSConfigForm.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export class RoleDNSConfigForm extends ModelForm<DnsRoleConfig, string> {
};

renderForm(): TemplateResult {
return html` <ak-form-element-horizontal label="Port" ?required=${true} name="port">
return html` <ak-form-element-horizontal label="Port" required name="port">
<input
type="number"
value="${first(this.instance?.port, 53)}"
Expand Down
2 changes: 1 addition & 1 deletion web/src/pages/cluster/RoleMonitoringConfigForm.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export class RoleMonitoringConfigForm extends ModelForm<MonitoringRoleConfig, st
};

renderForm(): TemplateResult {
return html` <ak-form-element-horizontal label="Port" ?required=${true} name="port">
return html` <ak-form-element-horizontal label="Port" required name="port">
<input
type="number"
value="${first(this.instance?.port, 8009)}"
Expand Down
2 changes: 1 addition & 1 deletion web/src/pages/cluster/RoleTFTPConfigForm.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export class RoleTFTPConfigForm extends ModelForm<TftpRoleConfig, string> {
};

renderForm(): TemplateResult {
return html`<ak-form-element-horizontal label="Port" ?required=${true} name="port">
return html`<ak-form-element-horizontal label="Port" required name="port">
<input type="number" value="${first(this.instance?.port, 69)}" required />
</ak-form-element-horizontal>
<ak-form-element-horizontal name="enableLocal">
Expand Down
4 changes: 2 additions & 2 deletions web/src/pages/cluster/RoleTSDBConfigForm.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export class RoleTSDBConfigForm extends ModelForm<TsdbRoleConfig, string> {
<label class="pf-c-check__label"> ${"Enabled"} </label>
</div>
</ak-form-element-horizontal>
<ak-form-element-horizontal label="Metrics expiry" ?required=${true} name="expire">
<ak-form-element-horizontal label="Metrics expiry" required name="expire">
<input
type="number"
value="${first(this.instance?.expire, 60 * 30)}"
Expand All @@ -53,7 +53,7 @@ export class RoleTSDBConfigForm extends ModelForm<TsdbRoleConfig, string> {
Time in seconds before oldest metrics are deleted. Defaults to 30 minutes.
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal label="Scrape interval" ?required=${true} name="scrape">
<ak-form-element-horizontal label="Scrape interval" required name="scrape">
<input
type="number"
value="${first(this.instance?.scrape, 30)}"
Expand Down
6 changes: 3 additions & 3 deletions web/src/pages/cluster/wizard/ClusterJoinInitial.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,19 +43,19 @@ export class ClusterJoinInitial extends WizardFormPage {
};

renderForm(): TemplateResult {
return html`<ak-form-element-horizontal label=${"Name"} ?required=${true} name="name">
return html`<ak-form-element-horizontal label=${"Name"} required name="name">
<input type="text" value="" class="pf-c-form-control" required />
<p class="pf-c-form__helper-text">
The unique identifier of the node being added to the cluster.
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal label=${"Roles"} ?required=${true}>
<ak-form-element-horizontal label=${"Roles"} required>
${Roles.map((role) => {
return html`<div class="pf-c-check">
<input
type="checkbox"
class="pf-c-check__input"
?checked=${true}
checked
name=${`role_${role.id}`}
/>
<label class="pf-c-check__label"> ${role.name} </label>
Expand Down
6 changes: 3 additions & 3 deletions web/src/pages/dhcp/DHCPLeaseForm.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,23 +64,23 @@ export class DHCPLeaseForm extends ModelForm<DhcpAPILease, string> {

renderForm(): TemplateResult {
return html`
<ak-form-element-horizontal label="Identifier" ?required=${true} name="identifier">
<ak-form-element-horizontal label="Identifier" required name="identifier">
<input
type="text"
value="${ifDefined(this.instance?.identifier)}"
class="pf-c-form-control"
required
/>
</ak-form-element-horizontal>
<ak-form-element-horizontal label="Address" ?required=${true} name="address">
<ak-form-element-horizontal label="Address" required name="address">
<input
type="text"
value="${ifDefined(this.instance?.address)}"
class="pf-c-form-control"
required
/>
</ak-form-element-horizontal>
<ak-form-element-horizontal label="Hostname" ?required=${true} name="hostname">
<ak-form-element-horizontal label="Hostname" required name="hostname">
<input
type="text"
value="${ifDefined(this.instance?.hostname)}"
Expand Down
Loading

0 comments on commit a8d4095

Please sign in to comment.