Skip to content

Commit efecc5c

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 76469c0 commit efecc5c

File tree

19 files changed

+595
-42
lines changed

19 files changed

+595
-42
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: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ const webviews = [
1616
'helm-chart',
1717
'log',
1818
'welcome',
19+
'add-service-binding',
1920
];
2021

2122
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
@@ -455,6 +455,11 @@
455455
"title": "Start Dev",
456456
"category": "OpenShift"
457457
},
458+
{
459+
"command": "openshift.component.binding.add",
460+
"title": "Bind Service",
461+
"category": "OpenShift"
462+
},
458463
{
459464
"command": "openshift.component.exitDevMode",
460465
"title": "Stop Dev",
@@ -1074,6 +1079,10 @@
10741079
{
10751080
"command": "openshift.component.openInBrowser",
10761081
"when": "false"
1082+
},
1083+
{
1084+
"command": "openshift.component.binding.add",
1085+
"when": "false"
10771086
}
10781087
],
10791088
"view/title": [
@@ -1299,6 +1308,11 @@
12991308
"when": "view == openshiftComponentsView && viewItem =~ /openshift\\.component.*\\.dep-nrn.*/ || viewItem =~ /openshift\\.component.*\\.dep-run.*/",
13001309
"group": "c2@1"
13011310
},
1311+
{
1312+
"command": "openshift.component.binding.add",
1313+
"when": "view == openshiftComponentsView && viewItem =~ /openshift\\.component.*\\.dev-nrn.*/",
1314+
"group": "c2@2"
1315+
},
13021316
{
13031317
"command": "openshift.component.showDevTerminal",
13041318
"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
@@ -88,7 +88,7 @@ export interface Odo {
8888
*/
8989
getActiveProject(): Promise<string>;
9090

91-
/*
91+
/**
9292
* Deletes all the odo configuration files associated with the component (`.odo`, `devfile.yaml`) located at the given path.
9393
*
9494
* @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
@@ -311,4 +311,21 @@ export class Command {
311311
new CommandOption('-f'),
312312
]);
313313
}
314+
315+
static addBinding(serviceNamespace: string, serviceName: string, bindingName: string): CommandText {
316+
return new CommandText('odo add binding',
317+
undefined,
318+
[
319+
new CommandOption('--service-namespace', serviceNamespace, false),
320+
new CommandOption('--service', serviceName, false),
321+
new CommandOption('--name', bindingName, false),
322+
]
323+
)
324+
}
325+
326+
static getBindableServices(): CommandText {
327+
return new CommandText('odo list service',
328+
undefined,
329+
[new CommandOption('-o json')]);
330+
}
314331
}

‎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: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,20 @@
88
import { ChildProcess, SpawnOptions } from 'child_process';
99
import * as fs from 'fs/promises';
1010
import * as path from 'path';
11+
import { basename } from 'path';
1112
import { DebugConfiguration, DebugSession, Disposable, EventEmitter, ProgressLocation, Terminal, Uri, commands, debug, extensions, window, workspace } from 'vscode';
1213
import * as YAML from 'yaml';
1314
import { CliChannel } from '../cli';
1415
import { Command } from '../odo/command';
1516
import { ComponentTypeAdapter, ComponentTypeDescription, DevfileComponentType, ascDevfileFirst, isDevfileComponent } from '../odo/componentType';
1617
import { StarterProject, isStarterProject } from '../odo/componentTypeDescription';
1718
import { ComponentWorkspaceFolder } from '../odo/workspace';
19+
import * as odo3 from '../odo3';
1820
import { NewComponentCommandProps } from '../telemetry';
1921
import { Progress } from '../util/progress';
2022
import { selectWorkspaceFolder } from '../util/workspace';
2123
import { VsCommandError, vsCommand } from '../vscommand';
24+
import AddServiceBindingViewLoader, { ServiceBindingFormResponse } from '../webview/add-service-binding/addServiceBindingViewLoader';
2225
import GitImportLoader from '../webview/git-import/gitImportLoader';
2326
import LogViewLoader from '../webview/log/LogViewLoader';
2427
import OpenShiftItem from './openshiftItem';
@@ -202,6 +205,56 @@ export class Component extends OpenShiftItem {
202205
return Component.dev(component, 'podman');
203206
}
204207

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+
basename(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+
);
238+
},
239+
);
240+
} catch (e) {
241+
// The form was closed without submitting, stop the command
242+
return;
243+
}
244+
245+
const selectedServiceObject = services.filter(
246+
(service) =>
247+
`${service.metadata.namespace}/${service.metadata.name}` === formResponse.selectedService,
248+
)[0];
249+
250+
await odo.addBinding(
251+
component.contextPath,
252+
selectedServiceObject.metadata.namespace,
253+
selectedServiceObject.metadata.name,
254+
formResponse.bindingName,
255+
);
256+
}
257+
205258
@vsCommand('openshift.component.dev')
206259
//@clusterRequired() check for user is logged in should be implemented from scratch
207260
static async dev(component: ComponentWorkspaceFolder, runOn?: undefined | 'podman') {

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

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
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+
private static get extensionPath(): string {
17+
return vscode.extensions.getExtension(ExtensionID).extensionPath;
18+
}
19+
20+
/**
21+
* Opens and returns a webview panel with the "Add Service Binding" UI.
22+
*
23+
* @param componentName the name of the component that's being binded to a service
24+
* @param availableServices the list of all bindable services on the cluster
25+
* @param listenerFactory the listener function to recieve and process messages from the webview
26+
* @return the webview as a promise
27+
*/
28+
static async loadView(
29+
componentName: string,
30+
availableServices: string[],
31+
listenerFactory: (panel: vscode.WebviewPanel) => (event) => Promise<void>,
32+
): Promise<vscode.WebviewPanel> {
33+
const localResourceRoot = vscode.Uri.file(
34+
path.join(AddServiceBindingViewLoader.extensionPath, 'out', 'addServiceBindingViewer'),
35+
);
36+
37+
let panel: vscode.WebviewPanel = vscode.window.createWebviewPanel(
38+
'addServiceBindingView',
39+
'Add service binding',
40+
vscode.ViewColumn.One,
41+
{
42+
enableScripts: true,
43+
localResourceRoots: [localResourceRoot],
44+
retainContextWhenHidden: true,
45+
},
46+
);
47+
48+
panel.iconPath = vscode.Uri.file(
49+
path.join(AddServiceBindingViewLoader.extensionPath, 'images/context/cluster-node.png'),
50+
);
51+
panel.webview.html = await loadWebviewHtml(
52+
'addServiceBindingViewer',
53+
panel,
54+
);
55+
panel.webview.onDidReceiveMessage(listenerFactory(panel));
56+
57+
// set theme
58+
void panel.webview.postMessage({
59+
action: 'setTheme',
60+
themeValue: vscode.window.activeColorTheme.kind,
61+
});
62+
const colorThemeDisposable = vscode.window.onDidChangeActiveColorTheme(async function (colorTheme: vscode.ColorTheme) {
63+
await panel.webview.postMessage({ action: 'setTheme', themeValue: colorTheme.kind });
64+
});
65+
66+
panel.onDidDispose(() => {
67+
colorThemeDisposable.dispose();
68+
panel = undefined;
69+
});
70+
71+
// send initial data to panel
72+
void panel.webview.postMessage({
73+
action: 'setAvailableServices',
74+
availableServices,
75+
});
76+
void panel.webview.postMessage({
77+
action: 'setComponentName',
78+
componentName,
79+
});
80+
81+
return Promise.resolve(panel);
82+
}
83+
}

0 commit comments

Comments
 (0)
⚡