mod-arch-shared/dist/components/design/utils.js

Shared UI components and utilities for modular architecture micro-frontend projects

import projectImg from '../../images/UI_icon-Folder-RGB.svg';
import notebookImg from '../../images/UI_icon-Wrench-RGB.svg';
import pipelineImg from '../../images/UI_icon-Branch-RGB.svg';
import pipelineRunImg from '../../images/UI_icon-Double_arrow_right-RGB.svg';
import clusterStorageImg from '../../images/UI_icon-Storage-RGB.svg';
import modelServerImg from '../../images/UI_icon-Server-RGB.svg';
import registeredModelsImg from '../../images/Icon-Layered_A_Black-RGB.svg';
import deployedModelsImg from '../../images/UI_icon-Cubes-RGB.svg';
import deployingModelsImg from '../../images/UI_icon-Server_upload-RGB.svg';
import dataConnectionImg from '../../images/UI_icon-Connected-RGB.svg';
import userImg from '../../images/UI_icon-User-RGB.svg';
import groupImg from '../../images/UI_icon-Shared_workspace-RGB.svg';
import projectEmptyStateImg from '../../images/empty-state-project-overview.svg';
import notebookEmptyStateImg from '../../images/empty-state-notebooks.svg';
import pipelineEmptyStateImg from '../../images/empty-state-pipelines.svg';
import clusterStorageEmptyStateImg from '../../images/empty-state-cluster-storage.svg';
import modelServerEmptyStateImg from '../../images/empty-state-model-serving.svg';
import dataConnectionEmptyStateImg from '../../images/empty-state-data-connections.svg';
import modelRegistryEmptyStateImg from '../../images/empty-state-model-registries.svg';
import storageClassesEmptyStateImg from '../../images/empty-state-storage-classes.svg';
import modelRegistryMissingModelImg from '../../images/no-models-model-registry.svg';
import modelRegistryMissingVersionImg from '../../images/no-versions-model-registry.svg';
import './vars.scss';
/* eslint-disable @typescript-eslint/no-unnecessary-condition */
// These conditions are required for future object types that may be added later.
export var SectionType;
(function (SectionType) {
    SectionType["setup"] = "set-up";
    SectionType["organize"] = "organize";
    SectionType["training"] = "training";
    SectionType["serving"] = "serving";
    SectionType["general"] = "general";
})(SectionType || (SectionType = {}));
export var ProjectObjectType;
(function (ProjectObjectType) {
    ProjectObjectType["project"] = "project";
    ProjectObjectType["projectContext"] = "projectContext";
    ProjectObjectType["notebook"] = "notebook";
    ProjectObjectType["notebookImage"] = "notebookImage";
    ProjectObjectType["build"] = "build";
    ProjectObjectType["pipelineSetup"] = "pipeline-setup";
    ProjectObjectType["pipeline"] = "pipeline";
    ProjectObjectType["pipelineRun"] = "pipeline-run";
    ProjectObjectType["pipelineExperiment"] = "pipeline-experiment";
    ProjectObjectType["pipelineExecution"] = "pipeline-execution";
    ProjectObjectType["pipelineArtifact"] = "pipeline-artifact";
    ProjectObjectType["clusterStorage"] = "cluster-storage";
    ProjectObjectType["model"] = "model";
    ProjectObjectType["singleModel"] = "single-model";
    ProjectObjectType["multiModel"] = "multi-model";
    ProjectObjectType["modelServer"] = "model-server";
    ProjectObjectType["modelCatalog"] = "model-catalog";
    ProjectObjectType["registeredModels"] = "registered-models";
    ProjectObjectType["deployedModels"] = "deployed-models";
    ProjectObjectType["deployingModels"] = "deploying-models";
    ProjectObjectType["modelRegistrySettings"] = "model-registry-settings";
    ProjectObjectType["servingRuntime"] = "serving-runtime";
    ProjectObjectType["distributedWorkload"] = "distributed-workload";
    ProjectObjectType["dataConnection"] = "data-connection";
    ProjectObjectType["connections"] = "connections";
    ProjectObjectType["clusterSettings"] = "cluster-settings";
    ProjectObjectType["acceleratorProfile"] = "accelerator-profile";
    ProjectObjectType["permissions"] = "permissions";
    ProjectObjectType["user"] = "user";
    ProjectObjectType["group"] = "group";
    ProjectObjectType["storageClasses"] = "storageClasses";
    ProjectObjectType["enabledApplications"] = "enabled-applications";
    ProjectObjectType["exploreApplications"] = "explore-applications";
    ProjectObjectType["resources"] = "resources";
})(ProjectObjectType || (ProjectObjectType = {}));
export const typedIconColor = (objectType) => {
    switch (objectType) {
        case ProjectObjectType.project:
            return 'var(--ai-project--IconColor)';
        case ProjectObjectType.projectContext:
            return 'var(--ai-project-context--IconColor)';
        case ProjectObjectType.notebook:
            return 'var(--ai-notebook--IconColor)';
        case ProjectObjectType.notebookImage:
            return 'var(--ai-set-up--IconColor)';
        case ProjectObjectType.pipeline:
        case ProjectObjectType.pipelineRun:
        case ProjectObjectType.pipelineExperiment:
        case ProjectObjectType.pipelineExecution:
        case ProjectObjectType.pipelineArtifact:
            return 'var(--ai-pipeline--IconColor)';
        case ProjectObjectType.modelCatalog:
            return 'var(--ai-pipeline--IconColor)';
        case ProjectObjectType.pipelineSetup:
            return 'var(--ai-set-up--IconColor)';
        case ProjectObjectType.clusterStorage:
        case ProjectObjectType.storageClasses:
            return 'var(--ai-cluster-storage--IconColor)';
        case ProjectObjectType.model:
        case ProjectObjectType.singleModel:
        case ProjectObjectType.multiModel:
        case ProjectObjectType.modelServer:
        case ProjectObjectType.registeredModels:
        case ProjectObjectType.deployedModels:
        case ProjectObjectType.deployingModels:
            return 'var(--ai-model-server--IconColor)';
        case ProjectObjectType.modelRegistrySettings:
            return 'var(--ai-set-up--IconColor)';
        case ProjectObjectType.dataConnection:
        case ProjectObjectType.connections:
            return 'var(--ai-data-connection--IconColor)';
        case ProjectObjectType.user:
            return 'var(--ai-user--IconColor)';
        case ProjectObjectType.group:
            return 'var(--ai-group--IconColor)';
        case ProjectObjectType.permissions:
            return 'var(--ai-set-up--IconColor)';
        case ProjectObjectType.enabledApplications:
        case ProjectObjectType.exploreApplications:
            return 'var(--ai-config--IconColor)';
        case ProjectObjectType.resources:
            return 'var(--ai-general--IconColor)';
        case ProjectObjectType.distributedWorkload:
            return 'var(--ai-serving--IconColor)';
        case ProjectObjectType.clusterSettings:
        case ProjectObjectType.acceleratorProfile:
            return 'var(--ai-set-up--IconColor)';
        case ProjectObjectType.servingRuntime:
            return 'var(--ai-set-up--IconColor)';
        default:
            return '';
    }
};
export const typedBackgroundColor = (objectType) => {
    switch (objectType) {
        case ProjectObjectType.project:
            return 'var(--ai-project--BackgroundColor)';
        case ProjectObjectType.projectContext:
            return 'var(--ai-project-context--BackgroundColor)';
        case ProjectObjectType.notebook:
            return 'var(--ai-notebook--BackgroundColor)';
        case ProjectObjectType.notebookImage:
            return 'var(--ai-set-up--BackgroundColor)';
        case ProjectObjectType.pipeline:
        case ProjectObjectType.pipelineRun:
        case ProjectObjectType.pipelineExperiment:
        case ProjectObjectType.pipelineExecution:
        case ProjectObjectType.pipelineArtifact:
            return 'var(--ai-pipeline--BackgroundColor)';
        case ProjectObjectType.modelCatalog:
            return 'var(--ai-pipeline--BackgroundColor)';
        case ProjectObjectType.pipelineSetup:
            return 'var(--ai-set-up--BackgroundColor)';
        case ProjectObjectType.clusterStorage:
        case ProjectObjectType.storageClasses:
            return 'var(--ai-cluster-storage--BackgroundColor)';
        case ProjectObjectType.model:
        case ProjectObjectType.singleModel:
        case ProjectObjectType.multiModel:
        case ProjectObjectType.modelServer:
        case ProjectObjectType.registeredModels:
        case ProjectObjectType.deployedModels:
        case ProjectObjectType.deployingModels:
            return 'var(--ai-model-server--BackgroundColor)';
        case ProjectObjectType.modelRegistrySettings:
            return 'var(--ai-set-up--BackgroundColor)';
        case ProjectObjectType.dataConnection:
        case ProjectObjectType.connections:
            return 'var(--ai-data-connection--BackgroundColor)';
        case ProjectObjectType.user:
            return 'var(--ai-user--BackgroundColor)';
        case ProjectObjectType.group:
            return 'var(--ai-group--BackgroundColor)';
        case ProjectObjectType.permissions:
            return 'var(--ai-set-up--BackgroundColor)';
        case ProjectObjectType.enabledApplications:
        case ProjectObjectType.exploreApplications:
            return 'var(--ai-config--BackgroundColor)';
        case ProjectObjectType.resources:
            return 'var(--ai-general--BackgroundColor)';
        case ProjectObjectType.distributedWorkload:
            return 'var(--ai-serving--BackgroundColor)';
        case ProjectObjectType.clusterSettings:
        case ProjectObjectType.acceleratorProfile:
            return 'var(--ai-set-up--BackgroundColor)';
        case ProjectObjectType.servingRuntime:
            return 'var(--ai-set-up--BackgroundColor)';
        default:
            return '';
    }
};
export const typedColor = (objectType) => {
    switch (objectType) {
        case ProjectObjectType.project:
            return 'var(--ai-project--Color)';
        case ProjectObjectType.projectContext:
            return 'var(--ai-project-context--Color)';
        case ProjectObjectType.notebook:
        case ProjectObjectType.notebookImage:
            return 'var(--ai-training--BackgroundColor)';
        case ProjectObjectType.build:
            return 'var(--ai-model-server--Color)';
        case ProjectObjectType.pipeline:
        case ProjectObjectType.pipelineRun:
        case ProjectObjectType.pipelineExecution:
        case ProjectObjectType.pipelineArtifact:
            return 'var(--ai-pipeline--Color)';
        case ProjectObjectType.modelCatalog:
            return 'var(--ai-pipeline--Color)';
        case ProjectObjectType.pipelineSetup:
            return 'var(--ai-set-up--Color)';
        case ProjectObjectType.clusterStorage:
            return 'var(--ai-cluster-storage--Color)';
        case ProjectObjectType.modelServer:
        case ProjectObjectType.registeredModels:
        case ProjectObjectType.deployedModels:
        case ProjectObjectType.deployingModels:
            return 'var(--ai-model-server--Color)';
        case ProjectObjectType.modelRegistrySettings:
            return 'var(--ai-set-up--Color)';
        case ProjectObjectType.dataConnection:
        case ProjectObjectType.connections:
            return 'var(--ai-data-connection--Color)';
        case ProjectObjectType.user:
            return 'var(--ai-user--Color)';
        case ProjectObjectType.group:
            return 'var(--ai-group--Color)';
        default:
            return '';
    }
};
export const typedObjectImage = (objectType) => {
    switch (objectType) {
        case ProjectObjectType.project:
        case ProjectObjectType.projectContext:
            return projectImg;
        case ProjectObjectType.notebook:
            return notebookImg;
        case ProjectObjectType.pipeline:
        case ProjectObjectType.pipelineSetup:
            return pipelineImg;
        case ProjectObjectType.pipelineRun:
            return pipelineRunImg;
        case ProjectObjectType.clusterStorage:
            return clusterStorageImg;
        case ProjectObjectType.modelServer:
            return modelServerImg;
        case ProjectObjectType.registeredModels:
            return registeredModelsImg;
        case ProjectObjectType.deployedModels:
            return deployedModelsImg;
        case ProjectObjectType.deployingModels:
            return deployingModelsImg;
        case ProjectObjectType.dataConnection:
        case ProjectObjectType.connections:
            return dataConnectionImg;
        case ProjectObjectType.user:
            return userImg;
        case ProjectObjectType.group:
            return groupImg;
        default:
            return '';
    }
};
export const typedEmptyImage = (objectType, option) => {
    switch (objectType) {
        case ProjectObjectType.project:
        case ProjectObjectType.projectContext:
            return projectEmptyStateImg;
        case ProjectObjectType.notebook:
            return notebookEmptyStateImg;
        case ProjectObjectType.pipeline:
        case ProjectObjectType.pipelineRun:
        case ProjectObjectType.pipelineSetup:
            return pipelineEmptyStateImg;
        case ProjectObjectType.clusterStorage:
            return clusterStorageEmptyStateImg;
        case ProjectObjectType.modelServer:
            return modelServerEmptyStateImg;
        case ProjectObjectType.registeredModels:
            switch (option) {
                case 'MissingModel':
                    return modelRegistryMissingModelImg;
                case 'MissingVersion':
                    return modelRegistryMissingVersionImg;
                case 'MissingDeployment':
                    return modelServerEmptyStateImg;
                default:
                    return modelRegistryEmptyStateImg;
            }
        case ProjectObjectType.storageClasses:
            return storageClassesEmptyStateImg;
        case ProjectObjectType.dataConnection:
        case ProjectObjectType.connections:
            return dataConnectionEmptyStateImg;
        default:
            return '';
    }
};
export const sectionTypeIconColor = (sectionType) => {
    switch (sectionType) {
        case SectionType.setup:
            return 'var(--ai-set-up--IconColor)';
        case SectionType.organize:
            return 'var(--ai-organize--IconColor)';
        case SectionType.training:
            return 'var(--ai-training--IconColor)';
        case SectionType.serving:
            return 'var(--ai-serving--IconColor)';
        case SectionType.general:
            return 'var(--ai-general--IconColor)';
        default:
            return '';
    }
};
export const sectionTypeBackgroundColor = (sectionType) => {
    switch (sectionType) {
        case SectionType.setup:
            return 'var(--ai-set-up--BackgroundColor)';
        case SectionType.organize:
            return 'var(--ai-organize--BackgroundColor)';
        case SectionType.training:
            return 'var(--ai-training--BackgroundColor)';
        case SectionType.serving:
            return 'var(--ai-serving--BackgroundColor)';
        case SectionType.general:
            return 'var(--ai-general--BackgroundColor)';
        default:
            return '';
    }
};
export const sectionTypeBorderColor = (sectionType) => {
    switch (sectionType) {
        case SectionType.setup:
            return 'var(--ai-set-up--BorderColor)';
        case SectionType.organize:
            return 'var(--ai-organize--BorderColor)';
        case SectionType.training:
            return 'var(--ai-training--BorderColor)';
        case SectionType.serving:
            return 'var(--ai-serving--BorderColor)';
        case SectionType.general:
            return 'var(--ai-general--BorderColor)';
        default:
            return '';
    }
};
//# sourceMappingURL=utils.js.map