The F5 VSCode Extension

Let the F5 VSCode Extension supercharge your abilities to write (A)utomated (T)ool(C)hain declarations with snippets, examples, and declaration schema validation, and also assist with connecting, deploying, retrieving and updating declarations on F5 devices.

It can also help with iRules/iApps, BIG-IQ, and regular configuration/migration.

• GET/POST/DELETE of all ATC services, including FAST/AS3/DO/TS/CF
• links to quickly open related ATC documentation
• Direct access to ATC examples from git repo
• Install/UnInstall of ATC rpms
• Convert JSON <-> YAML
• Hovers to view decoded information for (certificates/base64)
• Extract TMOS applications (per virtual server)
• Write, deploy, and modify iRules/iApps (with vscode-irule extension for language support)

!> Any comments, questions, or feature requests, please open an issue!

Documentation site

https://f5devcentral.github.io/vscode-f5/#/

Getting the extension

The best path is to install Visual Studio Code from: https://code.visualstudio.com/

VSCode Marketplace

• https://marketplace.visualstudio.com/items?itemName=F5DevCentral.vscode-f5

Open Source Marketplace

• https://open-vsx.org/extension/F5DevCentral/vscode-f5

VSCode Marketplace

• https://marketplace.visualstudio.com/items?itemName=F5DevCentral.vscode-f5

Open Source Marketplace

• https://open-vsx.org/extension/F5DevCentral/vscode-f5

Then install the extension following the steps below:

Select the extensions view

Search for F5, select the extension "The F5 Extension", then Install

Create a device and connect

Select Add Host in the F5: Hosts view. Then type in device details in the <user>@x.x.x.x format, hit Enter to submit

Deploy example as3 app

Click on the hostname of the connected device at the bottom of the window.

This is the easiest way to get an editor window for JSON files and it also demonstrates how to get device details

Now that we have a JSON editor, select all text (ctrl + a), then delete.

Type as3 to get the example AS3 snippet, then press Enter.

This should insert a sample AS3 declaration into the editor

Note the declaration schema reference at the top. This provides instant feedback and validation for any necessary modifications. Please see Schema Validation for more details

Right-click in the editor and select POST as AS3 Declaration. This should post the declaration to the currently connected device

!> Please be sure to have the AS3 service installed prior. See ATC RPM Mgmt for assistance with getting a service installed

---

To delete deployed AS3 tenant from device

Right-click on the tenant in the AS3 view on the left, then select Delete Tenant

Known Issues

HTTP/422 responses - Can happen for a handful of reasons:

• Getting DO declaration when the device has settings DO can configure but the device was not deployed with DO (it can't manage the settings that are already there)
• Improperly formatted/wrong declaration
  • Sometimes this is from the '$schema' reference in the declaration
• Sometimes you can fix a DO HTTP/400 response by overwriting with a clean/updated declaration

HTTP Auth Failures

When utilizing an external auth provider, restjavad/restnoded can have some issues, resulting in some occasional HTTP/400 auth errors:

The fix is to restart: restjavad and restnoded

Error from extension

HTTP Auth FAILURE: 400 - undefined

Error from restjavad log

[SEVERE][6859][24 Jul 2020 13:11:39 UTC][8100/shared/authn/login AuthnWorker] Error as the maximum time to wait exceeded while getting value of loginProviderName
[SEVERE][6860][24 Jul 2020 13:11:39 UTC][8100/shared/authn/login AuthnWorker] Error while setting value to loginProviderName when no loginReference and no loginProviderName were given
[WARNING][6861][24 Jul 2020 13:11:39 UTC][com.f5.rest.common.RestWorker] dispatch to worker http://localhost:8100/shared/authn/login caught following exception: java.lang.NullPointerException
        at com.f5.rest.workers.authn.AuthnWorker.onPost(AuthnWorker.java:394)
        at com.f5.rest.common.RestWorker.callDerivedRestMethod(RestWorker.java:1276)
        at com.f5.rest.common.RestWorker.callRestMethodHandler(RestWorker.java:1190)
        at com.f5.rest.common.RestServer.processQueuedRequests(RestServer.java:1207)
        at com.f5.rest.common.RestServer.access$000(RestServer.java:44)
        at com.f5.rest.common.RestServer$1.run(RestServer.java:285)
        at java.util.concurrent.Executors$RunnableAdapter.call(Executors.java:473)
        at java.util.concurrent.FutureTask.run(FutureTask.java:262)
        at java.util.concurrent.ScheduledThreadPoolExecutor$ScheduledFutureTask.access$201(ScheduledThreadPoolExecutor.java:178)
        at java.util.concurrent.ScheduledThreadPoolExecutor$ScheduledFutureTask.run(ScheduledThreadPoolExecutor.java:292)
        at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1152)
        at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:622)
        at java.lang.Thread.run(Thread.java:748)

---

Client-side extension debugging

Developer Debugger

VScode has a built-in debugger very much like Chrome. This can be used to gain insight into what is happening when things don't respond as expected.

If you are having issues, it may be best to start here and capture the output as described below:

• In the main VSCode window, along the top, select Help, then Toggle Developer Tools, then select the Console tab.
  • Then, explore the requests and responses to see if there are any areas of concern
    • Expand some of the objects by clicking the little triangle next to the object under a request or response to inspect

If needed, right-click on an entry, then select save-as to save the log including expanded objects to a file. This can be used for troubleshooting

This mainly catches logs sent through the console.log(''), which should typically be for development.

installing vsix

The recommended way to get this extension is to install it from the Microsoft VScode extension marketplace or from within VSCode directly, under the extensions activity bar view on the left.

If you still need to install from vsix, they can be downloaded under the 'release' tab above: https://github.com/f5devcentral/vscode-f5/releases

Different ways to install vsix:

• https://code.visualstudio.com/docs/editor/extension-gallery#_install-from-a-vsix
• https://github.com/eamodio/vscode-gitlens/wiki/Installing-Prereleases-(vsix)

Running the extension for dev

• Clone and install dependencies:

  git clone https://github.com/f5devcentral/vscode-f5.git
  cd vscode-f5-fast/
  npm install
  code .

• Start Debugging environment: Keystroke F5

• Navigate to view container by clicking on the f5 icon in the Activity bar (typically on the left)

• Update the device list in tree view on the left with a device in your environment

  • ADD in the F5 Hosts view
  • or click the pencil icon on an item and modify the item

• Connect to the device

  • (click device in host tree or Cntrl+shift+P or F1)