random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2026-01-01 07:11:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Darktheme to stored procedures

Browse Source
This commit is contained in:
Archie Agarwal
2025-07-18 10:57:48 +05:30
parent 47f991cce1
commit 896a50288c
6 changed files with 286 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/Explorer/Controls/Settings/SettingsRenderUtils.tsx
View File

@@ -63,7 +63,7 @@ export interface PriceBreakdown {
export type editorType = "indexPolicy" | "computedProperties";
export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14, color: 'var(--colorNeutralForeground1)' } };
export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14, color: "var(--colorNeutralForeground1)" } };
export const noLeftPaddingCheckBoxStyle: ICheckboxStyles = {
label: {
@@ -166,7 +166,7 @@ export const separatorStyles: Partial<ISeparatorStyles> = {
};
export const messageBarStyles: Partial<IMessageBarStyles> = {
root: { marginTop: "5px", backgroundColor: 'var(--colorNeutralBackground1)' },
root: { marginTop: "5px", backgroundColor: "var(--colorNeutralBackground1)" },
text: { fontSize: 14 },
};
@@ -214,9 +214,11 @@ export const getEstimatedSpendingElement = (
const ruRange: string = isAutoscale ? throughput / 10 + " RU/s - " : "";
return (
<Stack>
<Text style={{ fontWeight: 600, color: 'var(--colorNeutralForeground1)' }}>Cost estimate*</Text>
<Text style={{ fontWeight: 600, color: "var(--colorNeutralForeground1)" }}>Cost estimate*</Text>
{costElement}
<Text style={{ fontWeight: 600, marginTop: 15, color: 'var(--colorNeutralForeground1)' }}>How we calculate this</Text>
<Text style={{ fontWeight: 600, marginTop: 15, color: "var(--colorNeutralForeground1)" }}>
How we calculate this
</Text>
<Stack id="throughputSpendElement" style={{ marginTop: 5 }}>
<span>
{numberOfRegions} region{numberOfRegions > 1 && <span>s</span>}
@@ -230,7 +232,7 @@ export const getEstimatedSpendingElement = (
{priceBreakdown.pricePerRu}/RU
</span>
</Stack>
<Text style={{ marginTop: 15, color: 'var(--colorNeutralForeground1)' }}>
<Text style={{ marginTop: 15, color: "var(--colorNeutralForeground1)" }}>
<em>*{estimatedCostDisclaimer}</em>
</Text>
</Stack>
@@ -272,7 +274,7 @@ export const updateThroughputDelayedApplyWarningMessage: JSX.Element = (
export const getUpdateThroughputBeyondInstantLimitMessage = (instantMaximumThroughput: number): JSX.Element => {
return (
<Text id="updateThroughputDelayedApplyWarningMessage">
<Text id="updateThroughputDelayedApplyWarningMessage">
Scaling up will take 4-6 hours as it exceeds what Azure Cosmos DB can instantly support currently based on your
number of physical partitions. You can increase your throughput to {instantMaximumThroughput} instantly or proceed
with this value and wait until the scale-up is completed.
@@ -290,7 +292,7 @@ export const getUpdateThroughputBeyondSupportLimitMessage = (
Your request to increase throughput exceeds the pre-allocated capacity which may take longer than expected.
There are three options you can choose from to proceed:
</Text>
<ol style={{ fontSize: 14, color: 'var(--colorNeutralForeground1)', marginTop: "5px" }}>
<ol style={{ fontSize: 14, color: "var(--colorNeutralForeground1)", marginTop: "5px" }}>
<li>You can instantly scale up to {instantMaximumThroughput} RU/s.</li>
{instantMaximumThroughput < maximumThroughput && (
<li>You can asynchronously scale up to any value under {maximumThroughput} RU/s in 4-6 hours.</li>
@@ -326,7 +328,7 @@ export const getUpdateThroughputBelowMinimumMessage = (minimum: number): JSX.Ele
};
export const saveThroughputWarningMessage: JSX.Element = (
<Text >
<Text>
Your bill will be affected as you update your throughput settings. Please review the updated cost estimate below
before saving your changes
</Text>
@@ -507,17 +509,24 @@ export const getTextFieldStyles = (current: isDirtyTypes, baseline: isDirtyTypes
height: 25,
width: 300,
borderColor: isDirty(current, baseline) ? StyleConstants.Dirty : "",
backgroundColor: "var(--colorNeutralBackground3)",
selectors: {
":disabled": {
backgroundColor:'var(--colorNeutralBackground1)',
backgroundColor: "var(--colorNeutralBackground1)",
borderColor: StyleConstants.BaseMediumHigh,
},
"input:disabled": {
backgroundColor: "var(--colorNeutralBackground3)",
},
},
field: {
color: "var(--colorNeutralForeground1)",
},
},
subComponentStyles: {
label: {
root: {
color: 'var(--colorNeutralForeground1)'
color: "var(--colorNeutralForeground1)",
},
},
},
@@ -529,7 +538,8 @@ export const getChoiceGroupStyles = (
isHorizontal?: boolean,
): Partial<IChoiceGroupStyles> => ({
label: {
color: 'var(--colorNeutralForeground1)', },
color: "var(--colorNeutralForeground1)",
},
flexContainer: [
{
selectors: {
@@ -544,7 +554,7 @@ export const getChoiceGroupStyles = (
fontSize: 14,
fontFamily: StyleConstants.DataExplorerFont,
padding: "2px 5px",
color: 'var(--colorNeutralForeground1)'
color: "var(--colorNeutralForeground1)",
},
},
display: isHorizontal ? "inline-flex" : "default",

4
src/Explorer/Tabs/QueryTab/QueryResultSection.tsx
View File

@@ -1,4 +1,4 @@
import { Link } from "@fluentui/react-components";
import { Link, tokens } from "@fluentui/react-components";
import QueryError from "Common/QueryError";
import { IndeterminateProgressBar } from "Explorer/Controls/IndeterminateProgressBar";
import { MessageBanner } from "Explorer/Controls/MessageBanner";
@@ -29,7 +29,7 @@ const ExecuteQueryCallToAction: React.FC = () => {
<p>
<img src={RunQuery} aria-hidden="true" />
</p>
<p>Execute a query to see the results</p>
<p style={{ color: tokens.colorNeutralForeground1 }}>Execute a query to see the results</p>
</div>
</div>
);

113
src/Explorer/Tabs/TriggerTabContent.tsx
View File

@@ -1,5 +1,6 @@
import { TriggerDefinition } from "@azure/cosmos";
import { Dropdown, IDropdownOption, Label, TextField } from "@fluentui/react";
import { getTheme, IDropdownOption, IDropdownStyles, Label, TextField } from "@fluentui/react";
import { Dropdown } from "@fluentui/react/lib/Dropdown";
import { KeyboardAction } from "KeyboardShortcuts";
import { ValidCosmosDbIdDescription, ValidCosmosDbIdInputPattern } from "Utils/ValidationUtils";
import React, { Component } from "react";
@@ -17,11 +18,46 @@ import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandBu
import { EditorReact } from "../Controls/Editor/EditorReact";
import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
import TriggerTab from "./TriggerTab";
const triggerTypeOptions: IDropdownOption[] = [
{ key: "Pre", text: "Pre" },
{ key: "Post", text: "Post" },
];
const theme = getTheme();
const dropdownStyles: Partial<IDropdownStyles> = {
label: {
color: "var(--colorNeutralForeground1)",
},
dropdown: {
width: "100%",
},
title: {
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)",
},
dropdownItem: {
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)",
},
dropdownItems: {
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)",
},
dropdownItemSelected: {
backgroundColor: "var(--colorBrandBackgroundSelected)",
color: "var(--colorNeutralForegroundOnBrand)",
selectors: {
"&:before": {
content: '""',
position: "absolute",
left: 0,
top: 0,
bottom: 0,
width: "4px",
background: "var(--colorBrandBackground)",
},
},
},
};
const triggerOperationOptions: IDropdownOption[] = [
{ key: "All", text: "All" },
@@ -304,6 +340,23 @@ export class TriggerTabContent extends Component<TriggerTab, ITriggerTabContentS
value={triggerId}
readOnly={!isIdEditable}
onChange={this.handleTriggerIdChange}
styles={{
root: { width: "40%", marginTop: "10px" },
fieldGroup: {
backgroundColor: "var(--colorNeutralBackground1)",
border: "1px solid var(--colorNeutralStroke1)",
},
field: {
color: "var(--colorNeutralForeground1)",
},
subComponentStyles: {
label: {
root: {
color: "var(--colorNeutralForeground1)",
},
},
},
}}
/>
<Dropdown
placeholder="Trigger Type"
@@ -312,6 +365,42 @@ export class TriggerTabContent extends Component<TriggerTab, ITriggerTabContentS
selectedKey={triggerType}
className="trigger-field"
onChange={(event, selectedKey) => this.handleTriggerTypeOprationChange(event, selectedKey, "triggerType")}
styles={{
root: { width: "40%", marginTop: "10px" },
// dropdown: {
// backgroundColor: "var(--colorNeutralBackground1)",
// color: "var(--colorNeutralForeground1)",
// border: "1px solid var(--colorNeutralStroke1)",
// },
// dropdown: {
// backgroundColor: theme.palette.neutralLighterAlt, // dynamic background
// borderColor: theme.palette.neutralSecondary,
// },
// title: {
// backgroundColor: theme.palette.neutralLighterAlt,
// color: theme.semanticColors.bodyText, // selected value color
// },
dropdown: {
backgroundColor: theme.semanticColors.bodyBackground,
borderColor: theme.semanticColors.bodyDivider,
},
title: {
backgroundColor: theme.semanticColors.bodyBackground,
color: theme.semanticColors.bodyText,
},
callout: {
backgroundColor: theme.semanticColors.bodyBackground,
},
subComponentStyles: {
label: {
root: {
color: "var(--colorNeutralForeground1)",
},
},
},
}}
/>
<Dropdown
placeholder="Trigger Operation"
@@ -322,6 +411,26 @@ export class TriggerTabContent extends Component<TriggerTab, ITriggerTabContentS
onChange={(event, selectedKey) =>
this.handleTriggerTypeOprationChange(event, selectedKey, "triggerOperation")
}
styles={dropdownStyles}
// styles={{
// root: { width: "40%", marginTop: "10px" },
// dropdown: {
// backgroundColor: theme.palette.neutralLighterAlt, // dynamic background
// borderColor: theme.palette.neutralSecondary,
// },
// title: {
// backgroundColor: theme.palette.neutralLighterAlt,
// color: theme.semanticColors.bodyText, // selected value color
// },
// subComponentStyles: {
// label: {
// root: {
// color: "var(--colorNeutralForeground1)",
// },
// },
// },
// }}
/>
<Label className="trigger-field">Trigger Body</Label>
<EditorReact

56
src/Explorer/Tabs/UserDefinedFunctionTabContent.tsx
View File

@@ -1,7 +1,9 @@
import { UserDefinedFunctionDefinition } from "@azure/cosmos";
import { Label, TextField } from "@fluentui/react";
import { FluentProvider, webDarkTheme, webLightTheme } from "@fluentui/react-components";
import { KeyboardAction } from "KeyboardShortcuts";
import { ValidCosmosDbIdDescription, ValidCosmosDbIdInputPattern } from "Utils/ValidationUtils";
import { isDarkMode } from "hooks/useTheme";
import React, { Component } from "react";
import DiscardIcon from "../../../images/discard.svg";
import SaveIcon from "../../../images/save-cosmos.svg";
@@ -16,7 +18,6 @@ import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandBu
import { EditorReact } from "../Controls/Editor/EditorReact";
import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
import UserDefinedFunctionTab from "./UserDefinedFunctionTab";
interface IUserDefinedFunctionTabContentState {
udfId: string;
udfBody: string;
@@ -258,23 +259,46 @@ export default class UserDefinedFunctionTabContent extends Component<
render(): JSX.Element {
const { udfId, udfBody, isUdfIdEditable } = this.state;
const currentTheme = isDarkMode ? webDarkTheme : webLightTheme;
return (
<div className="tab-pane flexContainer trigger-form" role="tabpanel">
<TextField
className="trigger-field"
label="User Defined Function Id"
id="entityTimeId"
autoFocus
required
readOnly={!isUdfIdEditable}
type="text"
pattern={ValidCosmosDbIdInputPattern.source}
title={ValidCosmosDbIdDescription}
placeholder="Enter the new user defined function id"
size={40}
value={udfId}
onChange={this.handleUdfIdChange}
/>
<FluentProvider theme={currentTheme}>
<TextField
className="trigger-field"
label="User Defined Function Id"
id="entityTimeId"
autoFocus
required
readOnly={!isUdfIdEditable}
type="text"
pattern={ValidCosmosDbIdInputPattern.source}
title={ValidCosmosDbIdDescription}
placeholder="Enter the new user defined function id"
size={40}
value={udfId}
onChange={this.handleUdfIdChange}
styles={{
root: {
width: "40%",
marginTop: "10px",
},
fieldGroup: {
backgroundColor: "var(--colorNeutralBackground1)",
border: "1px solid var(--colorNeutralStroke1)",
},
field: {
color: "var(--colorNeutralForeground2)",
},
subComponentStyles: {
label: {
root: {
color: "var(--colorNeutralForeground1)",
},
},
},
}}
/>{" "}
</FluentProvider>
<Label className="trigger-field">User Defined Function Body</Label>
<EditorReact
language={"javascript"}