add: convert showing all environment images including uninstalled one…

…s by config (#2697)

### TL;DR

Added option to show all environment images, regardless of installation status.

### What changed?

- Introduced a new configuration option `showNonInstalledImages` in `config.toml.sample`
- Updated `ImageEnvironmentSelectFormItems` component to use the new configuration
- Added `showNonInstalledImages` to the `BackendAIConfig` type
- Implemented the new configuration in the `BackendAILogin` component

config.toml.sample

@@ -67,6 +67,7 @@ allowNonAuthTCP = false             # Expose TCP apps to be executable in web br
 #allowlist = "" # Comma-separated image name. Image name should contain the repository (registry path and image name) part of the full image URL, excluding the protocol and tag
 # e.g. cr.backend.ai/stable/python
 # You should pick default_environment in general section too.
+showNonInstalledImages = false    # Show all environment images regardless of installation
 
 [server]
 webServerURL = "[Web server website URL. App will use the site instead of local app.]"

e2e/config-test.toml

@@ -0,0 +1,79 @@
+[general]
+# apiEndpoint = "http://127.0.0.1:8090"
+apiEndpointText = "Backend.AI Admin Training"
+
+defaultSessionEnvironment = "cr.backend.ai/stable/python-tensorflow"
+
+maxCountForPreOpenedPort = 1
+# siteDescription = ""
+connectionMode = "SESSION" #connectionMode = API
+allowChangeSigninMode = true
+signupSupport = true
+allowSignout = true
+allowAnonymousChangePassword = true
+allowProjectResourceMonitor = true
+allowManualImageNameForSession = true
+allowSignupWithoutConfirmation = true
+allowCustomResourceAllocation = false
+autoLogout = false
+# loginAttemptLimit = 1
+# loginBlockTime = 30
+debug = false
+maskUserInfo = true
+enableContainerCommit = true
+enablePipeline = true
+hideAgents = true
+alwaysEnqueueComputeSession = true
+# If false, show the `Agent Summary` menu in the sidebar.
+showCustomResourceAllocation = true
+enable2FA = true
+force2FA = false
+systemSSHImage = "cr.backend.ai/stable/python-tensorflow"
+isDirectorySizeVisible = false
+allowCustomResourceAllocation = true
+forceTerminateTimeThreshold = 259200
+enableModelStore = true
+enableExtendLoginSession = false
+
+[wsproxy]
+proxyURL = "http://127.0.0.1:5050/"
+autoPortSelection = true
+disableCertCheck = true
+
+[resources]
+openPortToPublic = true
+# Show option to open app proxy port to anyone.
+maxCPUCoresPerContainer = 256 # Maximum CPU per container.
+maxMemoryPerContainer = 64 # Maximum memory per container.
+maxCUDADevicesPerContainer = 16  # Maximum CUDA devices per container.
+maxCUDASharesPerContainer = 16  # Maximum CUDA shares per container.
+maxROCMDevicesPerContainer = 10     # Maximum ROCm devices per container.
+maxTPUDevicesPerContainer = 8       # Maximum TPU devices per container.
+maxIPUDevicesPerContainer = 8       # Maximum IPU devices per container.
+maxATOMDevicesPerContainer = 8      # Maximum ATOM devices per container.
+maxWarboyDevicesPerContainer = 8    # Maximum Warboy devices per container.
+maxShmPerContainer = 16 # Maximum shared memory per container.
+maxFileUploadSize = 4294967296 # Maximum size of single file upload. Set to -1 for unlimited upload.
+allowPreferredPort = true
+allowNonAuthTCP = true
+
+[menu]
+# blocklist = "pipeline,summary"
+#blocklist = "pipeline,serving" # "statistics"
+#blocklist = "" # Hide menus on the list which are separated by comma. please note that summary menu cannot be added to blocklist
+#inactivelist = "statistics,pipeline,serving" # Disable menus on the list which are separated by comma.
+
+[server]
+# webServerURL =
+
+[environments]
+#allowlist = ""
+showNonInstalledImages = true
+
+[plugin]
+# Reserved to load plugins
+
+[pipeline]
+#endpoint = "http://mlops.com:9500"   # FastTrack endpoint.
+frontendEndpoint = "http://127.0.0.1:9500"
+hideSideMenuButton = false

e2e/config.test.ts

@@ -0,0 +1,87 @@
+import { loginAsAdmin, mockConfigToml, webuiEndpoint } from './test-util';
+import { test, expect } from '@playwright/test';
+
+test.describe('config read and test', () => {
+  test('showNonInstalledImages', async ({ page, context }) => {
+    // manipulate config file from mocked one
+    await mockConfigToml(page, './config-test.toml');
+
+    await loginAsAdmin(page);
+
+    await page.getByRole('group').getByText('Environments').click();
+    await page
+      .getByRole('columnheader', { name: 'Status' })
+      .locator('div')
+      .click();
+    await page
+      .getByRole('columnheader', { name: 'Status' })
+      .locator('div')
+      .click();
+
+    const registryCell = await page
+      .locator('.ant-table-row > td:nth-child(3)')
+      .first();
+    const registry = await registryCell.textContent();
+
+    const architectureCell = await page
+      .locator('.ant-table-row > td:nth-child(4)')
+      .first();
+    const architecture = await architectureCell.textContent();
+
+    const namespaceCell = await page
+      .getByRole('cell', { name: 'community' })
+      .first();
+    const namespace = await namespaceCell.textContent();
+
+    const languageCell = await page.getByRole('cell', { name: 'afni' }).first();
+    const language = await languageCell.textContent();
+
+    const versionCell = await page
+      .getByRole('cell', { name: 'ubuntu18.04' })
+      .first();
+    const version = await versionCell.textContent();
+
+    const uninstalledImageString = `${registry}/${namespace}/${language}:${version}@${architecture}`;
+
+    await page.goto(webuiEndpoint);
+    await page.getByLabel('power_settings_new').click();
+    await page
+      .getByRole('button', { name: '2 Environments & Resource' })
+      .click();
+    await page
+      .locator(
+        '.ant-form-item-control-input-content > .ant-select > .ant-select-selector',
+      )
+      .first()
+      .click();
+    await page.getByLabel('Environments / Version').fill('AF');
+    await page
+      .locator('.rc-virtual-list-holder-inner > div:nth-child(2)')
+      .click();
+
+    await page
+      .locator('span')
+      .filter({ hasText: 'ubuntu18.04x86_64' })
+      .locator('div')
+      .first()
+      .click();
+    await page
+      .locator(
+        'div:nth-child(4) > .rc-virtual-list-holder > div > .rc-virtual-list-holder-inner > .ant-select-item > .ant-select-item-option-content > div',
+      )
+      .click();
+    await page
+      .getByRole('button', { name: 'Skip to review double-right' })
+      .click();
+    await page.getByRole('button', { name: 'Copy' }).click();
+
+    await context.grantPermissions(['clipboard-read', 'clipboard-write']);
+
+    const handle = await page.evaluateHandle(() =>
+      navigator.clipboard.readText(),
+    );
+    const clipboardContent = await handle.jsonValue();
+
+    expect(clipboardContent).toEqual(uninstalledImageString);
+  });
+});