Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Api State Removal - UI Passing Secret Name and Namespace Params #845

Merged
merged 4 commits into from
Aug 26, 2024
Merged

Api State Removal - UI Passing Secret Name and Namespace Params #845

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
05862e5
Passing `secret_name` and `secret_namespace` headers to UI
ralikio Aug 23, 2024
7da160e
Unnecessary Addition
ralikio Aug 23, 2024
17d421d
Update 09-10-ui.md
ralikio Aug 26, 2024
ac59b24
Merge branch 'sm-integration' into features/ui-secret-headers
MarekMichali Aug 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/contributor/09-10-ui.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ Follow the steps below to run BTP Manager with UI:
```
3. Set the **IMG** environment variable to the image of BTP Manager with UI.
```shell
export IMG=europe-docker.pkg.dev/kyma-project/dev/btp-manager:PR-843
export IMG=europe-docker.pkg.dev/kyma-project/dev/btp-manager:PR-845
```
4. Run `deploy` makefile rule to deploy BTP Manager with UI.
```shell
Expand All @@ -42,7 +42,7 @@ Follow the steps below to run BTP Manager with UI:
```
If you encounter the following error during Pod creation due to Warden's admission webhook:
```
Error creating: admission webhook "validation.webhook.warden.kyma-project.io" denied the request: Pod images europe-docker.pkg.dev/kyma-project/dev/btp-manager:PR-843 validation failed
Error creating: admission webhook "validation.webhook.warden.kyma-project.io" denied the request: Pod images europe-docker.pkg.dev/kyma-project/dev/btp-manager:PR-845 validation failed
```
you must scale the BTP Manager deployment to 0 replicas, delete the webhook, and then scale the deployment back to 1 replica.
```shell
Expand Down
16 changes: 13 additions & 3 deletions ui/src/components/CreateBindingForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,12 +35,18 @@ function CreateBindingForm(props: any) {
service_instance_id: createdBinding.service_instance_id,
secret_name: createdBinding.secret_name,
secret_namespace: createdBinding.secret_namespace
}, {
params:
{
secret_name: props.secret!!.name,
secret_namespace: props.secret!!.namespace
}
})
.then((response) => {

// propagate the created binding
props.onCreate(response.data);

// reset binding
const binding = new ServiceInstanceBinding()
binding.name = props.instanceName
Expand Down Expand Up @@ -72,6 +78,10 @@ function CreateBindingForm(props: any) {
return;
}

if (!Ok(props.secret) || !Ok(props.secret.name) || !Ok(props.secret.namespace)) {
return;
}

setLoading(true)

setLoading(false)
Expand All @@ -82,7 +92,7 @@ function CreateBindingForm(props: any) {
createdBinding.secret_namespace = "default"
setCreatedBinding(createdBinding)

}, [createdBinding, props.instanceId, props.instanceName, props.onCreate]);
}, [createdBinding, props.instanceId, props.instanceName, props.onCreate, props.secret]);

const renderData = () => {

Expand Down
23 changes: 16 additions & 7 deletions ui/src/components/CreateInstanceForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,22 +37,27 @@ function CreateInstanceForm(props: any) {

var createdJson = {
id: createServiceInstance?.id,
name: createServiceInstance?.name,
service_plan_id: createServiceInstance?.service_plan_id,
labels: createServiceInstance?.labels,
name: createServiceInstance?.name,
service_plan_id: createServiceInstance?.service_plan_id,
labels: createServiceInstance?.labels,
parameters: {}
}

if(createServiceInstance?.parameters !== undefined) {
if (createServiceInstance?.parameters !== undefined) {
createdJson.parameters = JSON.parse(createServiceInstance?.parameters)
}

axios
.post<CreateServiceInstance>(api("service-instances"), createdJson)
.post<CreateServiceInstance>(api("service-instances"), createdJson, {
params:
{
secret_name: props.secret!!.name,
secret_namespace: props.secret!!.namespace
}
})
.then((response) => {
setLoading(false);
setSuccess("Item with id " + response.data.name + " created, redirecting to instances page...");
setCreateServiceInstance(new CreateServiceInstance());

setTimeout(() => {
navigate("/instances/" + response.data.id);
Expand All @@ -76,6 +81,10 @@ function CreateInstanceForm(props: any) {
return;
}

if (!Ok(props.secret) || !Ok(props.secret.name) || !Ok(props.secret.namespace)) {
return;
}

var createServiceInstance = new CreateServiceInstance();
createServiceInstance.name = generateServiceInstanceName(
props.plan?.name,
Expand All @@ -86,7 +95,7 @@ function CreateInstanceForm(props: any) {

setCreateServiceInstance(createServiceInstance);

}, [props.plan, props.offering]);
}, [props.plan, props.offering, props.secret]);

function refresh(addedValue: string[]) {
var allLabels = [...labels, ...addedValue]
Expand Down
34 changes: 20 additions & 14 deletions ui/src/components/SecretsView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,21 +29,27 @@ function SecretsView({ onSecretChanged }: { onSecretChanged: (secret: string) =>
const secret = formatSecretText(response.data.items[0].name, response.data.items[0].namespace)
setSelectedSecret(secret);
axios
.get<ServiceOfferings>(api(`service-offerings/${response.data.items[0].namespace}/${response.data.items[0].name}`))
.get<ServiceOfferings>(api(`service-offerings/${response.data.items[0].namespace}/${response.data.items[0].name}`), {
params:
{
secret_name: response.data.items[0].name,
secret_namespace: response.data.items[0].namespace
}
})
.then(() => {
setSecretConnection(true);
})
.catch(() => {
setSecretConnection(false);
});
}
}
})
.catch((error) => {
setLoading(false);
setError(error);
setSecrets(undefined);
});
setLoading(false);
});
setLoading(false);
}, []);

useEffect(() => {
Expand All @@ -70,8 +76,8 @@ function SecretsView({ onSecretChanged }: { onSecretChanged: (secret: string) =>
});
} else {
onSecretChanged(formatSecretText("", ""));
}
}

} else {
onSecretChanged(formatSecretText("", ""));
}
Expand All @@ -82,10 +88,10 @@ function SecretsView({ onSecretChanged }: { onSecretChanged: (secret: string) =>
setSecrets(undefined);
onSecretChanged(formatSecretText("", ""));
});
setLoading(false);

setLoading(false);
}, [onSecretChanged, selectedSecretName, selectedSecretNamespace]);

const fetchSecrets = () => {
setLoading(true);
axios
Expand All @@ -100,7 +106,7 @@ function SecretsView({ onSecretChanged }: { onSecretChanged: (secret: string) =>
setSecrets(undefined);
onSecretChanged(formatSecretText("", ""));
});
setLoading(false);
setLoading(false);
};

if (error) {
Expand All @@ -113,7 +119,7 @@ function SecretsView({ onSecretChanged }: { onSecretChanged: (secret: string) =>
}

const renderData = () => {

// @ts-ignore
if (!Ok(secrets) || !Ok(secrets.items)) {
return <ui5.MenuItem text={formatSecretText("", "")} />
Expand Down Expand Up @@ -141,18 +147,18 @@ function SecretsView({ onSecretChanged }: { onSecretChanged: (secret: string) =>
}}
id="openMenu"
>
Select a secret
Select a secret
</Button>

<Menu
opener="openMenu"
onAfterClose={function _a() {setIsOpen(false)}}
onAfterClose={function _a() { setIsOpen(false) }}
onAfterOpen={function _a() { }}
onBeforeClose={function _a() { }}
onBeforeOpen={function _a() { }}
onItemClick={(event) => {
const secretName = event.detail.item.dataset.secretName;
const secretNamespace = event.detail.item.dataset.secretNamespace;
const secretNamespace = event.detail.item.dataset.secretNamespace;
if (secretName && secretNamespace) {
setSelectedSecret(formatSecretText(secretName, secretNamespace));
setSelectedSecretName(secretName);
Expand Down
98 changes: 58 additions & 40 deletions ui/src/components/ServiceBindingsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import Ok from "../shared/validator";
import serviceInstancesData from '../test-data/service-bindings.json';
import StatusMessage from "./StatusMessage";

const ServiceBindingsList= forwardRef((props: any, ref) => {
const ServiceBindingsList = forwardRef((props: any, ref) => {
const [bindings, setServiceInstanceBindings] = useState<ServiceInstanceBindings>(new ServiceInstanceBindings());

const [loading, setLoading] = useState(true);
Expand All @@ -17,7 +17,7 @@ const ServiceBindingsList= forwardRef((props: any, ref) => {

useImperativeHandle(ref, () => ({

add(binding : ServiceInstanceBinding) {
add(binding: ServiceInstanceBinding) {
bindings?.items.push(binding);
console.log(bindings)
const newbindings = new ServiceInstanceBindings();
Expand All @@ -31,9 +31,14 @@ const ServiceBindingsList= forwardRef((props: any, ref) => {
setLoading(true);

axios
.delete(api("service-bindings") + "/" + id)
.delete(api("service-bindings") + "/" + id, {
params: {
secret_name: props.secret.name,
secret_namespace: props.secret.namespace
}
})
.then((response) => {
bindings!!.items = bindings!!.items.filter(instance=> instance.id !== id)
bindings!!.items = bindings!!.items.filter(instance => instance.id !== id)
setServiceInstanceBindings(bindings);
setLoading(false);
setError(undefined);
Expand All @@ -48,6 +53,12 @@ const ServiceBindingsList= forwardRef((props: any, ref) => {

useEffect(() => {
setLoading(true)

if (!Ok(props.secret) || !Ok(props.secret.name) || !Ok(props.secret.namespace)) {
setServiceInstanceBindings(new ServiceInstanceBindings());
return;
}

if (!Ok(props.instance)) {
setServiceInstanceBindings(new ServiceInstanceBindings());
return;
Expand All @@ -57,18 +68,25 @@ const ServiceBindingsList= forwardRef((props: any, ref) => {
setServiceInstanceBindings(new ServiceInstanceBindings());
return;
}

var useTestData = process.env.REACT_APP_USE_TEST_DATA === "true"
if (!useTestData) {
axios
.get<ServiceInstanceBindings>(api("service-bindings"),
{ params: { service_instance_id: props.instance.id } }
{
params:
{
service_instance_id: props.instance.id,
secret_name: props.secret.name,
secret_namespace: props.secret.namespace
}
}
)
.then((response) => {
if (Ok(response.data)) {
setServiceInstanceBindings(response.data);
} else {
setServiceInstanceBindings(new ServiceInstanceBindings());
setServiceInstanceBindings(new ServiceInstanceBindings());
}
setError(undefined);
setLoading(false);
Expand All @@ -82,7 +100,7 @@ const ServiceBindingsList= forwardRef((props: any, ref) => {
setServiceInstanceBindings(serviceInstancesData)
setLoading(false);
}
}, [props.instance]);
}, [props.instance, props.instance.id, props.secret]);

if (loading) {
return <ui5.BusyIndicator
Expand All @@ -99,43 +117,43 @@ const ServiceBindingsList= forwardRef((props: any, ref) => {
}
return bindings?.items.map((binding, index) => {
return (
<ui5.TableRow>

<ui5.TableCell>
<ui5.Label>{binding.id}</ui5.Label>
</ui5.TableCell>

<ui5.TableCell>
<ui5.Label>{binding.name}</ui5.Label>
</ui5.TableCell>

<ui5.TableCell>
<ui5.Label>{binding.secret_name}</ui5.Label>
</ui5.TableCell>

<ui5.TableCell>
<ui5.Label>{binding.secret_namespace}</ui5.Label>
</ui5.TableCell>

<ui5.TableCell>
<ui5.Button
design="Default"
icon="delete"
onClick={function _a(e: any) {
e.stopPropagation();
return deleteBinding(binding.id);
}}
>
</ui5.Button>
</ui5.TableCell>

</ui5.TableRow>
<ui5.TableRow>

<ui5.TableCell>
<ui5.Label>{binding.id}</ui5.Label>
</ui5.TableCell>

<ui5.TableCell>
<ui5.Label>{binding.name}</ui5.Label>
</ui5.TableCell>

<ui5.TableCell>
<ui5.Label>{binding.secret_name}</ui5.Label>
</ui5.TableCell>

<ui5.TableCell>
<ui5.Label>{binding.secret_namespace}</ui5.Label>
</ui5.TableCell>

<ui5.TableCell>
<ui5.Button
design="Default"
icon="delete"
onClick={function _a(e: any) {
e.stopPropagation();
return deleteBinding(binding.id);
}}
>
</ui5.Button>
</ui5.TableCell>

</ui5.TableRow>
);
});
};

if (!Ok(bindings) || !Ok(bindings.items)) {
return <ui5.IllustratedMessage name="NoEntries" size="Dot"/>
return <ui5.IllustratedMessage name="NoEntries" size="Dot" />
}

return (
Expand Down
Loading
Loading