Skip to content

Commit fbe1c96

Browse files
datho7561datho7561
committed
Add UI to create service binding
Right click on a component in the components view and select "Bind Service" in order to bind the component to an Operator-backed service. In order for this to work: - the service binding operator must be installed on the cluster - an operator that manages instances of services must be installed (I tested with the RHOAS operator) - there must be an instance of the service that is managed by the operator in the current project Other things in this PR: - Add a walkthrough GIF of using the UI - Add a smoke test to check that the "Bind Service" context menu item exists - Fix the smoke tests. This includes fixing the existing test case for #2780, even though we are going to rewrite that as a WebView UI soon. I did this, since for the "Bind Service" smoke test, we need a component present in the components view. Signed-off-by: David Thompson <davthomp@redhat.com>
1 parent c760ed8 commit fbe1c96

File tree

19 files changed

+652
-43
lines changed

19 files changed

+652
-43
lines changed

‎.eslintignore‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ test-resources
99
src/webview/log
1010
src/webview/describe
1111
src/webview/cluster
12-
src/webview/webpack.config.js
1312
out
1413
src/webview/common
1514
src/webview/create-service

‎build/esbuild.mjs‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ const webviews = [
1616
'helm-chart',
1717
'log',
1818
'welcome',
19-
'feedback'
19+
'feedback',
20+
'add-service-binding',
2021
];
2122

2223
function kebabToCamel(text) {

‎images/walkthrough/addServiceBinding.gif‎

2.45 MB
Loading

‎package.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -464,6 +464,11 @@
464464
"title": "Start Dev",
465465
"category": "OpenShift"
466466
},
467+
{
468+
"command": "openshift.component.binding.add",
469+
"title": "Bind Service",
470+
"category": "OpenShift"
471+
},
467472
{
468473
"command": "openshift.component.exitDevMode",
469474
"title": "Stop Dev",
@@ -1093,6 +1098,10 @@
10931098
{
10941099
"command": "openshift.component.openInBrowser",
10951100
"when": "false"
1101+
},
1102+
{
1103+
"command": "openshift.component.binding.add",
1104+
"when": "false"
10961105
}
10971106
],
10981107
"view/title": [
@@ -1333,6 +1342,11 @@
13331342
"when": "view == openshiftComponentsView && viewItem =~ /openshift\\.component.*\\.dep-nrn.*/ || viewItem =~ /openshift\\.component.*\\.dep-run.*/",
13341343
"group": "c2@1"
13351344
},
1345+
{
1346+
"command": "openshift.component.binding.add",
1347+
"when": "view == openshiftComponentsView && viewItem =~ /openshift\\.component.*\\.dev-nrn.*/",
1348+
"group": "c2@2"
1349+
},
13361350
{
13371351
"command": "openshift.component.showDevTerminal",
13381352
"when": "view == openshiftComponentsView && viewItem =~ /openshift\\.component.*\\.dev-run.*/",

‎src/odo.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ export interface Odo {
8989
*/
9090
getActiveProject(): Promise<string>;
9191

92-
/*
92+
/**
9393
* Deletes all the odo configuration files associated with the component (`.odo`, `devfile.yaml`) located at the given path.
9494
*
9595
* @param componentPath the path to the component

‎src/odo/command.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -315,4 +315,21 @@ export class Command {
315315
static canCreatePod(): CommandText {
316316
return new CommandText('oc auth can-i create pod');
317317
}
318+
319+
static addBinding(serviceNamespace: string, serviceName: string, bindingName: string): CommandText {
320+
return new CommandText('odo add binding',
321+
undefined,
322+
[
323+
new CommandOption('--service-namespace', serviceNamespace, false),
324+
new CommandOption('--service', serviceName, false),
325+
new CommandOption('--name', bindingName, false),
326+
]
327+
)
328+
}
329+
330+
static getBindableServices(): CommandText {
331+
return new CommandText('odo list service',
332+
undefined,
333+
[new CommandOption('-o json')]);
334+
}
318335
}

‎src/odo3.ts‎

Lines changed: 68 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
import { KubernetesObject } from '@kubernetes/client-node';
77
import { CommandText } from './base/command';
8-
import { CliChannel } from './cli';
8+
import { CliChannel, CliExitData } from './cli';
99
import { Command as CommonCommand, loadItems } from './k8s/common';
1010
import { Command as DeploymentCommand } from './k8s/deployment';
1111
import { DeploymentConfig } from './k8s/deploymentConfig';
@@ -20,6 +20,30 @@ export interface Odo3 {
2020
setNamespace(newNamespace: string): Promise<void>;
2121

2222
describeComponent(contextPath: string): Promise<ComponentDescription | undefined>;
23+
24+
/**
25+
* Bind a component to a bindable service by modifying the devfile
26+
*
27+
* Resolves when the binding it created.
28+
*
29+
* @param contextPath the path to the component
30+
* @param serviceName the name of the service to bind to
31+
* @param serviceNamespace the namespace the the service is in
32+
* @param bindingName the name of the service binding
33+
*/
34+
addBinding(
35+
contextPath: string,
36+
serviceName: string,
37+
serviceNamespace: string,
38+
bindingName: string,
39+
): Promise<void>;
40+
41+
/**
42+
* Returns a list of all the bindable services on the cluster.
43+
*
44+
* @returns a list of all the bindable services on the cluster
45+
*/
46+
getBindableServices(): Promise<KubernetesObject[]>;
2347
}
2448

2549
export class Odo3Impl implements Odo3 {
@@ -69,6 +93,49 @@ export class Odo3Impl implements Odo3 {
6993
// ignore and return undefined
7094
}
7195
}
96+
97+
async addBinding(contextPath: string, serviceNamespace: string, serviceName: string, bindingName: string) {
98+
const myCommand = Command.addBinding(serviceNamespace, serviceName, bindingName);
99+
await CliChannel.getInstance().executeTool(
100+
myCommand,
101+
{cwd: contextPath},
102+
true
103+
);
104+
}
105+
106+
async getBindableServices(): Promise<KubernetesObject[]> {
107+
const data: CliExitData = await CliChannel.getInstance().executeTool(
108+
Command.getBindableServices()
109+
);
110+
let responseObj;
111+
try {
112+
responseObj = JSON.parse(data.stdout);
113+
} catch {
114+
throw new Error(JSON.parse(data.stderr).message);
115+
}
116+
if (!responseObj.bindableServices) {
117+
return [];
118+
}
119+
return (responseObj.bindableServices as BindableService[]) //
120+
.map(obj => {
121+
return {
122+
kind: obj.kind,
123+
apiVersion: obj.apiVersion,
124+
metadata: {
125+
namespace: obj.namespace,
126+
name: obj.name,
127+
}
128+
} as KubernetesObject;
129+
});
130+
}
131+
}
132+
133+
interface BindableService {
134+
name: string;
135+
namespace: string;
136+
kind: string;
137+
apiVersion: string;
138+
service: string;
72139
}
73140

74141
export function newInstance(): Odo3 {

‎src/openshift/component.ts‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,12 @@ import { Command } from '../odo/command';
1515
import { ComponentTypeAdapter, ComponentTypeDescription, DevfileComponentType, ascDevfileFirst, isDevfileComponent } from '../odo/componentType';
1616
import { StarterProject, isStarterProject } from '../odo/componentTypeDescription';
1717
import { ComponentWorkspaceFolder } from '../odo/workspace';
18+
import * as odo3 from '../odo3';
1819
import { NewComponentCommandProps } from '../telemetry';
1920
import { Progress } from '../util/progress';
2021
import { selectWorkspaceFolder } from '../util/workspace';
2122
import { VsCommandError, vsCommand } from '../vscommand';
23+
import AddServiceBindingViewLoader, { ServiceBindingFormResponse } from '../webview/add-service-binding/addServiceBindingViewLoader';
2224
import GitImportLoader from '../webview/git-import/gitImportLoader';
2325
import LogViewLoader from '../webview/log/LogViewLoader';
2426
import OpenShiftItem, { clusterRequired } from './openshiftItem';
@@ -203,6 +205,63 @@ export class Component extends OpenShiftItem {
203205
return Component.dev(component, 'podman');
204206
}
205207

208+
@vsCommand('openshift.component.binding.add')
209+
static async addBinding(component: ComponentWorkspaceFolder) {
210+
const odo: odo3.Odo3 = odo3.newInstance();
211+
212+
const services = await odo.getBindableServices();
213+
if (!services || services.length === 0) {
214+
throw new Error('No bindable services are available');
215+
}
216+
217+
let formResponse: ServiceBindingFormResponse = undefined;
218+
try {
219+
formResponse = await new Promise<ServiceBindingFormResponse>(
220+
(resolve, reject) => {
221+
void AddServiceBindingViewLoader.loadView(
222+
component.contextPath,
223+
services.map(
224+
(service) => `${service.metadata.namespace}/${service.metadata.name}`,
225+
),
226+
(panel) => {
227+
panel.onDidDispose((_e) => {
228+
reject(new Error('The \'Add Service Binding\' wizard was closed'));
229+
});
230+
return async (eventData) => {
231+
if (eventData.action === 'addServiceBinding') {
232+
resolve(eventData.params);
233+
await panel.dispose();
234+
}
235+
};
236+
},
237+
).then(view => {
238+
if (!view) {
239+
// the view was already created
240+
reject();
241+
}
242+
});
243+
},
244+
);
245+
} catch (e) {
246+
// The form was closed without submitting,
247+
// or the form already exists for this component.
248+
// stop the command.
249+
return;
250+
}
251+
252+
const selectedServiceObject = services.filter(
253+
(service) =>
254+
`${service.metadata.namespace}/${service.metadata.name}` === formResponse.selectedService,
255+
)[0];
256+
257+
await odo.addBinding(
258+
component.contextPath,
259+
selectedServiceObject.metadata.namespace,
260+
selectedServiceObject.metadata.name,
261+
formResponse.bindingName,
262+
);
263+
}
264+
206265
@vsCommand('openshift.component.dev')
207266
@clusterRequired()
208267
static async dev(component: ComponentWorkspaceFolder, runOn?: undefined | 'podman') {

‎src/webview/add-service-binding/addServiceBindingViewLoader.ts‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
/*-----------------------------------------------------------------------------------------------
2+
* Copyright (c) Red Hat, Inc. All rights reserved.
3+
* Licensed under the MIT License. See LICENSE file in the project root for license information.
4+
*-----------------------------------------------------------------------------------------------*/
5+
import * as path from 'path';
6+
import * as vscode from 'vscode';
7+
import { ExtensionID } from '../../util/constants';
8+
import { loadWebviewHtml } from '../common-ext/utils';
9+
10+
export interface ServiceBindingFormResponse {
11+
selectedService: string;
12+
bindingName: string;
13+
}
14+
15+
export default class AddServiceBindingViewLoader {
16+
17+
private static views: Map<string, vscode.WebviewPanel> = new Map();
18+
19+
private static get extensionPath(): string {
20+
return vscode.extensions.getExtension(ExtensionID).extensionPath;
21+
}
22+
23+
/**
24+
* Returns a webview panel with the "Add Service Binding" UI,
25+
* or if there is an existing view for the given contextPath, focuses that view and returns null.
26+
*
27+
* @param contextPath the path to the component that's being binded to a service
28+
* @param availableServices the list of all bindable services on the cluster
29+
* @param listenerFactory the listener function to receive and process messages from the webview
30+
* @return the webview as a promise
31+
*/
32+
static async loadView(
33+
contextPath: string,
34+
availableServices: string[],
35+
listenerFactory: (panel: vscode.WebviewPanel) => (event) => Promise<void>,
36+
): Promise<vscode.WebviewPanel | null> {
37+
38+
if (AddServiceBindingViewLoader.views.get(contextPath)) {
39+
// the event handling for the panel should already be set up,
40+
// no need to handle it
41+
const panel = AddServiceBindingViewLoader.views.get(contextPath);
42+
panel.reveal(vscode.ViewColumn.One);
43+
return null;
44+
}
45+
46+
return this.createView(contextPath, availableServices, listenerFactory);
47+
}
48+
49+
private static async createView(
50+
contextPath: string,
51+
availableServices: string[],
52+
listenerFactory: (panel: vscode.WebviewPanel) => (event) => Promise<void>,
53+
): Promise<vscode.WebviewPanel> {
54+
const localResourceRoot = vscode.Uri.file(
55+
path.join(AddServiceBindingViewLoader.extensionPath, 'out', 'addServiceBindingViewer'),
56+
);
57+
58+
let panel: vscode.WebviewPanel = vscode.window.createWebviewPanel(
59+
'addServiceBindingView',
60+
'Add service binding',
61+
vscode.ViewColumn.One,
62+
{
63+
enableScripts: true,
64+
localResourceRoots: [localResourceRoot],
65+
retainContextWhenHidden: true,
66+
},
67+
);
68+
69+
panel.iconPath = vscode.Uri.file(
70+
path.join(AddServiceBindingViewLoader.extensionPath, 'images/context/cluster-node.png'),
71+
);
72+
panel.webview.html = await loadWebviewHtml(
73+
'addServiceBindingViewer',
74+
panel,
75+
);
76+
panel.webview.onDidReceiveMessage(listenerFactory(panel));
77+
78+
// set theme
79+
void panel.webview.postMessage({
80+
action: 'setTheme',
81+
themeValue: vscode.window.activeColorTheme.kind,
82+
});
83+
const colorThemeDisposable = vscode.window.onDidChangeActiveColorTheme(async function (colorTheme: vscode.ColorTheme) {
84+
await panel.webview.postMessage({ action: 'setTheme', themeValue: colorTheme.kind });
85+
});
86+
87+
panel.onDidDispose(() => {
88+
colorThemeDisposable.dispose();
89+
panel = undefined;
90+
AddServiceBindingViewLoader.views.delete(contextPath);
91+
});
92+
AddServiceBindingViewLoader.views.set(contextPath, panel);
93+
94+
// send initial data to panel
95+
void panel.webview.postMessage({
96+
action: 'setAvailableServices',
97+
availableServices,
98+
});
99+
void panel.webview.postMessage({
100+
action: 'setComponentName',
101+
componentName: path.basename(contextPath),
102+
});
103+
104+
return Promise.resolve(panel);
105+
}
106+
}

0 commit comments

Comments
 (0)
⚡