diff --git a/react/src/index.tsx b/react/src/index.tsx index b609a818d..15e0627ec 100644 --- a/react/src/index.tsx +++ b/react/src/index.tsx @@ -2,7 +2,6 @@ import App from './App'; import BAIIntervalView from './components/BAIIntervalView'; import { jotaiStore, useWebComponentInfo } from './components/DefaultProviders'; import Flex from './components/Flex'; -import FlexActivityIndicator from './components/FlexActivityIndicator'; import ResourceGroupSelectForCurrentProject from './components/ResourceGroupSelectForCurrentProject'; import SourceCodeViewer from './components/SourceCodeViewer'; import { loadCustomThemeConfig } from './helper/customThemeConfig'; @@ -15,10 +14,9 @@ import { ThemeModeProvider } from './hooks/useThemeMode'; import { Tag, theme } from 'antd'; import dayjs from 'dayjs'; import { Provider as JotaiProvider } from 'jotai'; -import React, { Suspense } from 'react'; +import React from 'react'; import ReactDOM from 'react-dom/client'; import { useTranslation } from 'react-i18next'; -import { Route, Routes } from 'react-router-dom'; // To maintain compatibility with various manager versions, the WebUI client uses directives to manipulate GraphQL queries. // This can cause Relay to show "Warning: RelayResponseNormalizer: Payload did not contain a value for field" in the browser console during development. @@ -44,7 +42,6 @@ loadCustomThemeConfig(); const DefaultProviders = React.lazy( () => import('./components/DefaultProviders'), ); -const SessionList = React.lazy(() => import('./pages/SessionListPage')); const ResetPasswordRequired = React.lazy( () => import('./components/ResetPasswordRequired'), ); @@ -55,40 +52,12 @@ const UserInfoModal = React.lazy(() => import('./components/UserInfoModal')); const UserSettingsModal = React.lazy( () => import('./components/UserSettingModal'), ); -const UserDropdownMenu = React.lazy( - () => import('./components/UserDropdownMenu'), -); -const SessionLauncherPage = React.lazy( - () => import('./pages/SessionLauncherPage'), -); -const ContainerRegistryList = React.lazy( - () => import('./components/ContainerRegistryList'), -); -const KeypairInfoModal = React.lazy( - () => import('./components/KeypairInfoModal'), -); const SignoutModal = React.lazy(() => import('./components/SignoutModal')); -const ErrorLogList = React.lazy(() => import('./components/ErrorLogList')); - const BatchSessionScheduledTimeSetting = React.lazy( () => import('./components/BatchSessionScheduledTimeSetting'), ); -customElements.define( - 'backend-ai-react-session-list', - reactToWebComponent((props) => { - return ( - - - } /> - } /> - - - ); - }), -); - customElements.define( 'backend-ai-react-reset-password-required-modal', reactToWebComponent((props) => ( @@ -131,17 +100,6 @@ customElements.define( }), ); -customElements.define( - 'backend-ai-react-user-dropdown-menu', - reactToWebComponent((props) => { - return ( - - - - ); - }), -); - customElements.define( 'backend-ai-react-source-code-viewer', reactToWebComponent((props) => { @@ -225,35 +183,6 @@ const ResourceGroupSelectInWebComponent = (props: ReactWebComponentProps) => { ); }; -customElements.define( - 'backend-ai-react-container-registry-list', - reactToWebComponent((props) => { - return ( - - }> - - - - ); - }), -); - -customElements.define( - 'backend-ai-react-keypair-info-modal', - reactToWebComponent((props) => { - return ( - - { - props.dispatchEvent('close', null); - }} - /> - - ); - }), -); - customElements.define( 'backend-ai-react-signout-modal', reactToWebComponent((props) => { @@ -283,17 +212,6 @@ root.render( , ); -customElements.define( - 'backend-ai-react-error-log-list', - reactToWebComponent((props) => { - return ( - - - - ); - }), -); - customElements.define( 'backend-ai-react-batch-session-scheduled-time-setting', reactToWebComponent((props) => { diff --git a/src/backend-ai-app.ts b/src/backend-ai-app.ts index 1d1501a27..6dc937b0f 100644 --- a/src/backend-ai-app.ts +++ b/src/backend-ai-app.ts @@ -91,9 +91,6 @@ const loadPage = case 'job': import('./components/backend-ai-session-view.js'); break; - case 'session': - import('./components/backend-ai-session-view-next.js'); - break; // temporally block experiment /* case 'experiment': @@ -117,9 +114,6 @@ const loadPage = case 'user': import('./components/backend-ai-credential-view.js'); break; - case 'environment': - import('./components/backend-ai-environment-view.js'); - break; case 'settings': import('./components/backend-ai-settings-view.js'); break; diff --git a/src/components/backend-ai-environment-view.ts b/src/components/backend-ai-environment-view.ts deleted file mode 100644 index be43e544a..000000000 --- a/src/components/backend-ai-environment-view.ts +++ /dev/null @@ -1,197 +0,0 @@ -/** - @license - Copyright (c) 2015-2024 Lablup Inc. All rights reserved. - */ -import { - IronFlex, - IronFlexAlignment, -} from '../plastics/layout/iron-flex-layout-classes'; -import './backend-ai-dialog'; -import './backend-ai-environment-list'; -import { BackendAiStyles } from './backend-ai-general-styles'; -import { BackendAIPage } from './backend-ai-page'; -import './backend-ai-registry-list'; -import './backend-ai-resource-preset-list'; -import './lablup-activity-panel'; -import '@material/mwc-button'; -import { Tab } from '@material/mwc-tab'; -import '@material/mwc-tab-bar/mwc-tab-bar'; -import { css, CSSResultGroup, html } from 'lit'; -import { translate as _t } from 'lit-translate'; -import { customElement, property } from 'lit/decorators.js'; - -/** - Backend.AI Environment View - - Example: - - - ... content ... - - -@group Backend.AI Web UI - @element backend-ai-environment-view - */ - -@customElement('backend-ai-environment-view') -export default class BackendAIEnvironmentView extends BackendAIPage { - @property({ type: String }) images = Object(); - @property({ type: Boolean }) is_superadmin = false; - @property({ type: Boolean }) isSupportContainerRegistryGraphQL = false; - @property({ type: String }) _activeTab = 'image-lists'; - - static get styles(): CSSResultGroup { - return [ - BackendAiStyles, - IronFlex, - IronFlexAlignment, - // language=CSS - css` - div h4 { - margin: 0; - font-weight: 100; - font-size: 16px; - padding-left: 20px; - border-bottom: 1px solid var(--token-colorBorder, #ccc); - width: 100%; - } - - @media screen and (max-width: 805px) { - mwc-tab, - mwc-button { - --mdc-typography-button-font-size: 10px; - } - } - `, - ]; - } - - static get properties() { - return { - active: { - type: Boolean, - }, - _activeTab: { - type: String, - }, - }; - } - - /** - * Set backend.ai client to super admin. - * - * @param {Boolean} active - */ - async _viewStateChanged(active: boolean) { - await this.updateComplete; - if (active === false) { - return true; - } - // If disconnected - if ( - typeof globalThis.backendaiclient === 'undefined' || - globalThis.backendaiclient === null || - globalThis.backendaiclient.ready === false - ) { - document.addEventListener( - 'backend-ai-connected', - () => { - this.is_superadmin = globalThis.backendaiclient.is_superadmin; - this.isSupportContainerRegistryGraphQL = - globalThis.backendaiclient?.supports('container-registry-gql'); - }, - true, - ); - } else { - // already connected - this.is_superadmin = globalThis.backendaiclient.is_superadmin; - this.isSupportContainerRegistryGraphQL = - globalThis.backendaiclient?.supports('container-registry-gql'); - } - return false; - } - - /** - * Display the tab. - * - * @param {mwc-tab} tab - tab webcomponent that has 'title' property - */ - _showTab(tab: Tab) { - const els = this.shadowRoot?.querySelectorAll( - '.tab-content', - ) as NodeListOf; - for (let x = 0; x < els.length; x++) { - els[x].style.display = 'none'; - } - this._activeTab = tab.title; - ( - this.shadowRoot?.querySelector('#' + tab.title) as HTMLElement - ).style.display = 'block'; - } - - render() { - // language=HTML - return html` - - -
-

- - - - ${this.is_superadmin - ? html` - - ` - : html``} - -
-

-
- -
- -
- ${this.isSupportContainerRegistryGraphQL && - this._activeTab === 'registry-lists' - ? html` -
- -
- ` - : html` - - `} -
-
- - `; - } -} - -declare global { - interface HTMLElementTagNameMap { - 'backend-ai-environment-view': BackendAIEnvironmentView; - } -} diff --git a/src/components/backend-ai-session-view-next.ts b/src/components/backend-ai-session-view-next.ts deleted file mode 100644 index ed0b21847..000000000 --- a/src/components/backend-ai-session-view-next.ts +++ /dev/null @@ -1,69 +0,0 @@ -/** - @license -Copyright (c) 2015-2024 Lablup Inc. All rights reserved. -*/ -import { navigate } from '../backend-ai-app'; -import { - IronFlex, - IronFlexAlignment, -} from '../plastics/layout/iron-flex-layout-classes'; -import { store } from '../store'; -import { BackendAiStyles } from './backend-ai-general-styles'; -import { BackendAIPage } from './backend-ai-page'; -import './backend-ai-session-launcher'; -import './backend-ai-session-view'; -import '@material/mwc-circular-progress'; -import { css, CSSResultGroup, html } from 'lit'; -import { customElement } from 'lit/decorators.js'; - -/** -Backend.AI Maintenance View - -Example: - - -... content ... - - -@group Backend.AI Web UI -@element backend-ai-session-view-next -*/ - -@customElement('backend-ai-session-view-next') -export default class BackendAISessionView2 extends BackendAIPage { - static get styles(): CSSResultGroup { - return [ - BackendAiStyles, - IronFlex, - IronFlexAlignment, - // language=CSS - css``, - ]; - } - - async _viewStateChanged(active: boolean) { - await this.updateComplete; - if (active === false) { - return; - } - } - - render() { - // language=HTML - return html` - - `; - } -} - -declare global { - interface HTMLElementTagNameMap { - 'backend-ai-session-view-next': BackendAISessionView2; - } -}