@spinnaker/amazon 0.0.0-2025.1-0

package/src/serverGroup/details/sections/ScalingProcessesDetailsSection.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+
+import { CollapsibleSection, confirmNotManaged, HelpField, ModalInjector, timestamp, Tooltip } from '@spinnaker/core';
+
+import type { IAmazonServerGroupDetailsSectionProps } from './IAmazonServerGroupDetailsSectionProps';
+import { AWSProviderSettings } from '../../../aws.settings';
+import type { IScalingProcess } from '../../../domain';
+import { AutoScalingProcessService } from '../scalingProcesses/AutoScalingProcessService';
+
+export interface IScalingProcessesDetailsSectionState {
+  autoScalingProcesses: IScalingProcess[];
+  scalingPoliciesDisabled: boolean;
+  scheduledActionsDisabled: boolean;
+}
+
+export class ScalingProcessesDetailsSection extends React.Component<
+  IAmazonServerGroupDetailsSectionProps,
+  IScalingProcessesDetailsSectionState
+> {
+  constructor(props: IAmazonServerGroupDetailsSectionProps) {
+    super(props);
+
+    this.state = this.getState(props);
+  }
+
+  private toggleScalingProcesses = (): void => {
+    const { app, serverGroup } = this.props;
+    confirmNotManaged(serverGroup, app).then(
+      (isNotManaged) =>
+        isNotManaged &&
+        ModalInjector.modalService.open({
+          templateUrl: require('../scalingProcesses/modifyScalingProcesses.html'),
+          controller: 'ModifyScalingProcessesCtrl as ctrl',
+          resolve: {
+            serverGroup: () => serverGroup,
+            application: () => app,
+            processes: () => this.state.autoScalingProcesses,
+          },
+        }),
+    );
+  };
+
+  private getState(props: IAmazonServerGroupDetailsSectionProps): IScalingProcessesDetailsSectionState {
+    const { serverGroup } = props;
+
+    const autoScalingProcesses: IScalingProcess[] = AutoScalingProcessService.normalizeScalingProcesses(serverGroup);
+
+    const scalingPoliciesDisabled =
+      serverGroup.scalingPolicies.length > 0 &&
+      autoScalingProcesses
+        .filter((p) => !p.enabled)
+        .some((p) => ['Launch', 'Terminate', 'AlarmNotification'].includes(p.name));
+    const scheduledActionsDisabled =
+      serverGroup.scheduledActions.length > 0 &&
+      autoScalingProcesses
+        .filter((p) => !p.enabled)
+        .some((p) => ['Launch', 'Terminate', 'ScheduledAction'].includes(p.name));
+
+    return { autoScalingProcesses, scalingPoliciesDisabled, scheduledActionsDisabled };
+  }
+
+  public componentWillReceiveProps(nextProps: IAmazonServerGroupDetailsSectionProps): void {
+    this.setState(this.getState(nextProps));
+  }
+
+  public render(): JSX.Element {
+    const { autoScalingProcesses, scalingPoliciesDisabled, scheduledActionsDisabled } = this.state;
+
+    return (
+      <CollapsibleSection
+        cacheKey="Scaling Processes"
+        heading={({ chevron }) => (
+          <h4 className="collapsible-heading">
+            {chevron}
+            <span>
+              {scalingPoliciesDisabled && (
+                <Tooltip value="Some scaling processes are disabled that may prevent scaling policies from working">
+                  <span className="fa fa-exclamation-circle warning-text" />
+                </Tooltip>
+              )}
+              {scheduledActionsDisabled && (
+                <Tooltip value="Some scaling processes are disabled that may prevent scheduled actions from working">
+                  <span className="fa fa-exclamation-circle warning-text" />
+                </Tooltip>
+              )}
+              Scaling Processes
+            </span>
+          </h4>
+        )}
+      >
+        <ul className="scaling-processes">
+          {autoScalingProcesses.map((process) => (
+            <li key={process.name}>
+              <span style={{ visibility: process.enabled ? 'visible' : 'hidden' }} className="fa fa-check small" />
+              <span className={!process.enabled ? 'text-disabled' : ''}>{process.name} </span>
+              <HelpField content={process.description} placement="bottom" />
+              {process.suspensionDate && (
+                <div className="text-disabled small" style={{ marginLeft: '35px' }}>
+                  Suspended {timestamp(process.suspensionDate)}
+                </div>
+              )}
+            </li>
+          ))}
+        </ul>
+        {AWSProviderSettings.adHocInfraWritesEnabled && (
+          <a className="clickable" onClick={this.toggleScalingProcesses}>
+            Edit Scaling Processes
+          </a>
+        )}
+      </CollapsibleSection>
+    );
+  }
+}

package/src/serverGroup/details/sections/ScheduledActionsDetailsSection.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+
+import { CollapsibleSection, ModalInjector, Tooltip } from '@spinnaker/core';
+
+import type { IAmazonServerGroupDetailsSectionProps } from './IAmazonServerGroupDetailsSectionProps';
+import { AWSProviderSettings } from '../../../aws.settings';
+import type { IScalingProcess } from '../../../domain';
+import { AutoScalingProcessService } from '../scalingProcesses/AutoScalingProcessService';
+import { ScheduledAction } from '../scheduledAction/ScheduledAction';
+
+export interface IScheduledActionsDetailsSectionState {
+  scheduledActionsDisabled: boolean;
+}
+
+export class ScheduledActionsDetailsSection extends React.Component<
+  IAmazonServerGroupDetailsSectionProps,
+  IScheduledActionsDetailsSectionState
+> {
+  constructor(props: IAmazonServerGroupDetailsSectionProps) {
+    super(props);
+
+    this.state = this.getState(props);
+  }
+
+  private getState(props: IAmazonServerGroupDetailsSectionProps): IScheduledActionsDetailsSectionState {
+    const { serverGroup } = props;
+
+    const autoScalingProcesses: IScalingProcess[] = AutoScalingProcessService.normalizeScalingProcesses(serverGroup);
+    const scheduledActionsDisabled =
+      serverGroup.scheduledActions.length > 0 &&
+      autoScalingProcesses
+        .filter((p) => !p.enabled)
+        .some((p) => ['Launch', 'Terminate', 'ScheduledAction'].includes(p.name));
+
+    return { scheduledActionsDisabled };
+  }
+
+  private editScheduledActions = (): void => {
+    ModalInjector.modalService.open({
+      templateUrl: require('../scheduledAction/editScheduledActions.modal.html'),
+      controller: 'EditScheduledActionsCtrl as ctrl',
+      resolve: {
+        application: () => this.props.app,
+        serverGroup: () => this.props.serverGroup,
+      },
+    });
+  };
+
+  public componentWillReceiveProps(nextProps: IAmazonServerGroupDetailsSectionProps): void {
+    this.setState(this.getState(nextProps));
+  }
+
+  public render(): JSX.Element {
+    const { serverGroup } = this.props;
+    const { scheduledActionsDisabled } = this.state;
+
+    return (
+      <CollapsibleSection
+        cacheKey="Scheduled Actions"
+        heading={({ chevron }) => (
+          <h4 className="collapsible-heading">
+            {chevron}
+            <span>
+              {scheduledActionsDisabled && (
+                <Tooltip value="Some scaling processes are disabled that may prevent scheduled actions from working">
+                  <span className="fa fa-exclamation-circle warning-text" />
+                </Tooltip>
+              )}
+              Scheduled Actions
+            </span>
+          </h4>
+        )}
+      >
+        {serverGroup.scheduledActions.map((action, index) => (
+          <ScheduledAction key={index} action={action} />
+        ))}
+
+        {serverGroup.scheduledActions.length > 0 && (
+          <p>
+            <strong>Note:</strong> Schedules are evaluated in UTC.
+          </p>
+        )}
+        {serverGroup.scheduledActions.length === 0 && <p>No Scheduled Actions are configured for this server group.</p>}
+        {AWSProviderSettings.adHocInfraWritesEnabled && (
+          <a className="clickable" onClick={this.editScheduledActions}>
+            Edit Scheduled Actions
+          </a>
+        )}
+      </CollapsibleSection>
+    );
+  }
+}

package/src/serverGroup/details/sections/SecurityGroupsDetailsSection.tsx

@@ -0,0 +1,119 @@
+import { UISref } from '@uirouter/react';
+import { chain, find, sortBy } from 'lodash';
+import React from 'react';
+
+import type { ISecurityGroup, ISecurityGroupsByAccount } from '@spinnaker/core';
+import { CollapsibleSection, confirmNotManaged, FirewallLabels, ModalInjector } from '@spinnaker/core';
+
+import type { IAmazonServerGroupDetailsSectionProps } from './IAmazonServerGroupDetailsSectionProps';
+import { AWSProviderSettings } from '../../../aws.settings';
+import { AwsSecurityGroupReader } from '../../../securityGroup/securityGroup.reader';
+
+export interface ISecurityGroupsDetailsSectionState {
+  securityGroups: ISecurityGroup[];
+}
+
+export class SecurityGroupsDetailsSection extends React.Component<
+  IAmazonServerGroupDetailsSectionProps,
+  ISecurityGroupsDetailsSectionState
+> {
+  constructor(props: IAmazonServerGroupDetailsSectionProps) {
+    super(props);
+
+    this.state = { securityGroups: this.getSecurityGroups(props) };
+  }
+
+  private tryFindingSecurityGroupInIndex(
+    index: ISecurityGroupsByAccount,
+    account: string,
+    region: string,
+    securityGroupId: string,
+  ): ISecurityGroup {
+    try {
+      return AwsSecurityGroupReader.resolveIndexedSecurityGroup(index, { account, region }, securityGroupId);
+    } catch (e) {
+      return undefined;
+    }
+  }
+
+  private getSecurityGroups(props: IAmazonServerGroupDetailsSectionProps): ISecurityGroup[] {
+    let securityGroups: ISecurityGroup[];
+    const { app, serverGroup } = props;
+
+    if (serverGroup.securityGroups && serverGroup.securityGroups.length) {
+      securityGroups = chain(serverGroup.securityGroups)
+        .map((id: string) => {
+          return (
+            find(app.securityGroups.data, { accountName: serverGroup.account, region: serverGroup.region, id }) ||
+            find(app.securityGroups.data, { accountName: serverGroup.account, region: serverGroup.region, name: id }) ||
+            this.tryFindingSecurityGroupInIndex(
+              app['securityGroupsIndex'],
+              serverGroup.account,
+              serverGroup.region,
+              id,
+            ) || { id, name: id } // Last resort fallback so that security groups do not get removed (upon editing) just because deck couldn't find them
+          );
+        })
+        .compact()
+        .value();
+    }
+
+    return securityGroups;
+  }
+
+  private updateSecurityGroups = (): void => {
+    const { app, serverGroup } = this.props;
+    confirmNotManaged(serverGroup, app).then(
+      (notManaged) =>
+        notManaged &&
+        ModalInjector.modalService.open({
+          templateUrl: require('../securityGroup/editSecurityGroups.modal.html'),
+          controller: 'EditSecurityGroupsCtrl as $ctrl',
+          resolve: {
+            application: () => app,
+            serverGroup: () => serverGroup,
+            securityGroups: () => this.state.securityGroups,
+          },
+        }),
+    );
+  };
+
+  public componentWillReceiveProps(nextProps: IAmazonServerGroupDetailsSectionProps): void {
+    this.setState({ securityGroups: this.getSecurityGroups(nextProps) });
+  }
+
+  public render(): JSX.Element {
+    const { serverGroup } = this.props;
+    const { securityGroups } = this.state;
+
+    return (
+      <CollapsibleSection heading={FirewallLabels.get('Firewalls')}>
+        <ul>
+          {sortBy(securityGroups, 'name').map((securityGroup) => (
+            <li key={securityGroup.name}>
+              <UISref
+                to="^.firewallDetails"
+                params={{
+                  name: securityGroup.name,
+                  accountId: securityGroup.accountName,
+                  region: serverGroup.region,
+                  vpcId: serverGroup.vpcId,
+                  provider: serverGroup.type,
+                }}
+              >
+                <a>
+                  {securityGroup.name} ({securityGroup.id})
+                </a>
+              </UISref>
+            </li>
+          ))}
+        </ul>
+        {AWSProviderSettings.adHocInfraWritesEnabled && serverGroup.vpcId && (
+          <a className="clickable" onClick={this.updateSecurityGroups}>
+            Edit {FirewallLabels.get('Firewalls')}
+          </a>
+        )}
+      </CollapsibleSection>
+    );
+  }
+}

package/src/serverGroup/details/sections/TagsDetailsSection.tsx

@@ -0,0 +1,26 @@
+import { sortBy } from 'lodash';
+import React from 'react';
+
+import { CollapsibleSection } from '@spinnaker/core';
+
+import type { IAmazonServerGroupDetailsSectionProps } from './IAmazonServerGroupDetailsSectionProps';
+
+export class TagsDetailsSection extends React.Component<IAmazonServerGroupDetailsSectionProps> {
+  public render(): JSX.Element {
+    const { serverGroup } = this.props;
+
+    return (
+      <CollapsibleSection heading="Tags">
+        {serverGroup.asg.tags.length === 0 && <div>No tags associated with this server group</div>}
+        {serverGroup.asg.tags.length > 0 && (
+          <dl>
+            {sortBy(serverGroup.asg.tags, 'key').map((tag) => [
+              <dt key={tag.key}>{tag.key}</dt>,
+              <dd key={tag.value}>{tag.value}</dd>,
+            ])}
+          </dl>
+        )}
+      </CollapsibleSection>
+    );
+  }
+}

package/src/serverGroup/details/sections/index.ts

@@ -0,0 +1,15 @@
+export * from './AdvancedSettingsDetailsSection';
+export * from './AmazonInfoDetailsSection';
+export * from './AmazonCapacityDetailsSection';
+export * from './HealthDetailsSection';
+export * from './IAmazonServerGroupDetailsSectionProps';
+export * from './InstancesDistributionDetailsSection';
+export * from './LaunchConfigDetailsSection';
+export * from './LaunchTemplateDetailsSection';
+export * from './LogsDetailsSection';
+export * from './PackageDetailsSection';
+export * from './ScalingPoliciesDetailsSection';
+export * from './ScalingProcessesDetailsSection';
+export * from './ScheduledActionsDetailsSection';
+export * from './SecurityGroupsDetailsSection';
+export * from './TagsDetailsSection';

package/src/serverGroup/details/sections/multipleInstanceTypesSubSection.less

@@ -0,0 +1,50 @@
+@import 'bootstrap/less/mixins/clearfix.less';
+
+.multiple-instance-types-subsection {
+  a.subsection-heading {
+    color: var(--color-black);
+  }
+
+  h4.collapsible-subheading {
+    padding: 10px 0px;
+    background-color: var(--color-alabaster);
+    margin: 0;
+
+    .glyphicon {
+      font-size: 10px;
+      opacity: 0.5;
+      margin-right: 4px;
+    }
+
+    font-size: 103%;
+    font-weight: 600;
+    text-transform: none;
+  }
+
+  .content-body {
+    .fade-in(0.15);
+    .clearfix;
+    padding-left: 17px;
+    margin: 10px 0 20px 0;
+
+    ul {
+      list-style-type: none;
+      padding-left: 0;
+    }
+  }
+
+  padding: 0;
+
+  &:last-child {
+    border-bottom-width: 0;
+  }
+
+  &:first-child {
+    padding-top: 0;
+  }
+
+  .fade-in(@duration:0.25s; @delay: 0) {
+    animation: @duration ease-in @delay fadeIn;
+    animation-iteration-count: 1;
+  }
+}

package/src/serverGroup/details/securityGroup/editSecurityGroups.modal.controller.js

@@ -0,0 +1,95 @@
+'use strict';
+
+import { module } from 'angular';
+import _ from 'lodash';
+
+import { FirewallLabels, SECURITY_GROUP_READER, SERVER_GROUP_WRITER, TaskMonitor } from '@spinnaker/core';
+
+export const AMAZON_SERVERGROUP_DETAILS_SECURITYGROUP_EDITSECURITYGROUPS_MODAL_CONTROLLER =
+  'spinnaker.amazon.serverGroup.details.securityGroup.editSecurityGroups.modal.controller';
+export const name = AMAZON_SERVERGROUP_DETAILS_SECURITYGROUP_EDITSECURITYGROUPS_MODAL_CONTROLLER; // for backwards compatibility
+module(AMAZON_SERVERGROUP_DETAILS_SECURITYGROUP_EDITSECURITYGROUPS_MODAL_CONTROLLER, [
+  SERVER_GROUP_WRITER,
+  SECURITY_GROUP_READER,
+]).controller('EditSecurityGroupsCtrl', [
+  '$scope',
+  '$uibModalInstance',
+  'serverGroupWriter',
+  'securityGroupReader',
+  'application',
+  'serverGroup',
+  'securityGroups',
+  function (
+    $scope,
+    $uibModalInstance,
+    serverGroupWriter,
+    securityGroupReader,
+    application,
+    serverGroup,
+    securityGroups,
+  ) {
+    this.command = {
+      securityGroups: (securityGroups || []).slice(0).sort((a, b) => a.name.localeCompare(b.name)),
+    };
+
+    this.state = {
+      securityGroupsLoaded: false,
+      submitting: false,
+      verification: {},
+    };
+
+    this.infiniteScroll = {
+      currentItems: 20,
+    };
+
+    this.addMoreItems = () => (this.infiniteScroll.currentItems += 20);
+
+    this.resetCurrentItems = () => (this.infiniteScroll.currentItems = 20);
+
+    this.isValid = () => this.state.verification.verified;
+
+    securityGroupReader.getAllSecurityGroups().then((allGroups) => {
+      const account = serverGroup.account;
+      const region = serverGroup.region;
+      const vpcId = serverGroup.vpcId;
+      this.availableSecurityGroups = _.get(allGroups, [account, 'aws', region].join('.'), [])
+        .filter((group) => group.vpcId === vpcId)
+        .sort((a, b) => {
+          if (this.command.securityGroups.some((g) => g.id === a.id)) {
+            return -1;
+          }
+          if (this.command.securityGroups.some((g) => g.id === b.id)) {
+            return 1;
+          }
+          return a.name.localeCompare(b.name);
+        });
+      this.state.securityGroupsLoaded = true;
+    });
+
+    this.serverGroup = serverGroup;
+
+    this.taskMonitor = new TaskMonitor({
+      application: application,
+      title: `Update ${FirewallLabels.get('Firewalls')} for ${serverGroup.name}`,
+      modalInstance: $uibModalInstance,
+      onTaskComplete: () => application.serverGroups.refresh(),
+    });
+
+    this.submit = () => {
+      const submitMethod = () => {
+        this.state.submitting = true;
+        const hasLaunchTemplate = Boolean(serverGroup.launchTemplate);
+        return serverGroupWriter.updateSecurityGroups(
+          serverGroup,
+          this.command.securityGroups,
+          application,
+          hasLaunchTemplate,
+        );
+      };
+
+      this.taskMonitor.submit(submitMethod);
+    };
+
+    this.cancel = $uibModalInstance.dismiss;
+  },
+]);

package/src/serverGroup/details/securityGroup/editSecurityGroups.modal.html

@@ -0,0 +1,40 @@
+<div modal-page>
+  <task-monitor monitor="$ctrl.taskMonitor"></task-monitor>
+  <form role="form" name="form">
+    <modal-close dismiss="$dismiss()"></modal-close>
+    <div class="modal-header">
+      <h4 class="modal-title">
+        Edit <firewall-label label="Firewalls"></firewall-label> for {{$ctrl.serverGroup.name}}
+      </h4>
+    </div>
+    <div class="modal-body container-fluid form-horizontal">
+      <div class="form-group">
+        <div class="col-md-10 col-md-offset-1">
+          <ui-select
+            multiple
+            ng-model="$ctrl.command.securityGroups"
+            uis-open-close="$ctrl.resetCurrentItems()"
+            class="form-control input-sm"
+          >
+            <ui-select-match>{{$item.name}} ({{$item.id}})</ui-select-match>
+            <ui-select-choices
+              repeat="securityGroup as securityGroup in $ctrl.availableSecurityGroups | filter: $select.search | limitTo: $ctrl.infiniteScroll.currentItems"
+              infinite-scroll="$ctrl.addMoreItems()"
+              infinite-scroll-distance="4"
+            >
+              <span ng-bind-html="securityGroup.name | highlight: $select.search"></span>
+              (<span ng-bind-html="securityGroup.id  | highlight: $select.search"></span>)
+            </ui-select-choices>
+          </ui-select>
+        </div>
+      </div>
+    </div>
+    <aws-footer
+      action="$ctrl.submit()"
+      cancel="$ctrl.cancel()"
+      is-valid="$ctrl.isValid()"
+      account="$ctrl.serverGroup.account"
+      verification="$ctrl.state.verification"
+    ></aws-footer>
+  </form>
+</div>

package/src/serverGroup/details/serverGroupDetails.module.ts

@@ -0,0 +1,18 @@
+import { module } from 'angular';
+
+import { AMAZON_SERVERGROUP_DETAILS_ADVANCEDSETTINGS_EDITASGADVANCEDSETTINGS_MODAL_CONTROLLER } from './advancedSettings/editAsgAdvancedSettings.modal.controller';
+import { AMAZON_SERVERGROUP_DETAILS_ROLLBACK_ROLLBACKSERVERGROUP_CONTROLLER } from './rollback/rollbackServerGroup.controller';
+import { SCALING_POLICY_MODULE } from './scalingPolicy/scalingPolicy.module';
+import { AMAZON_SERVERGROUP_DETAILS_SCALINGPROCESSES_MODIFYSCALINGPROCESSES_CONTROLLER } from './scalingProcesses/modifyScalingProcesses.controller';
+import { AMAZON_SERVERGROUP_DETAILS_SCHEDULEDACTION_EDITSCHEDULEDACTIONS_MODAL_CONTROLLER } from './scheduledAction/editScheduledActions.modal.controller';
+import { AMAZON_SERVERGROUP_DETAILS_SECURITYGROUP_EDITSECURITYGROUPS_MODAL_CONTROLLER } from './securityGroup/editSecurityGroups.modal.controller';
+
+export const SERVER_GROUP_DETAILS_MODULE = 'spinnaker.amazon.serverGroup.details';
+module(SERVER_GROUP_DETAILS_MODULE, [
+  SCALING_POLICY_MODULE,
+  AMAZON_SERVERGROUP_DETAILS_SECURITYGROUP_EDITSECURITYGROUPS_MODAL_CONTROLLER,
+  AMAZON_SERVERGROUP_DETAILS_SCALINGPROCESSES_MODIFYSCALINGPROCESSES_CONTROLLER,
+  AMAZON_SERVERGROUP_DETAILS_SCHEDULEDACTION_EDITSCHEDULEDACTIONS_MODAL_CONTROLLER,
+  AMAZON_SERVERGROUP_DETAILS_ADVANCEDSETTINGS_EDITASGADVANCEDSETTINGS_MODAL_CONTROLLER,
+  AMAZON_SERVERGROUP_DETAILS_ROLLBACK_ROLLBACKSERVERGROUP_CONTROLLER,
+]);

package/src/serverGroup/details/utils.spec.ts

@@ -0,0 +1,23 @@
+import { getBaseImageName } from './utils';
+
+describe('ServerGroup details utils: getBaseImageName', () => {
+  it('should accept an undefined description', () => {
+    const actual = getBaseImageName();
+    expect(actual).toBeUndefined();
+  });
+
+  it('should be undefined without ancestor_key in description', () => {
+    const actual = getBaseImageName('thequick=brownfox, jumpsover=thelazydog');
+    expect(actual).toBeUndefined();
+  });
+
+  it('should return the correct name', () => {
+    const actual1 = getBaseImageName('ancestor_name=baseImageName');
+    const actual2 = getBaseImageName('tricky_ancestor_name=notTheName');
+    const actual3 = getBaseImageName('tricky_ancestor_name=notTheName, ancestor_name=baseImageName, another_key=hello');
+
+    expect(actual1).toBe('baseImageName');
+    expect(actual2).toBeUndefined();
+    expect(actual3).toBe('baseImageName');
+  });
+});

package/src/serverGroup/details/utils.ts

@@ -0,0 +1,13 @@
+// Returns the base image name from the image description.
+export const getBaseImageName = (description?: string) => {
+  let name: string;
+  const tags = (description || '').split(', ');
+  tags.forEach((tag: string) => {
+    const keyVal = tag.split('=');
+    if (keyVal.length === 2 && keyVal[0] === 'ancestor_name') {
+      name = keyVal[1];
+    }
+  });
+
+  return name;
+};

package/src/serverGroup/index.ts

@@ -0,0 +1,5 @@
+export * from './configure';
+export * from './details/resize/AmazonResizeServerGroupModal';
+export * from './details/scalingPolicy';
+export * from './details/sections';
+export * from './details/utils';